From 826f715176beff8171f718fd8ee822e67a67c3c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20St=C3=BCckler?= <moritz@bitbetter.de>
Date: Thu, 5 Oct 2023 16:51:43 +0200
Subject: [PATCH] fix: toc links

---
 src/components/TableOfContents.tsx | 13 +++++++++----
 src/layouts/AcademyContent.astro   |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index 5175a369..0455933a 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import type { MarkdownHeading } from 'astro';
+import type { MarkdownHeading } from "astro";
 
 interface Props {
   title: string;
   headlines: Array<MarkdownHeading>;
+  baseUrl?: string;
 }
 
-
 const buildTocList = (input: Array<MarkdownHeading>) => {
   // Create a ordered list of depth and remove duplicates
   let map = new Map(
@@ -28,7 +28,7 @@ const paddingMapping = {
   6: "pl-20",
 };
 
-const TableOfContents: React.FC<Props> = ({ title, headlines }) => {
+const TableOfContents: React.FC<Props> = ({ title, headlines, baseUrl }) => {
   const headlinesWithoutDepthGaps = buildTocList(headlines);
   return (
     <nav>
@@ -38,7 +38,12 @@ const TableOfContents: React.FC<Props> = ({ title, headlines }) => {
           const leftPadding = paddingMapping[headline.depth];
           return (
             <li key={index} className={leftPadding}>
-              <a className="hover:text-neutral-900" href={`#${headline.slug}`}>{headline.text}</a>
+              <a
+                className="hover:text-neutral-900"
+                href={`${baseUrl || ""}#${headline.slug}`}
+              >
+                {headline.text}
+              </a>
             </li>
           );
         })}
diff --git a/src/layouts/AcademyContent.astro b/src/layouts/AcademyContent.astro
index 42f143a2..231125e3 100644
--- a/src/layouts/AcademyContent.astro
+++ b/src/layouts/AcademyContent.astro
@@ -28,6 +28,7 @@ const parentPage = getParentPage(rawAcademyContent, url);
 const localeFromUrl =
   Astro?.url?.pathname.replace(baseUrl, "").split("/").filter(Boolean)[0] ||
   "en";
+
 ---
 
 <BaseLayout frontmatter={frontmatter}>
@@ -52,7 +53,7 @@ const localeFromUrl =
     class="container-width mt-8 mb-24 flex flex-col md:grid grid-cols-12 gap-8"
   >
     <div class="col-span-4">
-      <TableOfContents title={frontmatter?.title} headlines={headings} />
+      <TableOfContents title={frontmatter?.title} headlines={headings} baseUrl={Astro.url.href} client:only="react"/>
       <div class="mt-16">
         <span class="font-bold uppercase text-neutral-400 text-[15px]"
           >Last updated</span