fix: ensure BASE_URL always has trailing slash for clean path joining

Use trailing slash on base config so ${BASE_URL}data/... works in both
local dev (/) and GitHub Pages (/blog-devdrift/) without regex hacks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: pavelkucera

astro.config.mjs

@@ -6,7 +6,7 @@ export default defineConfig({
   site: process.env.GITHUB_ACTIONS
     ? 'https://cookielab.github.io'
     : 'http://localhost:4321',
-  base: process.env.GITHUB_ACTIONS ? '/blog-devdrift' : '/',
+  base: process.env.GITHUB_ACTIONS ? '/blog-devdrift/' : '/',
   output: 'static',
   integrations: [react()],
   vite: {

src/components/CategoryTrendChart.tsx

@@ -28,7 +28,7 @@ export default function CategoryTrendChart() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    fetch(`${import.meta.env.BASE_URL}/data/skills-timeline.json`)
+    fetch(`${import.meta.env.BASE_URL}data/skills-timeline.json`)
       .then(r => r.json())
       .then(data => {
         const ctx = canvasRef.current?.getContext('2d');

src/components/ComplexityChart.tsx

@@ -24,7 +24,7 @@ export default function ComplexityChart() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    fetch(`${import.meta.env.BASE_URL}/data/complexity-data.json`)
+    fetch(`${import.meta.env.BASE_URL}data/complexity-data.json`)
       .then(r => r.json())
       .then(data => {
         const ctx = canvasRef.current?.getContext('2d');

src/components/PopulationChart.tsx

@@ -17,7 +17,7 @@ export default function PopulationChart() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    fetch(`${import.meta.env.BASE_URL}/data/population-data.json`)
+    fetch(`${import.meta.env.BASE_URL}data/population-data.json`)
       .then(r => r.json())
       .then(data => {
         const ctx = canvasRef.current?.getContext('2d');

src/components/SkillFilters.tsx

@@ -32,7 +32,7 @@ export default function SkillFilters() {
   const [userFilteredCategories, setUserFilteredCategories] = useState(false);
 
   useEffect(() => {
-    fetch(`${import.meta.env.BASE_URL}/data/skills-timeline.json`)
+    fetch(`${import.meta.env.BASE_URL}data/skills-timeline.json`)
       .then(r => r.json())
       .then(data => {
         setSkillsList(data.skills.map((s: any) => ({ name: s.name, category: s.category })));

src/components/SkillsChart.tsx

@@ -72,9 +72,9 @@ export default function SkillsChart({ activeCategories, hiddenSkills }: SkillsCh
 
   useEffect(() => {
     Promise.all([
-      fetch(`${import.meta.env.BASE_URL}/data/skills-timeline.json`).then(r => r.json()),
-      fetch(`${import.meta.env.BASE_URL}/data/categories.json`).then(r => r.json()),
-      fetch(`${import.meta.env.BASE_URL}/data/key-events.json`).then(r => r.json()),
+      fetch(`${import.meta.env.BASE_URL}data/skills-timeline.json`).then(r => r.json()),
+      fetch(`${import.meta.env.BASE_URL}data/categories.json`).then(r => r.json()),
+      fetch(`${import.meta.env.BASE_URL}data/key-events.json`).then(r => r.json()),
     ]).then(([skillData, catData, eventsData]) => {
       setSkills(skillData.skills);
       setCategories(catData);