almost solved basepath problem

astro.config.mjs

@@ -13,13 +13,17 @@ export default defineConfig({
     },
     markdown: {
         remarkPlugins: [remarkMath],
-        remarkRehype: {
-            passThrough: ['html'],
-        },
         shikiConfig: {
             theme: 'github-light',
         },
     },
-    integrations: [mdx()],
+    integrations: [
+        mdx({
+            remarkPlugins: [remarkMath],
+            shikiConfig: {
+                theme: 'github-light',
+            },
+        }),
+    ],
     output: 'static',
 })

src/components/Link.astro

@@ -0,0 +1,34 @@
+---
+import type { JSX } from 'astro/jsx-runtime'
+
+type Props = {
+    href: string
+} & JSX.AnchorHTMLAttributes
+
+const { href, ...rest } = Astro.props
+
+const basepath = Astro.site?.pathname || ''
+
+// assert link starts with http, ./ or /
+if (!href.startsWith('://') && !href.startsWith('./') && !href.startsWith('/')) {
+    throw new Error(`Invalid href: ${href}. It must be an external link or start with './', or '/'`)
+}
+---
+
+{
+    href.includes('://') || href.startsWith('./') ? (
+        <>
+            <Fragment set:html={`<!-- External or relative link -->`} />
+            <a href={href} {...rest}>
+                <slot />
+            </a>
+        </>
+    ) : (
+        <>
+            <Fragment set:html={`<!-- Internal link, Basepath: "${basepath}/" -->`} />
+            <a href={basepath + (href.startsWith(basepath) ? href.slice(basepath.length) : href)} {...rest}>
+                <slot />
+            </a>
+        </>
+    )
+}

src/components/PostCard.astro

@@ -1,4 +1,6 @@
 ---
+import Link from '@/components/Link.astro'
+
 type Props = {
     post: {
         title: string
@@ -14,9 +16,9 @@ const { post } = Astro.props
 
 <div class="card">
     <div class="title">
-        <a href={post.url}>
+        <Link href={post.url}>
             {post.title}
-        </a>
+        </Link>
     </div>
     <div class="date">
         {
@@ -36,9 +38,9 @@ const { post } = Astro.props
     <div class="tags">
         {
             post.tags?.map(tag => (
-                <a href={`/posts/tags/${tag}`} class="tag">
+                <Link href={`/posts/tags/${tag}`} class="tag">
                     #{tag}
-                </a>
+                </Link>
             ))
         }
     </div>

src/layouts/Base.astro

@@ -1,5 +1,6 @@
 ---
 import config from '@/config'
+import Link from '@/components/Link.astro'
 import 'katex/dist/katex.min.css'
 import '@/themes/base.css'
 
@@ -61,7 +62,7 @@ import '@/themes/modern.css'
     <body>
         <header>
             <h1>
-                <a href="/">{config.title}</a>
+                <Link href="/">{config.title}</Link>
             </h1>
             <div class="spacer"></div>
 
@@ -76,9 +77,9 @@ import '@/themes/modern.css'
             </label>
 
             <nav>
-                <div class="nav-item"><a href="/">Home</a></div>
-                <div class="nav-item"><a href="/appunti">Appunti</a></div>
-                <div class="nav-item"><a href="/posts">Post</a></div>
+                <div class="nav-item"><Link href="/">Home</Link></div>
+                <div class="nav-item"><Link href="/appunti">Appunti</Link></div>
+                <div class="nav-item"><Link href="/posts">Post</Link></div>
             </nav>
         </header>
 

src/layouts/Post.astro

@@ -1,6 +1,7 @@
 ---
 import config from '@/config'
 import Base from './Base.astro'
+import Link from '@/components/Link.astro'
 
 type Props = {
     frontmatter: {
@@ -34,9 +35,9 @@ const { frontmatter } = Astro.props
             frontmatter.tags && frontmatter.tags.length > 0 ? (
                 <div class="tags">
                     {frontmatter.tags.map(tag => (
-                        <a href={`/posts/tags/${tag}`} class="tag">
+                        <Link href={`/posts/tags/${tag}`} class="tag">
                             #{tag}
-                        </a>
+                        </Link>
                     ))}
                 </div>
             ) : null

src/pages/appunti/index.mdx

@@ -3,6 +3,8 @@ layout: '@/layouts/Post.astro'
 title: Appunti
 ---
 
+import Link from '@/components/Link.astro'
+
 ## Corso 1
 
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod beatae, alias vitae assumenda quia
@@ -10,9 +12,10 @@ corporis quos natus laboriosam illo consectetur. Praesentium explicabo vitae ass
 commodi iusto. Enim harum perspiciatis quae ea nihil iusto saepe cum! Doloribus, ullam dolorum.
 
 <p class="text-center">
-    <a class="button" href="/materiale/dispensa-1.pdf">Scarica</a>
+    <Link class="button" href="/materiale/dispensa-1.pdf">Scarica</Link>
 </p>
 
+
 ## Corso 2
 
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod beatae, alias vitae assumenda quia
@@ -20,7 +23,7 @@ corporis quos natus laboriosam illo consectetur. Praesentium explicabo vitae ass
 commodi iusto. Enim harum perspiciatis quae ea nihil iusto saepe cum! Doloribus, ullam dolorum.
 
 <p class="text-center">
-    <a class="button" href="/materiale/dispensa-1.pdf">Scarica</a>
+    <Link class="button" href="/materiale/dispensa-1.pdf">Scarica</Link>
 </p>
 
 ## Corso 3
@@ -30,5 +33,5 @@ corporis quos natus laboriosam illo consectetur. Praesentium explicabo vitae ass
 commodi iusto. Enim harum perspiciatis quae ea nihil iusto saepe cum! Doloribus, ullam dolorum.
 
 <p class="text-center">
-    <a class="button" href="/materiale/dispensa-1.pdf">Scarica</a>
+    <Link class="button" href="/materiale/dispensa-1.pdf">Scarica</Link>
 </p>

src/pages/posts/index.astro

@@ -1,5 +1,6 @@
 ---
 import Base from '@/layouts/Base.astro'
+import Link from '@/components/Link.astro'
 import type { MarkdownInstance } from 'astro'
 import type { PostFrontmatter } from '@/config'
 import config from '@/config'
@@ -12,7 +13,7 @@ const posts = import.meta.glob<MarkdownInstance<PostFrontmatter>>('./*.md', { ea
     <main>
         <h1>Archivio Post</h1>
         <p>
-            <a href="/posts/tags" class="forward-link">Vai all'Archivio Tag →</a>
+            <Link href="/posts/tags" class="forward-link">Vai all'Archivio Tag →</Link>
         </p>
         <div class="card-list">
             {

src/pages/posts/tags/[tag].astro

@@ -1,5 +1,6 @@
 ---
 import Base from '@/layouts/Base.astro'
+import Link from '@/components/Link.astro'
 import PostCard from '@/components/PostCard.astro'
 import type { MarkdownInstance } from 'astro'
 import type { PostFrontmatter } from '@/config'
@@ -49,10 +50,10 @@ const { tag, taggedPosts, relatedTags } = Astro.props
 
 <Base>
     <main>
-        <h2>Post con tag <a href={`/posts/tags/${tag}`}>#{tag}</a></h2>
+        <h2>Post con tag <Link href={`/posts/tags/${tag}`}>#{tag}</Link></h2>
         <p>
             {taggedPosts.length} post{taggedPosts.length !== 1 ? 's' : ''} trovato{taggedPosts.length !== 1 ? 'i' : ''}.
-            <a href="/posts/tags" class="back-link">← Torna a tutti i tag</a>
+            <Link href="/posts/tags" class="back-link">← Torna a tutti i tag</Link>
         </p>
         {
             taggedPosts.length > 0 ? (
@@ -70,9 +71,9 @@ const { tag, taggedPosts, relatedTags } = Astro.props
                 <>
                     <p>Nessun post trovato per questo tag.</p>
                     <p>
-                        <a href="/posts" class="button">
+                        <Link href="/posts" class="button">
                             Esplora tutti i post
-                        </a>
+                        </Link>
                     </p>
                 </>
             )
@@ -84,9 +85,9 @@ const { tag, taggedPosts, relatedTags } = Astro.props
                     <h2>Tag correlati</h2>
                     <div class="tags">
                         {relatedTags.map(relatedTag => (
-                            <a href={`/posts/tags/${relatedTag}`} class="tag">
+                            <Link href={`/posts/tags/${relatedTag}`} class="tag">
                                 #{relatedTag}
-                            </a>
+                            </Link>
                         ))}
                     </div>
                 </>

src/pages/posts/tags/index.astro

@@ -1,5 +1,6 @@
 ---
 import Base from '@/layouts/Base.astro'
+import Link from '@/components/Link.astro'
 import type { MarkdownInstance } from 'astro'
 import type { PostFrontmatter } from '@/config'
 
@@ -38,9 +39,9 @@ const sortedTags = Array.from(tagCounts.entries()).sort((a, b) => {
         <div class="tags">
             {
                 sortedTags.map(([tag, count]) => (
-                    <a href={`/posts/tags/${tag}`} class="tag">
+                    <Link href={`/posts/tags/${tag}`} class="tag">
                         #{tag} ({count})
-                    </a>
+                    </Link>
                 ))
             }
         </div>