Clean up project

Author: wutali

README.md

@@ -1,33 +1,47 @@
 # Next.js blog template for Netlify
 
-This is a boilerplate for building blogs with only Netlify stacks. 
+This is a boilerplate for building blogs with only Netlify stacks.
 
 There are some boilerplate for the combination of Next.js and Netlify on GitHub.
 These boilerplate have good document and good tutorial to get started Next.js and Netlify easily
-but they are too simple if the blog having common features has needed. 
+but they are too simple if the blog having common features has needed.
 
-Next.js blog template for Netlify has already implemented these common features for building 
+Next.js blog template for Netlify has already implemented these common features for building
 blogs with only using Next.js and Netlify stacks.
 
 ## Features
 
-* Full-text search:
-* Categorization & Tagging:
-* Author:
-* Pagination:
-* CMS:
+- Full-text search:
+- Tagging:
+- Author:
+- Pagination:
+- CMS:
+- Selectable post layout:
+- Social metadata:
 
 ## Dependencies
 
-* TypeScript: 
-* Next.js:
-* Netlify:
+- TypeScript:
+- Next.js:
+- Netlify:
+- MDX:
+
+## Getting started
 
 ## Usage
+
 ### Modify content by Netlify CMS
+
 ### Enable Netlify Large Media to handle large files
+
 ### Preview content before it's released
 
 ## Customization
 
-## Sources
+### Define category metadata
+
+### Add new layout for each post page
+
+### Localize CMS
+
+## Sources

authors.yml

@@ -0,0 +1,6 @@
+{
+  "url": "https://wutali-nextjs-netlify-blog.netlify.app/",
+  "site_title": "Next.js Netlify Blog",
+  "site_description": "Next.js blog template for Netlify",
+  "posts_per_page": 5
+}

config.json

@@ -1,4 +1,19 @@
-declare module 'remark-html' {
-  const html: any
-  export default html
+declare module "*.svg" {
+  import * as React from "react";
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  >>;
+
+  export default ReactComponent;
+}
+
+declare module "*.json" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.yml" {
+  const value: any;
+  export default value;
 }

global.d.ts

@@ -0,0 +1,6 @@
+authors:
+  - slug: wutali
+    name: Takahiro Fujiwara
+    introduction:
+      Co-founder and CTO at Fuller, Inc. / Software & Data Engineer /
+      Python / Golang / React

meta/authors.yml

@@ -18,9 +18,7 @@
     "next-mdx-enhanced": "^3.1.0",
     "normalize.css": "^8.0.1",
     "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "remark": "^12.0.0",
-    "remark-html": "^11.0.1"
+    "react-dom": "16.13.1"
   },
   "devDependencies": {
     "@types/jest": "^26.0.9",

tags.yml renamed to meta/tags.yml

@@ -5,15 +5,15 @@ media_folder: public/images
 public_folder: images
 
 collections:
-  - name: "settings"
-    label: "Settings"
+  - name: "config"
+    label: "Config"
     delete: false
     editor:
       preview: false
     files:
       - name: "general"
-        label: "Site Settings"
-        file: "settings.yml"
+        label: "Site Config"
+        file: "config.json"
         description: "General site settings"
         fields:
           - label: "URL"
@@ -38,24 +38,28 @@ collections:
     files:
       - name: "authors"
         label: "Authors"
-        file: "authors.yml"
+        file: "meta/authors.yml"
         description: "Author descriptions"
         fields:
           - name: authors
             label: Authors
             label_singular: "Author"
             widget: list
             fields:
+              - label: "Slug"
+                name: "slug"
+                widget: "string"
+                hint: "The part of a URL identifies the author"
               - label: "Name"
                 name: "name"
                 widget: "string"
                 hint: "First and Last"
-              - label: "Description"
-                name: "description"
-                widget: "markdown"
+              - label: "Introduction"
+                name: "introduction"
+                widget: "text"
       - name: "tags"
         label: "Tags"
-        file: "tags.yml"
+        file: "meta/tags.yml"
         description: "List of tags"
         fields:
           - name: tags

package.json

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import Navigation from "./Navigation";
-import settings from "../lib/settings";
+import config from "../lib/config";
 
 type Props = {
   children: React.ReactNode;
@@ -10,14 +10,14 @@ export default function Layout({ children }: Props) {
     <div className="root">
       <Head>
         <meta charSet="utf-8" />
-        <title>{settings.site_title}</title>
-        <meta name="description" content={settings.site_description} />
+        <title>{config.site_title}</title>
+        <meta name="description" content={config.site_description} />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        <meta property="og:title" content={settings.site_title} />
+        <meta property="og:title" content={config.site_title} />
         <meta property="og:type" content="website" />
-        <meta property="og:url" content={settings.url} />
-        <meta property="og:image" content={settings.url + "/og_image.png"} />
+        <meta property="og:url" content={config.url} />
+        <meta property="og:image" content={config.url + "/og_image.png"} />
 
         <link rel="manifest" href="/site.webmanifest" />
         <link rel="apple-touch-icon" href="/icon.png" />

public/admin/config.yml

@@ -1,3 +1,21 @@
+import authors from "../../meta/authors.yml";
+
+export type AuthorContent = {
+  readonly slug: string;
+  readonly name: string;
+  readonly introduction: string;
+};
+
+const authorMap: { [key: string]: AuthorContent } = generateAuthorMap();
+
+function generateAuthorMap(): { [key: string]: AuthorContent } {
+  let result: { [key: string]: AuthorContent } = {};
+  for (const author of authors.authors) {
+    result[author.slug] = author;
+  }
+  return result;
+}
+
 export function getAuthor(slug: string) {
-  // TODO: Impl.
+  return authorMap[slug];
 }

settings.yml

@@ -1,10 +1,10 @@
-type Settings = {
+import config from "../../config.json";
+
+type Config = {
   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;
+export default config as Config;

src/components/Layout.tsx

@@ -1,4 +1,4 @@
-const tags = require("../../tags.yml").tags;
+import tags from "../../meta/tags.yml";
 
 export type TagContent = {
   readonly slug: string;
@@ -9,7 +9,7 @@ const tagMap: { [key: string]: TagContent } = generateTagMap();
 
 function generateTagMap(): { [key: string]: TagContent } {
   let result: { [key: string]: TagContent } = {};
-  for (const tag of tags) {
+  for (const tag of tags.tags) {
     result[tag.slug] = tag;
   }
   return result;
@@ -20,5 +20,5 @@ export function getTag(slug: string) {
 }
 
 export function listTags(): TagContent[] {
-  return tags;
+  return tags.tags;
 }

src/lib/authors.ts

@@ -3,7 +3,7 @@ import { GetStaticProps } from "next";
 import { listPostContent, PostContent, countPosts } from "../../lib/posts";
 import PostList from "../../components/PostList";
 import { TagContent, listTags } from "../../lib/tags";
-import settings from "../../lib/settings";
+import config from "../../lib/config";
 
 type Props = {
   posts: PostContent[];
@@ -22,11 +22,11 @@ export default function Index({ posts, tags, pagination }: Props) {
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-  const posts = listPostContent(1, settings.posts_per_page);
+  const posts = listPostContent(1, config.posts_per_page);
   const tags = listTags();
   const pagination = {
     current: 1,
-    pages: Math.ceil(countPosts() / settings.posts_per_page),
+    pages: Math.ceil(countPosts() / config.posts_per_page),
   };
   return {
     props: {

src/lib/settings.ts renamed to src/lib/config.ts

@@ -3,7 +3,7 @@ import Layout from "../../../components/Layout";
 import PostList from "../../../components/PostList";
 import { countPosts, listPostContent, PostContent } from "../../../lib/posts";
 import { listTags, TagContent } from "../../../lib/tags";
-import settings from "../../../lib/settings";
+import config from "../../../lib/config";
 
 type Props = {
   posts: PostContent[];
@@ -23,11 +23,11 @@ export default function Page({ posts, tags, pagination }: Props) {
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const current = parseInt(params.page as string);
-  const posts = listPostContent(current, settings.posts_per_page);
+  const posts = listPostContent(current, config.posts_per_page);
   const tags = listTags();
   const pagination = {
     current: current,
-    pages: Math.ceil(countPosts() / settings.posts_per_page),
+    pages: Math.ceil(countPosts() / config.posts_per_page),
   };
   return {
     props: {
@@ -39,7 +39,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const pages = Math.ceil(countPosts() / settings.posts_per_page);
+  const pages = Math.ceil(countPosts() / config.posts_per_page);
   const paths = Array.from(Array(pages - 1).keys()).map((it) => ({
     params: { page: (it + 2).toString() },
   }));

src/lib/tags.ts

@@ -3,7 +3,7 @@ import Layout from "../../../components/Layout";
 import { GetStaticProps, GetStaticPaths } from "next";
 import { listPostContent, PostContent, countPosts } from "../../../lib/posts";
 import { listTags, getTag, TagContent } from "../../../lib/tags";
-import settings from "../../../lib/settings";
+import config from "../../../lib/config";
 
 type Props = {
   posts: PostContent[];
@@ -26,13 +26,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   const [slug, current] = [queries[0], queries[1]];
   const posts = listPostContent(
     current ? parseInt(current as string) : 1,
-    settings.posts_per_page,
+    config.posts_per_page,
     slug
   );
   const tag = getTag(slug);
   const pagination = {
     current: current ? parseInt(current as string) : 1,
-    pages: Math.ceil(countPosts(slug) / settings.posts_per_page),
+    pages: Math.ceil(countPosts(slug) / config.posts_per_page),
   };
   return {
     props: {
@@ -45,7 +45,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const paths = listTags().flatMap((tag) => {
-    const pages = Math.ceil(countPosts(tag.slug) / settings.posts_per_page);
+    const pages = Math.ceil(countPosts(tag.slug) / config.posts_per_page);
     return Array.from(Array(pages).keys()).map((page) =>
       page === 0
         ? {

src/pages/posts/index.tsx

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -18,12 +14,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }