1 files changed, 66 insertions, 0 deletions
diff --git a/services/blog/nuldoc-src/pages/PostPage.tsx b/services/blog/nuldoc-src/pages/PostPage.tsx
new file mode 100644
index 00000000..97a24048
--- /dev/null
+++ b/services/blog/nuldoc-src/pages/PostPage.tsx
@@ -0,0 +1,66 @@
+import GlobalFooter from "../components/GlobalFooter.tsx";
+import GlobalHeader from "../components/GlobalHeader.tsx";
+import PageLayout from "../components/PageLayout.tsx";
+import { Config, getTagLabel } from "../config.ts";
+import { Element } from "../dom.ts";
+import { Document } from "../djot/document.ts";
+import { dateToString } from "../revision.ts";
+import { getPostPublishedDate } from "../generators/post.ts";
+
+export default function PostPage(
+  doc: Document,
+  config: Config,
+) {
+  return (
+    <PageLayout
+      metaCopyrightYear={getPostPublishedDate(doc).year}
+      metaDescription={doc.description}
+      metaKeywords={doc.tags.map((slug) => getTagLabel(config, slug))}
+      metaTitle={`${doc.title}｜${config.blog.siteName}`}
+      requiresSyntaxHighlight
+      config={config}
+    >
+      <body className="single">
+        <GlobalHeader config={config} />
+        <main className="main">
+          <article className="post-single">
+            <header className="post-header">
+              <h1 className="post-title">{doc.title}</h1>
+              {doc.tags.length !== 0 && (
+                <ul className="post-tags">
+                  {doc.tags.map((slug) => (
+                    <li className="tag">
+                      <a href={`/tags/${slug}/`}>{getTagLabel(config, slug)}</a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </header>
+            <div className="post-content">
+              <section id="changelog">
+                <h2>
+                  <a href="#changelog">更新履歴</a>
+                </h2>
+                <ol>
+                  {doc.revisions.map((rev) => (
+                    <li className="revision">
+                      <time datetime={dateToString(rev.date)}>
+                        {dateToString(rev.date)}
+                      </time>
+                      {`: ${rev.remark}`}
+                    </li>
+                  ))}
+                </ol>
+              </section>
+              {
+                // TODO: refactor
+                (doc.root.children[0] as Element).children
+              }
+            </div>
+          </article>
+        </main>
+        <GlobalFooter config={config} />
+      </body>
+    </PageLayout>
+  );
+}