Make rough scrolling toc for blog

Author: ysthakur

src/components/FormattedDate.astro renamed to src/components/blog/FormattedDate.astro

@@ -0,0 +1,98 @@
+---
+// Copied from https://dev.to/fazzaamiarso/add-toc-with-scroll-spy-in-astro-3d25
+// A fixed table of contents on the right side that is updated as you scroll
+
+interface Props {
+  headings: { slug: string; text: string; depth: number }[];
+}
+
+const { headings } = Astro.props;
+---
+
+<script>
+  const setCurrentHeading: IntersectionObserverCallback = (entries) => {
+    console.log(entries.map((entry) => entry.target.id));
+    for (const entry of entries) {
+      const tocLinkEl = document.querySelector(`#toc-${entry.target.id}`);
+      if (!tocLinkEl) return;
+      console.log(tocLinkEl);
+      if (entry.isIntersecting) {
+        // Make all other links inactive and make only this one active
+        console.log(tocLinkEl);
+        document
+          .querySelectorAll("#toc a")
+          .forEach((e) => e.classList.remove("active"));
+        tocLinkEl.classList.add("active");
+        break;
+      }
+    }
+  };
+
+  const observer = new IntersectionObserver(setCurrentHeading, {
+    threshold: 1,
+    rootMargin: "0px 0px -66%",
+  });
+  document
+    .querySelectorAll("article :is(h2,h3)")
+    .forEach((el) => observer.observe(el));
+</script>
+
+<aside id="toc">
+  <ul>
+    {
+      headings
+        .filter((heading) => heading.depth < 4)
+        .map(({ slug, text, depth }) => (
+          <li>
+            <a id={`toc-${slug}`} href={`#${slug}`}>
+              {"\xa0\xa0".repeat(depth - 2) + text}
+            </a>
+          </li>
+        ))
+    }
+  </ul>
+</aside>
+
+<style lang="scss">
+  @import "../../styles/common.scss";
+
+  // TODO rather than a fixed position, use a flexbox or something
+  aside {
+    position: fixed;
+    top: 15rem;
+
+    border-left: 2px solid var(--highlight-color);
+
+    // Hide even on tablets, because it's too big to fit
+    display: none;
+
+    @media (min-width: 1300px) {
+      display: block;
+      right: 4ch;
+    }
+
+    @media (min-width: 1500px) {
+      display: block;
+      right: 8ch;
+    }
+
+    @media (min-width: 1600px) {
+      display: block;
+      right: 10ch;
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 2ch;
+  }
+
+  .active {
+    font-weight: 600;
+  }
+
+  a {
+    text-decoration: none;
+  }
+</style>

src/components/blog/Toc.astro

@@ -1,15 +1,26 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import FormattedDate from "../components/FormattedDate.astro";
+import FormattedDate from "../components/blog/FormattedDate.astro";
 import BaseLayout from "./BaseLayout.astro";
+import Toc from "../components/blog/Toc.astro";
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
 
 type Props = CollectionEntry<"blog">["data"];
 
 const { title, description, author, pubDate, updatedDate, heroImage } =
   Astro.props;
+
+const posts = await getCollection("blog", ({ data }) => data.title === title);
+const entry = posts[0];
+const { Content, headings } = await render(entry);
 ---
 
-<BaseLayout title={title} isBlogPost={true} description={description ?? "Team CYB3RL4NG's blog"}>
+<BaseLayout
+  title={title}
+  isBlogPost={true}
+  description={description ?? "Team CYB3RL4NG's blog"}
+>
   <article>
     <div class="hero-image">
       {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
@@ -30,7 +41,8 @@ const { title, description, author, pubDate, updatedDate, heroImage } =
         </div>
         <hr />
       </div>
-      <slot />
+      <Content />
+      <Toc headings={headings} />
     </div>
   </article>
 </BaseLayout>

src/layouts/BlogPost.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import FormattedDate from "../../components/FormattedDate.astro";
+import FormattedDate from "../../components/blog/FormattedDate.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { RSS_LINK } from "../../consts";
 import DescText from "../../components/DescText.astro";