fix styling

public/scripts/index.js

@@ -43,14 +43,6 @@
   function currentDisplayPath() {
     return normalizeDisplayPath(location.pathname);
   }
-  function setDocTitleForPath(displayPath) {
-    if (!displayPath) {
-      document.title = "Barrett Ruth";
-      return;
-    }
-    document.title = displayPath.slice(1);
-  }
-
   function animateToDisplayPath(displayPath, totalMs, done) {
     if (typing) return;
     typing = true;
@@ -195,7 +187,7 @@
           t.classList.remove("active");
           t.style.color = "";
         });
-        setDocTitleForPath("");
+        document.title = "";
       });
     } else {
       persistPrompt();
@@ -209,7 +201,6 @@
     const initial = currentDisplayPath();
     if (initial) setPromptTailImmediate(" " + initial);
     else setPromptTailImmediate("");
-    if (initial) setDocTitleForPath(initial);
 
     document.body.addEventListener("click", (e) => {
       if (e.target.closest(".home-link")) return handleHomeClick(e);

public/styles/git.css

@@ -1,28 +1,17 @@
 .clone-line {
   font-family: 'Apercu Mono', monospace !important;
-  font-size: 1.3em;
+  font-size: 1.2em;
-  font-weight: 400;
   margin: 0 1em;
   text-align: left;
   user-select: all;
-  color: inherit;
 }
 
 .clone-line code {
   all: unset;
   font-family: 'Apercu Mono', monospace !important;
-  font-size: 1em;
+  white-space: normal !important;
+  word-break: break-word;       
+  overflow-wrap: anywhere;     
   line-height: 1.5;
-  white-space: nowrap;
   cursor: text;
-  background: transparent !important;
-  color: inherit;
 }
-
-.clone-line .prompt {
-  user-select: none;
-  opacity: 0.8;
-  margin-right: 0.3em;
-  color: inherit;
-}
-

src/layouts/PostLayout.astro

@@ -10,17 +10,40 @@ interface Props {
     useKatex?: boolean;
     useD3?: boolean;
     scripts?: string[];
+    category?: string;
+  };
+  post?: {
+    id?: string;
+    collection?: string;
+    slug?: string;
   };
-  post?: { id?: 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={title} description={description}>
+<BaseLayout title={documentTitle} description={description}>
   <Fragment slot="head">
     <link rel="stylesheet" href="/styles/posts.css" />
     <link rel="stylesheet" href="/styles/graph.css" />

src/pages/gist.astro

@@ -2,7 +2,7 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
 
-const title = "/gists";
+const title = "gists";
 const gists = await getCollection("gists");
 gists.sort((a, b) => a.slug.localeCompare(b.slug));
 ---

src/pages/gist/[slug].astro

@@ -12,13 +12,8 @@ export async function getStaticPaths() {
 
 const { gist } = Astro.props;
 const { Content } = await gist.render();
-const pageTitle = `${gist.slug}`;
 ---
 
 <PostLayout frontmatter={gist.data} post={gist}>
-  <Fragment slot="head">
-    <title>{pageTitle}</title>
-    <script type="module" src="/scripts/index.js"></script>
-  </Fragment>
   <Content />
 </PostLayout>

src/pages/git/[slug].astro

@@ -11,15 +11,18 @@ export async function getStaticPaths() {
 }
 
 const { repo } = Astro.props;
-const { slug } = Astro.params;
 const { Content } = await repo.render();
-const pageTitle = `${slug}.git`;
+const cloneCommand = `git clone https://git.barrettruth.com/${repo.slug}.git`;
 ---
 
 <PostLayout frontmatter={repo.data} post={repo}>
   <Fragment slot="head">
-    <title>{pageTitle}</title>
+    <link rel="stylesheet" href="/styles/git.css" />
-    <script type="module" src="/scripts/index.js"></script>
   </Fragment>
+
+  <div class="clone-line">
+    <code><span class="prompt">&gt;&nbsp;</span>{cloneCommand}</code>
+  </div>
+
   <Content />
 </PostLayout>