wip toc

src/components/TocWrapper.astro

@@ -0,0 +1,41 @@
+---
+import type { MarkdownHeading } from "astro";
+import "../styles/toc.scss";
+
+interface Props {
+  toc: boolean;
+  headings: MarkdownHeading[];
+}
+
+const { toc, headings } = Astro.props;
+---
+
+{
+  toc ? (
+    <>
+      <div class="toc-wrapper">
+        <slot />
+        <div class="toc">
+          Table of contents
+          <ul>
+            {headings.map((heading) => {
+              return (
+                <li>
+                  <a href={`#${heading.slug}`}>{heading.text}</a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </>
+  ) : (
+    <slot />
+  )
+}
+
+<script type="text/javascript">
+  document.addEventListener("scroll", (doc, evt) => {
+    console.log("SHIET");
+  });
+</script>

src/content/config.ts

@@ -27,6 +27,7 @@ const posts = defineCollection({
       tags: z.array(z.string()),
       draft: z.boolean().default(false),
       math: z.boolean().default(false),
+      toc: z.boolean().default(false),
     }),
 });
 

src/content/posts/2023-09-01-formal-cek-machine-in-agda/index.md

@@ -11,6 +11,7 @@ tags:
 heroImage: ./header.jpg
 heroAlt: gears spinning wallpaper
 math: true
+toc: true
 ---
 
 Back in 2022, I took a special topics course, CSCI 8980, on [reasoning about

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

@@ -4,6 +4,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import { type CollectionEntry, getCollection } from "astro:content";
 import Timestamp from "../../components/Timestamp.astro";
 import { getImage } from "astro:assets";
+import TocWrapper from "../../components/TocWrapper.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
@@ -16,8 +17,8 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<"posts">;
 
 const post = Astro.props;
-const { Content, remarkPluginFrontmatter } = await post.render();
-const { heroImage: heroImagePath, heroAlt } = post.data;
+const { Content, remarkPluginFrontmatter, headings } = await post.render();
+const { toc, heroImage: heroImagePath, heroAlt } = post.data;
 
 let heroImage;
 if (heroImagePath) {
@@ -44,6 +45,7 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
   <meta slot="head" property="article:published_time" content={datestamp} />
   <meta slot="head" property="article:author" content="Michael Zhang" />
 
+  <TocWrapper toc={toc} headings={headings}>
     <div class="post-container">
       <h1 class="post-title">{post.data.title}</h1>
 
@@ -78,10 +80,9 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
         )
       }
 
-    <!-- <BlogPost {...post.data}> -->
       <div class="post-content">
         <Content />
       </div>
     </div>
-  <!-- </BlogPost> -->
+  </TocWrapper>
 </BaseLayout>

src/styles/global.scss

@@ -12,7 +12,6 @@ body {
   background-color: var(--background-color);
   color: var(--text-color);
 
-  max-width: 1024px;
   margin: auto;
   width: 100%;
   height: 1px;
@@ -94,12 +93,13 @@ pre > code {
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  justify-content: center;
 }
 
 .flex-wrapper > main {
   min-width: 0;
   box-sizing: border-box;
-  padding: 20px;
+  // padding: 20px;
 }
 
 @media screen and (max-width: variables.$breakpoint) {
@@ -120,6 +120,6 @@ pre > code {
   }
 
   .flex-wrapper > main {
-    padding-left: 30px;
+    // padding-left: 30px;
   }
 }

src/styles/post.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .post-title {
   font-size: 2rem;
   font-weight: 600;
@@ -20,7 +22,9 @@
 }
 
 .post-container {
+  max-width: 720px;
   display: flex;
+  padding: 20px;
 
   flex-direction: column;
   .toc-drawer {
@@ -175,6 +179,12 @@
   }
 }
 
+@media screen and (min-width: variables.$breakpoint) {
+  .post-container {
+    padding-left: 30px;
+  }
+}
+
 .division .post-content,
 .post-content {
   .heading {
@@ -210,6 +220,7 @@ hr.endline {
   display: flex;
   gap: 6px;
   margin-bottom: 6px;
+  flex-wrap: wrap;
 
   .tag {
     font-size: 0.75rem;

src/styles/toc.scss

@@ -0,0 +1,44 @@
+@use "variables";
+$tocWidth: 180px;
+$tocBreakpoint: variables.$breakpoint + $tocWidth;
+
+.toc-wrapper {
+  position: relative;
+  display: flex;
+}
+
+.toc {
+  height: 100vh;
+
+  ul {
+    list-style-type: none;
+    padding-inline-start: 0;
+
+    li {
+      font-size: 14px;
+    }
+  }
+}
+
+@media screen and (max-width: $tocBreakpoint) {
+  .toc {
+    display: none;
+  }
+}
+
+@media screen and (min-width: $tocBreakpoint) {
+  .article {
+    flex-grow: 1;
+  }
+
+  .toc {
+    flex: 0 0 $tocWidth;
+    max-width: $tocWidth;
+
+    position: sticky;
+    top: 0;
+    padding: 20px;
+
+    overflow-y: auto;
+  }
+}