fix: base url for dynamic routing

Author: Fre0Grella

src/components/Sidebar.astro

@@ -8,14 +8,15 @@ interface Props {
 
 const { currentSlug, isHome = false } = Astro.props;
 const notes = getNotes();
+const base = import.meta.env.BASE_URL;
 ---
 
 <button class="qn-hamburger" id="hamburger" aria-label="Open menu">☰</button>
 <div class="qn-sidebar-overlay" id="overlay"></div>
 
 <nav class="qn-sidebar" id="sidebar">
   <div class="qn-sidebar-logo">
-    <a href="/">
+    <a href={base}>
       <div class="logo-tag">Interactive Notes</div>
       <div class="logo-title">Quantum<br>Computing</div>
     </a>
@@ -24,7 +25,7 @@ const notes = getNotes();
   <div class="qn-nav">
     <div class="qn-nav-section-label">Navigation</div>
 
-    <a class={`qn-nav-item ${isHome ? 'active' : ''}`} href="/">
+    <a class={`qn-nav-item ${isHome ? 'active' : ''}`} href={base}>
       <div class="qn-nav-item-header">
         <span class="qn-nav-item-num">🏠</span>
         <span class="qn-nav-item-label">Home</span>
@@ -46,15 +47,15 @@ const notes = getNotes();
         </div>
         <div class="qn-subnav">
           {note.sections.map(s => (
-            <a href={`/notes/${note.slug}#${s.id}`}>{s.label}</a>
+            <a href={`${base}notes/${note.slug}#${s.id}`}>{s.label}</a>
           ))}
         </div>
       </div>
     ))}
 
     <div class="qn-nav-section-label" style="margin-top:0.5rem;">Labs</div>
 
-    <a class={`qn-nav-item ${currentSlug === 'sandbox' ? 'active' : ''}`} href="/sandbox">
+    <a class={`qn-nav-item ${currentSlug === 'sandbox' ? 'active' : ''}`} href={`${base}sandbox`}>
       <div class="qn-nav-item-header">
         <span class="qn-nav-item-num">⚛</span>
         <span class="qn-nav-item-label">Circuit Sandbox</span>

src/pages/index.astro

@@ -4,6 +4,7 @@ import { getNotes, getNoteColor } from '../lib/notes';
 import '../styles/home.css';
 
 const notes = getNotes();
+const base = import.meta.env.BASE_URL;
 ---
 
 <BaseLayout title="Quantum Computing — Interactive Notes" isHome={true}>
@@ -38,7 +39,7 @@ const notes = getNotes();
     <div class="cards-grid">
 
       {notes.map(note => (
-        <a class="note-card" href={`/notes/${note.slug}`} style={`--card-color:${getNoteColor(note.order)};`}>
+        <a class="note-card" href={`${base}notes/${note.slug}`} style={`--card-color:${getNoteColor(note.order)};`}>
           <div class="note-card-num">Note {String(note.order).padStart(2,'0')} · {note.title}</div>
           <h3 set:html={note.title} />
           <p>{note.description}</p>
@@ -48,7 +49,7 @@ const notes = getNotes();
         </a>
       ))}
 
-      <a class="sandbox-card" href="/sandbox">
+      <a class="sandbox-card" href={`${base}sandbox`}>
         <div class="note-card-num">Interactive Lab</div>
         <h3>⚛ Circuit Sandbox</h3>
         <p>Drag-and-drop quantum circuit editor — up to 4 qubits, 8 moments. Live probability outcomes, preset circuits, Bloch sphere display.</p>
@@ -65,7 +66,7 @@ const notes = getNotes();
     <div class="concepts-grid">
       {notes.map(note =>
         note.sections.map(s => (
-          <a class="concept-item" href={`/notes/${note.slug}#${s.id}`}>
+          <a class="concept-item" href={`${base}notes/${note.slug}#${s.id}`}>
             <strong>{s.label}</strong>
             <span>Note {String(note.order).padStart(2,'0')} · §{s.id.replace('s','')}</span>
           </a>