fix: adapt to serving from non-root

Author: pavelkucera

astro.config.mjs

@@ -3,7 +3,8 @@ import react from '@astrojs/react';
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  site: 'https://cookielab.github.io/blog-devdrift/',
+  site: 'https://cookielab.github.io',
+  base: '/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('/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('/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('/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('/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('/data/skills-timeline.json').then(r => r.json()),
-      fetch('/data/categories.json').then(r => r.json()),
-      fetch('/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);