88 lines
4.5 KiB
Markdown
88 lines
4.5 KiB
Markdown
# Repository Guidelines
|
|
|
|
## Project Structure & Module Organization
|
|
|
|
```
|
|
website/
|
|
├── index.html # Single-page entry point — all 5 tabs live here
|
|
├── gallery-container.html # Static gallery image tags (50 images)
|
|
├── _redirects # Netlify SPA rewrite rule (/* → /index.html)
|
|
├── js/
|
|
│ ├── tabs.js # Client-side routing, tab switching, background video swap
|
|
│ ├── comments.js # Steam-style comment wall (Firestore: comments + stats)
|
|
│ ├── yuukabot.js # Live bot dashboard (Firestore: sysinfo/server)
|
|
│ ├── calendar.js # Event calendar (Firestore: calendar_events)
|
|
│ └── gallery.js # Lightbox + dynamic thumbnail loader
|
|
├── style/
|
|
│ ├── styles.css # Global layout, nav bar, base typography
|
|
│ ├── comments.css # Steam-profile comment UI
|
|
│ ├── yuukabot.css # Dashboard glassmorphism cards + grid
|
|
│ ├── calendar.css # Calendar grid, popups, sidebar
|
|
│ ├── gallery.css # Gallery grid + lightbox
|
|
│ └── ahmet.css # Bucketlist tab button
|
|
├── gallery/ # 50 full-quality images + thumbnails/ subdirectory
|
|
├── textures/ # Background MP4 videos + clickable character PNG
|
|
├── sounds/ # Click SFX (yuuka_click.mp3)
|
|
├── generate_thumbnails.py # Pillow script: resizes gallery/ images → thumbnails/
|
|
└── firebase.txt # Firestore security rules (reference only)
|
|
```
|
|
|
|
- **No frameworks, no build step, no package manager.** Every file is served directly.
|
|
- Assets are organised by type (images in `gallery/`, videos/PNGs in `textures/`).
|
|
- Firebase config is duplicated per JS file, each guarding `firebase.initializeApp()` with `if (!firebase.apps.length)` to avoid collisions.
|
|
|
|
## Build, Test, and Development Commands
|
|
|
|
This is a static site with **no build system**. Run locally with any HTTP server:
|
|
|
|
```sh
|
|
# Python 3 (recommended)
|
|
python -m http.server 8080
|
|
|
|
# Node.js alternative
|
|
npx serve .
|
|
```
|
|
|
|
- `_redirects` handles SPA routing on Netlify; for local dev, navigate to `/index.html` directly.
|
|
- `generate_thumbnails.py` regenerates gallery thumbnails: `python generate_thumbnails.py`. Requires `Pillow`.
|
|
|
|
There are **no automated tests** in this project.
|
|
|
|
## Coding Style & Naming Conventions
|
|
|
|
- **HTML:** Semantic elements where practical. Tab contents use `<section id="…" class="tab-content">`. IDs are kebab-case.
|
|
- **CSS:** Each tab has its own stylesheet under `style/`. Class names follow BEM-lite (`cal-day`, `dash-card`). CSS variables define layout knobs (`--dash-columns`, `--dash-gap`).
|
|
- **JavaScript:** Vanilla ES6+, no transpilation. Functions are `camelCase`, DOM-referencing IDs match kebab-case HTML IDs. Each script is self-contained with a `DOMContentLoaded` guard. Firebase config is repeated per-file (same values) — keep this pattern.
|
|
- **Whitespace:** 4-space indentation in JS/CSS, 2-space in HTML. No trailing semicolons are required but consistency within each file is expected.
|
|
- No linters or formatters are configured.
|
|
|
|
## Commit & Pull Request Guidelines
|
|
|
|
Commit history follows an informal style:
|
|
|
|
```
|
|
<verb> <short description>
|
|
```
|
|
|
|
Examples from the repo: `calendar added`, `fix upcoming filter`, `css polish bs`, `tab specific routing added`.
|
|
|
|
- Use lowercase, imperative mood.
|
|
- Keep messages short (under 72 characters).
|
|
- Group related changes into a single commit where possible.
|
|
- PRs should include a brief description of what changed and why; screenshots are appreciated for visual/UI changes.
|
|
|
|
## Security & Configuration
|
|
|
|
- **Firebase API keys** are public by design (they identify the project, not authenticate). Do not commit service-account credentials or `.env` files.
|
|
- `firebase.txt` is in `.gitignore` — keep the live rules reference there, not hardcoded in source.
|
|
- All Firestore writes are guarded by security rules (see `firebase.txt`): only `comments` and `stats/global_clicks` accept public writes; everything else is read-only.
|
|
|
|
## Adding a New Feature
|
|
|
|
1. Add the new `<section class="tab-content" id="…">` in `index.html`.
|
|
2. Add a `<button id="…-btn">` to the nav bar (`#top-line`).
|
|
3. Add the tab name to the `valid` array in `js/tabs.js`.
|
|
4. Create a dedicated stylesheet in `style/` and JS module in `js/` if needed.
|
|
5. Link both in `index.html` `<head>` (CSS) and before `</body>` (JS).
|
|
6. If the feature reads/writes Firestore, add the matching security rules to `firebase.txt`.
|