80 lines
2.1 KiB
Text
80 lines
2.1 KiB
Text
---
|
|
import BaseLayout from "./BaseLayout.astro";
|
|
import { getTopicColor } from "../utils/colors.js";
|
|
|
|
interface Props {
|
|
frontmatter: {
|
|
title: string;
|
|
description?: string;
|
|
date?: string;
|
|
useKatex?: boolean;
|
|
useD3?: boolean;
|
|
scripts?: string[];
|
|
category?: string;
|
|
};
|
|
post?: {
|
|
id?: string;
|
|
collection?: string;
|
|
slug?: string;
|
|
};
|
|
}
|
|
|
|
const { frontmatter, post } = Astro.props as Props;
|
|
const { title, description, useKatex = false, useD3 = false } = frontmatter;
|
|
|
|
const filePath = post?.id ?? "";
|
|
const categoryFromId = (filePath.split("/")[0] ?? "").replace(
|
|
/\.(mdx?|MDX?)$/,
|
|
"",
|
|
);
|
|
const category =
|
|
(frontmatter.category ?? post?.collection ?? categoryFromId) || "";
|
|
|
|
let documentTitle = title;
|
|
if (post?.collection === "git" && post?.slug) {
|
|
documentTitle = `${post.slug}.git`;
|
|
} else if (
|
|
(post?.collection === "gists" || post?.collection === "gist") &&
|
|
post?.slug
|
|
) {
|
|
documentTitle = `${post.slug}`;
|
|
}
|
|
|
|
const topicColor = getTopicColor(post.collection);
|
|
---
|
|
|
|
<BaseLayout title={documentTitle} description={description}>
|
|
<Fragment slot="head">
|
|
<link rel="stylesheet" href="/styles/posts.css" />
|
|
<link rel="stylesheet" href="/styles/graph.css" />
|
|
{
|
|
useKatex && (
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
|
|
integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP"
|
|
crossorigin="anonymous"
|
|
/>
|
|
)
|
|
}
|
|
<slot name="head" />
|
|
</Fragment>
|
|
|
|
<div class="post-container" style={`--topic-color: ${topicColor};`}>
|
|
<header class="post-header">
|
|
<h1 class="post-title">{title}</h1>
|
|
{frontmatter.date && <p class="post-meta">{frontmatter.date}</p>}
|
|
</header>
|
|
|
|
<article class="post-article">
|
|
<slot />
|
|
</article>
|
|
</div>
|
|
|
|
<Fragment slot="scripts">
|
|
<script type="module" src="/scripts/index.js"></script>
|
|
<script src="/scripts/centerKatex.js" is:inline></script>
|
|
{frontmatter.scripts?.map((src) => <script type="module" src={src} />)}
|
|
<slot name="scripts" />
|
|
</Fragment>
|
|
</BaseLayout>
|