diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bbb66a0..f61f067 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,33 +23,24 @@ pnpm dev | `pnpm dev` | Start dev server | | `pnpm build` | Build for production | | `pnpm preview` | Preview production build | -| `pnpm test` | Run tests | -| `pnpm test:watch` | Watch mode | -| `pnpm test:coverage` | Coverage report | -| `pnpm lint` | Lint code | -| `pnpm lint:fix` | Fix lint issues | -| `pnpm type-check` | TypeScript check | -| `pnpm format` | Format with Prettier | -| `pnpm format:check` | Check formatting | +| `pnpm validate-registry` | Validate public/registry.json | +| `pnpm update-readme-versions` | Sync README version table from registry | ## Pull Request Process 1. Fork and create branch from `main` 2. Make changes following coding standards -3. Add tests for new functionality -4. Ensure all checks pass: +3. Verify the build succeeds: ```bash - pnpm lint && pnpm type-check && pnpm test + pnpm build ``` 5. Submit PR ### Quality Standards -- ✅ All tests pass -- ✅ Coverage ≥80% -- ✅ No lint errors -- ✅ TypeScript strict mode -- ✅ Formatted with Prettier +- ✅ Build succeeds (`pnpm build`) +- ✅ Registry validates (`pnpm validate-registry`) +- ✅ Spellcheck passes (CI) ## Coding Standards @@ -58,13 +49,13 @@ pnpm dev - No `any` types - Proper type definitions -### React -- Functional components with hooks -- Small, focused components -- Custom hooks for reusable logic +### Astro +- Use `.astro` single-file components +- Prefer Astro components over framework components +- Leverage the shared `@jongio/azd-web-core` design system ### Styling -- Tailwind CSS utilities +- Tailwind CSS 4 utilities - Responsive design - Semantic HTML @@ -212,37 +203,9 @@ $extensions = @( ) ``` -### 6. Add UI Card Data in `ExtensionCard.tsx` - -Add your extension's rich card data to the `extensionData` record in `src/components/ExtensionCard.tsx`: - -```tsx -'jongio.azd.myext': { - tagline: 'Short tagline', - description: 'Longer description of what the extension does.', - highlight: 'var(--color-glow-violet)', // pick a glow color - website: 'https://jongio.github.io/azd-myext/', - repository: 'https://github.com/jongio/azd-myext', - features: [ - { icon: Terminal, title: 'Feature 1', desc: 'What it does' }, - // ... up to 4 features - ], - scenarios: [ - { title: 'Basic Usage', command: 'azd myext run' }, - // ... example commands - ], -}, -``` +### 6. Add UI Card Data in `ExtensionShowcase.astro` -Also update the sort order in `src/App.tsx` if you want to control card positioning: -```tsx -const order: Record = { - 'jongio.azd.copilot': 0, - 'jongio.azd.app': 1, - 'jongio.azd.exec': 2, - 'jongio.azd.myext': 3, // Add your extension -} -``` +Add your extension's showcase entry in `src/pages/index.astro` using the `ExtensionShowcase` Astro component. See the existing entries for the expected props (tagline, description, glowColor, features, scenarios, etc.). ### 7. Test the Full Flow @@ -261,14 +224,14 @@ const order: Record = { | 3 | Extension repo | Add dispatch step to `release.yml` | | 4 | GitHub Settings | Create PAT and add `EXTENSIONS_DISPATCH_TOKEN` secret | | 5 | azd-extensions | Add to `scripts/install-all.ps1` and `scripts/watch-all.ps1` | -| 6 | azd-extensions | Add card data in `ExtensionCard.tsx` and sort order in `App.tsx` | +| 6 | azd-extensions | Add showcase entry in `src/pages/index.astro` | | 7 | Both repos | Test registry update, dev build, and local install | ## CI/CD Workflows | Workflow | Trigger | Purpose | |----------|---------|---------| -| `ci.yml` | Push/PR | Lint, type-check, test, build | +| `ci.yml` | Push/PR | Build, validate registry, spellcheck | | `publish.yml` | Daily / Manual / Dispatch | Update registry, build, deploy to GitHub Pages | | `codeql.yml` | Weekly / PR | Security scanning | | `spellcheck.yml` | Push/PR | Spell checking | @@ -278,20 +241,24 @@ const order: Record = { ``` ├── src/ -│ ├── components/ # React components -│ │ ├── ui/ # shadcn/ui components -│ │ └── icons/ # Custom icons -│ ├── lib/ # Utility functions -│ ├── test/ # Test setup -│ ├── types/ # TypeScript types -│ ├── App.tsx # Main app -│ ├── main.tsx # Entry point -│ └── index.css # Global styles +│ ├── components/ # Astro components +│ │ └── ExtensionShowcase.astro +│ ├── pages/ +│ │ └── index.astro # Main page +│ └── styles/ +│ └── global.css # Global styles ├── public/ -│ └── registry.json # Extension registry +│ └── registry.json # Aggregated extension registry ├── scripts/ -│ └── update-registry.js -└── .github/workflows/ # CI/CD +│ ├── lib/semver.js # Shared semver utility +│ ├── update-registry.js # Aggregates per-repo registries +│ ├── update-readme-versions.js +│ ├── validate-registry.js +│ ├── install-all.ps1 # Local dev: build & install all extensions +│ ├── uninstall-all.ps1 # Local dev: remove all extensions +│ └── watch-all.ps1 # Local dev: watch & rebuild +├── schemas/ # Registry JSON schemas +└── .github/workflows/ # CI/CD ``` ## Reporting Issues diff --git a/QUICKSTART.md b/QUICKSTART.md index 37e169f..1cc1b6e 100644 --- a/QUICKSTART.md +++ b/QUICKSTART.md @@ -21,7 +21,7 @@ cd azd-extensions pnpm install ``` -This will install all required packages including React 19, Vite, TypeScript, Tailwind CSS 4, and testing tools. +This will install all required packages including Astro, TypeScript, and Tailwind CSS 4. ## 3. Start Development Server @@ -29,7 +29,7 @@ This will install all required packages including React 19, Vite, TypeScript, Ta pnpm dev ``` -The site will be available at `http://localhost:5173` +The site will be available at `http://localhost:4321` ## 4. Explore the Site @@ -37,17 +37,11 @@ The site will be available at `http://localhost:5173` - Check the responsive design on different screen sizes - Review the getting started instructions -## 5. Run Tests +## 5. Validate the Registry ```bash -# Run all tests once -pnpm test - -# Run tests in watch mode (recommended during development) -pnpm test:watch - -# Generate coverage report -pnpm test:coverage +# Validate the aggregated registry +pnpm validate-registry ``` ## 6. Build for Production @@ -67,20 +61,11 @@ pnpm preview ## Common Development Commands ```bash -# Type checking -pnpm type-check - -# Linting -pnpm lint - -# Fix lint issues -pnpm lint:fix - -# Format code -pnpm format +# Validate registry data +pnpm validate-registry -# Check formatting -pnpm format:check +# Update README version table from registry +pnpm update-readme-versions ``` ## Adding Your First Extension @@ -126,7 +111,7 @@ Save and refresh the browser - your extension will appear! ### Port Already in Use -If port 5173 is already in use, Vite will automatically use the next available port. +If port 4321 is already in use, Astro will automatically use the next available port. ### Module Not Found