| name | new-template |
| description | Scaffold a new Gatsby page template with GraphQL query |
| argument-hint | [template-name] |
Create a new Gatsby page template named $ARGUMENTS.
Project Conventions
-
File header: Every file starts with:
/************************
* Author: [MR FERRY™] *
* <Month Year> *
************************/
-
Location: Templates go in src/templates/
-
Structure: Each template typically:
- Imports
Layout from ../components/Layout
- Imports
Seo from ../components/Seo
- Exports a default component that wraps content in
<Layout>
- Exports a
Head component using <Seo> for SEO
- Exports a
pageQuery GraphQL query at the bottom
-
Page context: Templates receive context from gatsby-node.ts via pageContext prop. Define the context
interface in src/types/DataTypes.ts.
-
Data flow: Page-level data comes from exported graphql queries, not useStaticQuery.
Steps
- Create
src/templates/$ARGUMENTS.tsx with Layout wrapper and page query
- Add TypeScript interfaces to
src/types/DataTypes.ts
- Register the page in
gatsby-node.ts using createPage()
- If it should be a Slice, register it with
createSlice() in gatsby-node.ts
- Run
git add on new files
- Run
bun run typecheck to verify