refactor: add components/*.ts for shared components

5 files changed, 71 insertions, 345 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 {
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();
diff --git a/nuldoc-src/pages/post_list.ts b/nuldoc-src/pages/post_list.ts
index e22316e..09d1942 100644
--- a/nuldoc-src/pages/post_list.ts
+++ b/nuldoc-src/pages/post_list.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 PostListPage = Page;
 
@@ -17,59 +14,10 @@ export async function generatePostListPage(
 ): Promise<PostListPage> {
   const pageTitle = "投稿一覧";
 
-  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(`${pageTitle} | ${config.blog.siteName}`)),
-    await stylesheetLinkElement("/style.css", config),
-  );
   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"]],
@@ -128,19 +76,19 @@ export async function generatePostListPage(
         )
       ),
     ),
-    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: pageTitle,
+      requiresSyntaxHighlight: false,
+    },
     body,
+    config,
   );
 
   return {
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",
-      `&copy; ${
-        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(
-        `&copy; ${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 {
diff --git a/nuldoc-src/pages/utils.ts b/nuldoc-src/pages/utils.ts
deleted file mode 100644
index 018c460..0000000
--- a/nuldoc-src/pages/utils.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { join } from "std/path/mod.ts";
-import { crypto, toHashString } from "std/crypto/mod.ts";
-import { Element, Node, Text } from "../dom.ts";
-import { Config } from "../config.ts";
-
-export function text(content: string): Text {
-  return {
-    kind: "text",
-    content: content,
-    raw: false,
-  };
-}
-
-export function el(
-  name: string,
-  attrs: [string, string][],
-  ...children: Node[]
-): Element {
-  return {
-    kind: "element",
-    name: name,
-    attributes: new Map(attrs),
-    children: children,
-  };
-}
-
-export async function stylesheetLinkElement(
-  fileName: string,
-  config: Config,
-): Promise<Element> {
-  const filePath = join(Deno.cwd(), config.locations.staticDir, fileName);
-  const content = (await Deno.readFile(filePath)).buffer;
-  const hash = toHashString(await crypto.subtle.digest("MD5", content), "hex");
-  return el("link", [["rel", "stylesheet"], ["href", `${fileName}?h=${hash}`]]);
-}
-
-export function metaElement(attrs: [string, string][]): Element {
-  return el("meta", attrs);
-}
-
-export function linkElement(
-  rel: string,
-  href: string,
-  type: string | null,
-): Element {
-  const attrs: [string, string][] = [["rel", rel], ["href", href]];
-  if (type !== null) {
-    attrs.push(["type", type]);
-  }
-  return el("link", attrs);
-}