From 09b54563e8a78b4a37272b6c673e7663eb0c85bd Mon Sep 17 00:00:00 2001
From: yoshinorin <yoshinorin.net@outlook.com>
Date: Fri, 5 Jan 2024 23:13:05 +0900
Subject: [PATCH] update

---
 src/app/[...slug]/page.tsx              |   3 +-
 src/app/[...slug]/renderer.tsx          |   3 +-
 src/app/archives/page.tsx               |   2 +-
 src/app/archives/renderer.tsx           |   9 +-
 src/app/articles/[...slug]/page.tsx     |  34 ++++++-
 src/app/articles/[...slug]/renderer.tsx |   9 +-
 src/app/articles/[number]/page.tsx      |   3 +-
 src/app/articles/[number]/renderer.tsx  |   7 +-
 src/app/articles/renderer.tsx           |   9 +-
 src/app/layout.tsx                      |  30 ++++++-
 src/app/page.tsx                        |   2 +-
 src/app/renderer.tsx                    |   9 +-
 src/app/search/renderer.tsx             |   6 --
 src/app/series/[slug]/page.tsx          |   3 +-
 src/app/series/[slug]/renderer.tsx      |   9 +-
 src/app/series/page.tsx                 |   3 +-
 src/app/series/renderer.tsx             |   9 +-
 src/app/settings/page.tsx               |   6 --
 src/app/status/page.tsx                 |   3 +-
 src/app/status/renderer.tsx             |  47 +++++-----
 src/app/tags/[...slug]/page.tsx         |   3 +-
 src/app/tags/[...slug]/renderer.tsx     |   9 +-
 src/app/tags/page.tsx                   |   3 +-
 src/app/tags/renderer.tsx               |   9 +-
 src/components/headmeta.tsx             | 114 ++++++++++++++++++++----
 25 files changed, 199 insertions(+), 145 deletions(-)

diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 6d08b9d..e0ce9a1 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -5,7 +5,6 @@ import { permanentRedirect } from "next/navigation";
 import { ContentResponse, Content } from '../../models/models';
 import { findByPath } from '../../api/content';
 import { asInsight } from '../../utils/converters';
-import { sluggize } from "../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../handler";
 
@@ -48,7 +47,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       content: content,
       insight: asInsight(response)
     }
diff --git a/src/app/[...slug]/renderer.tsx b/src/app/[...slug]/renderer.tsx
index ab76211..a944c6e 100644
--- a/src/app/[...slug]/renderer.tsx
+++ b/src/app/[...slug]/renderer.tsx
@@ -11,10 +11,9 @@ import { externalResources as externalResourcesConfig } from '../../../config';
 import { InjectScriptComponent } from '../../components/injectScriptComponent';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   content: Content,
   insight: Insight
-}> = ({ slug, content, insight }) => {
+}> = ({ content, insight }) => {
   let externalResourceSrc: Array<InjectScript> = [];
   const hasExternalResources = (content.externalResources && externalResourcesConfig);
   if (hasExternalResources) {
diff --git a/src/app/archives/page.tsx b/src/app/archives/page.tsx
index 02afbe4..a2c05ac 100644
--- a/src/app/archives/page.tsx
+++ b/src/app/archives/page.tsx
@@ -30,7 +30,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: 'archives',
+      // slug: 'archives',
       archives: archives
     }
   }
diff --git a/src/app/archives/renderer.tsx b/src/app/archives/renderer.tsx
index a36c579..1038370 100644
--- a/src/app/archives/renderer.tsx
+++ b/src/app/archives/renderer.tsx
@@ -1,19 +1,12 @@
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import ArchivesComponent from '../../components/archives';
 import { Archive } from '../../models/models';
-import { defaultRobotsMeta } from '../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   archives: Array<Archive>
-}> = ({ slug, archives }) => {
+}> = ({ archives }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Archives",
diff --git a/src/app/articles/[...slug]/page.tsx b/src/app/articles/[...slug]/page.tsx
index e1ae998..9d9cdbd 100644
--- a/src/app/articles/[...slug]/page.tsx
+++ b/src/app/articles/[...slug]/page.tsx
@@ -1,12 +1,39 @@
 'use server';
 
+import { Metadata } from 'next'
 import { ContentResponse, Content } from '../../../models/models';
 import { isIgnoreRequest } from '../../../utils/filterRequests';
 import { findByPath } from '../../../api/content';
 import { asInsight } from '../../../utils/converters';
-import { sluggize } from "../../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../../handler";
+import { defaultRobotsMeta } from '../../../../config';
+
+export async function generateMetadata (content?: Content): Promise<Metadata> {
+  const c = content;
+  const robotsAttributes = content.robotsAttributes === undefined ? defaultRobotsMeta : content.robotsAttributes;
+  return {
+    /*
+     NOT WORK???
+    title: c.title,
+    authors: [{ name: c.authorName }],
+    description: c.description,
+    */
+    robots: {
+      noarchive: robotsAttributes.includes('noarchive'),
+      follow: !robotsAttributes.includes('nofollow'),
+      noimageindex: robotsAttributes.includes('noimageindex'),
+      index: !robotsAttributes.includes('noindex'),
+    }
+    /*
+    openGraph: {
+      type: 'article',
+      publishedTime: convertUnixTimeToISODateSrting(content.publishedAt),
+      modifiedTime: convertUnixTimeToISODateSrting(content.updatedAt)
+    },
+    */
+  };
+}
 
 export default async function Page(req: any) {
   return runOrHandleErrorIf(await run(req));
@@ -14,6 +41,10 @@ export default async function Page(req: any) {
 
 async function run(req: any): Promise<any> {
   const { props } = await get(req);
+  await generateMetadata(
+    // sluggize(req.params.slug, 'articles'),
+    props.content
+  )
   return <Renderer {...props} />;
 }
 
@@ -46,7 +77,6 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug, 'articles'),
       content: content,
       insight: asInsight(response)
     }
diff --git a/src/app/articles/[...slug]/renderer.tsx b/src/app/articles/[...slug]/renderer.tsx
index 295c7f1..fae72ae 100644
--- a/src/app/articles/[...slug]/renderer.tsx
+++ b/src/app/articles/[...slug]/renderer.tsx
@@ -1,6 +1,5 @@
 import ContentComponent from '../../../components/content';
 import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
-import HeadMetaComponent from '../../../components/headmeta';
 import {
   Content,
   Insight,
@@ -11,10 +10,9 @@ import { externalResources as externalResourcesConfig } from '../../../../config
 import { InjectScriptComponent } from '../../../components/injectScriptComponent';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   content: Content,
   insight: Insight
-}> = ({ slug, content, insight }) => {
+}> = ({ content, insight }) => {
 
   let externalResourceSrc: Array<InjectScript> = [];
   const hasExternalResources = (content.externalResources && externalResourcesConfig);
@@ -23,11 +21,6 @@ export const Renderer: React.FunctionComponent<{
   }
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={content.robotsAttributes}
-        content={content}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: content.title,
diff --git a/src/app/articles/[number]/page.tsx b/src/app/articles/[number]/page.tsx
index eb45410..4fc9fa5 100644
--- a/src/app/articles/[number]/page.tsx
+++ b/src/app/articles/[number]/page.tsx
@@ -3,7 +3,6 @@
 import { getArticles } from '../../../api/articles';
 import { Article, ArticleResponseWithCount } from '../../../models/models';
 import { getRequestContext } from '../../../utils/requestContext';
-import { sluggize } from "../../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../../handler";
 
@@ -37,7 +36,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       current: req.params.number,
       count: articlesResponseWithCount.count,
       articles: articles
diff --git a/src/app/articles/[number]/renderer.tsx b/src/app/articles/[number]/renderer.tsx
index 916d049..302783d 100644
--- a/src/app/articles/[number]/renderer.tsx
+++ b/src/app/articles/[number]/renderer.tsx
@@ -1,20 +1,15 @@
-import HeadMetaComponent from '../../../components/headmeta';
 import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
 import ArticlesComponent from '../../../components/articles';
 import PaginationComponent from '../../../components/pagination';
 import { Article } from '../../../models/models';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   current: number,
   count: number,
   articles: Array<Article>
-}> = ({ slug, current, count, articles }) => {
+}> = ({ current, count, articles }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-      />
       <CoverWithNavigationComponent
         contentCover={null}
       />
diff --git a/src/app/articles/renderer.tsx b/src/app/articles/renderer.tsx
index bc33064..97bbb43 100644
--- a/src/app/articles/renderer.tsx
+++ b/src/app/articles/renderer.tsx
@@ -1,20 +1,13 @@
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import ArticlesComponent from '../../components/articles';
 import PaginationComponent from '../../components/pagination';
-import { defaultRobotsMeta } from '../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   count,
   articles
-}> = ({ slug, count, articles }) => {
+}> = ({ count, articles }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={null}
       />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3ebc8c9..bf7b7a5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,34 @@
 import React from 'react';
+import { Metadata } from 'next'
 import ClientLayout from './clientLayout';
 import { getThemeSetting } from '../services/theme';
-import { lang } from '../../config';
+import {
+  siteName,
+  mainAuthor,
+  lang,
+} from '../../config';
+import HeadMetaComponent from '../components/headmeta';
+
+export const metadata: Metadata = {
+  title: siteName,
+  authors: [{ name: mainAuthor }],
+  robots: {
+    noarchive: true,
+    follow: false,
+    noimageindex: true,
+    index: false
+  }
+  /* NOTE: Not supports OpenGraph
+    Reasons:
+      - If enable openGraph, `twitter:<field>` will be generate automatically.
+      - I don't want insert `twitter:<field>` to head.
+
+  openGraph: {
+    title: siteName,
+  },
+  twitter: {}  // Twitter og will be generate automatically, evenif I set empty object.
+  */
+}
 
 export default function RootLayout({
   children
@@ -12,6 +39,7 @@ export default function RootLayout({
   // https://github.com/vercel/next.js/discussions/44506#discussioncomment-7901181
   return (
     <html lang={lang}>
+      <HeadMetaComponent />
       <body data-theme={`${theme}`}>
         <ClientLayout>
           { children }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4f97842..39797ea 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,7 +32,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: undefined,
+      // slug: undefined,
       articles: articles
     }
   }
diff --git a/src/app/renderer.tsx b/src/app/renderer.tsx
index 42d31f7..118fea5 100644
--- a/src/app/renderer.tsx
+++ b/src/app/renderer.tsx
@@ -1,22 +1,15 @@
 import { Article } from '../models/models';
-import HeadMetaComponent from '../components/headmeta';
 import CoverWithNavigationComponent from '../components/cover/withNavigation';
 import RecentArticlesComponent from '../components/recentArticles';
 import styles from '../styles/home.module.scss';
 import containerStyles from '../styles/components/container.module.scss';
-import { defaultRobotsMeta } from '../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   articles: Array<Article>
-}> = ({ slug, articles }) => {
+}> = ({ articles }) => {
 
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={null}
       />
diff --git a/src/app/search/renderer.tsx b/src/app/search/renderer.tsx
index ca407c2..22f7e06 100644
--- a/src/app/search/renderer.tsx
+++ b/src/app/search/renderer.tsx
@@ -3,9 +3,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
-import { defaultRobotsMeta } from '../../../config';
 import { SearchResponse, SearchResponseWithCount } from '../../models/models';
 import inputStyles from '../../styles/input.module.scss';
 import containerStyles from '../../styles/components/container.module.scss';
@@ -42,10 +40,6 @@ export const Renderer: React.FunctionComponent<{
 
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Search (β)",
diff --git a/src/app/series/[slug]/page.tsx b/src/app/series/[slug]/page.tsx
index 64d44a1..dead3ed 100644
--- a/src/app/series/[slug]/page.tsx
+++ b/src/app/series/[slug]/page.tsx
@@ -7,7 +7,6 @@ import {
   SeriresWithArticles
 } from '../../../models/models';
 import { getRequestContext } from '../../../utils/requestContext';
-import { sluggize } from "../../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../../handler";
 
@@ -43,7 +42,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       seriresWithArticles: seriresWithArticles
     }
   }
diff --git a/src/app/series/[slug]/renderer.tsx b/src/app/series/[slug]/renderer.tsx
index 37cb90d..1e3c30b 100644
--- a/src/app/series/[slug]/renderer.tsx
+++ b/src/app/series/[slug]/renderer.tsx
@@ -1,18 +1,11 @@
-import HeadMetaComponent from '../../../components/headmeta';
 import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
 import SeriesWithArticlesComponent from '../../../components/seriesWithArticles';
-import { defaultRobotsMeta } from '../../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   seriresWithArticles
-}> = ({ slug, seriresWithArticles }) => {
+}> = ({ seriresWithArticles }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: seriresWithArticles.title,
diff --git a/src/app/series/page.tsx b/src/app/series/page.tsx
index 3d90734..44dccb4 100644
--- a/src/app/series/page.tsx
+++ b/src/app/series/page.tsx
@@ -3,7 +3,6 @@
 import { getSeries } from '../../api/series';
 import { Series, SeriesResponse } from '../../models/models';
 import { getRequestContext } from '../../utils/requestContext';
-import { sluggize } from "../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../handler";
 
@@ -33,7 +32,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       series: series
     }
   }
diff --git a/src/app/series/renderer.tsx b/src/app/series/renderer.tsx
index 975f98c..fee783d 100644
--- a/src/app/series/renderer.tsx
+++ b/src/app/series/renderer.tsx
@@ -1,19 +1,12 @@
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import SeriesComponent from '../../components/series';
 import { Series } from '../../models/models';
-import { defaultRobotsMeta } from '../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   series: Array<Series>
-}> = ({ slug, series }) => {
+}> = ({ series }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Series",
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 9e224a1..4879612 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,10 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import { getThemeSetting } from '../../services/theme';
-import { defaultRobotsMeta } from '../../../config';
 import DropdownComponent from '../../components/dropdown';
 import containerStyles from '../../styles/components/container.module.scss';
 import inputStyles from '../../styles/input.module.scss';
@@ -23,10 +21,6 @@ export default function Page(){
 
   return (
     <>
-      <HeadMetaComponent
-        slug="settings"
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Settings",
diff --git a/src/app/status/page.tsx b/src/app/status/page.tsx
index 94e1bf1..512f20c 100644
--- a/src/app/status/page.tsx
+++ b/src/app/status/page.tsx
@@ -2,7 +2,6 @@
 
 import { getStatus } from '../../api/status';
 import { getRequestContext } from '../../utils/requestContext';
-import { sluggize } from "../../utils/slug";
 import { Renderer } from './renderer';
 
 export default async function Page(req: any) {
@@ -15,7 +14,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       statusCode: response.status
     }
   }
diff --git a/src/app/status/renderer.tsx b/src/app/status/renderer.tsx
index b716d27..297d5d3 100644
--- a/src/app/status/renderer.tsx
+++ b/src/app/status/renderer.tsx
@@ -1,37 +1,30 @@
-import HeadMetaComponent from '../../components/headmeta';
 import PlanePage from '../../components/planePage';
-import { defaultRobotsMeta } from '../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   statusCode: number
-}> = ({ slug, statusCode }) => {
+}> = ({ statusCode }) => {
   // TODO: improvement (add bc-color, style, statusCode, etc)
   return(
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
-        {
-          (() => {
-            if (statusCode === 200) {
-              return(
-                <PlanePage
-                  title="Operational"
-                  content="API Server is operational."
-                />
-              )
-            } else {
-              return(
-                <PlanePage
-                   title="Down"
-                    content="API Server is down."
-                />
-              )
-            }
-          })()
-        }
+      {
+        (() => {
+          if (statusCode === 200) {
+            return(
+              <PlanePage
+                title="Operational"
+                content="API Server is operational."
+              />
+            )
+          } else {
+            return(
+              <PlanePage
+                  title="Down"
+                  content="API Server is down."
+              />
+            )
+          }
+        })()
+      }
     </>
   );
 }
diff --git a/src/app/tags/[...slug]/page.tsx b/src/app/tags/[...slug]/page.tsx
index dd5c6d6..b08ea09 100644
--- a/src/app/tags/[...slug]/page.tsx
+++ b/src/app/tags/[...slug]/page.tsx
@@ -3,7 +3,6 @@
 import { getArticlesByTagName } from '../../../api/articles';
 import { Article, ArticleResponseWithCount } from '../../../models/models';
 import { getRequestContext } from '../../../utils/requestContext';
-import { sluggize } from "../../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../../handler";
 
@@ -39,7 +38,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       tagName: tagName,
       currentPage: currentPage,
       count: articlesResponseWithCount.count,
diff --git a/src/app/tags/[...slug]/renderer.tsx b/src/app/tags/[...slug]/renderer.tsx
index 804c5ed..38ce9ae 100644
--- a/src/app/tags/[...slug]/renderer.tsx
+++ b/src/app/tags/[...slug]/renderer.tsx
@@ -1,22 +1,15 @@
-import HeadMetaComponent from '../../../components/headmeta';
 import CoverWithNavigationComponent from '../../../components/cover/withNavigation';
 import ArticlesComponent from '../../../components/articles';
 import PaginationComponent from '../../../components/pagination';
-import { defaultRobotsMeta } from '../../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   tagName,
   currentPage,
   count,
   articles
-}> = ({ slug, tagName, currentPage, count, articles }) => {
+}> = ({ tagName, currentPage, count, articles }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Tags",
diff --git a/src/app/tags/page.tsx b/src/app/tags/page.tsx
index f43349d..f869456 100644
--- a/src/app/tags/page.tsx
+++ b/src/app/tags/page.tsx
@@ -3,7 +3,6 @@
 import { Tag } from '../../models/models';
 import { getTags } from '../../api/tags';
 import { getRequestContext } from '../../utils/requestContext';
-import { sluggize } from "../../utils/slug";
 import { Renderer } from './renderer';
 import { runOrHandleErrorIf, throwIfError } from "../handler";
 
@@ -22,7 +21,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: sluggize(req.params.slug),
+      // slug: sluggize(req.params.slug),
       tags: await response.json() as Array<Tag>
     }
   }
diff --git a/src/app/tags/renderer.tsx b/src/app/tags/renderer.tsx
index ae1ae3f..939b055 100644
--- a/src/app/tags/renderer.tsx
+++ b/src/app/tags/renderer.tsx
@@ -1,21 +1,14 @@
 'use client';
 
 import { Tag } from '../../models/models';
-import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import TagsComponent from '../../components/tags';
-import { defaultRobotsMeta } from '../../../config';
 
 export const Renderer: React.FunctionComponent<{
-  slug: string,
   tags: Array<Tag>
-}> = ({ slug, tags }) => {
+}> = ({ tags }) => {
   return (
     <>
-      <HeadMetaComponent
-        slug={slug}
-        robotsMeta={defaultRobotsMeta}
-      />
       <CoverWithNavigationComponent
         contentCover={{
           title: "Tags",
diff --git a/src/components/headmeta.tsx b/src/components/headmeta.tsx
index aa28629..6c8a43e 100644
--- a/src/components/headmeta.tsx
+++ b/src/components/headmeta.tsx
@@ -1,21 +1,105 @@
 // import getConfig from 'next/config'
-import dynamic from 'next/dynamic';
 import {
-  defaultRobotsMeta,
-  siteName,
-  siteType,
-  mainAuthor,
-  locale,
-  url,
   favicon,
-  defaultImage,
   injectMetas
 } from '../../config';
-import { Content } from '../models/models';
-// https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
-// const HeaderScriptSrcsComponent = dynamic(() => import('./headerScriptSrcs'), { ssr: false })
-import { convertUnixTimeToISODateSrting } from '../utils/time';
 
+const HeadMetaComponent: React.FunctionComponent<{}> = ({}) => {
+  // TODO: JSON + LD
+  return(
+    <head>
+      {/*
+      {
+        (() => {
+          if (hasContent) {
+            return(
+              <>
+                - Dynamic fields should be inserted by Next.js (excludes og:<abc>)
+                <title key="title">{content.title}</title>
+                <meta name="author" content={content.authorName} key="author" />
+                <meta property="article:author" content={content.authorName} key="article:author" />
+                <meta name="description" content={content.description} key="description" />
+
+                - Dynamic og should not be inserted to head.
+                <meta property="og:description" content={content.description} key="og:description" />
+                <meta property="og:title" content={content.title} key="og:title" />
+                <meta property="article:published_time" content={convertUnixTimeToISODateSrting(content.publishedAt)} key="article:published_time" />
+                <meta property="article:modified_time" content={convertUnixTimeToISODateSrting(content.updatedAt)} key="article:modified_time" />
+
+              </>
+            );
+          } else {
+            return(
+              <>
+                - Dynamic fields should be inserted by Next.js (excludes og:<abc>)
+                <title key="title">{siteName}</title>
+
+                - Generate by Next.js Metadata
+                <meta name="author" content={mainAuthor} key="author" />
+                <meta property="article:author" content={mainAuthor} key="article:author" />
+
+                - Dynamic og should not be inserted to head.
+                <meta property="og:title" content={siteName} key="og:title" />
+              </>
+            );
+          }
+        })()
+      }
+      */}
+      {/*
+      - Dynamic og should not be inserted to head.
+      <meta property="og:type" content={siteType} key="og:type" />
+      <meta property="og:url" content={currentUrl} key="og:url" />
+      <meta property="og:site_name" content={siteName} key="og:site_name" />
+      <meta property="og:locale" content={locale} key="og:locale" />
+      <meta property="og:type" content={siteType} key="og:type" />
+      <meta property="og:site_name" content={siteName} key="og:site_name" />
+      <meta property="og:locale" content={locale} key="og:locale" />
+      */}
+      {/*
+      {
+        (() => {
+          if (hasContent && content.tags) {
+            return(
+              content.tags.map((t => {
+                return(
+                  <meta property="article:tag" content={t.name} key={t.id} />
+                )
+              }))
+            )
+          }
+        })()
+      }
+      */}
+      {/*
+      - Generate by Next.js Metadata
+      <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
+
+      - Dynamic fields should be inserted by Next.js (excludes og:<abc>)
+      <meta name="robots" content={robotsMeta} key="robots" />
+      <meta property="og:image" content={defaultImage} key="og:image" />
+      */}
+      {
+        (() => {
+          if (injectMetas) {
+            return(
+              injectMetas.map((m => {
+                return(
+                  <meta name={m.name} content={m.content} key={m.name} />
+                )
+              }))
+            )
+          }
+        })()
+      }
+      <link href={favicon['url']} rel="icon" type={favicon['type']}/>
+    </head>
+  )
+}
+
+export default HeadMetaComponent;
+
+/* NOTE: Before migrate to AppRouter's head metas
 const HeadMetaComponent: React.FunctionComponent<{
   robotsMeta?: string
   content?: Content,
@@ -34,9 +118,8 @@ const HeadMetaComponent: React.FunctionComponent<{
     robotsMeta = defaultRobotsMeta;
   }
   const hasContent = content ? true : false;
-  /*
-    TODO: JSON+LD
-  */
+
+  // TODO: JSON + LD
   return(
     <head>
       <meta charSet="UTF-8"/>
@@ -106,3 +189,4 @@ const HeadMetaComponent: React.FunctionComponent<{
 }
 
 export default HeadMetaComponent;
+*/