reviews, cleanups, PR pipeline

Author: gallayl

.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Astro check
+        run: yarn check
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Format check
+        run: yarn prettier --check .
+
+      - name: Build
+        run: yarn build

package.json

@@ -7,6 +7,7 @@
   "author": "Gallay Lajos <gallay.lajos@gmail.com>",
   "license": "MIT",
   "scripts": {
+    "check": "astro check",
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
@@ -19,6 +20,7 @@
   },
   "packageManager": "yarn@4.13.0",
   "dependencies": {
+    "@astrojs/check": "^0.9.6",
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
     "astro": "^5.18.0",

src/components/SiteNav.astro

@@ -1,5 +1,7 @@
 ---
 import { SOCIAL, SITE_TITLE } from '../consts';
+import GitHubIcon from './icons/GitHubIcon.astro';
+import XIcon from './icons/XIcon.astro';
 
 interface Props {
   isHome?: boolean;
@@ -8,14 +10,19 @@ interface Props {
 const { isHome = false } = Astro.props;
 ---
 
-<nav class="site-nav">
+<nav class="site-nav" aria-label="Main navigation">
   <div class="site-nav-left">
     {!isHome && (
       <a class="site-nav-logo" href="/">
         <img src="/images/furystack-logo-512.png" alt={SITE_TITLE} />
         <span>FuryStack</span>
       </a>
     )}
+    <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+    </button>
     <ul class="nav" role="menu">
       <li role="menuitem"><a href="/">Home</a></li>
       <li role="menuitem"><a href="/tags/getting-started/">Getting Started</a></li>
@@ -26,17 +33,31 @@ const { isHome = false } = Astro.props;
   <div class="site-nav-right">
     {SOCIAL.github && (
       <a class="social-link" href={SOCIAL.github} target="_blank" rel="noopener noreferrer" title="GitHub">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+        <GitHubIcon />
       </a>
     )}
     {SOCIAL.x && (
       <a class="social-link" href={SOCIAL.x} target="_blank" rel="noopener noreferrer" title="X (Twitter)">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>
+        <XIcon />
       </a>
     )}
   </div>
 </nav>
 
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const toggle = document.querySelector('.nav-toggle');
+    const nav = document.querySelector('.site-nav .nav');
+    if (!toggle || !nav) return;
+
+    toggle.addEventListener('click', () => {
+      const expanded = toggle.getAttribute('aria-expanded') === 'true';
+      toggle.setAttribute('aria-expanded', String(!expanded));
+      nav.classList.toggle('nav-open');
+    });
+  });
+</script>
+
 <style>
   .site-nav {
     position: relative;
@@ -69,6 +90,30 @@ const { isHome = false } = Astro.props;
   .site-nav-logo:hover { text-decoration: none; opacity: 0.9; }
   .site-nav-logo img { width: 24px; height: 24px; border-radius: 4px; }
 
+  .nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    width: 36px;
+    height: 36px;
+    padding: 8px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background 0.15s ease;
+  }
+  .nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
+  .nav-toggle-bar {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.75);
+    border-radius: 1px;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+  }
+
   .nav {
     display: flex;
     gap: 2px;
@@ -92,8 +137,21 @@ const { isHome = false } = Astro.props;
   }
 
   @media (max-width: 700px) {
-    .nav { gap: 0; }
-    .nav li a { padding: 8px 8px; font-size: 1.3rem; }
+    .nav-toggle { display: flex; }
+    .nav {
+      display: none;
+      position: absolute;
+      top: 64px;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      background: var(--color-nav-bg);
+      padding: 8px 16px 16px;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+    .nav.nav-open { display: flex; }
+    .nav li a { padding: 10px 12px; font-size: 1.5rem; }
     .site-nav-logo span { display: none; }
     .site-nav-logo { margin-right: 8px; }
     .site-nav-left { padding-left: 5vw; }

src/components/icons/GitHubIcon.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+  size?: number;
+}
+
+const { size = 18 } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>

src/components/icons/XIcon.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+  size?: number;
+}
+
+const { size = 16 } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="currentColor" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>

src/layouts/BaseLayout.astro

@@ -1,19 +1,24 @@
 ---
 import '../styles/global.css';
+import { ClientRouter } from 'astro:transitions';
+import SiteNav from '../components/SiteNav.astro';
+import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION, SITE_LANG } from '../consts';
 
 interface Props {
   title?: string;
   description?: string;
   ogImage?: string;
   ogType?: string;
+  isHome?: boolean;
 }
 
 const {
   title = SITE_TITLE,
   description = SITE_DESCRIPTION,
   ogImage,
   ogType = 'website',
+  isHome = false,
 } = Astro.props;
 
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
@@ -24,6 +29,7 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="canonical" href={canonicalUrl} />
     <link rel="sitemap" href="/sitemap-index.xml" />
@@ -34,6 +40,10 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
       href={new URL('/rss.xml', Astro.site)}
     />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+
     <title>{title}</title>
     <meta name="description" content={description} />
 
@@ -49,8 +59,36 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
     <meta name="twitter:description" content={description} />
     <meta name="twitter:url" content={canonicalUrl} />
     {ogImage && <meta name="twitter:image" content={ogImage} />}
+
+    <ClientRouter />
   </head>
   <body>
+    <a class="skip-link" href="#main-content">Skip to content</a>
+    <div class="site-nav-main">
+      <div class="inner" style="padding: 0 5vw;">
+        <SiteNav isHome={isHome} />
+      </div>
+    </div>
     <slot />
+    <Footer />
   </body>
 </html>
+
+<style>
+  .skip-link {
+    position: absolute;
+    top: -100%;
+    left: 16px;
+    z-index: 9999;
+    padding: 8px 16px;
+    background: var(--color-accent);
+    color: #fff;
+    font-size: 1.4rem;
+    font-weight: 600;
+    border-radius: 0 0 6px 6px;
+    text-decoration: none;
+  }
+  .skip-link:focus {
+    top: 0;
+  }
+</style>