fix: toc links

tolocar-project · Oct 5, 2023 · 826f715 · 826f715
1 parent 8b0374f
commit 826f715
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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