Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Simplified Chinese support #8

Merged
merged 1 commit into from
Sep 27, 2021
Merged

Add Simplified Chinese support #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
26 changes: 21 additions & 5 deletions components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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="/">
Expand All @@ -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>
)
Expand Down
27 changes: 19 additions & 8 deletions components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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} />
</>
)
}
5 changes: 5 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const locale = process.env.NEXT_LOCALE;

module.exports = {
basePath: (!locale || (locale === 'en')) ? '' : '/' + process.env.NEXT_LOCALE,
}
8 changes: 7 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 8 additions & 6 deletions pages/[project].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 } };
Expand All @@ -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) {
Expand All @@ -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 } };
}
2 changes: 1 addition & 1 deletion pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Layout from '../components/layout'

function MyApp({ Component, pageProps }) {
return (
<Layout>
<Layout locale={pageProps.locale}>
<Component {...pageProps} />
</Layout>
);
Expand Down
48 changes: 33 additions & 15 deletions pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' } };
}
23 changes: 19 additions & 4 deletions pages/blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' } };
}
34 changes: 23 additions & 11 deletions pages/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading