Clean up.

Author: nikoshell

src/content/pages/sponsorship/sponsor.mdx

@@ -4,7 +4,6 @@ subtitle:
   Sponsoring EuroPython guarantees you highly targeted visibility
   and the opportunity to present yourself and your company to one
   of the largest and most diverse Python communities in Europe and beyond.
-toc: false
 ---
 
 # Why Sponsor EuroPython?

src/layouts/MarkdownLayout.astro

@@ -3,40 +3,183 @@ import Layout from "@layouts/Layout.astro";
 import Section from "@ui/Section.astro";
 import Prose from "@components/prose/prose.astro";
 import TwoCols from "@components/TwoCols.astro";
-import { marked } from 'marked';
 
 import "../styles/markdown.css";
 
 const { title, description, toc=false } = Astro.props;
 
-import remarkToc from 'remark-toc'
-
-//const html0 = marked.parse(Astro.slots.render);
-const html = await Astro.slots.render('default');
-
-  //html.use(remarkToc)
-  //.process(await read('src/content/pages/childcare.mdx'))
-
 ---
 
 <Layout title={title} description={description}>
   <Section>
-    { toc ?
-        <TwoCols>
-          <Fragment slot="content">
-            <Prose class="pb-20" >
-              <slot />
-            </Prose>
-          </Fragment>
-          <Fragment slot="sidebar">
-            <article set:html={html} />
-          </Fragment>
-        </TwoCols>
-        :
-        <Prose class="pb-20" >
-          <slot />
-        </Prose>
-    }
-
+  {
+    toc ? (
+      <TwoCols>
+        <Fragment slot="content">
+          <div
+            id="toc"
+            class="mt-24 mb-6 last:mb-0 rounded-lg shadow-md bg-white p-6"
+          >
+          <span class="text-lg font-bold">Table of contents</span>
+          </div>
+        </Fragment>
+        <Fragment slot="sidebar">
+          <slot   />
+        </Fragment>
+      </TwoCols>
+    ) : (
+      <slot />
+    )
+  }
   </Section>
 </Layout>
+
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", () => {
+    const tocContainer = document.getElementById("toc");
+    if (!tocContainer) return;
+
+    const headings = Array.from(
+      document.querySelectorAll(
+        "article h2, article h3, article h4, article summary span:nth-child(1)",
+      ),
+    );
+    if (!headings.length) return;
+
+    const rootUl = document.createElement("ul");
+    let currentUl = rootUl;
+    let lastLevel = 2;
+    const parents = [rootUl];
+
+    headings.forEach((heading, index) => {
+      if (!heading.id) {
+        heading.id = `heading-${index}`;
+      }
+
+      const level = parseInt(heading.tagName[1], 10);
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.href = `#${heading.id}`;
+      a.textContent = heading.textContent;
+      li.appendChild(a);
+
+      if (level > lastLevel) {
+        const newUl = document.createElement("ul");
+        parents[parents.length - 1].lastElementChild?.appendChild(newUl);
+        parents.push(newUl);
+      } else if (level < lastLevel) {
+        parents.splice(-(lastLevel - level));
+      }
+
+      currentUl = parents[parents.length - 1];
+      currentUl.appendChild(li);
+      lastLevel = level;
+    });
+
+    // Add "Back to top" link
+    const backToTop = document.createElement("li");
+    const topLink = document.createElement("a");
+    topLink.href = "#";
+    topLink.textContent = "↑ Back to top";
+
+    topLink.classList.add("hidden");
+    topLink.classList.add("lg:block");
+    topLink.style.marginTop = "1em";
+    backToTop.appendChild(topLink);
+    rootUl.appendChild(backToTop);
+
+    tocContainer.appendChild(rootUl);
+
+    // Scroll spy: highlight active link
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = entry.target.id;
+          const tocLink = tocContainer.querySelector(`a[href="#${id}"]`);
+          if (tocLink) {
+            if (entry.isIntersecting) {
+              tocContainer
+                .querySelectorAll("a")
+                .forEach((a) => a.classList.remove("active"));
+              tocLink.classList.add("active");
+            }
+          }
+        });
+      },
+      {
+        rootMargin: "-10% 0px -60% 0px",
+        threshold: 0,
+      },
+    );
+
+    headings.forEach((heading) => observer.observe(heading));
+  });
+</script>
+
+<style is:global>
+  #toc {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    padding: 1rem;
+    border-left: 1px solid #e0e0e0;
+    position: sticky;
+    top: 1rem;
+  }
+
+  #toc ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  #toc li {
+    margin: 0.25em 0;
+  }
+
+  #toc li ul {
+    margin-left: 1em;
+    border-left: 1px dashed #ddd;
+    padding-left: 0.75em;
+  }
+
+  #toc a {
+    text-decoration: none;
+    color: #333;
+    padding: 0.25em 0.5em;
+    transition:
+      background 0.2s ease,
+      color 0.2s ease;
+  }
+
+  #toc a:hover {
+    background: #f0f0f0;
+    color: #007acc;
+  }
+
+  #toc a.active {
+    font-weight: 600;
+    color: #007acc;
+    border-left: 3px solid #007acc;
+    background: rgba(0, 122, 204, 0.1);
+    padding-left: 0.5em;
+  }
+
+  #toc a[href="#"] {
+    font-size: 0.9em;
+    color: #555;
+    margin-top: 0.5em;
+  }
+
+  #toc a[href="#"]:hover {
+    color: #007acc;
+    text-decoration: underline;
+  }
+
+
+article h2,
+article h3,
+article h4,
+article summary span:nth-child(1) {
+  scroll-margin-top: 120px;
+}
+</style>