110 lines
2.6 KiB
Text
110 lines
2.6 KiB
Text
|
---
|
||
|
|
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>
|