|
| 1 | +--- |
| 2 | +title: "Contribute to the Site" |
| 3 | +layout: "page" |
| 4 | +showInNav: true |
| 5 | +navOrder: 7 |
| 6 | +slug: "/contribute" |
| 7 | +hero: |
| 8 | + title: "Contribute to the Beatbox site" |
| 9 | + subtitle: "Edit content safely, preview changes locally, and ship updates confidently." |
| 10 | + primaryCta: |
| 11 | + label: "View the repo" |
| 12 | + href: "https://github.com/Open-BeatBox/Open-BeatBox.github.io" |
| 13 | +sections: |
| 14 | + - type: "columns" |
| 15 | + title: "What lives where" |
| 16 | + columns: |
| 17 | + - heading: "Content-first updates" |
| 18 | + body: | |
| 19 | + - Markdown in `content/` drives all pages and navigation. |
| 20 | + - Use frontmatter to set `title`, `slug`, `hero`, `sections`, and `showInNav`. |
| 21 | + - Blog posts live in `content/blog/` with `layout: "blog"` and `publishAt`. |
| 22 | + - heading: "Code changes" |
| 23 | + body: | |
| 24 | + - React components and styles live in `src/`. |
| 25 | + - Forms, email logic, and SEO helpers are in `src/lib` and `src/app/api`. |
| 26 | + - Only touch TypeScript/React if you need new layouts or behaviors. |
| 27 | + - type: "steps" |
| 28 | + title: "Local workflow" |
| 29 | + steps: |
| 30 | + - "Clone the repo, install dependencies with `npm install`, and copy any required env vars from `.env.example` into `.env.local` (Mailgun keys are only needed for testing the contact form)." |
| 31 | + - "Run `npm run dev` and open http://localhost:3000 to preview changes live." |
| 32 | + - "Edit Markdown in `content/` (or components in `src/` if needed), then refresh the page to verify the layout." |
| 33 | + - "Run `npm run lint`, `npm run type-check`, and `npm run test` before opening a pull request." |
| 34 | + - "Push a branch and open a PR with a short summary, the pages touched, and screenshots for visual changes." |
| 35 | + - type: "text" |
| 36 | + title: "Frontmatter reference" |
| 37 | + body: | |
| 38 | + Each page is a Markdown file with YAML frontmatter. Common fields: |
| 39 | +
|
| 40 | + ```yaml |
| 41 | + --- |
| 42 | + title: "Contribute to the Site" |
| 43 | + layout: "page" # or "blog" |
| 44 | + slug: "/contribute" # must start with "/" |
| 45 | + showInNav: true # controls top navigation |
| 46 | + navOrder: 7 # lower number = leftmost |
| 47 | + hero: |
| 48 | + title: "Readable headline" |
| 49 | + subtitle: "Short, actionable promise." |
| 50 | + sections: |
| 51 | + - type: "text" |
| 52 | + title: "Section title" |
| 53 | + body: | |
| 54 | + Markdown body with links, lists, and code fences. |
| 55 | + publishAt: "2024-06-01" # blog only; future dates stay hidden |
| 56 | + --- |
| 57 | + ``` |
| 58 | +
|
| 59 | + Hero images can be set with `hero.backgroundImage`. Links in body content open in a new tab by default. |
| 60 | + - type: "list" |
| 61 | + title: "Supported section types" |
| 62 | + items: |
| 63 | + - "`featureCards`, `cards`, `columns` for grouped highlights." |
| 64 | + - "`text` for Markdown prose (headings, lists, code blocks)." |
| 65 | + - "`steps`, `pipeline` for ordered flows; `updates` for lists with links." |
| 66 | + - "`faq` for collapsible Q&A." |
| 67 | + - "`links` for compact resource lists with optional notes." |
| 68 | + - "`warning` for important notices; `contactForm` to embed the email form." |
| 69 | + - type: "cards" |
| 70 | + title: "Common tasks" |
| 71 | + cards: |
| 72 | + - title: "Add a new page" |
| 73 | + body: "Duplicate a file in `content/`, change `title`, `slug`, `navOrder`, and update `sections`. Set `showInNav: true` if it should appear in the top nav." |
| 74 | + - title: "Add a blog post" |
| 75 | + body: "Create `content/blog/my-post.md` with `layout: \"blog\"`, a `publishAt` date, and a hero. Posts are sorted newest first; future-dated posts stay hidden until the date." |
| 76 | + - title: "Tweak navigation labels" |
| 77 | + body: "Edit the `title` and `showInNav` fields in the relevant Markdown file. The nav bar is generated from frontmatter, so no code change is needed." |
| 78 | + - title: "Adjust metadata" |
| 79 | + body: "Global defaults live in `content/_site.md`. Override per page with `description`, `keywords`, or a `hero.backgroundImage` for social cards." |
| 80 | + - type: "warning" |
| 81 | + title: "Checklist before opening a PR" |
| 82 | + body: | |
| 83 | + - Confirm the page renders correctly on desktop and mobile in the dev server. |
| 84 | + - Ensure `slug` values are unique and begin with `/`. |
| 85 | + - Keep `navOrder` integers unique to avoid shuffling in the header. |
| 86 | + - Run `npm run lint`, `npm run type-check`, and `npm run test`. |
| 87 | + - If you touched content, skim for typos and broken links; if you touched code, note the impacted routes in the PR description. |
| 88 | + - type: "links" |
| 89 | + title: "Helpful links" |
| 90 | + links: |
| 91 | + - label: "Repository on GitHub" |
| 92 | + href: "https://github.com/Open-BeatBox/Open-BeatBox.github.io" |
| 93 | + note: "Open issues and create pull requests here." |
| 94 | + - label: "README.md" |
| 95 | + href: "https://github.com/Open-BeatBox/Open-BeatBox.github.io/blob/main/README.md" |
| 96 | + note: "Architecture overview, scripts, and environment variables." |
| 97 | + - label: "Next.js App Router docs" |
| 98 | + href: "https://nextjs.org/docs/app" |
| 99 | + note: "Reference for routing, metadata, and data fetching." |
| 100 | +--- |
0 commit comments