Merge pull request #5 from mag1cfrog/dev/astro-migration

Dev/astro migration

Author: mag1cfrog

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "22"
       - name: Install & build
         run: |
           npm ci

astro.config.mjs

@@ -5,8 +5,8 @@ import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://mag1cfrog.github.io',
-	base: '/spark-tuning-notes/',
+	site: 'https://mag1cfrog.github.io/spark-tuning-notes/',
 	output: 'static',
 	integrations: [mdx(), sitemap()],
 });
+	

src/components/HeaderLink.astro

@@ -1,24 +1,29 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'a'>;
+/* 1️⃣ Force href to be a string so TS stops complaining */
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
+  href: string;
+}
+const { href, class: className, ...rest } = Astro.props as Props;
 
-const { href, class: className, ...props } = Astro.props;
-const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
-const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
+/* 2️⃣ Build the correct URL (adds `/spark-tuning-notes/` in prod) */
+const finalHref = (Astro as any).resolve?.(href) ?? href;        // e.g. "/spark-tuning-notes/blog"
+
+/* 3️⃣ Active-link logic – compare full paths */
+const current = Astro.url.pathname;          // already includes base
+const isActive = finalHref === current ||
+  (current.startsWith(finalHref) && href !== '/');
+
+/* 4️⃣ Combine classes */
+const classes = [className, { active: isActive }];
 ---
 
-<a href={href} class:list={[className, { active: isActive }]} {...props}>
-	<slot />
+<a href={finalHref} class:list={classes} {...rest}>
+  <slot />
 </a>
+
 <style>
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.active {
-		font-weight: bolder;
-		text-decoration: underline;
-	}
+  a { display:inline-block; text-decoration:none; }
+  a.active { font-weight:bold; text-decoration:underline; }
 </style>

src/pages/about.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/BlogPost.astro';
-import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
+// import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
 ---
 
 <Layout