Skip to content

Commit 41b99c1

Browse files
FolydFolyd
committed
Polish Footer component
1 parent 909d965 commit 41b99c1

File tree

4 files changed

+178
-18
lines changed

4 files changed

+178
-18
lines changed

‎docs/blog/announcing-aiscript.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Announcing AIScript and How I Built It
22

3-
I'm excited to share **AIScript**, a new programming language I've been developing over the past few months in collaboration with Claude. AIScript is designed specifically for web development in the AI era, with AI capabilities as first-class language features, and an intuitive route DSL and directive design. In my [Why AIScript](/blog/why-aiscript) post, I shared why I developed this new language; this post focuses on what AIScript is and how I developed it.
3+
I'm excited to share **AIScript**, a new programming language I've been developing over the past few months. AIScript is designed specifically for web development in the AI era, with AI capabilities as first-class language features, and an intuitive route DSL and directive design. In my [Why AIScript](/blog/why-aiscript) post, I shared why I developed this new language; this post focuses on what AIScript is and how I developed it.
44

55
## What is AIScript?
66

@@ -24,7 +24,7 @@ I've had a fantastic collaboration with Claude in implementing the AIScript inte
2424

2525
## Final Thoughts
2626

27-
In the LLM era, writing an interpreter language isn't as difficult as it once was. I'm deeply grateful to Claude for being my interpreter teacher. I believe anyone following a similar path can also create their own interpreter language with relative ease. Building a programming language has been one of the most educational experiences of my development career. I hope AIScript can help bridge the gap between traditional web development and AI capabilities, making powerful AI features accessible to more developers.
27+
I'm deeply grateful to Claude for being my interpreter teacher. I believe anyone following a similar path can also create their own interpreter language with relative ease. Building a programming language has been one of the most educational experiences of my development career. I hope AIScript can help bridge the gap between traditional web development and AI capabilities, making powerful AI features accessible to more developers.
2828

2929
Lastly and most importantly, AIScript is open source and available on [GitHub](https://github.com/aiscriptdev/aiscript). Hope you give it a try and welcome contributions from the community, whether it's submitting bug reports, suggesting features, improving documentation, or contributing code.
3030

‎theme/components/footer/index.module.scss

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.footer {
2+
width: 100%;
3+
padding: 4rem 1.5rem;
4+
border-top: 1px solid var(--border-divider-light, #eaeaea);
5+
}
6+
7+
.container {
8+
max-width: 1200px;
9+
margin: 0 auto;
10+
width: 100%;
11+
}
12+
13+
.columns {
14+
display: grid;
15+
grid-template-columns: 1fr;
16+
gap: 3rem;
17+
margin-bottom: 3rem;
18+
justify-content: center;
19+
}
20+
21+
.column {
22+
display: flex;
23+
flex-direction: column;
24+
gap: 1.25rem;
25+
max-width: 20rem;
26+
margin: 0 auto;
27+
width: 100%;
28+
}
29+
30+
.title {
31+
font-size: 1.125rem;
32+
font-weight: 600;
33+
margin: 0 0 0.5rem;
34+
color: var(--text-color, #000);
35+
}
36+
37+
.description {
38+
color: var(--text-secondary, #6b7075);
39+
margin: 0;
40+
line-height: 1.5;
41+
}
42+
43+
.links {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 0.75rem;
47+
}
48+
49+
.link {
50+
color: var(--text-secondary, #6b7075);
51+
text-decoration: none;
52+
transition: color 0.2s ease;
53+
54+
&:hover {
55+
color: var(--text-primary, #f93920);
56+
}
57+
}
58+
59+
.socialLinks {
60+
display: flex;
61+
gap: 1rem;
62+
}
63+
64+
.socialLink {
65+
color: var(--text-secondary, #6b7075);
66+
transition: color 0.2s ease;
67+
68+
&:hover {
69+
color: var(--text-primary, #f93920);
70+
}
71+
}
72+
73+
.copyright {
74+
padding-top: 2rem;
75+
border-top: 1px solid var(--border-divider-light, #eaeaea);
76+
text-align: center;
77+
color: var(--text-secondary, #6b7075);
78+
font-size: 0.875rem;
79+
}
80+
81+
/* Media Queries */
82+
@media (min-width: 768px) {
83+
.footer {
84+
padding: 4rem 2rem;
85+
}
86+
87+
.columns {
88+
grid-template-columns: repeat(3, 1fr);
89+
gap: 2rem;
90+
justify-items: center;
91+
}
92+
93+
.column {
94+
margin: 0;
95+
align-items: flex-start;
96+
text-align: left;
97+
}
98+
99+
.socialLinks {
100+
justify-content: flex-start;
101+
}
102+
}
103+
104+
/* Dark mode support */
105+
:global(.dark) {
106+
.title {
107+
color: var(--text-color-dark, #fff);
108+
}
109+
110+
.description,
111+
.link,
112+
.socialLink,
113+
.copyright {
114+
color: var(--text-secondary-dark, #c6cacd);
115+
}
116+
117+
.link:hover,
118+
.socialLink:hover {
119+
color: var(--text-primary-dark, #ff8b00);
120+
}
121+
}

‎theme/components/footer/index.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import styles from './index.module.scss';
2+
3+
export const Footer = () => {
4+
return (
5+
<footer className={styles.footer}>
6+
<div className={styles.container}>
7+
<div className={styles.columns}>
8+
{/* Brand Column */}
9+
<div className={styles.column}>
10+
<h2 className={styles.title}>AIScript</h2>
11+
<p className={styles.description}>The next generation language for human and AI.</p>
12+
<div className={styles.socialLinks}>
13+
<a href="https://github.com/aiscriptdev/aiscript" className={styles.socialLink} aria-label="GitHub">
14+
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
15+
</a>
16+
<a href="https://discord.gg/bXRqsweNPb" className={styles.socialLink} aria-label="Discord">
17+
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" /></svg>
18+
</a>
19+
</div>
20+
</div>
21+
{/* Documentation Column */}
22+
<div className={styles.column}>
23+
<h3 className={styles.title}>Documentation</h3>
24+
<div className={styles.links}>
25+
<a href="/guide/getting-started/introduction" className={styles.link}>Getting Started</a>
26+
<a href="/guide/language/basic" className={styles.link}>Language Guide</a>
27+
<a href="/guide/ai/prompt" className={styles.link}>AI Integration</a>
28+
<a href="/guide/web/route" className={styles.link}>Web Framework</a>
29+
<a href="/std/overview" className={styles.link}>Standard Library</a>
30+
<a href="/reference/language-keyword" className={styles.link}>Language Reference</a>
31+
</div>
32+
</div>
33+
{/* Community Column */}
34+
<div className={styles.column}>
35+
<h3 className={styles.title}>Community</h3>
36+
<div className={styles.links}>
37+
<a href="/blog" className={styles.link}>Blog</a>
38+
<a href="https://github.com/aiscriptdev/aiscript" className={styles.link}>GitHub</a>
39+
<a href="https://discord.gg/bXRqsweNPb" className={styles.link}>Discord</a>
40+
</div>
41+
</div>
42+
</div>
43+
<div className={styles.copyright}>
44+
<p>
45+
© {new Date().getFullYear()} AIScript, built by <a href="https://github.com/folyd" style={{ textDecoration: 'underline' }}>@Folyd</a>, released under the MIT License.
46+
</p>
47+
</div>
48+
</div>
49+
</footer>
50+
);
51+
};
52+
53+
export default Footer;

‎theme/pages/index.tsx

+2-16
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
11
import LandingPage from '../components/Landingpage';
2+
import Footer from '../components/footer';
23

3-
const CopyRight = () => {
4-
return (
5-
<footer className="bottom-0 mt-12 py-8 px-6 sm:p-8 w-full border-t border-solid border-divider-light">
6-
<div className="m-auto w-full text-center">
7-
<div className="font-medium text-sm text-text-2">
8-
<p className="mb-2">
9-
AISCript is free and open source language designed for human and AI released under the MIT
10-
license.
11-
</p>
12-
<p>© 2024-present AISCript Community.</p>
13-
</div>
14-
</div>
15-
</footer>
16-
);
17-
};
184

195
export function HomeLayout() {
206
return (
217
<>
228
<LandingPage />
23-
<CopyRight />
9+
<Footer />
2410
</>
2511
);
2612
}

0 commit comments

Comments
 (0)