|
1 | 1 | # GitHub Copilot Instructions |
2 | 2 |
|
| 3 | +## Project Overview |
| 4 | + |
| 5 | +This is **TechWatching.dev**, Alexandre Nédélec's personal blog at https://techwatching.dev. It is a statically generated site built with: |
| 6 | + |
| 7 | +- **Nuxt 4** — Vue.js meta-framework (compatibility date `2024-07-11`) |
| 8 | +- **Nuxt UI v3** (`@nuxt/ui`) — UI component library based on TailwindCSS v4 |
| 9 | +- **Nuxt Content v3** (`@nuxt/content`) — Markdown/YAML content management with SQLite |
| 10 | +- **TailwindCSS v4** — Utility-first CSS |
| 11 | +- **@nuxtjs/seo** — SEO, OG images, schema.org, sitemap |
| 12 | +- **TypeScript** — strict typing throughout |
| 13 | + |
| 14 | +## Development Environment |
| 15 | + |
| 16 | +### Package Manager |
| 17 | + |
| 18 | +This project uses **pnpm** (version specified in `package.json` → `"packageManager": "pnpm@10.29.2"`). Always use `pnpm` — never `npm` or `yarn`. |
| 19 | + |
| 20 | +The `.npmrc` sets `shamefully-hoist=true`. |
| 21 | + |
| 22 | +### Bootstrap |
| 23 | + |
| 24 | +```bash |
| 25 | +pnpm install # install all dependencies |
| 26 | +``` |
| 27 | + |
| 28 | +### Common Commands |
| 29 | + |
| 30 | +| Command | Description | |
| 31 | +|---------|-------------| |
| 32 | +| `pnpm dev` | Start dev server at http://localhost:3000 | |
| 33 | +| `pnpm build` | Build for production (SSR) | |
| 34 | +| `pnpm generate` | Generate static site (prerendered) | |
| 35 | +| `pnpm preview` | Preview production build | |
| 36 | +| `pnpm lint` | Run ESLint | |
| 37 | +| `pnpm lint:fix` | Run ESLint with auto-fix | |
| 38 | +| `pnpm typecheck` | Run TypeScript type checking via `nuxt typecheck` | |
| 39 | + |
| 40 | +### CI Validation |
| 41 | + |
| 42 | +The CI workflow (`.github/workflows/ci.yml`) runs on every push: |
| 43 | + |
| 44 | +1. `pnpm install` — install dependencies |
| 45 | +2. `pnpm run lint` — **must pass with zero errors** |
| 46 | +3. `pnpm run typecheck` — **must pass with zero errors** |
| 47 | + |
| 48 | +Always run both `pnpm lint` and `pnpm typecheck` before committing. Fix all lint and type errors before marking work as done. |
| 49 | + |
| 50 | +## Project Layout |
| 51 | + |
| 52 | +``` |
| 53 | +techwatching.dev/ |
| 54 | +├── .github/ |
| 55 | +│ ├── copilot-instructions.md # this file — repository-wide Copilot instructions |
| 56 | +│ ├── git-commit-instructions.md # Conventional Commits format guide |
| 57 | +│ ├── instructions/ # path-specific instructions (.instructions.md) |
| 58 | +│ │ ├── content.instructions.md # applyTo: content/**/*.{md,yml} |
| 59 | +│ │ └── nuxt.instructions.md # applyTo: **/*.vue |
| 60 | +│ ├── prompts/ # reusable prompt templates |
| 61 | +│ │ └── new-article.prompt.md |
| 62 | +│ ├── agents/ # Copilot agent definitions |
| 63 | +│ │ └── nuxt.agent.md |
| 64 | +│ └── workflows/ |
| 65 | +│ └── ci.yml # lint + typecheck on every push |
| 66 | +├── app/ # Nuxt app source (Nuxt 4 layout) |
| 67 | +│ ├── app.vue # root Vue component |
| 68 | +│ ├── app.config.ts # Nuxt UI theme config (colors, components) |
| 69 | +│ ├── components/ # shared Vue components (AppHeader, GiscusComments, etc.) |
| 70 | +│ ├── pages/ # file-based routes (index.vue, blog/[slug].vue, etc.) |
| 71 | +│ ├── layouts/ # Nuxt layouts (default.vue) |
| 72 | +│ ├── assets/css/main.css # global TailwindCSS entry point |
| 73 | +│ ├── plugins/ # Nuxt plugins (posthog.client.ts) |
| 74 | +│ ├── types/ # shared TypeScript types |
| 75 | +│ └── utils/ # utility functions |
| 76 | +├── content/ # @nuxt/content source files |
| 77 | +│ ├── 0.index.yml # home page structured data |
| 78 | +│ ├── 1.posts/ # blog posts — {number}.{slug}.md |
| 79 | +│ ├── 2.speaking.yml # speaking events array |
| 80 | +│ └── 3.goodies/ # goodies/tools — {slug}.md |
| 81 | +├── server/ |
| 82 | +│ ├── api/ # JSON API endpoints (*.<method>.ts) |
| 83 | +│ └── routes/ # custom routes (RSS/Atom: *.rss, *.atom) |
| 84 | +├── public/ # static assets served as-is |
| 85 | +├── content.config.ts # @nuxt/content collection schemas (zod) |
| 86 | +├── nuxt.config.ts # Nuxt configuration |
| 87 | +├── eslint.config.mjs # ESLint flat config |
| 88 | +├── tsconfig.json # TypeScript config |
| 89 | +├── pnpm-workspace.yaml # pnpm workspace |
| 90 | +└── .npmrc # pnpm config |
| 91 | +``` |
| 92 | + |
| 93 | +### Key architecture notes |
| 94 | + |
| 95 | +- **Static generation**: all routes prerendered via `routeRules: { '/**': { prerender: true } }` and Nitro crawl |
| 96 | +- **Content collections**: defined in `content.config.ts` using `defineCollection` + zod schemas; collection names are `index`, `posts`, `speaking`, `goodies`, `goodiesPage`, `content` |
| 97 | +- **Server handlers**: must import from `@nuxt/content/server` and pass `event` as first arg: `queryCollection(event, 'posts')` |
| 98 | +- **Commit messages**: follow Conventional Commits (see `.github/git-commit-instructions.md`) |
| 99 | + |
3 | 100 | ## MCP Tool Usage |
4 | 101 |
|
5 | 102 | When answering questions about this project, use the appropriate MCP (Model Context Protocol) tools: |
@@ -45,16 +142,6 @@ Activate additional tool groups as needed: |
45 | 142 | - How do I deploy to Netlify/Vercel? |
46 | 143 | - How do I create API routes in Nuxt? |
47 | 144 |
|
48 | | -## Project Context |
49 | | - |
50 | | -This is a personal blog built with: |
51 | | -- **Nuxt 4** - Vue.js meta-framework |
52 | | -- **Nuxt UI v3** - UI component library |
53 | | -- **Nuxt Content v3** - Markdown/content management |
54 | | -- **TailwindCSS v4** - Styling |
55 | | - |
56 | | -Content is stored in the `content/` directory with blog posts in `content/1.posts/`. |
57 | | - |
58 | 145 | ## Nuxt UI v3 Styling Guidelines |
59 | 146 |
|
60 | 147 | When customizing Nuxt UI v3 components: |
|
0 commit comments