Support Simplified Chinese

Fixes #7
yuhaofe · Sep 27, 2021 · 4827b50 · 4827b50
1 parent 2227eb1
commit 4827b50
Show file tree

Hide file tree

Showing 22 changed files with 283 additions and 67 deletions.
diff --git a/components/footer.js b/components/footer.js
@@ -1,17 +1,35 @@
 import styles from '../styles/Layout.module.css'
 
-export default function Footer({}) {
+export default function Footer({ locale }) {
     return (
         <footer className={styles.footer}>
             <span>Copyright &copy; 2021 fHz</span>
-            <div className={styles.tools}>
-                <span>Designed in <a href="https://www.figma.com/" target="_blank">figma</a></span>
-                <span>Built with <a href="https://nextjs.org/" target="_blank">Next.js</a></span>
-                <span>Hosted on <a href="https://pages.cloudflare.com/" target="_blank">Cloudflare Pages</a></span>
-            </div>
-            <div className={styles.social}>
-                <span>Follow me on <a href="https://github.com/flyhaozi" target="_blank">Github</a></span>
-            </div>
+            {
+                locale === 'en' &&
+                <>
+                    <div className={styles.tools}>
+                        <span>Designed in <a href="https://www.figma.com/" target="_blank">figma</a></span>
+                        <span>Built with <a href="https://nextjs.org/" target="_blank">Next.js</a></span>
+                        <span>Hosted on <a href="https://pages.cloudflare.com/" target="_blank">Cloudflare Pages</a></span>
+                    </div>
+                    <div className={styles.social}>
+                        <span>Follow me on <a href="https://github.com/flyhaozi" target="_blank">Github</a></span>
+                    </div>
+                </>
+            }
+            {
+                locale === 'zh-CN' &&
+                <>
+                    <div className={styles.tools}>
+                        <span>在 <a href="https://www.figma.com/" target="_blank">figma</a> 中设计</span>
+                        <span>用 <a href="https://nextjs.org/" target="_blank">Next.js</a> 构建</span>
+                        <span>托管于 <a href="https://pages.cloudflare.com/" target="_blank">Cloudflare Pages</a></span>
+                    </div>
+                    <div className={styles.social}>
+                        <span>在 <a href="https://github.com/flyhaozi" target="_blank">Github</a> 上关注我</span>
+                    </div>
+                </>
+            }
         </footer>
     )
 }
diff --git a/components/header.js b/components/header.js
@@ -1,7 +1,22 @@
 import styles from '../styles/Layout.module.css'
 import Link from 'next/link'
 
-export default function Header({}) {
+const nav = {
+    en: {
+        home: 'Home',
+        projects: 'Projects',
+        blog: 'Blog',
+        about: 'About'
+    },
+    'zh-CN': {
+        home: '主页',
+        projects: '项目',
+        blog: '博客',
+        about: '关于'
+    }
+}
+
+export default function Header({ locale }) {
     return (
         <header className={styles.header}>
             <Link href="/">
@@ -14,10 +29,11 @@ export default function Header({}) {
                 </a>
             </Link>
             <ul className={styles.nav}>
-                <li><Link href="/">Home</Link></li>
-                <li><Link href="/projects">Projects</Link></li>
-                <li><Link href="/blog">Blog</Link></li>
-                <li><Link href="/about">About</Link></li>
+                <li><small><a href="/">EN</a> / <a href="/zh-CN">中</a></small></li>
+                <li><Link href="/">{nav[locale].home}</Link></li>
+                <li><Link href="/projects">{nav[locale].projects}</Link></li>
+                <li><Link href="/blog">{nav[locale].blog}</Link></li>
+                <li><Link href="/about">{nav[locale].about}</Link></li>
             </ul>
         </header>
     )

diff --git a/components/layout.js b/components/layout.js
@@ -3,15 +3,26 @@ import Header from './header'
 import Footer from './footer'
 import styles from '../styles/Layout.module.css'
 
-export default function Layout({ children }) {
+const meta = {
+  en: {
+    title: 'fHz - fly through the waves',
+    description: 'fly through the waves'
+  },
+  'zh-CN': {
+    title: 'fHz - 飞跃浪潮',
+    description: '飞跃浪潮'
+  }
+}
+
+export default function Layout({ children, locale = 'en' }) {
   // https://nextjs.org/docs/api-reference/next/head
   return (
     <>
-      <Head >
-        <title>fHz | fly through the waves</title>
-        <meta name="description" content="fly through the waves" />
-        <meta property="og:title" content="fHz" key="title" />
-        <meta property="og:description" content="fly through the waves" key="description" />
+      <Head>
+        <title>{meta[locale].title}</title>
+        <meta name="description" content={meta[locale].description} />
+        <meta property="og:title" content={meta[locale].title} key="title" />
+        <meta property="og:description" content={meta[locale].description} key="description" />
         <meta property="og:type" content="website" key="type" />
         <meta property="og:url" content="https://flyhaozi.com/" key="url" />
         <meta property="og:image" content="https://flyhaozi.com/banner.jpg" key="image" />
@@ -20,9 +31,9 @@ export default function Layout({ children }) {
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
       </Head>
-      <Header />
+      <Header locale={locale} />
       <main className={styles.children}>{children}</main>
-      <Footer />
+      <Footer locale={locale} />
     </>
   )
 }
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,5 @@
+const locale = process.env.NEXT_LOCALE;
+
+module.exports = {
+    basePath: (!locale || (locale === 'en')) ? '' : '/' + process.env.NEXT_LOCALE,
+}
diff --git a/package.json b/package.json
@@ -7,7 +7,13 @@
     "build": "next build",
     "preexport": "npm run build",
     "export": "next export",
-    "start": "next start"
+    "start": "next start",
+    "dev:zh-CN": "NEXT_LOCALE=zh-CN next dev",
+    "build:zh-CN": "NEXT_LOCALE=zh-CN next build",
+    "preexport:zh-CN": "npm run build:zh-CN",
+    "export:zh-CN": "NEXT_LOCALE=zh-CN next export -o out/zh-CN",
+    "start:zh-CN": "NEXT_LOCALE=zh-CN next start",
+    "exportall": "npm run export && npm run export:zh-CN"
   },
   "dependencies": {
     "gray-matter": "^4.0.3",

diff --git a/pages/[project].js b/pages/[project].js
@@ -10,14 +10,14 @@ import IdleDetectionExample from '../components/idle-detection-example'
 
 const components = { IdleDetectionExample };
 
-export default function Project({ source, frontMatter }) {
+export default function Project({ source, frontMatter, locale }) {
     const router = useRouter();
     return (
         <>
             <Head >
-                <title>{frontMatter.title + " | fHz"}</title>
+                <title>{frontMatter.title + " - fHz"}</title>
                 <meta name="description" content={frontMatter.description} />
-                <meta property="og:title" content={frontMatter.title + " | fHz"} key="title" />
+                <meta property="og:title" content={frontMatter.title + " - fHz"} key="title" />
                 <meta property="og:description" content={frontMatter.description} key="description" />
                 <meta property="og:url" content={"https://flyhaozi.com/" + frontMatter.path} key="url" />
             </Head>
@@ -48,7 +48,8 @@ export default function Project({ source, frontMatter }) {
 }
 
 export async function getStaticPaths() {
-    const projectsDir = path.join(process.cwd(), 'projects');
+    const locale = process.env.NEXT_LOCALE ?? 'en';
+    const projectsDir = path.join(process.cwd(), 'projects', locale);
     const projectNames = await fs.readdir(projectsDir);
     const paths = projectNames.map(name => {
         return { params: { project: path.parse(name).name } };
@@ -60,8 +61,9 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
+    const locale = process.env.NEXT_LOCALE ?? 'en';
     const { project } = params;
-    const projectsDir = path.join(process.cwd(), 'projects');
+    const projectsDir = path.join(process.cwd(), 'projects', locale);
     const projectNames = await fs.readdir(projectsDir);
     const projName = projectNames.find(name => path.parse(name).name === project);
     if (!projName) {
@@ -71,5 +73,5 @@ export async function getStaticProps({ params }) {
     const projSource = await fs.readFile(projPath, 'utf8');
     const { content, data } = matter(projSource);
     const mdxSource = await serialize(content, { scope: data });
-    return { props: { source: mdxSource, frontMatter: data } };
+    return { props: { source: mdxSource, frontMatter: data, locale } };
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -4,7 +4,7 @@ import Layout from '../components/layout'
 
 function MyApp({ Component, pageProps }) {
   return (
-    <Layout>
+    <Layout locale={pageProps.locale}>
       <Component {...pageProps} />
     </Layout>
   );

diff --git a/pages/about.js b/pages/about.js
@@ -1,26 +1,44 @@
 import Head from 'next/head'
 import cstyles from '../styles/Common.module.css'
 
-export default function About() {
+const meta = {
+    en: {
+        title: 'About - fHz'
+    },
+    'zh-CN': {
+        title: '关于 - fHz'
+    }
+}
+
+export default function About({ locale }) {
     return (
         <>
             <Head >
-                <title>About | fHz</title>
-                <meta property="og:title" content="About | fHz" key="title" />
+                <title>{meta[locale].title}</title>
+                <meta property="og:title" content={meta[locale].title} key="title" />
                 <meta property="og:url" content="https://flyhaozi.com/about" key="url" />
             </Head>
-            <article className={cstyles.section}>
-                <h2>About Me</h2>
-                <p>Hi, I am <em>Yuhao Feng</em>. fHz is the name I use to publish my works.</p>
-                <p>I like using browser extensions and userscripts to enhance my web browsing experience, so I start learning front-end techniques.</p>
-                <p>I have published some small extensions and scripts. Hope they will make your browsing experience better.</p>
-            </article>
-            <article className={cstyles.section}>
-                <h2>关于我</h2>
-                <p>你好，我是<em>冯宇浩</em>。fHz 是我用来发布作品的名字。</p>
-                <p>我喜欢使用浏览器扩展和用户脚本来增强自己的网页浏览体验，因此我开始了学习前端技术。</p>
-                <p>我已经发布了几个小型的扩展和脚本，希望它们能够让你的浏览体验变得更好。</p>
-            </article>
+            {
+                locale === 'en' && 
+                <article className={cstyles.section}>
+                    <h2>About Me</h2>
+                    <p>Hi, I am <em>Yuhao Feng</em>. fHz is the name I use to publish my works.</p>
+                    <p>I like using browser extensions and userscripts to enhance my web browsing experience, so I start learning front-end techniques.</p>
+                    <p>I have published some small extensions and scripts. Hope they will make your browsing experience better.</p>
+                </article>
+            }{
+                locale === 'zh-CN' &&
+                <article className={cstyles.section}>
+                    <h2>关于我</h2>
+                    <p>你好，我是<em>冯宇浩</em>。fHz 是我用来发布作品的名字。</p>
+                    <p>我喜欢使用浏览器扩展和用户脚本来增强自己的网页浏览体验，因此我开始了学习前端技术。</p>
+                    <p>我已经发布了几个小型的扩展和脚本，希望它们能够让你的浏览体验变得更好。</p>
+                </article>
+            }
         </>
     )
+}
+
+export async function getStaticProps() {
+    return { props: { locale: process.env.NEXT_LOCALE ?? 'en' } };
 }
diff --git a/pages/blog.js b/pages/blog.js
@@ -2,18 +2,33 @@ import Head from 'next/head'
 import Link from 'next/link'
 import cstyles from '../styles/Common.module.css'
 
-export default function Blog() {
+const i18n = {
+    en: {
+        title: 'Blog - fHz',
+        blog: 'Blog (Under Construction)',
+    },
+    'zh-CN': {
+        title: '博客 - fHz',
+        blog: '博客（正在施工）'
+    }
+}
+
+export default function Blog({ locale }) {
     return (
         <section className={cstyles.section}>
             <Head >
-                <title>Blog | fHz</title>
-                <meta property="og:title" content="Blog | fHz" key="title" />
+                <title>{i18n[locale].title}</title>
+                <meta property="og:title" content={i18n[locale].title} key="title" />
                 <meta property="og:url" content="https://flyhaozi.com/blog" key="url" />
             </Head>
-            <h2>Blog (Under Construction)</h2>
+            <h2>{i18n[locale].blog}</h2>
             <ul className={cstyles.blogList}>
                 <li><span>2021-10-01</span><Link href="/blog/2021-national-day"><a >Celebrate The 2021 National Day!!! 🎉✨</a></Link></li>
             </ul>
         </section>
     )
+}
+
+export async function getStaticProps() {
+    return { props: { locale: process.env.NEXT_LOCALE ?? 'en' } };
 }
diff --git a/pages/index.js b/pages/index.js