104 lines
2.4 KiB
Plaintext
104 lines
2.4 KiB
Plaintext
---
|
|
import Layout from "./Layout.astro";
|
|
import TOC from "@components/TOC.astro";
|
|
import { useTranslatedPath, useTranslations } from "@i18n/utils";
|
|
import type { MarkdownLayoutProps } from "astro";
|
|
|
|
type Props = MarkdownLayoutProps<{
|
|
title: string;
|
|
date: Date;
|
|
links?: string[][];
|
|
toc?: boolean;
|
|
cover?: string;
|
|
}>;
|
|
|
|
const { frontmatter, headings } = Astro.props;
|
|
const t = useTranslations(Astro.url);
|
|
const { title, url, date: dateString, links, toc, cover } = frontmatter;
|
|
const collection = url?.split("/")[2];
|
|
//@ts-ignore
|
|
const backlinkContent = t(`nav.${collection}`).toLowerCase();
|
|
const date = new Date(dateString);
|
|
const path = useTranslatedPath(Astro.url);
|
|
---
|
|
|
|
<Layout title={title} image={cover}>
|
|
<div class="top-info flex items-center place-content-between m-y-2">
|
|
<a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}
|
|
><span class="i-tabler-arrow-left"></span>
|
|
{backlinkContent}</a
|
|
>
|
|
|
|
{
|
|
links?.length && (
|
|
<div class="links flex gap-4">
|
|
{links.map(([title, url]: string[]) => (
|
|
<a href={url} class="flex external items-center gap-[4px]">
|
|
{title}
|
|
{title === "git" ? (
|
|
<span class="i-tabler-brand-git w-4 h-4" />
|
|
) : (
|
|
<span class="i-tabler-external-link w-4 h-3" />
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="date opacity-50">
|
|
{
|
|
date.toLocaleString("en-US", {
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
<article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
|
|
<div class="flex flex-col gap-1">
|
|
<h1 class="text-4xl">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
{toc && <TOC headings={headings} />}
|
|
<slot />
|
|
</article>
|
|
</Layout>
|
|
|
|
<style>
|
|
article.layout-transparent {
|
|
padding: 20px;
|
|
background: var(--background);
|
|
}
|
|
|
|
article :global(picture) {
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
article :global(.toc-post) {
|
|
display: none;
|
|
}
|
|
|
|
article.show-toc :global(.toc-post) {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
article :global(.toc-post > ol ol) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
:global(.toc-post) {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 80vh;
|
|
left: 10px;
|
|
}
|
|
}
|
|
</style>
|