refactor: add components/*.ts for shared components

1 files changed, 18 insertions, 73 deletions

diff --git a/nuldoc-src/pages/tag.ts b/nuldoc-src/pages/tag.ts
index 51aedcd..c9eaf7e 100644
--- a/nuldoc-src/pages/tag.ts
+++ b/nuldoc-src/pages/tag.ts
@@ -1,13 +1,10 @@
+import { globalFooter } from "../components/global_footer.ts";
+import { globalHeader } from "../components/global_header.ts";
+import { pageLayout } from "../components/page_layout.ts";
 import { Config } from "../config.ts";
+import { el, text } from "../dom.ts";
 import { Page } from "../page.ts";
 import { getPostCreatedDate, getPostUpdatedDate, PostPage } from "./post.ts";
-import {
-  el,
-  linkElement,
-  metaElement,
-  stylesheetLinkElement,
-  text,
-} from "./utils.ts";
 
 export type TagPage = Page;
 
@@ -20,64 +17,10 @@ export async function generateTagPage(
     (config.blog.tagLabels as { [key: string]: string })[tagSlug];
   const pageTitle = `タグ「${tagLabel}」一覧`;
 
-  const headChildren = [
-    metaElement([["charset", "UTF-8"]]),
-    metaElement([["name", "viewport"], [
-      "content",
-      "width=device-width, initial-scale=1.0",
-    ]]),
-    metaElement([["name", "author"], ["content", config.blog.author]]),
-    metaElement([["name", "copyright"], [
-      "content",
-      `© ${
-        getPostCreatedDate(posts[posts.length - 1]).substring(0, 4)
-      } ${config.blog.author}`,
-    ]]),
-    metaElement([["name", "description"], [
-      "content",
-      `タグ「${tagLabel}」のついた記事一覧`,
-    ]]),
-    metaElement([["name", "keywords"], ["content", tagLabel]]),
-    linkElement("icon", "/favicon.svg", "image/svg+xml"),
-    el("title", [], text(`${pageTitle} | ${config.blog.siteName}`)),
-    await stylesheetLinkElement("/style.css", config),
-  ];
-  const head = el("head", [], ...headChildren);
   const body = el(
     "body",
     [["class", "list"]],
-    el(
-      "header",
-      [["class", "header"]],
-      el(
-        "nav",
-        [["class", "nav"]],
-        el(
-          "ul",
-          [],
-          el(
-            "li",
-            [["class", "logo"]],
-            el("a", [["href", "/"]], text(config.blog.siteName)),
-          ),
-          el(
-            "li",
-            [],
-            el("a", [["href", "/about"]], text("About")),
-          ),
-          el(
-            "li",
-            [],
-            el("a", [["href", "/posts"]], text("Posts")),
-          ),
-          el(
-            "li",
-            [],
-            el("a", [["href", "/slides"]], text("Slides")),
-          ),
-        ),
-      ),
-    ),
+    globalHeader(config),
     el(
       "main",
       [["class", "main"]],
@@ -122,19 +65,21 @@ export async function generateTagPage(
         )
       ),
     ),
-    el(
-      "footer",
-      [["class", "footer"]],
-      text(
-        `© ${config.blog.siteCopyrightYear} ${config.blog.author}`,
-      ),
-    ),
+    globalFooter(config),
   );
-  const html = el(
-    "html",
-    [["lang", "ja-JP"]],
-    head,
+
+  const html = await pageLayout(
+    {
+      metaCopyrightYear: parseInt(
+        getPostCreatedDate(posts[posts.length - 1]).substring(0, 4),
+      ),
+      metaDescription: `タグ「${tagLabel}」のついた記事一覧`,
+      metaKeywords: [tagLabel],
+      metaTitle: pageTitle,
+      requiresSyntaxHighlight: false,
+    },
     body,
+    config,
   );
 
   return {