refactor: add components/*.ts for shared components

1 files changed, 21 insertions, 82 deletions

diff --git a/nuldoc-src/pages/post.ts b/nuldoc-src/pages/post.ts
index a431c37..597a667 100644
--- a/nuldoc-src/pages/post.ts
+++ b/nuldoc-src/pages/post.ts
@@ -1,16 +1,12 @@
 import { join } from "std/path/mod.ts";
+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 { Element } from "../dom.ts";
+import { el, Element, text } from "../dom.ts";
 import { Document } from "../docbook/document.ts";
 import { Page } from "../page.ts";
 import { Revision } from "../revision.ts";
-import {
-  el,
-  linkElement,
-  metaElement,
-  stylesheetLinkElement,
-  text,
-} from "./utils.ts";
 
 export interface PostPage extends Page {
   title: string;
@@ -31,71 +27,10 @@ export async function generatePostPage(
   doc: Document,
   config: Config,
 ): Promise<PostPage> {
-  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",
-      `&copy; ${getPostCreatedDate(doc).substring(0, 4)} ${config.blog.author}`,
-    ]]),
-    metaElement([["name", "description"], ["content", doc.summary]]),
-  ];
-  if (doc.tags.length !== 0) {
-    headChildren.push(
-      metaElement([["name", "keywords"], [
-        "content",
-        doc.tags.map((slug) =>
-          (config.blog.tagLabels as { [key: string]: string })[slug]
-        ).join(","),
-      ]]),
-    );
-  }
-  headChildren.push(linkElement("icon", "/favicon.svg", "image/svg+xml"));
-  headChildren.push(
-    el("title", [], text(`${doc.title} | ${config.blog.siteName}`)),
-  );
-  headChildren.push(await stylesheetLinkElement("/style.css", config));
-  headChildren.push(await stylesheetLinkElement("/hl.css", config));
-  const head = el("head", [], ...headChildren);
   const body = el(
     "body",
     [["class", "single"]],
-    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"]],
@@ -120,7 +55,7 @@ export async function generatePostPage(
                   [["class", "tag"]],
                   el(
                     "a",
-                    [["href", `/tags/${slug}`]],
+                    [["href", `/tags/${slug}/`]],
                     text(
                       (config.blog.tagLabels as {
                         [key: string]: string;
@@ -173,19 +108,23 @@ export async function generatePostPage(
         ),
       ),
     ),
-    el(
-      "footer",
-      [["class", "footer"]],
-      text(
-        `&copy; ${config.blog.siteCopyrightYear} ${config.blog.author}`,
-      ),
-    ),
+    globalFooter(config),
   );
-  const html = el(
-    "html",
-    [["lang", "ja-JP"]],
-    head,
+
+  const html = await pageLayout(
+    {
+      metaCopyrightYear: parseInt(
+        getPostCreatedDate(doc).substring(0, 4),
+      ),
+      metaDescription: doc.summary,
+      metaKeywords: doc.tags.map((slug) =>
+        (config.blog.tagLabels as { [key: string]: string })[slug]
+      ),
+      metaTitle: doc.title,
+      requiresSyntaxHighlight: true,
+    },
     body,
+    config,
   );
 
   const cwd = Deno.cwd();