update

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)
     }

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) {

src/app/archives/page.tsx

@@ -30,7 +30,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: 'archives',
+      // slug: 'archives',
       archives: archives
     }
   }

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",

src/app/articles/[...slug]/page.tsx

@@ -1,19 +1,50 @@
 '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));
 }
 
 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)
     }

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,

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

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}
       />

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}
       />

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 }

src/app/page.tsx

@@ -32,7 +32,7 @@ async function get(req: any) {
 
   return {
     props: {
-      slug: undefined,
+      // slug: undefined,
       articles: articles
     }
   }

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}
       />

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 (β)",

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
     }
   }

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,

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
     }
   }

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",