|
1 | | -# @hoverkraft/docusaurus-theme |
| 1 | +<div align="center"> |
| 2 | + <h1>@hoverkraft/docusaurus-theme</h1> |
| 3 | + <p>Strictly opinionated Docusaurus theme that enforces Hoverkraft branding and accessibility standards.</p> |
| 4 | +</div> |
2 | 5 |
|
3 | | -A strictly opinionated Docusaurus theme that enforces Hoverkraft branding guidelines for all Hoverkraft documentation projects. |
| 6 | +--- |
| 7 | + |
| 8 | +[](#license) |
| 9 | +[](CONTRIBUTING.md) |
| 10 | + |
| 11 | +## Overview |
| 12 | + |
| 13 | +`@hoverkraft/docusaurus-theme` delivers a production-ready Hoverkraft-branded experience for every Docusaurus documentation project. The theme removes customization levers so that every property stays synchronized with the official Hoverkraft design system, accessibility bar, and editorial tone. |
| 14 | + |
| 15 | +## Feature Highlights |
| 16 | + |
| 17 | +- **Enforced branding**: Colors, typography, spacing, and component styling sourced from the [Hoverkraft Branding Guidelines](https://github.com/hoverkraft-tech/branding). |
| 18 | +- **Accessibility-first**: Built to meet WCAG 2.1 Level AA, with detailed practices captured in `ACCESSIBILITY.md`. |
| 19 | +- **Responsive layout**: Mobile-first breakpoints and fluid components covering desktop, tablet, and handset experiences. |
| 20 | +- **Shared components**: Header, footer, hero, feature grid, buttons, and layout primitives with consistent semantics. |
| 21 | +- **Print-friendly defaults**: Print styles remove noise while preserving content hierarchy. |
| 22 | + |
| 23 | +## Documentation |
| 24 | + |
| 25 | +- Public docs site content lives in `packages/docs` and is sourced from `packages/docs/content`. |
| 26 | +- Generated static output is emitted to `packages/docs/build` during CI and local testing. |
| 27 | +- Component usage and configuration examples are organized under `packages/docs/content/components` and `packages/docs/content/configuration`. |
| 28 | + |
| 29 | +## Packages |
| 30 | + |
| 31 | +| Package | Description | |
| 32 | +| ---------------- | ------------------------------------------------------------------------------------------------- | |
| 33 | +| `packages/theme` | Source for the published `@hoverkraft/docusaurus-theme` package (TypeScript, compiled to `lib/`). | |
| 34 | +| `packages/docs` | Docusaurus site showcasing the theme, used for QA and documentation. | |
4 | 35 |
|
5 | 36 | ## Installation |
6 | 37 |
|
7 | 38 | ```bash |
8 | 39 | npm install @hoverkraft/docusaurus-theme |
9 | | -# or |
10 | | -yarn add @hoverkraft/docusaurus-theme |
11 | 40 | ``` |
12 | 41 |
|
13 | | -## Usage |
14 | | - |
15 | | -Add the theme to your Docusaurus configuration file (`docusaurus.config.js`): |
| 42 | +Add the theme to your Docusaurus configuration: |
16 | 43 |
|
17 | 44 | ```javascript |
| 45 | +// docusaurus.config.js |
18 | 46 | module.exports = { |
19 | | - // ... other config |
| 47 | + // ...other config |
20 | 48 | themes: ["@hoverkraft/docusaurus-theme"], |
21 | | - // No additional configuration required - theme enforces Hoverkraft branding |
22 | 49 | }; |
23 | 50 | ``` |
24 | 51 |
|
25 | | -## Strict Branding Enforcement |
| 52 | +The theme is opinionated by design and intentionally exposes no customization knobs. |
26 | 53 |
|
27 | | -This theme is **opinionated by design** and enforces the official Hoverkraft branding guidelines: |
28 | | - |
29 | | -- **Official Hoverkraft Branding**: Colors, typography, and design elements from the [Hoverkraft Branding Guidelines](https://github.com/hoverkraft-tech/branding) |
30 | | -- **Fixed Implementation**: No customization options to ensure brand consistency |
31 | | -- **Consistent Layout**: Standardized header, footer, and content structure |
| 54 | +## Development |
32 | 55 |
|
33 | | -**No customization options are provided.** This ensures brand consistency across all Hoverkraft documentation projects. |
| 56 | +Use npm workspaces to manage both packages in the monorepo: |
34 | 57 |
|
35 | | -For detailed branding specifications, color palettes, typography guidelines, and design principles, see the official [Hoverkraft Branding Repository](https://github.com/hoverkraft-tech/branding). |
| 58 | +```bash |
| 59 | +npm install # Install workspace dependencies |
| 60 | +npm run lint --workspaces # Run ESLint across packages |
| 61 | +npm run build --workspaces # Build theme and docs outputs |
| 62 | +npm run start --workspace=@hoverkraft/hoverkraft-theme-docs # Launch the docs site |
| 63 | +``` |
36 | 64 |
|
37 | | -## Features |
| 65 | +- Run builds before publishing or submitting pull requests to ensure `packages/theme/lib` is up to date. |
| 66 | +- Accessibility changes must be mirrored in documentation updates; see `ACCESSIBILITY.md` for the audit checklist. |
38 | 67 |
|
39 | | -This theme provides: |
| 68 | +## Testing |
40 | 69 |
|
41 | | -- **Enforced Hoverkraft Branding**: Official color palette, typography, and layout |
42 | | -- **Responsive Design**: Mobile-first responsive layout |
43 | | -- **Professional Components**: Standardized header, footer, and page structure |
44 | | -- **Accessibility**: Built with accessibility best practices |
45 | | -- **Print-friendly**: Optimized print styles |
| 70 | +```bash |
| 71 | +npm run test --workspaces # Execute ts-jest suites |
| 72 | +npm run test:ci --workspaces # Serial test run for CI environments |
| 73 | +npm run lint --workspaces # Linting serves as static analysis guardrail |
| 74 | +``` |
46 | 75 |
|
47 | | -## Development |
| 76 | +- Theme unit tests are located in `packages/theme/src/__tests__`. |
| 77 | +- The docs site can be smoke-tested locally with `npm run start --workspace=@hoverkraft/hoverkraft-theme-docs`. |
48 | 78 |
|
49 | | -To contribute to this theme: |
| 79 | +## Releasing |
50 | 80 |
|
51 | | -1. Clone the repository |
52 | | -2. Install dependencies: `pnpm install` |
53 | | -3. Build the theme: `pnpm --filter @hoverkraft/docusaurus-theme run build` |
54 | | -4. Test your changes locally (optional): `pnpm --filter hoverkraft-theme-docs run start` |
| 81 | +1. Update semantic versioning in `packages/theme/package.json`. |
| 82 | +2. Regenerate `packages/theme/lib` via `npm run build --workspaces`. |
| 83 | +3. Validate docs output with `npm run build --workspace=@hoverkraft/hoverkraft-theme-docs` when content changes. |
| 84 | +4. Publish the theme package via your chosen registry workflow (GitHub Actions or manual `npm publish`). |
55 | 85 |
|
56 | | -### Building |
| 86 | +## Contributing |
57 | 87 |
|
58 | | -```bash |
59 | | -pnpm run build |
60 | | -``` |
| 88 | +Please review [`CONTRIBUTING.md`](CONTRIBUTING.md) for accessibility requirements, review expectations, and code of conduct. |
61 | 89 |
|
62 | | -### Watch mode for development |
| 90 | +## Support |
63 | 91 |
|
64 | | -```bash |
65 | | -pnpm --filter @hoverkraft/docusaurus-theme run build:watch |
66 | | -``` |
| 92 | +Questions or issues? Open an issue in the [GitHub repository](https://github.com/hoverkraft-tech/docusaurus-theme) or start a discussion. |
67 | 93 |
|
68 | 94 | ## License |
69 | 95 |
|
70 | | -MIT License - see [LICENSE](./LICENSE) for details. |
71 | | - |
72 | | -## Support |
73 | | - |
74 | | -For issues and questions, please open an issue in the [GitHub repository](https://github.com/hoverkraft-tech/docusaurus-theme). |
| 96 | +MIT License — see [LICENSE](LICENSE) for details. |
0 commit comments