🌐 Initial release

@shiftescape/astro-i18n-toolkit is an Astro dev toolbar integration that adds a live i18n debugger — a translation coverage map across all your locale files and a one-click locale switcher. Library-agnostic: works with Astro's built-in i18n, astro-i18next, Paraglide, or any manual JSON/YAML setup.

Features

• 🗺 Coverage map — every translation key scanned across all locale files, colour-coded as complete, fallback, or missing
• 📊 Per-locale summary — coverage percentage badge per locale so you know which ones need the most work
• 🌐 Locale switcher — one-click locale switching via injected middleware, no URL editing required
• 🔍 Searchable keys — filter by key name or reference value in real time
• ⚙️ Library-agnostic — reads JSON or YAML files directly, no coupling to any specific i18n library
• 🔒 Dev-only — middleware and toolbar completely stripped in astro build, zero production footprint

Install

npm install -D @shiftescape/astro-i18n-toolkit

Usage

// astro.config.mjs
import { defineConfig } from 'astro/config'
import i18nToolkit from '@shiftescape/astro-i18n-toolkit'

export default defineConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'de'],
  },
  integrations: [i18nToolkit()]
})

Place your locale files at src/locales/ (default):

src/locales/
  en.json   ← reference locale
  fr.json
  de.json

Options

i18nToolkit({
  localesDir: './src/locales',  // path to locale files, relative to project root
  defaultLocale: 'en',          // reference locale — all others compared against this
  format: 'json',               // 'json' | 'yaml'
})

Links

• npm
• Documentation

🗺 Initial release

@shiftescape/astro-toolbar-routes is an Astro dev toolbar integration that shows a live, clickable route map of your entire project — grouped by type, searchable, and active only in development.

Features

• 🗺 Live route map — every route in your project visible at a glance
• 🖱 Click to navigate — click any static route to jump to it instantly, no URL typing required
• 🔵 Active route highlight — current page is highlighted in the panel
• 🏷 Route tags — dynamic params, SSR, endpoints, and redirects clearly labelled
• 🔍 Searchable — filter by URL pattern or file path in real time
• 🔒 Dev-only — completely stripped in astro build, zero production footprint guaranteed
• 🔄 Live updates — new pages added while the dev server is running appear on next panel open
• 🚫 Zero dependencies — Node built-ins and Astro integration API only

Install

npm install -D @shiftescape/astro-toolbar-routes

Usage

// astro.config.mjs
import { defineConfig } from 'astro/config'
import toolbarRoutes from '@shiftescape/astro-toolbar-routes'

export default defineConfig({
  integrations: [toolbarRoutes()]
})

Options

toolbarRoutes({
  // Exclude routes by exact match or glob prefix
  exclude: ['/admin', '/api/*'],

  // Show Astro internal routes (_astro/*, _server_islands/*)
  showInternalRoutes: false,
})

Links

• npm
• Documentation

🎉 Initial release

@shiftescape/astro-env-inspector is an Astro dev toolbar integration that shows all your environment variables — grouped, masked, and searchable — directly inside astro dev. Zero footprint in production.

Features

• 🔒 Dev-only — completely stripped in astro build and astro preview,
  never registered, never bundled, never shipped to users
• 🌐 Grouped — variables organised into Public (PUBLIC_*), Private /
  Server-only, and Astro built-ins (MODE, DEV, PROD, SITE, BASE_URL)
• ✅ Set vs missing — instantly spot variables that are unset at a glance
• 👁 Masked by default — sensitive values hidden with a per-variable reveal
  toggle, safe for screen shares
• ⚠️ Leak detection — warns when a PUBLIC_* variable looks like it contains
  a secret key or token
• 🔍 Searchable — filter by key or value in real time
• 📋 Copy on click — copy any value to clipboard instantly
• 🚀 Zero dependencies — Node built-ins only

Install

npm install -D @shiftescape/astro-env-inspector

// astro.config.mjs
import { defineConfig } from 'astro/config'
import envInspector from '@shiftescape/astro-env-inspector'

export default defineConfig({
  integrations: [envInspector()]
})

🎉 Initial release

astro-bundle-budget is an Astro integration that audits your JS and CSS bundle sizes at build time — and optionally fails the build when you exceed your thresholds.

Features

• Per-file budgets — set size limits on individual assets using glob patterns
• Per-page budgets — limit the total JS/CSS payload a single page may reference
• Compression-aware — measure gzip or brotli wire sizes instead of raw bytes
• Dev Toolbar panel — live bundle stats visible inside astro dev
• JSON report — write bundle-budget-report.json to outDir for CI artefact diffing
• Zero runtime dependencies — Node built-ins only

Install

npm install -D astro-bundle-budget

Usage

// astro.config.mjs
import bundleBudget from 'astro-bundle-budget'

export default defineConfig({
  integrations: [
    bundleBudget({
      budgets: [
        { path: 'assets/vendor-*.js', budget: '50 kB' },
        { path: '**/*.js',            budget: '100 kB' },
        { path: '**/*.css',           budget: '20 kB' },
      ],
    })
  ]
})

Links

• npm
• Documentation