Shared Astro components, design tokens, and Tailwind v4 preset for azd extension websites. Implements the "Developer Terminal" design language—dark-first, monospace accents, sky-blue/violet palette.

# .npmrc — point @jongio scope at GitHub Packages
echo "@jongio:registry=https://npm.pkg.github.com" >> .npmrc

# add the package
pnpm add @jongio/azd-web-core

Peer dependencies: astro >=5.0.0 and tailwindcss >=4.0.0

In your global stylesheet (e.g. src/styles/global.css):

@import "@jongio/azd-web-core/base.css";

base.css already imports tokens.css and Tailwind, so one import is all you need.

---
import Layout from "@jongio/azd-web-core/components/Layout.astro";
import Header from "@jongio/azd-web-core/components/Header.astro";
import Footer from "@jongio/azd-web-core/components/Footer.astro";
import HeroBanner from "@jongio/azd-web-core/components/HeroBanner.astro";
import FeatureCard from "@jongio/azd-web-core/components/FeatureCard.astro";
---

<Layout title="My Extension" extensionName="my-ext">
  <Header extensionName="my-ext" githubUrl="https://github.com/org/repo" />
  <HeroBanner
    titleHtml='Build with <span class="gradient-text">azd</span>'
    subtitle="A developer extension for the Azure Developer CLI."
    primaryCta={{ label: "Get Started", href: "#install" }}
  />
  <section class="mx-auto grid max-w-5xl gap-6 p-6 md:grid-cols-3">
    <FeatureCard title="Fast" description="Optimised for speed." icon="⚡" />
    <FeatureCard title="Typed" description="Full TypeScript support." icon="🔒" />
    <FeatureCard title="Themed" description="Dark & light out of the box." icon="🎨" />
  </section>
  <Footer extensionName="my-ext" githubUrl="https://github.com/org/repo" />
</Layout>

If you want the token values available as Tailwind utilities in JS config:

import preset from "@jongio/azd-web-core/tailwind-preset";
// preset.colors, preset.fontFamily, etc.

Dark is the default. The Layout component initialises the theme from localStorage (key: azd-theme), falling back to the OS preference, then to dark. Toggle with the ThemeToggle component or manually:

document.documentElement.setAttribute("data-theme", "light"); // or "dark"

All colours, typography, spacing, radius, and shadows are CSS custom properties defined in tokens.css. Components reference them via var(--color-*), var(--font-*), etc. See the file for the full list.

@jongio/azd-web-core is published to GitHub Packages on every version tag (v*).

Consumer sites declare the dependency as a versioned package:

"@jongio/azd-web-core": "^2.0.0"

For local development, link to your local clone instead of installing from the registry:

# Run once per clone, from each consumer site's web/ directory
pnpm link ../../azd-web-core

This creates a symlink so edits to azd-web-core components are picked up immediately (restart the dev server after changes).

• Local dev: Uses the symlinked local clone — no publish needed
• CI builds: Pulls the published package from GitHub Packages — no local clone required

When a new version of azd-web-core is published:

1. publish.yml publishes to GitHub Packages
2. notify-consumers.yml sends a repository_dispatch event to all consumer repos
3. Each site's website.yml triggers, installs the new version, builds, and deploys to GitHub Pages

• Each consumer site needs .npmrc with @jongio:registry=https://npm.pkg.github.com
• CI workflows use NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} for GitHub Packages auth
• The CONSUMER_DISPATCH_PAT secret on this repo needs a PAT with repo scope for cross-repo dispatch

# Bump version
npm version patch  # or minor, major

# Push with tag
git push && git push --tags

The publish workflow runs automatically on v* tags.

MIT