Add professional README showcasing project, stack, and patterns
This commit is contained in:
52
README.md
Normal file
52
README.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# TooraSt-wikijs
|
||||
|
||||
**Vodafone-inspired design system for a household Wiki.js knowledge base.**
|
||||
|
||||
A bright, light-theme design system for a self-hosted Wiki.js instance that documents the household — entertainment, lighting, kitchen, garden, pets, and laundry. Everything about how the home works, what it uses, and how to fix it.
|
||||
|
||||
## What it is
|
||||
|
||||
A complete Wiki.js theme built on Vodafone's design language: white canvas, signature scarlet-red CTAs, near-black ink surfaces, and impossibly heavy weight-800 uppercase display type. The typographic story is the brand — a shout, then a calm sentence.
|
||||
|
||||
## Design system
|
||||
|
||||
| Token | Value | Role |
|
||||
|-------|-------|------|
|
||||
| Primary | `#e60000` | Vodafone Red — CTAs, accents |
|
||||
| Ink | `#25282b` | Nav, hero band, footer, headings |
|
||||
| Canvas | `#ffffff` | Light content background |
|
||||
| Canvas soft | `#f2f2f2` | Chips, cards |
|
||||
| Body | `#7e7e7e` | Secondary text |
|
||||
| Display font | Inter (800/300) | Uppercase hero, weight-800 stencil |
|
||||
| Radius | 60px pill / 6px card | Signature button geometry |
|
||||
|
||||
**Principles:** a single accent color, polarity-flip surfaces (dark hero → light content → dark footer), pill buttons on every CTA, no drop shadows — depth via surface contrast.
|
||||
|
||||
## Repository structure
|
||||
|
||||
```
|
||||
├── DESIGN.md # Vodafone design tokens (full system)
|
||||
├── toora-global.css # Global stylesheet injected via Wiki.js theme config
|
||||
└── create-toora-pages.py # GraphQL script — creates household section pages
|
||||
```
|
||||
|
||||
## Deployment to Wiki.js
|
||||
|
||||
1. **Inject the theme:** in Wiki.js admin → *Theme*, set custom head HTML to wrap `toora-global.css` in a `<style>` tag. Keep dark mode **off**.
|
||||
2. **Create pages:** run `create-toora-pages.py` (requires admin JWT) to create: Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.
|
||||
3. **Configure navigation:** the script pairs with the sidebar tree — Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.
|
||||
|
||||
## Architecture patterns
|
||||
|
||||
- **Design-token driven** — CSS custom properties centralize the full Vodafone system
|
||||
- **Band rhythm** — alternating dark/light content bands for visual hierarchy
|
||||
- **Component library** — reusable `.vf-*` classes (buttons, cards, badges, nav, hero bands)
|
||||
- **API-first deployment** — full setup via Wiki.js GraphQL, reproducible
|
||||
|
||||
## Tech
|
||||
|
||||
Wiki.js 2.x · GraphQL API · CSS custom properties · Inter (Google Fonts) · Python (deployment scripts)
|
||||
|
||||
---
|
||||
|
||||
*Part of a homelab documentation ecosystem — see also [SamsTechnical-wikijs](https://gitea.lab.audasmedia.com.au/sam/SamsTechnical-wikijs).*
|
||||
Reference in New Issue
Block a user