refactor(blog/nuldoc): use object value directly instead of key-value pairs to construct attribute pairs

18 files changed, 195 insertions, 285 deletions

diff --git a/vhosts/blog/nuldoc-src/atom/generate.ts b/vhosts/blog/nuldoc-src/atom/generate.ts
index 7c8e2ea4..ee659211 100644
--- a/vhosts/blog/nuldoc-src/atom/generate.ts
+++ b/vhosts/blog/nuldoc-src/atom/generate.ts
@@ -52,7 +52,7 @@ export function generateFeedPageFromEntries(
 
   const xml = buildXmlTree(feed);
   return {
-    root: el("__root__", [], xml),
+    root: el("__root__", {}, xml),
     renderer: "xml",
     destFilePath: feedPath,
     href: feedPath,
@@ -62,24 +62,24 @@ export function generateFeedPageFromEntries(
 function buildXmlTree(feed: Feed) {
   return el(
     "feed",
-    [["xmlns", "http://www.w3.org/2005/Atom"]],
-    el("id", [], feed.id),
-    el("title", [], feed.title),
-    el("link", [["rel", "alternate"], ["href", feed.linkToAlternate]]),
-    el("link", [["rel", "self"], ["href", feed.linkToSelf]]),
-    el("author", [], el("name", [], feed.author)),
-    el("updated", [], feed.updated),
+    { xmlns: "http://www.w3.org/2005/Atom" },
+    el("id", {}, feed.id),
+    el("title", {}, feed.title),
+    el("link", { rel: "alternate", href: feed.linkToAlternate }),
+    el("link", { rel: "self", href: feed.linkToSelf }),
+    el("author", {}, el("name", {}, feed.author)),
+    el("updated", {}, feed.updated),
     ...feed.entries.map(
       (entry) =>
         el(
           "entry",
-          [],
-          el("id", [], entry.id),
-          el("link", [["rel", "alternate"], ["href", entry.linkToAlternate]]),
-          el("title", [], entry.title),
-          el("summary", [], entry.summary),
-          el("published", [], entry.published),
-          el("updated", [], entry.updated),
+          {},
+          el("id", {}, entry.id),
+          el("link", { rel: "alternate", href: entry.linkToAlternate }),
+          el("title", {}, entry.title),
+          el("summary", {}, entry.summary),
+          el("published", {}, entry.published),
+          el("updated", {}, entry.updated),
         ),
     ),
   );
diff --git a/vhosts/blog/nuldoc-src/components/global_footer.ts b/vhosts/blog/nuldoc-src/components/global_footer.ts
index 7499fd8a..7fdc8797 100644
--- a/vhosts/blog/nuldoc-src/components/global_footer.ts
+++ b/vhosts/blog/nuldoc-src/components/global_footer.ts
@@ -4,7 +4,7 @@ import { el, Element } from "../dom.ts";
 export function globalFooter(config: Config): Element {
   return el(
     "footer",
-    [["class", "footer"]],
+    { className: "footer" },
     `© ${config.blog.siteCopyrightYear} ${config.blog.author}`,
   );
 }
diff --git a/vhosts/blog/nuldoc-src/components/global_header.ts b/vhosts/blog/nuldoc-src/components/global_header.ts
index 93ff5ec9..166c48ff 100644
--- a/vhosts/blog/nuldoc-src/components/global_header.ts
+++ b/vhosts/blog/nuldoc-src/components/global_header.ts
@@ -4,38 +4,22 @@ import { el, Element } from "../dom.ts";
 export function globalHeader(config: Config): Element {
   return el(
     "header",
-    [["class", "header"]],
+    { className: "header" },
     el(
       "div",
-      [["class", "site-logo"]],
-      el("a", [["href", "/"]], config.blog.siteName),
+      { className: "site-logo" },
+      el("a", { href: "/" }, config.blog.siteName),
     ),
     el(
       "nav",
-      [["class", "nav"]],
+      { className: "nav" },
       el(
         "ul",
-        [],
-        el(
-          "li",
-          [],
-          el("a", [["href", "/about/"]], "About"),
-        ),
-        el(
-          "li",
-          [],
-          el("a", [["href", "/posts/"]], "Posts"),
-        ),
-        el(
-          "li",
-          [],
-          el("a", [["href", "/slides/"]], "Slides"),
-        ),
-        el(
-          "li",
-          [],
-          el("a", [["href", "/tags/"]], "Tags"),
-        ),
+        {},
+        el("li", {}, el("a", { href: "/about/" }, "About")),
+        el("li", {}, el("a", { href: "/posts/" }, "Posts")),
+        el("li", {}, el("a", { href: "/slides/" }, "Slides")),
+        el("li", {}, el("a", { href: "/tags/" }, "Tags")),
       ),
     ),
   );
diff --git a/vhosts/blog/nuldoc-src/components/page_layout.ts b/vhosts/blog/nuldoc-src/components/page_layout.ts
index 391305c1..a6b75d01 100644
--- a/vhosts/blog/nuldoc-src/components/page_layout.ts
+++ b/vhosts/blog/nuldoc-src/components/page_layout.ts
@@ -25,52 +25,31 @@ export async function pageLayout(
 ): Promise<Element> {
   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; ${metaCopyrightYear} ${config.blog.author}`,
-    ]]),
-    metaElement([["name", "description"], [
-      "content",
-      metaDescription,
-    ]]),
+    {},
+    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; ${metaCopyrightYear} ${config.blog.author}`,
+    }),
+    metaElement({ name: "description", content: metaDescription }),
     ...(metaKeywords.length === 0 ? [] : [
-      metaElement([["name", "keywords"], [
-        "content",
-        metaKeywords.join(","),
-      ]]),
-    ]),
-    metaElement([
-      ["property", "og:type"],
-      ["content", "article"],
-    ]),
-    metaElement([
-      ["property", "og:title"],
-      ["content", metaTitle],
-    ]),
-    metaElement([
-      ["property", "og:description"],
-      ["content", metaDescription],
-    ]),
-    metaElement([
-      ["property", "og:site_name"],
-      ["content", config.blog.siteName],
-    ]),
-    metaElement([
-      ["property", "og:locale"],
-      ["content", "ja_JP"],
+      metaElement({ name: "keywords", content: metaKeywords.join(",") }),
     ]),
+    metaElement({ property: "og:type", content: "article" }),
+    metaElement({ property: "og:title", content: metaTitle }),
+    metaElement({ property: "og:description", content: metaDescription }),
+    metaElement({ property: "og:site_name", content: config.blog.siteName }),
+    metaElement({ property: "og:locale", content: "ja_JP" }),
     ...(metaAtomFeedHref
       ? [linkElement("alternate", metaAtomFeedHref, "application/atom+xml")]
       : []),
     linkElement("icon", "/favicon.svg", "image/svg+xml"),
-    el("title", [], metaTitle),
+    el("title", {}, metaTitle),
     await stylesheetLinkElement("/style.css", config),
     ...(
       requiresSyntaxHighlight
@@ -80,13 +59,13 @@ export async function pageLayout(
   );
   return el(
     "html",
-    [["lang", "ja-JP"]],
+    { lang: "ja-JP" },
     head,
     body,
   );
 }
 
-function metaElement(attrs: [string, string][]): Element {
+function metaElement(attrs: Record<string, string>): Element {
   return el("meta", attrs);
 }
 
@@ -95,9 +74,9 @@ function linkElement(
   href: string,
   type: string | null,
 ): Element {
-  const attrs: [string, string][] = [["rel", rel], ["href", href]];
+  const attrs: Record<string, string> = { rel: rel, href: href };
   if (type !== null) {
-    attrs.push(["type", type]);
+    attrs.type = type;
   }
   return el("link", attrs);
 }
diff --git a/vhosts/blog/nuldoc-src/components/post_page_entry.ts b/vhosts/blog/nuldoc-src/components/post_page_entry.ts
index 408cec72..bd82eb95 100644
--- a/vhosts/blog/nuldoc-src/components/post_page_entry.ts
+++ b/vhosts/blog/nuldoc-src/components/post_page_entry.ts
@@ -10,36 +10,37 @@ import { dateToString } from "../revision.ts";
 export function postPageEntry(post: PostPage): Element {
   return el(
     "article",
-    [["class", "post-entry"]],
+    { className: "post-entry" },
     el(
       "a",
-      [["href", post.href]],
+      { href: post.href },
       el(
         "header",
-        [["class", "entry-header"]],
-        el("h2", [], post.title),
+        { className: "entry-header" },
+        el("h2", {}, post.title),
       ),
       el(
         "section",
-        [["class", "entry-content"]],
-        el("p", [], post.description),
+        { className: "entry-content" },
+        el("p", {}, post.description),
       ),
       el(
         "footer",
-        [["class", "entry-footer"]],
+        { className: "entry-footer" },
         el(
           "time",
-          [["datetime", dateToString(getPostPublishedDate(post))]],
+          { datetime: dateToString(getPostPublishedDate(post)) },
           dateToString(getPostPublishedDate(post)),
         ),
         " 投稿",
         ...(postHasAnyUpdates(post)
           ? [
             "、",
-            el("time", [[
-              "datetime",
+            el(
+              "time",
+              { "datetime": dateToString(getPostUpdatedDate(post)) },
               dateToString(getPostUpdatedDate(post)),
-            ]], dateToString(getPostUpdatedDate(post))),
+            ),
             " 更新",
           ]
           : []),
diff --git a/vhosts/blog/nuldoc-src/components/slide_page_entry.ts b/vhosts/blog/nuldoc-src/components/slide_page_entry.ts
index 84422c36..e64a4022 100644
--- a/vhosts/blog/nuldoc-src/components/slide_page_entry.ts
+++ b/vhosts/blog/nuldoc-src/components/slide_page_entry.ts
@@ -10,36 +10,37 @@ import { dateToString } from "../revision.ts";
 export function slidePageEntry(slide: SlidePage): Element {
   return el(
     "article",
-    [["class", "post-entry"]],
+    { className: "post-entry" },
     el(
       "a",
-      [["href", slide.href]],
+      { href: slide.href },
       el(
         "header",
-        [["class", "entry-header"]],
-        el("h2", [], slide.description),
+        { className: "entry-header" },
+        el("h2", {}, slide.description),
       ),
       el(
         "section",
-        [["class", "entry-content"]],
-        el("p", [], slide.title),
+        { className: "entry-content" },
+        el("p", {}, slide.title),
       ),
       el(
         "footer",
-        [["class", "entry-footer"]],
+        { className: "entry-footer" },
         el(
           "time",
-          [["datetime", dateToString(getPostPublishedDate(slide))]],
+          { datetime: dateToString(getPostPublishedDate(slide)) },
           dateToString(getPostPublishedDate(slide)),
         ),
         " 登壇",
         ...(postHasAnyUpdates(slide)
           ? [
             "、",
-            el("time", [[
-              "datetime",
+            el(
+              "time",
+              { "datetime": dateToString(getPostUpdatedDate(slide)) },
               dateToString(getPostUpdatedDate(slide)),
-            ]], dateToString(getPostUpdatedDate(slide))),
+            ),
             " 更新",
           ]
           : []),
diff --git a/vhosts/blog/nuldoc-src/components/utils.ts b/vhosts/blog/nuldoc-src/components/utils.ts
index 5d57d033..ce693100 100644
--- a/vhosts/blog/nuldoc-src/components/utils.ts
+++ b/vhosts/blog/nuldoc-src/components/utils.ts
@@ -9,17 +9,17 @@ export async function stylesheetLinkElement(
 ): Promise<Element> {
   const filePath = join(Deno.cwd(), config.locations.staticDir, fileName);
   const hash = await calculateFileHash(filePath);
-  return el("link", [["rel", "stylesheet"], ["href", `${fileName}?h=${hash}`]]);
+  return el("link", { rel: "stylesheet", href: `${fileName}?h=${hash}` });
 }
 
 export async function staticScriptElement(
   fileName: string,
-  attrs: [string, string][],
+  attrs: Record<string, string>,
   config: Config,
 ): Promise<Element> {
   const filePath = join(Deno.cwd(), config.locations.staticDir, fileName);
   const hash = await calculateFileHash(filePath);
-  return el("script", [["src", `${fileName}?h=${hash}`], ...attrs]);
+  return el("script", { src: `${fileName}?h=${hash}`, ...attrs });
 }
 
 async function calculateFileHash(
diff --git a/vhosts/blog/nuldoc-src/dom.ts b/vhosts/blog/nuldoc-src/dom.ts
index 0358d53b..bc10e134 100644
--- a/vhosts/blog/nuldoc-src/dom.ts
+++ b/vhosts/blog/nuldoc-src/dom.ts
@@ -89,13 +89,13 @@ function makeTextNode(content: string): Text {
 
 export function el(
   name: string,
-  attrs: [string, string][],
+  attrs: Record<string, string>,
   ...children: (Node | string)[]
 ): Element {
   return {
     kind: "element",
     name: name,
-    attributes: new Map(attrs),
+    attributes: new Map(Object.entries(attrs)),
     children: children.map((n) => typeof n === "string" ? makeTextNode(n) : n),
   };
 }
diff --git a/vhosts/blog/nuldoc-src/pages/about.ts b/vhosts/blog/nuldoc-src/pages/about.ts
index 5ee55629..b5411eb7 100644
--- a/vhosts/blog/nuldoc-src/pages/about.ts
+++ b/vhosts/blog/nuldoc-src/pages/about.ts
@@ -17,81 +17,66 @@ export async function generateAboutPage(
 ): Promise<AboutPage> {
   const body = el(
     "body",
-    [["class", "single"]],
+    { className: "single" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "article",
-        [["class", "post-single"]],
+        { className: "post-single" },
         el(
           "header",
-          [["class", "post-header"]],
-          el(
-            "h1",
-            [["class", "post-title"]],
-            "nsfisis",
-          ),
+          { className: "post-header" },
+          el("h1", { className: "post-title" }, "nsfisis"),
           el(
             "div",
-            [["class", "my-icon"]],
-            await staticScriptElement("/p5.min.js", [], config),
-            await staticScriptElement("/my-icon.js", [], config),
-            el("div", [["id", "p5jsMyIcon"]]),
+            { className: "my-icon" },
+            await staticScriptElement("/p5.min.js", {}, config),
+            await staticScriptElement("/my-icon.js", {}, config),
+            el("div", { id: "p5jsMyIcon" }),
             el(
               "noscript",
-              [],
-              el(
-                "img",
-                [["src", "/favicon.svg"]],
-              ),
+              {},
+              el("img", { src: "/favicon.svg" }),
             ),
           ),
         ),
         el(
           "div",
-          [["class", "post-content"]],
+          { className: "post-content" },
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [],
-              "読み方",
-            ),
+            {},
+            el("h2", {}, "読み方"),
             el(
               "p",
-              [],
+              {},
               "読み方は決めていません。音にする必要があるときは本名である「いまむら」をお使いください。",
             ),
           ),
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [],
-              "アカウント",
-            ),
+            {},
+            el("h2", {}, "アカウント"),
             el(
               "ul",
-              [],
+              {},
               el(
                 "li",
-                [],
+                {},
                 el(
                   "a",
-                  [["href", "https://twitter.com/nsfisis"]],
+                  { href: "https://twitter.com/nsfisis" },
                   "Twitter (現 𝕏): @nsfisis",
                 ),
               ),
               el(
                 "li",
-                [],
+                {},
                 el(
                   "a",
-                  [["href", "https://github.com/nsfisis"]],
+                  { href: "https://github.com/nsfisis" },
                   "GitHub: @nsfisis",
                 ),
               ),
@@ -99,22 +84,18 @@ export async function generateAboutPage(
           ),
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [],
-              "仕事",
-            ),
+            {},
+            el("h2", {}, "仕事"),
             el(
               "ul",
-              [],
+              {},
               el(
                 "li",
-                [],
+                {},
                 "2021-01～現在: ",
                 el(
                   "a",
-                  [["href", "https://www.dgcircus.com/"]],
+                  { href: "https://www.dgcircus.com/" },
                   "デジタルサーカス株式会社",
                 ),
               ),
@@ -122,15 +103,11 @@ export async function generateAboutPage(
           ),
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [],
-              "登壇",
-            ),
+            {},
+            el("h2", {}, "登壇"),
             el(
               "ul",
-              [],
+              {},
               ...Array.from(slides).sort((a, b) => {
                 const ta = dateToString(getPostPublishedDate(a));
                 const tb = dateToString(getPostPublishedDate(b));
@@ -140,10 +117,10 @@ export async function generateAboutPage(
               }).map((slide) =>
                 el(
                   "li",
-                  [],
+                  {},
                   el(
                     "a",
-                    [["href", slide.href]],
+                    { href: slide.href },
                     `${
                       dateToString(getPostPublishedDate(slide))
                     }: ${slide.event} (${slide.talkType})`,
@@ -171,7 +148,7 @@ export async function generateAboutPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/about/index.html",
     href: "/about/",
diff --git a/vhosts/blog/nuldoc-src/pages/home.ts b/vhosts/blog/nuldoc-src/pages/home.ts
index 773f1d0d..86a767c0 100644
--- a/vhosts/blog/nuldoc-src/pages/home.ts
+++ b/vhosts/blog/nuldoc-src/pages/home.ts
@@ -10,63 +10,63 @@ export type HomePage = Page;
 export async function generateHomePage(config: Config): Promise<HomePage> {
   const body = el(
     "body",
-    [["class", "single"]],
+    { className: "single" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "article",
-        [["class", "post-single"]],
+        { className: "post-single" },
         el(
           "article",
-          [["class", "post-entry"]],
+          { className: "post-entry" },
           el(
             "a",
-            [["href", "/about/"]],
+            { href: "/about/" },
             el(
               "header",
-              [["class", "entry-header"]],
-              el("h2", [], "About"),
+              { className: "entry-header" },
+              el("h2", {}, "About"),
             ),
           ),
         ),
         el(
           "article",
-          [["class", "post-entry"]],
+          { className: "post-entry" },
           el(
             "a",
-            [["href", "/posts/"]],
+            { href: "/posts/" },
             el(
               "header",
-              [["class", "entry-header"]],
-              el("h2", [], "Posts"),
+              { className: "entry-header" },
+              el("h2", {}, "Posts"),
             ),
           ),
         ),
         el(
           "article",
-          [["class", "post-entry"]],
+          { className: "post-entry" },
           el(
             "a",
-            [["href", "/slides/"]],
+            { href: "/slides/" },
             el(
               "header",
-              [["class", "entry-header"]],
-              el("h2", [], "Slides"),
+              { className: "entry-header" },
+              el("h2", {}, "Slides"),
             ),
           ),
         ),
         el(
           "article",
-          [["class", "post-entry"]],
+          { className: "post-entry" },
           el(
             "a",
-            [["href", "/tags/"]],
+            { href: "/tags/" },
             el(
               "header",
-              [["class", "entry-header"]],
-              el("h2", [], "Tags"),
+              { className: "entry-header" },
+              el("h2", {}, "Tags"),
             ),
           ),
         ),
@@ -89,7 +89,7 @@ export async function generateHomePage(config: Config): Promise<HomePage> {
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/index.html",
     href: "/",
diff --git a/vhosts/blog/nuldoc-src/pages/not_found.ts b/vhosts/blog/nuldoc-src/pages/not_found.ts
index ab1b3d08..bb70d8ac 100644
--- a/vhosts/blog/nuldoc-src/pages/not_found.ts
+++ b/vhosts/blog/nuldoc-src/pages/not_found.ts
@@ -12,19 +12,15 @@ export async function generateNotFoundPage(
 ): Promise<NotFoundPage> {
   const body = el(
     "body",
-    [["class", "single"]],
+    { className: "single" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "article",
-        [],
-        el(
-          "div",
-          [["class", "not-found"]],
-          "404",
-        ),
+        {},
+        el("div", { className: "not-found" }, "404"),
       ),
     ),
     globalFooter(config),
@@ -43,7 +39,7 @@ export async function generateNotFoundPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/404.html",
     href: "/404.html",
diff --git a/vhosts/blog/nuldoc-src/pages/post.ts b/vhosts/blog/nuldoc-src/pages/post.ts
index 17670801..c0c3bb2e 100644
--- a/vhosts/blog/nuldoc-src/pages/post.ts
+++ b/vhosts/blog/nuldoc-src/pages/post.ts
@@ -41,33 +41,29 @@ export async function generatePostPage(
 ): Promise<PostPage> {
   const body = el(
     "body",
-    [["class", "single"]],
+    { className: "single" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "article",
-        [["class", "post-single"]],
+        { className: "post-single" },
         el(
           "header",
-          [["class", "post-header"]],
-          el(
-            "h1",
-            [["class", "post-title"]],
-            doc.title,
-          ),
+          { className: "post-header" },
+          el("h1", { className: "post-title" }, doc.title),
           ...(doc.tags.length === 0 ? [] : [
             el(
               "ul",
-              [["class", "post-tags"]],
+              { className: "post-tags" },
               ...doc.tags.map((slug) =>
                 el(
                   "li",
-                  [["class", "tag"]],
+                  { className: "tag" },
                   el(
                     "a",
-                    [["href", `/tags/${slug}/`]],
+                    { href: `/tags/${slug}/` },
                     getTagLabel(config, slug),
                   ),
                 )
@@ -77,25 +73,21 @@ export async function generatePostPage(
         ),
         el(
           "div",
-          [["class", "post-content"]],
+          { className: "post-content" },
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [["id", "changelog"]],
-              "更新履歴",
-            ),
+            {},
+            el("h2", { id: "changelog" }, "更新履歴"),
             el(
               "ol",
-              [],
+              {},
               ...doc.revisions.map((rev) =>
                 el(
                   "li",
-                  [["class", "revision"]],
+                  { className: "revision" },
                   el(
                     "time",
-                    [["datetime", dateToString(rev.date)]],
+                    { datetime: dateToString(rev.date) },
                     dateToString(rev.date),
                   ),
                   `: ${rev.remark}`,
@@ -138,7 +130,7 @@ export async function generatePostPage(
     "index.html",
   );
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: destFilePath,
     href: destFilePath.replace("index.html", ""),
diff --git a/vhosts/blog/nuldoc-src/pages/post_list.ts b/vhosts/blog/nuldoc-src/pages/post_list.ts
index 2da2b2c6..40df8ed9 100644
--- a/vhosts/blog/nuldoc-src/pages/post_list.ts
+++ b/vhosts/blog/nuldoc-src/pages/post_list.ts
@@ -18,19 +18,15 @@ export async function generatePostListPage(
 
   const body = el(
     "body",
-    [["class", "list"]],
+    { className: "list" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "header",
-        [["class", "page-header"]],
-        el(
-          "h1",
-          [],
-          pageTitle,
-        ),
+        { className: "page-header" },
+        el("h1", {}, pageTitle),
       ),
       ...Array.from(posts).sort((a, b) => {
         const ta = dateToString(getPostPublishedDate(a));
@@ -57,7 +53,7 @@ export async function generatePostListPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/posts/index.html",
     href: "/posts/",
diff --git a/vhosts/blog/nuldoc-src/pages/slide.ts b/vhosts/blog/nuldoc-src/pages/slide.ts
index b283beb7..15a18bb1 100644
--- a/vhosts/blog/nuldoc-src/pages/slide.ts
+++ b/vhosts/blog/nuldoc-src/pages/slide.ts
@@ -29,33 +29,29 @@ export async function generateSlidePage(
 ): Promise<SlidePage> {
   const body = el(
     "body",
-    [["class", "single"]],
+    { className: "single" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "article",
-        [["class", "post-single"]],
+        { className: "post-single" },
         el(
           "header",
-          [["class", "post-header"]],
-          el(
-            "h1",
-            [["class", "post-title"]],
-            slide.title,
-          ),
+          { className: "post-header" },
+          el("h1", { className: "post-title" }, slide.title),
           ...(slide.tags.length === 0 ? [] : [
             el(
               "ul",
-              [["class", "post-tags"]],
+              { className: "post-tags" },
               ...slide.tags.map((slug) =>
                 el(
                   "li",
-                  [["class", "tag"]],
+                  { className: "tag" },
                   el(
                     "a",
-                    [["href", `/tags/${slug}/`]],
+                    { href: `/tags/${slug}/` },
                     getTagLabel(config, slug),
                   ),
                 )
@@ -65,25 +61,21 @@ export async function generateSlidePage(
         ),
         el(
           "div",
-          [["class", "post-content"]],
+          { className: "post-content" },
           el(
             "section",
-            [],
-            el(
-              "h2",
-              [["id", "changelog"]],
-              "更新履歴",
-            ),
+            {},
+            el("h2", { id: "changelog" }, "更新履歴"),
             el(
               "ol",
-              [],
+              {},
               ...slide.revisions.map((rev) =>
                 el(
                   "li",
-                  [["class", "revision"]],
+                  { className: "revision" },
                   el(
                     "time",
-                    [["datetime", dateToString(rev.date)]],
+                    { datetime: dateToString(rev.date) },
                     dateToString(rev.date),
                   ),
                   `: ${rev.remark}`,
@@ -93,15 +85,15 @@ export async function generateSlidePage(
           ),
           el(
             "canvas",
-            [["id", "slide"], ["data-slide-link", slide.slideLink]],
+            { id: "slide", "data-slide-link": slide.slideLink },
           ),
           el(
             "div",
-            [],
-            el("button", [["id", "prev"]], "Prev"),
-            el("button", [["id", "next"]], "Next"),
+            {},
+            el("button", { id: "prev" }, "Prev"),
+            el("button", { id: "next" }, "Next"),
           ),
-          await staticScriptElement("/slide.js", [["type", "module"]], config),
+          await staticScriptElement("/slide.js", { type: "module" }, config),
         ),
       ),
     ),
@@ -127,7 +119,7 @@ export async function generateSlidePage(
     "index.html",
   );
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: destFilePath,
     href: destFilePath.replace("index.html", ""),
diff --git a/vhosts/blog/nuldoc-src/pages/slide_list.ts b/vhosts/blog/nuldoc-src/pages/slide_list.ts
index a77a567e..53b2d2b1 100644
--- a/vhosts/blog/nuldoc-src/pages/slide_list.ts
+++ b/vhosts/blog/nuldoc-src/pages/slide_list.ts
@@ -19,19 +19,15 @@ export async function generateSlideListPage(
 
   const body = el(
     "body",
-    [["class", "list"]],
+    { className: "list" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "header",
-        [["class", "page-header"]],
-        el(
-          "h1",
-          [],
-          pageTitle,
-        ),
+        { className: "page-header" },
+        el("h1", {}, pageTitle),
       ),
       ...Array.from(slides).sort((a, b) => {
         const ta = dateToString(getPostPublishedDate(a));
@@ -58,7 +54,7 @@ export async function generateSlideListPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/slides/index.html",
     href: "/slides/",
diff --git a/vhosts/blog/nuldoc-src/pages/tag.ts b/vhosts/blog/nuldoc-src/pages/tag.ts
index 174f84c3..32711f7e 100644
--- a/vhosts/blog/nuldoc-src/pages/tag.ts
+++ b/vhosts/blog/nuldoc-src/pages/tag.ts
@@ -26,12 +26,12 @@ export async function generateTagPage(
 
   const body = el(
     "body",
-    [["class", "list"]],
+    { className: "list" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
-      el("header", [["class", "page-header"]], el("h1", [], pageTitle)),
+      { className: "main" },
+      el("header", { className: "page-header" }, el("h1", {}, pageTitle)),
       ...pages.map((page) =>
         "event" in page ? slidePageEntry(page) : postPageEntry(page)
       ),
@@ -53,7 +53,7 @@ export async function generateTagPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: `/tags/${tagSlug}/index.html`,
     href: `/tags/${tagSlug}/`,
diff --git a/vhosts/blog/nuldoc-src/pages/tag_list.ts b/vhosts/blog/nuldoc-src/pages/tag_list.ts
index f2e25f6d..57f6a293 100644
--- a/vhosts/blog/nuldoc-src/pages/tag_list.ts
+++ b/vhosts/blog/nuldoc-src/pages/tag_list.ts
@@ -16,19 +16,15 @@ export async function generateTagListPage(
 
   const body = el(
     "body",
-    [["class", "list"]],
+    { className: "list" },
     globalHeader(config),
     el(
       "main",
-      [["class", "main"]],
+      { className: "main" },
       el(
         "header",
-        [["class", "page-header"]],
-        el(
-          "h1",
-          [],
-          pageTitle,
-        ),
+        { className: "page-header" },
+        el("h1", {}, pageTitle),
       ),
       ...Array.from(tags).sort((a, b) => {
         const ta = a.tagSlug;
@@ -39,18 +35,18 @@ export async function generateTagListPage(
       }).map((tag) =>
         el(
           "article",
-          [["class", "post-entry"]],
+          { className: "post-entry" },
           el(
             "a",
-            [["href", tag.href]],
+            { href: tag.href },
             el(
               "header",
-              [["class", "entry-header"]],
-              el("h2", [], tag.tagLabel),
+              { className: "entry-header" },
+              el("h2", {}, tag.tagLabel),
             ),
             el(
               "footer",
-              [["class", "entry-footer"]],
+              { className: "entry-footer" },
               (() => {
                 const posts = tag.numOfPosts === 0
                   ? ""
@@ -81,7 +77,7 @@ export async function generateTagListPage(
   );
 
   return {
-    root: el("__root__", [], html),
+    root: el("__root__", {}, html),
     renderer: "html",
     destFilePath: "/tags/index.html",
     href: "/tags/",
diff --git a/vhosts/blog/nuldoc-src/renderers/html.ts b/vhosts/blog/nuldoc-src/renderers/html.ts
index df211000..dee9a0cc 100644
--- a/vhosts/blog/nuldoc-src/renderers/html.ts
+++ b/vhosts/blog/nuldoc-src/renderers/html.ts
@@ -174,7 +174,7 @@ function elementNodeToHtmlText(e: Element, ctx: Context): string {
       s += " ";
       for (let i = 0; i < attributes.length; i++) {
         const [name, value] = attributes[i];
-        s += `${name}="${value}"`;
+        s += `${name === "className" ? "class" : name}="${value}"`;
         if (i !== attributes.length - 1) {
           s += " ";
         }