Refactor settings

public/admin/config.yml

@@ -25,10 +25,6 @@ collections:
           - label: "Global description"
             name: "site_description"
             widget: "string"
-          - label: "Category visible"
-            name: "category_visible"
-            widget: "boolean"
-            default: true
           - label: "Tag visible"
             name: "tag_visible"
             widget: "boolean"

settings.yml

@@ -1,6 +1,4 @@
 url: https://wutali-nextjs-netlify-blog.netlify.app/
 site_title: Next.js Netlify Blog
 site_description: Next.js blog template for Netlify
-category_visible: true
-tag_visible: true
 posts_per_page: 5

src/components/Layout.tsx

@@ -1,7 +1,6 @@
 import Head from "next/head";
 import Navigation from "./Navigation";
-
-const settings = require("../../settings.yml");
+import settings from "../lib/settings";
 
 type Props = {
   children: React.ReactNode;

src/lib/posts.ts

@@ -8,14 +8,15 @@ export type PostContent = {
   readonly date: string;
   readonly title: string;
   readonly slug: string;
+  readonly tags?: string[];
 };
 
-export function countPosts(): number {
-  return fs.readdirSync(postsDirectory).filter((it) => it.endsWith(".mdx"))
-    .length;
-}
+let postCache: PostContent[];
 
-export function getSortedPostsData(page: number, limit: number): PostContent[] {
+function fetchPostContent(): PostContent[] {
+  if (postCache) {
+    return postCache;
+  }
   // Get file names under /posts
   const fileNames = fs.readdirSync(postsDirectory);
   const allPostsData = fileNames
@@ -33,18 +34,35 @@ export function getSortedPostsData(page: number, limit: number): PostContent[] {
 
       // Combine the data with the id
       return {
-        ...(matterResult.data as { date: string; title: string }),
+        ...(matterResult.data as {
+          date: string;
+          title: string;
+          tags: string[];
+        }),
         slug,
       };
     });
   // Sort posts by date
-  return allPostsData
-    .sort((a, b) => {
-      if (a.date < b.date) {
-        return 1;
-      } else {
-        return -1;
-      }
-    })
-    .slice(page * limit, (page + 1) * limit);
+  postCache = allPostsData.sort((a, b) => {
+    if (a.date < b.date) {
+      return 1;
+    } else {
+      return -1;
+    }
+  });
+  return postCache;
+}
+
+export function countPosts(): number {
+  return fetchPostContent().length;
+}
+
+export function listPostContent(
+  page: number,
+  limit: number,
+  tag?: string
+): PostContent[] {
+  return fetchPostContent()
+    .slice((page - 1) * limit, page * limit)
+    .filter((it) => !tag || (it.tags && it.tags.includes(tag)));
 }

src/lib/settings.ts

@@ -0,0 +1,10 @@
+type Settings = {
+  readonly url: string;
+  readonly site_title: string;
+  readonly site_description: string;
+  readonly posts_per_page: number;
+};
+
+const settings = require("../../settings.yml") as Settings;
+
+export default settings;

src/lib/tags.ts

@@ -19,6 +19,6 @@ export function getTag(slug: string) {
   return tagMap[slug];
 }
 
-export function getTags(): TagContent[] {
+export function listTags(): TagContent[] {
   return tags;
 }

src/pages/posts/example-post.mdx

@@ -2,7 +2,6 @@
 slug: example-post
 title: Welcome To Codex
 date: "2020-06-08"
-category: back-end
 tags:
   - golang
   - react

src/pages/posts/how-to-use-template.mdx

@@ -2,7 +2,6 @@
 slug: how-to-use-template
 title: How to Use Template
 date: "2020-06-08"
-category: back-end
 tags:
   - golang
   - react

src/pages/posts/index.tsx

@@ -1,10 +1,9 @@
 import Layout from "../../components/Layout";
 import { GetStaticProps } from "next";
-import { getSortedPostsData, PostContent } from "../../lib/posts";
+import { listPostContent, PostContent } from "../../lib/posts";
 import PostList from "../../components/PostList";
-import { TagContent, getTags } from "../../lib/tags";
-
-const settings = require("../../../settings.yml");
+import { TagContent, listTags } from "../../lib/tags";
+import settings from "../../lib/settings";
 
 type Props = {
   posts: PostContent[];
@@ -19,8 +18,8 @@ export default function ({ posts, tags }: Props) {
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-  const posts = getSortedPostsData(0, settings.posts_per_page);
-  const tags = getTags();
+  const posts = listPostContent(1, settings.posts_per_page);
+  const tags = listTags();
   return {
     props: {
       posts,

src/pages/posts/license.mdx

@@ -2,7 +2,6 @@
 slug: license
 title: License
 date: "2020-06-08"
-category: back-end
 tags:
   - golang
   - react

src/pages/posts/p/[page].tsx → src/pages/posts/page/[page].tsx

@@ -1,14 +1,9 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import Layout from "../../../components/Layout";
 import PostList from "../../../components/PostList";
-import {
-  countPosts,
-  getSortedPostsData,
-  PostContent,
-} from "../../../lib/posts";
-import { getTags, TagContent } from "../../../lib/tags";
-
-const settings = require("../../../../settings.yml");
+import { countPosts, listPostContent, PostContent } from "../../../lib/posts";
+import { listTags, TagContent } from "../../../lib/tags";
+import settings from "../../../lib/settings";
 
 type Props = {
   posts: PostContent[];
@@ -23,11 +18,11 @@ export default function ({ posts, tags }: Props) {
 }
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const posts = getSortedPostsData(
+  const posts = listPostContent(
     parseInt(params.page as string) - 1,
     settings.posts_per_page
   );
-  const tags = getTags();
+  const tags = listTags();
   return {
     props: {
       posts,

src/pages/posts/rich-content.mdx

@@ -2,8 +2,8 @@
 slug: rich-content
 title: Rich Content
 date: "2020-06-05"
-category: front-end
 ---
+
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
 
 ## Instagram Simple Shortcode
@@ -20,4 +20,4 @@ TODO: Define Twitter component
 
 ## Vimeo Simple Shortcode
 
-TODO: Define Vimeo component
+TODO: Define Vimeo component

src/pages/posts/tags/[slug]/index.tsx

@@ -1,5 +1,32 @@
 import Layout from "../../../../components/Layout";
+import { GetStaticProps, GetStaticPaths } from "next";
+import { listPostContent } from "../../../../lib/posts";
+import { listTags } from "../../../../lib/tags";
+import settings from "../../../../lib/settings";
 
 export default function () {
   return <Layout>posts/tags/[slug]/</Layout>;
 }
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const posts = listPostContent(
+    1,
+    settings.posts_per_page,
+    params.slug as string
+  );
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = listTags().map((it) => ({
+    params: { slug: it.slug },
+  }));
+  return {
+    paths: paths,
+    fallback: false,
+  };
+};