refactor: add components/*.ts for shared components

1 files changed, 16 insertions, 71 deletions

diff --git a/nuldoc-src/pages/about.ts b/nuldoc-src/pages/about.ts
index bba4031..4f98930 100644
--- a/nuldoc-src/pages/about.ts
+++ b/nuldoc-src/pages/about.ts
@@ -1,72 +1,17 @@
+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 {
-  el,
-  linkElement,
-  metaElement,
-  stylesheetLinkElement,
-  text,
-} from "./utils.ts";
 
 export type AboutPage = Page;
 
 export async function generateAboutPage(config: Config): Promise<AboutPage> {
-  const head = el(
-    "head",
-    [],
-    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; ${config.blog.siteCopyrightYear} ${config.blog.author}`,
-    ]]),
-    metaElement([["name", "description"], [
-      "content",
-      "このサイトの著者について",
-    ]]),
-    linkElement("icon", "/favicon.svg", "image/svg+xml"),
-    el("title", [], text(`About | ${config.blog.siteName}`)),
-    await stylesheetLinkElement("/style.css", config),
-  );
   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"]],
@@ -89,19 +34,19 @@ export async function generateAboutPage(config: Config): Promise<AboutPage> {
         ),
       ),
     ),
-    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: config.blog.siteCopyrightYear,
+      metaDescription: "このサイトの著者について",
+      metaKeywords: [],
+      metaTitle: "About",
+      requiresSyntaxHighlight: false,
+    },
     body,
+    config,
   );
 
   return {