Various fixes

astro.config.mjs

@@ -3,11 +3,19 @@ import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
+import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 import metaTags from "astro-meta-tags";
 
 // https://astro.build/config
 export default defineConfig({
+  markdown: {
+    remarkPlugins: [[remarkToc, { heading: "contents" }]],
+    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
+  },
+
   site: 'https://example.com',
   integrations: [mdx(), sitemap(), react(), tailwind(), metaTags()]
-});
+});

package.json

@@ -27,6 +27,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icalendar-link": "^3.0.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-toc": "^9.0.0",
     "tailwindcss": "^3.4.1",
     "tweakpane": "^4.0.3",
     "typescript": "^5.4.2"

src/components/prose/prose.astro

@@ -0,0 +1,22 @@
+---
+export interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div
+  class:list={[
+    "mb-4 prose prose-xl prose-li:m-0 prose-ul:m-0 prose-ul:mb-4 prose-a:underline",
+    "prose-h1:text-7xl prose-h2:text-5xl prose-h3:text-4xl prose-h4:text-3xl prose-h5:text-2xl prose-h6:text-xl",
+    "prose-h1:text-text",
+    "prose-headings:text-text",
+    "prose-a:text-text",
+    "prose-a:hover:text-primary-hover",
+    "prose-strong:text-text prose-strong:font-bold",
+    className,
+  ]}
+>
+  <slot />
+</div>

src/pages/[...slug].astro

@@ -2,9 +2,11 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 
-import { Prose } from "../components/prose/prose";
+import Prose from "../components/prose/prose.astro";
 import { ButtonLink } from "../components/button-link";
 import { Button } from "../components/button";
+import { Separator } from "../components/separator/separator";
+
 export async function getStaticPaths() {
   const posts = await getCollection("pages");
   return posts.map((post) => ({
@@ -107,11 +109,12 @@ export const components = {
   },
 }; -->
 <Layout title={title} description={description}>
-  <Prose className="mx-auto pb-12 px-6">
+  <Prose class="mx-auto pb-12 px-6">
     <Content
       components={{
         ButtonLink,
         Button,
+        hr: Separator,
       }}
     />
   </Prose>

src/pages/index.astro

@@ -10,7 +10,7 @@ import Card from "../components/card/card.astro";
 import HeroWithCTA from "../components/hero-section/hero-with-cta.astro";
 import { ButtonLink } from "../components/button-link";
 import { Title } from "../components/typography/title";
-import { Prose } from "../components/prose/prose";
+import Prose from "../components/prose/prose.astro";
 
 import * as intro from "../data/home/intro.md";
 

src/styles/global.css

@@ -74,6 +74,7 @@ img.findaid-accent-round-marker {
   min-width: 70px;
   padding: 0 10px;
   display: inline-block;
+  margin: 0;
 }
 
 table.finaid-timeline td {