Move to astro

src/pages/[year]/[month]/[date]/[postid].astro

@@ -0,0 +1,109 @@
+---
+import "~/material/content.css";
+import type { GetStaticPaths } from "astro";
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
+import { format } from "date-fns";
+import TimeDistanceToNow from "~/components/TimeDistanceToNow/index.astro";
+import Regular from "~/layouts/Regular.astro";
+import { getPostParam } from "~/utils/posts";
+
+export const getStaticPaths = (async () => {
+  const posts = await getCollection("posts");
+
+  return posts.map((x) => ({
+    params: getPostParam(x),
+    props: {
+      post: x,
+    },
+  }));
+}) satisfies GetStaticPaths;
+
+const { post } = Astro.props;
+
+const { Content } = await render(post);
+---
+
+<Regular title={post.data.title}>
+  <div id="_layout">
+    <div></div>
+    <main class="content">
+      <h1 transition:name={`post:${post.id}:title`}>{post.data.title}</h1>
+      <div class="page-metadata">
+        <span>
+          <TimeDistanceToNow datetime={post.data.date.toISOString()}
+            >{format(post.data.date, "yyyy/MM/dd")}</TimeDistanceToNow
+          >
+          创建
+        </span>
+        {
+          post.data.updated && (
+            <span>
+              <TimeDistanceToNow datetime={post.data.updated.toISOString()}>
+                {format(post.data.updated, "yyyy/MM/dd")}
+              </TimeDistanceToNow>
+              更新
+            </span>
+          )
+        }
+        {post.data.visibility === "draft" && <span>This is a draft</span>}
+      </div>
+      <Content />
+    </main>
+    <div></div>
+  </div>
+</Regular>
+
+<style>
+  :global(:root) {
+    background-color: var(--palette-grey-200);
+  }
+
+  #_layout {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    margin: auto;
+
+    & > :global(*) {
+      overflow: hidden;
+      word-wrap: normal;
+    }
+  }
+
+  .page-metadata {
+    display: grid;
+    justify-content: flex-end;
+    margin-inline: 16px;
+    gap: 4px;
+    color: var(--palette-grey-700);
+
+    > * {
+      display: flex;
+      gap: 2px;
+      justify-content: flex-end;
+    }
+  }
+
+  main {
+    max-width: 70rem;
+    margin-top: 32px;
+    margin-bottom: calc(env(safe-area-insets-bottom, 16px) + 16px);
+    background-color: var(--palette-grey-50);
+    padding-block: 16px;
+    border-radius: 2px;
+  }
+</style>
+
+<script>
+  import { wrapElementsInClass } from "~/utils/dom";
+  import { renderAdvancedTablesOn } from "~/utils/table";
+
+  document.addEventListener("astro:page-load", () => {
+    wrapElementsInClass(document.querySelectorAll(".content > table"), [
+      "table-responsive",
+    ]);
+    renderAdvancedTablesOn(
+      document.querySelectorAll(".content > .table-responsive > table")
+    );
+  });
+</script>