summaryrefslogtreecommitdiffhomepage
path: root/vhosts/blog/nuldoc-src/pages/PostPage.tsx
blob: e6aa83aa431028ae6221402de612069efd9de195 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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 "../ndoc/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>
                <h2 id="changelog">更新履歴</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
              }
              {
                // TODO: footnotes
                // <div id="footnotes">
                //   <% for footnote in footnotes %>
                //     <div class="footnote" id="_footnotedef_<%= footnote.index %>">
                //       <a href="#_footnoteref_<%= footnote.index %>"><%= footnote.index %></a>. <%= footnote.text %>
                //     </div>
                //   <% end %>
                // </div>
              }
            </div>
          </article>
        </main>
        <GlobalFooter config={config} />
      </body>
    </PageLayout>
  );
}