michael_dileo
12eadac926
Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com> Reviewed-on: #1
84 lines
3.2 KiB
Plaintext
84 lines
3.2 KiB
Plaintext
---
|
|
description: Project layout and background
|
|
globs:
|
|
alwaysApply: true
|
|
---
|
|
|
|
# Keyboard Vagabond Web Project
|
|
|
|
## Project Overview
|
|
This project is the landing page for Keyboard Vagabond, a collection of fediverse websites running on a kubernetes cluster, and is hosted at www.
|
|
|
|
The goal of this project is to create the website and build so that it can be used in the Keyboard Vagabond kubernetes project.
|
|
|
|
It is a simple, static website with rare updates that features information about the Keyboard Vagabond community and how to get involved in the fediverse.
|
|
|
|
## Tech Stack
|
|
- **CSS Framework**: Pico CSS (complete framework included in project)
|
|
- **Build System**: Shell script (`build.sh`) for deployment
|
|
- **Containerization**: Docker with nginx
|
|
- **Static HTML**: No framework, vanilla HTML/CSS/JS
|
|
|
|
## Project Structure
|
|
|
|
### Root Files
|
|
- `index.html` - Main landing page (root level)
|
|
- `build.sh` - Build script for deployment
|
|
- `Dockerfile` - Container configuration
|
|
- `nginx.conf` - Nginx web server configuration
|
|
- `README.md` - Project documentation
|
|
- `welcome.md` - Welcome/getting started guide
|
|
|
|
### Public Directory (`public/`)
|
|
- `index.html` - Alternative/development version of main page
|
|
- `about.html` - About page
|
|
|
|
### Assets (`public/assets/`)
|
|
- Static assets and resources
|
|
|
|
### CSS Library (`public/css/`)
|
|
Complete Pico CSS framework with all variants:
|
|
- Base versions: `pico.css`, `pico.min.css`
|
|
- Classless versions: `pico.classless.css` and variants
|
|
- Conditional versions: `pico.conditional.css` and variants
|
|
- Fluid versions: `pico.fluid.classless.css` and variants
|
|
- Color themes: Multiple color variants (amber, blue, cyan, green, etc.)
|
|
- Each with minified versions (.min.css)
|
|
|
|
### SCSS Source (`public/scss/`)
|
|
Source files for Pico CSS customization:
|
|
- `_index.scss`, `_settings.scss` - Main configuration
|
|
- `colors/` - Color system and utilities
|
|
- `components/` - UI components (accordion, card, dropdown, etc.)
|
|
- `content/` - Content styling (buttons, code, embedded, etc.)
|
|
- `forms/` - Form controls and styling
|
|
- `layout/` - Layout system (container, document, grid, etc.)
|
|
- `themes/` - Theme definitions
|
|
- `utilities/` - Helper utilities
|
|
|
|
### Scripts (`public/scripts/`)
|
|
- `build-themes.js` - Theme building utility
|
|
|
|
## Key Information for AI Assistants
|
|
|
|
### Development Guidelines
|
|
1. **CSS Framework**: Use Pico CSS classes and semantic HTML
|
|
2. **File Locations**: Main content should be in root `index.html`
|
|
3. **Styling**: Leverage Pico's classless approach when possible
|
|
4. **Build Process**: Use `build.sh` for deployment preparation
|
|
5. **Container Ready**: Project includes Docker configuration
|
|
|
|
### Important Notes
|
|
- The project uses Pico's classless CSS approach - minimal custom classes needed
|
|
- Multiple Pico variants available - choose appropriate one for needs
|
|
- Static site - no server-side processing required
|
|
- Kubernetes deployment target - consider container optimization
|
|
- Fediverse community focus - content should reflect this theme
|
|
|
|
### File Priorities
|
|
1. Root `index.html` - Primary landing page
|
|
2. `public/index.html` - Development/alternative version
|
|
3. `public/about.html` - Secondary page
|
|
4. Pico CSS files - Styling foundation
|
|
5. Build/deployment files - `build.sh`, `Dockerfile`, `nginx.conf`
|