feat: support locale for tag index

components/blog.js

@@ -7,7 +7,6 @@ import "highlight.js/styles/sunburst.css";
 import "gist-syntax-themes/stylesheets/one-dark.css";
 import Tag from "./tag";
 import Avatar from "./avatar";
-import RewardImages from "./reward";
 import cfg from "../lib/config.mjs";
 import Disqus from "./disqus";
 import Comments from "./comments";
@@ -119,7 +118,9 @@ export default withView(props => {
           <div className="mx-2 mt-10">
             <div>
               {tags &&
-                tags.split(",").map(each => <Tag tag={each} key={each} />)}
+                tags
+                  .split(",")
+                  .map(each => <Tag tag={each} key={each} locale={locale} />)}
             </div>
           </div>
           <hr />
@@ -191,9 +192,9 @@ export default withView(props => {
             <Disqus url={pageURL} identifier={id} title={title} />
           )}
           {cfg.enableGitHubComment && !props.noReply && <Comments />}
-          {!props.noReward && (
+          {/* {!props.noReward && (
             <RewardImages text={"Scan the QR Code to leave a tip :)"} />
-          )}
+          )} */}
         </>
       )}
     </Layout>

components/tag.js

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import config from "../lib/config.mjs";
 
 export default function Tag(props) {
   const highlight = props.highlight
@@ -9,7 +8,7 @@ export default function Tag(props) {
     <Link
       href={`/tag/${props.tag.toLowerCase().trim()}`}
       className="no-underline"
-      locale={config.defaultLocale}
+      locale={props.locale}
     >
       <span
         className={`before:content-['#'] duration-100 transition rounded inline-block p-1 mx-1 text-sm font-mono ${highlight}`}

next.config.js

@@ -5,7 +5,7 @@ module.exports = {
   //   appDir: true,
   // },
   i18n: {
-    locales: ["zh"], // post.en.md, post.ja.md
+    locales: ["zh", "en"], // post.en.md, post.ja.md
     defaultLocale: "zh", // post.zh.md or post.md
     localeDetection: false,
   },

pages/tag/[tag].js

@@ -5,41 +5,44 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 export default function TagPage(props) {
-  const { query } = useRouter();
+  const { query, locale } = useRouter();
   return (
     <Layout title={`Tag: ${query.tag}`} tags={`${query.tag}, Tags`}>
       <h2>
         Tagged with <code>{query.tag}</code>
       </h2>
       <div className="mt-8">
-        {props.tags.map(tag => (
+        {props.tags?.map(tag => (
           <Tag
             tag={tag}
             key={tag}
             highlight={query.tag.toLowerCase().trim() === tag}
+            locale={locale}
           />
         ))}
       </div>
       <div className="mt-8 mx-4">
-        {props.data.map(post => (
-          <div className="mt-6" key={post.id}>
-            <span className="text-lg">
-              <Link
-                href={`/blog/${post.id}`}
-                className={`p-0 no-underline font-normal`}
-                locale={post.locale}
-              >
-                {post.title}
-              </Link>
-            </span>
-            <div className="font-mono pt-2">
-              <span className="pr-2">{post.date}</span>
-              {post.tags.split(",").map(tag => (
-                <Tag tag={tag} key={tag} />
-              ))}
+        {props.data
+          ?.filter(post => post.locale === locale)
+          .map(post => (
+            <div className="mt-6" key={post.id}>
+              <span className="text-lg">
+                <Link
+                  href={`/blog/${post.id}`}
+                  className={`p-0 no-underline font-normal`}
+                  locale={locale}
+                >
+                  {post.title}
+                </Link>
+              </span>
+              <div className="font-mono pt-2">
+                <span className="pr-2">{post.date}</span>
+                {post.tags.split(",").map(tag => (
+                  <Tag tag={tag} key={tag} locale={locale} />
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     </Layout>
   );
@@ -57,14 +60,21 @@ export const getStaticProps = async context => {
   };
 };
 
-export const getStaticPaths = async () => {
+export const getStaticPaths = async context => {
   const tags = await getAllTags();
-  const paths = tags.map(tag => {
-    return {
-      params: {
-        tag: tag,
-      },
-    };
+  const paths = [];
+  // todo: filter out tags by locale matching
+  // currenly show all tags even if no posts
+  context.locales.forEach(locale => {
+    const pathsWithLocale = tags.map(tag => {
+      return {
+        params: {
+          tag: tag,
+        },
+        locale: locale,
+      };
+    });
+    paths.push(...pathsWithLocale);
   });
   return {
     paths,

pages/tag/index.js

@@ -0,0 +1,27 @@
+import { getAllTags } from "../../lib/ssg";
+import Layout from "../../components/layout";
+import Tag from "../../components/tag";
+import { useRouter } from "next/router";
+
+export default function TagIndex(props) {
+  const { locale } = useRouter();
+  return (
+    <Layout title={`Tags`} tags={`Tags`}>
+      <h2>Tags</h2>
+      <div className="mt-8">
+        {props.tags.map(tag => (
+          <Tag tag={tag} key={tag} locale={locale} />
+        ))}
+      </div>
+    </Layout>
+  );
+}
+
+export const getStaticProps = async () => {
+  const tags = await getAllTags();
+  return {
+    props: {
+      tags: tags,
+    },
+  };
+};

posts/long-live-rss.en.md

@@ -7,6 +7,8 @@ tags: rss, reading, web
 
 RSS: A family of Web feed formats used to publish frequently updated works (blog entries, news headlines, audio, and video) in a standardized format. [Aaron Swartz](http://www.aaronsw.com/) helped create it at the age of 14 and committed suicide at 26.
 
+![Aaron Swartz](/images/long-live-rss/aaronswartz.jpg)
+
 Aaron Swartz is a pioneer of open web fundamentalism. His deeds once affected the way I looked at the world. He used an extreme attitude to tell the world how to fight against the world. I recommend you to watch the documentary "The Internet's Own Boy: The Story of Aaron Swartz". This is the best way to understand the authors of RSS.
 
 Here are some feed examples I subscribed for reading:
@@ -52,4 +54,8 @@ As a contributor for RSSHub, I'm also glad to share my self-hosted RSSHub for yo
 
 I'll try to keep [my repository](https://github.com/la3rence/RSSHub) in sync with [the official RSSHub git repository](https://github.com/DIYgod/RSSHub) every day.
 
-I use the Reeder app for iOS. And also for feed sync up reason I host a FreshRSS service to keep all RSS feeds in one place. You can also try it or anyother client above and anyother services like Feedly, TinyTinyRSS...
+I use the Reeder app for iOS. And also for feed sync up reason I host a FreshRSS service to keep all RSS feeds in one place.
+
+![My FreshRSS](/images/long-live-rss/freshrss.png)
+
+You can also try it or anyother client above and anyother services like Feedly, TinyTinyRSS...

posts/long-live-rss.zh.md

@@ -7,6 +7,8 @@ tags: rss, reading, web
 
 RSS(简易信息聚合): 一系列网络提要格式，用于以标准化格式发布经常更新的作品（博客、新闻、音频和视频）。作者 [Aaron Swartz](http://www.aaronsw.com/) 在 14 岁时设计了它，却在 26 岁自杀。
 
+![Aaron Swartz](/images/long-live-rss/aaronswartz.jpg)
+
 Aaron Swartz 是一位开放互联网原教旨主义的先驱。他的事迹一度影响了我看待世界的方式，他以一种极端的姿态告诉世人如何对抗这个世界。推荐大家看一看十年前上映的《互联网之子》这部纪录片，这是了解 RSS 作者的最佳方式。
 
 这是我自己订阅的一些 RSS 源。
@@ -52,4 +54,8 @@ Aaron Swartz 是一位开放互联网原教旨主义的先驱。他的事迹一
 
 我会尽力每天将[我的 RSSHub 代码仓库](https://github.com/la3rence/RSSHub)与[官方仓库](https://github.com/DIYgod/RSSHub)保持同步。
 
-我使用的客户端是 Reeder 。另外，出于同步 RSS 源的原因，我自己部署了 FreshRSS 服务，将所有 RSS Feed 保存在一个位置。 你可以试试或上面提到的的任何其他客户端以及任何其他服务端，比如 Feedly、TinyTinyRSS...
+我使用的客户端是 Reeder。另外，出于同步 RSS 源的原因，我自己部署了 FreshRSS 服务，将所有 RSS Feed 保存在一个位置。
+
+![My FreshRSS](/images/long-live-rss/freshrss.png)
+
+你可以试试或上面提到的的任何其他客户端以及任何其他服务端，比如 Feedly、TinyTinyRSS...

posts/pre-rendering.en.md

@@ -1,6 +1,6 @@
 ---
-title: "Two Forms of Pre-rendering"
-date: "1970-01-01"
+title: "Next.js: Two Forms of Pre-rendering"
+date: "2018-01-01"
 description: "SSG & SSR"
 tags: ssg, ssr
 ---

posts/pre-rendering.ja.md

@@ -1,8 +1,9 @@
 ---
-title: "2 つの形式のプリレンダリング"
-date: "1970-01-01"
+title: "Next.js 2 つの形式のプリレンダリング"
+date: "2018-01-01"
 description: "SSG & SSR"
 tags: ssg, ssr
+visible: false
 ---
 
 Next.js には、**静的生成** と **サーバーサイド レンダリング** という 2 つの形式のプリレンダリングがあります。 違いは、ページの HTML を**いつ生成するか**にあります。

posts/pre-rendering.md

@@ -1,6 +1,6 @@
 ---
-title: "两种预渲染形式"
-date: "1970-01-01"
+title: "Next.js 的两种预渲染形式"
+date: "2018-01-01"
 description: "SSG & SSR"
 tags: ssg, ssr
 ---
@@ -10,4 +10,4 @@ Next.js 有两种形式的预渲染：**静态生成**和**服务器端渲染**
 - **静态生成**是在**构建时**生成 HTML 的预渲染方法。 然后，每个请求都会*重用*预渲染的 HTML。
 - **服务器端渲染**是在**每个请求**上生成 HTML 的预渲染方法。
 
-重要的是，Next.js 允许您**选择**每个页面使用哪种预渲染表单。 您可以通过对大多数页面使用静态生成并对其他页面使用服务器端渲染来创建“混合”Next.js 应用程序。
+重要的是，Next.js 允许您**选择**每个页面使用哪种预渲染表单。 您可以通过对大多数页面使用静态生成并对其他页面使用服务器端渲染来创建「混合」Next.js 应用程序。