feat(git): git layout

src/layouts/GitLayout.astro

@@ -0,0 +1,63 @@
+---
+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[];
+  };
+}
+
+const { frontmatter, post } = Astro.props;
+const { title, description, useKatex = false, useD3 = false } = frontmatter;
+
+const filePath = post?.id || "";
+const category = filePath.split("/")[0];
+
+const topicColor = getTopicColor(category);
+---
+
+<BaseLayout title={title} description={description} useKatex={useKatex}, useD3={useD3}>
+  <slot name="head" 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"
+        />
+      )
+    }
+    {
+      useD3 && (
+        <script src="https://d3js.org/d3.v7.min.js"></script>
+      )
+    }
+  </slot>
+
+  <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>
+
+  <slot name="scripts" slot="scripts">
+    <script src="/scripts/centerKatex.js" is:inline></script>
+    {frontmatter.scripts?.map(script => (
+      <script src={script} type="module"></script>
+    ))}
+  </slot>
+</BaseLayout>