feat(gist): gist page

public/styles/common.css

@@ -232,16 +232,3 @@ pre {
     font-size: 0.9em;
   }
 }
-
-.clone-banner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: 'Apercu Mono', monospace;
-}
-
-.clone-banner code {
-  font-size: 0.95em;
-  user-select: all;
-  white-space: nowrap;
-}

public/styles/git.css

@@ -0,0 +1,25 @@
+.clone-line {
+  font-family: 'Apercu Mono', monospace;
+  font-size: 1.3em;
+  font-weight: 400;
+  margin: 0.5em 0 1em 0;
+  text-align: left;
+  user-select: all;
+}
+
+.clone-line code {
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.clone-line a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.3s ease;
+}
+
+.clone-line a:hover {
+  border-color: currentColor;
+}

src/pages/gist.astro

@@ -0,0 +1,24 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+
+const title = "Gists";
+const gists = await getCollection("gists");
+gists.sort((a, b) => a.slug.localeCompare(b.slug));
+---
+
+<BaseLayout title={title}>
+  <slot name="head" slot="head">
+    <link rel="stylesheet" href="/styles/index.css" />
+  </slot>
+
+  <div class="content">
+    <ul class="topics">
+      {gists.map((gist) => (
+        <li class="topic">
+          <a href={`/gist/${gist.slug}.html`}>{gist.data.title || gist.slug}</a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</BaseLayout>

src/pages/git/[slug].astro

@@ -1,6 +1,6 @@
 ---
 import { getEntry } from "astro:content";
-import PostLayout from "../../layouts/PostLayout.astro";
+import GitLayout from "../../layouts/GitLayout.astro";
 
 export async function getStaticPaths() {
   const res = await fetch("https://git.barrettruth.com/api/repositories");
@@ -28,12 +28,11 @@ try {
 } catch {}
 ---
 
-<PostLayout frontmatter={entry.data} post={entry}>
+<GitLayout frontmatter={entry.data} post={entry}>
   {cloneCommand && (
-    <div class="clone-banner">
-      <pre><code class="language-bash">{cloneCommand}</code></pre>
+    <div class="clone-line">
+      <code>&gt; {cloneCommand}</code>
     </div>
   )}
-
   <Content />
-</PostLayout>
+</GitLayout>