Add Biome linting and CI workflow (#7)

Author: kylemclaren

.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Build
+        run: pnpm build

CLAUDE.md

@@ -9,10 +9,12 @@ Sprites documentation site built with Astro Starlight and React components. Stat
 ## Commands
 
 ```bash
-bun install          # Install dependencies
-bun run dev          # Start dev server at localhost:4321
-bun run build        # Build static site to ./dist/
-bun run preview      # Preview production build locally
+pnpm install         # Install dependencies
+pnpm dev             # Start dev server at localhost:4321
+pnpm build           # Build static site to ./dist/
+pnpm preview         # Preview production build locally
+pnpm lint            # Run Biome linter
+pnpm lint:fix        # Auto-fix lint issues
 ```
 
 ## Architecture
@@ -32,14 +34,10 @@ bun run preview      # Preview production build locally
 - `astro.config.mjs` - Site config including sidebar structure
 
 ### Component Pattern
-React components are wrapped in `.astro` files for MDX usage. The React components export from `src/components/react/index.ts`:
-- `CodeTabs`/`Snippet` - Language-tabbed code blocks
-- `Callout` - Alert/info boxes
-- `ParamTable`/`Param` - API parameter documentation
-- `APIEndpoint`/`StatusCodes` - REST API documentation
-- `BillingCalculator`/`PricingRates` - Interactive pricing tools
-
-Use `client:load` directive when importing React components in MDX.
+React components are wrapped in `.astro` files for MDX usage. All React components export from `src/components/react/index.ts`. Use `client:load` directive when importing React components in MDX.
+
+### Starlight Overrides
+Custom Starlight components in `src/components/` override defaults: `Head.astro`, `Header.astro`, `Search.astro`, `ThemeSelect.astro`, `PageTitle.astro`, `SiteTitle.astro`.
 
 ### Path Aliases
 - `@/*` → `./src/*`

astro.config.mjs

@@ -1,9 +1,10 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
-import starlight from '@astrojs/starlight';
-import sitemap from '@astrojs/sitemap';
+
 import react from '@astrojs/react';
+import sitemap from '@astrojs/sitemap';
+import starlight from '@astrojs/starlight';
 import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
@@ -27,7 +28,11 @@ export default defineConfig({
       favicon: '/favicon.svg',
       customCss: ['./src/styles/custom.css'],
       social: [
-        { icon: 'github', label: 'GitHub', href: 'https://github.com/superfly/sprites-docs' },
+        {
+          icon: 'github',
+          label: 'GitHub',
+          href: 'https://github.com/superfly/sprites-docs',
+        },
       ],
       editLink: {
         baseUrl: 'https://github.com/superfly/sprites-docs/edit/master/',
@@ -67,9 +72,7 @@ export default defineConfig({
         },
         {
           label: 'API',
-          items: [
-            { label: 'REST API', slug: 'api/rest' },
-          ],
+          items: [{ label: 'REST API', slug: 'api/rest' }],
         },
         {
           label: 'Reference',

biome.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!!**/dist", "!!**/*.astro", "!!**/*.css"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedFunctionParameters": "warn"
+      },
+      "a11y": {
+        "noLabelWithoutControl": "off",
+        "useButtonType": "warn",
+        "noSvgWithoutTitle": "off",
+        "noStaticElementInteractions": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "warn"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package.json

@@ -7,6 +7,8 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
     "astro": "astro"
   },
   "dependencies": {
@@ -37,6 +39,7 @@
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.3.10",
     "@flydotio/dockerfile": "^0.7.10",
     "tw-animate-css": "^1.4.0"
   }

pnpm-lock.yaml

@@ -1,30 +1,42 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 
 const srcDir = '../sprites-docs-next/content/docs';
 const destDir = './src/content/docs';
 
-function transformContent(content, filePath) {
+function transformContent(content, _filePath) {
   let transformed = content;
 
   // Transform {#snippet name()} to <Snippet name="name">
-  transformed = transformed.replace(/\{#snippet\s+(\w+)\(\)\}/g, '<Snippet name="$1">');
+  transformed = transformed.replace(
+    /\{#snippet\s+(\w+)\(\)\}/g,
+    '<Snippet name="$1">',
+  );
 
   // Transform {/snippet} to </Snippet>
   transformed = transformed.replace(/\{\/snippet\}/g, '</Snippet>');
 
   // Check which components are used
   const usedComponents = [];
   if (transformed.includes('<Callout')) usedComponents.push('Callout');
-  if (transformed.includes('<CodeTabs')) usedComponents.push('CodeTabs', 'Snippet');
-  if (transformed.includes('<LifecycleDiagram')) usedComponents.push('LifecycleDiagram');
-  if (transformed.includes('<BillingCalculator')) usedComponents.push('BillingCalculator');
-  if (transformed.includes('<ParamTable') || transformed.includes('<Param ')) usedComponents.push('ParamTable', 'Param');
+  if (transformed.includes('<CodeTabs'))
+    usedComponents.push('CodeTabs', 'Snippet');
+  if (transformed.includes('<LifecycleDiagram'))
+    usedComponents.push('LifecycleDiagram');
+  if (transformed.includes('<BillingCalculator'))
+    usedComponents.push('BillingCalculator');
+  if (transformed.includes('<ParamTable') || transformed.includes('<Param '))
+    usedComponents.push('ParamTable', 'Param');
   if (transformed.includes('<ParamInline')) usedComponents.push('ParamInline');
-  if (transformed.includes('<StatusCodes') || transformed.includes('<StatusBadge')) usedComponents.push('StatusCodes', 'StatusBadge');
-  if (transformed.includes('<APIEndpoint') || transformed.includes('<APIBody')) usedComponents.push('APIEndpoint', 'APIBody');
+  if (
+    transformed.includes('<StatusCodes') ||
+    transformed.includes('<StatusBadge')
+  )
+    usedComponents.push('StatusCodes', 'StatusBadge');
+  if (transformed.includes('<APIEndpoint') || transformed.includes('<APIBody'))
+    usedComponents.push('APIEndpoint', 'APIBody');
 
   // Add imports after frontmatter if components are used
   if (usedComponents.length > 0) {
@@ -37,7 +49,8 @@ function transformContent(content, filePath) {
       const afterFrontmatter = frontmatterEnd + 3;
       transformed =
         transformed.substring(0, afterFrontmatter) +
-        '\n\n' + importStatement +
+        '\n\n' +
+        importStatement +
         transformed.substring(afterFrontmatter).trimStart();
     }
   }