wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Claude goes to town

Browse source
This commit is contained in:
Ben Aultowski 2026-01-05 13:16:19 -05:00
parent efd2121d0b
commit eba69326f0
2 changed files with 190 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
.github/copilot-instructions.md vendored
View file

@ -1,14 +1,178 @@
# Project Structure
# Hypnagaga - Eleventy Project
This is an Eleventy (11ty) project based on [eleventy-excellent](https://github.com/madrilene/eleventy-excellent.git).
This is an Eleventy (11ty) static site generator project, based on [eleventy-excellent](https://github.com/madrilene/eleventy-excellent.git), customized for hosting music mixes with track listings and annotations.
**Tech Stack**: Eleventy 3.x (ESM), Tailwind CSS (token-based), CUBE CSS methodology, WebC components, Hotwired Turbo for navigation, PostCSS, esbuild
## Quick Start
```bash
npm install # Install dependencies
npm start # Dev server at localhost:8080
npm run build # Production build
npm run colors # Regenerate color tokens
npm run test:a11y # Run accessibility tests
```
**Key Files to Know:**
- `eleventy.config.js` - Main Eleventy config (imports from `src/_config/`)
- `src/_config/` - Modular config (collections, filters, events, plugins, shortcodes)
- `src/_data/designTokens/` - Design tokens (colors, spacing, fonts)
- `src/pages/projects/mixes/` - Music mix tracks (markdown files)
- `src/assets/css/global/` - Global CSS (CUBE methodology)
# Configuration
## Architecture & Key Concepts
This project uses ESM syntax instead of CommonJS. Configurations are structured into separate modules in `src/_config` and are then imported into the main configuration file.
### Music Mix System
The project's core feature is a hierarchical music mix/track system:
- **Projects** (e.g., "TomorrowsBacon") contain multiple tracks
- **Tracks** are individual markdown files in `src/pages/projects/mixes/{project-name}/`
- Tracks have frontmatter: `project`, `track_number`, `artist`, `album`, `albumArt`, `start_time`
- Collection `tracksByProject` (defined in `src/_config/collections.js`) groups and sorts tracks by project
- Layouts: `mix.njk` shows track list, `mix-track.njk` shows individual track with prev/next navigation
- Turbo Drive provides SPA-like navigation between tracks without full page reloads
### Configuration Architecture
**ESM-based modular config** in `src/_config/` - all files use `export` syntax:
- `collections.js` - Eleventy collections (getAllPosts, tagList, tracksByProject)
- `events.js` - Build hooks (CSS/JS compilation, pagefind indexing)
- `filters.js` - Template filters (dates, markdown, slugify)
- `plugins.js` - Eleventy plugins (image transform, WebC, RSS, syntax highlighting)
- `shortcodes.js` - Reusable template functions (image, svg, animateText)
Each category imports from subdirectories (e.g., `filters/dates.js`) and exports a consolidated object.
### Design Tokens & Tailwind
- Design tokens stored as JSON in `src/_data/designTokens/` (colors, spacing, fonts, viewports)
- `tokensToTailwind()` and `clampGenerator()` utilities convert tokens to Tailwind config
- Tailwind is customized to generate utilities from design tokens (e.g., `mt-xs-s`, `bg-pink`)
- Custom properties generated via Tailwind plugin (e.g., `--color-pink`, `--space-m`)
- **Run `npm run colors`** after editing `colorsBase.json` to regenerate `colors.json` with shades
- Tailwind's preflight/reset is **disabled** - custom reset in `src/assets/css/global/reset.css`
### CSS Architecture (CUBE CSS)
Layer order in `src/assets/css/global/global.css`:
1. `tailwindcss/base` (mostly unused, preflight disabled)
2. Custom reset, fonts
3. `tailwindcss/components` (where custom properties are injected)
4. Variables, global styles
5. Blocks, compositions, utilities (via `@import-glob`)
6. `tailwindcss/utilities`
**Key patterns:**
- Use compositions (grid, flow, wrapper) over Tailwind's container
- Blocks for component-specific styles
- Utilities for single-purpose helpers (e.g., text animations)
- Custom utilities like `flow-space-*`, `gutter-*`, `region-space-*` control layout spacing
### Build Process
**Before Eleventy runs** (`eleventy.before` event):
1. `buildAllCss()` processes CSS with PostCSS (import-glob → tailwind → autoprefixer → cssnano)
- Global CSS: `src/assets/css/global/global.css` → `src/_includes/css/global.css` (inlined)
- Local CSS: `src/assets/css/local/**/*.css` → `src/_includes/css/` (per-page bundles)
- Component CSS: `src/assets/css/components/**/*.css` → `dist/assets/css/components/`
2. `buildAllJs()` bundles JS with esbuild
- Inline bundle: `src/assets/scripts/bundle/**/*.js` → `src/_includes/scripts/`
- Defer bundle: similar process
- Component scripts: `src/assets/scripts/components/**/*.js` → `dist/assets/components/`
**After Eleventy builds** (`eleventy.after` event):
- `buildPagefind()` generates search index (only in production)
**Watch targets**: `src/assets/**/*.{css,js,svg,png,jpeg}`, `src/_includes/**/*.webc`
### Image Handling
Three methods for image optimization (via @11ty/eleventy-img):
1. **HTML Transform**: Automatically processes `<img>` elements in HTML output
2. **Markdown**: `![alt](/path/to/image.jpg)` → transformed to `<picture>` element
3. **Shortcodes**: `{% image '/path/to/image.jpg', 'alt text' %}` or `{% imageKeys {...} %}`
Images are processed to WebP/JPEG, multiple widths, and optimized. Source paths are prepended with `./src` automatically in shortcodes.
## Development Workflows
### Essential Commands
- **`npm start`** - Dev server with live reload (runs `dev:11ty`)
- **`npm run build`** - Full production build (clean → build:11ty → build:search)
- **`npm run colors`** - Regenerate color palettes from `colorsBase.json`
- **`npm run favicons`** - Generate favicons from `src/assets/svg/misc/logo.svg`
- **`npm run test:a11y`** - Run Pa11y accessibility tests
### Adding a New Track
1. Create markdown file in `src/pages/projects/mixes/{project-name}/{track-number}-{slug}.md`
2. Include frontmatter:
```yaml
---
title: "Song Title"
artist: "Artist Name"
album: "Album Name"
project: ProjectName # must match existing project
track_number: 1
albumArt: "/pages/projects/mixes/{project}/image.jpg"
---
```
3. Track automatically appears in `collections.tracksByProject[project]`
4. Navigation (prev/next) auto-generates in `mix-track.njk` layout
### Working with Design Tokens
1. Edit JSON files in `src/_data/designTokens/`
2. For colors: Edit `colorsBase.json` → run `npm run colors` → regenerate `colors.json`
3. Tokens flow to: CSS custom properties, Tailwind utilities, and templates (via `{{ designTokens }}`)
4. Fluid type/space uses Utopia-style clamps (configured in `clamp-generator.js`)
### Text Animations
Use the `animateText` shortcode or markdown-it-attrs classes:
```jinja2
{% animateText "Hello", "shiver", "1.5" %} {# content, animation, speed #}
```
Available: `shiver`, `wobble`, `jitter`, `bounce`, `bob`, `wave` (defined in `src/assets/css/global/utilities/text-animations.css`)
Safelist these classes in `tailwind.config.js` so they're not purged.
## Project-Specific Patterns
### Collections
- **`allPosts`**: All markdown files in `src/posts/**/*.md` (reversed chronological)
- **`tagList`**: Unique tags across all content (excludes 'posts', 'docs', 'all', 'mix', 'project')
- **`goPages`**: Pages with `go:` frontmatter for URL redirects (output to `_redirects`)
- **`tracksByProject`**: Tracks grouped by project, sorted by track_number
### WebC Components
Located in `src/_includes/webc/`:
- `<custom-card>` - Card layout with slots (image, headline, date, tag, content, footer)
- `<custom-masonry>` - Masonry grid (with optional `layout="50-50"`)
- `<custom-details>` - Enhanced `<details>` with expand/collapse all buttons
### Turbo Drive Navigation
- Enabled for track-to-track navigation (no full page reload)
- `<turbo-frame id="main-content">` in layouts wraps main content
- Import Turbo in defer bundle: `{% js "defer" %} import * as Turbo from '/assets/components/turbo.js'; {% endjs %}`
### Pagination
Defined in `src/pages/blog.njk` with `pagination.size`. Adjust labels in `src/_data/meta.js` (`blog.paginationLabel`, etc.).
### Go URLs / Redirects
Add `go: /short-url` to page frontmatter. The `goPages` collection generates `_redirects` file for Netlify/Vercel.
## Common Issues & Solutions
### CSS Not Updating
CSS is built in `eleventy.before` event, not by Eleventy's passthrough copy. Changes to `src/assets/css/**/*.css` trigger rebuild via watch targets.
### Images Not Processing
Ensure image paths start with `/` (relative to `src/`). HTML Transform plugin processes existing `<img>` tags in output HTML.
### New Color Not Available
Run `npm run colors` after editing `colorsBase.json`. Update `src/assets/css/global/base/variables.css` if color names change.
### Tailwind Class Not Generated
Check if the utility is enabled in `tailwind.config.js` theme (only `backgroundColor`, `textColor`, `margin`, `padding` enabled by default). Add more if needed.
### Track Navigation Broken
Verify `project` frontmatter matches across tracks. Collection sorts by `track_number` (ensure it's a number, not string).
## File Conventions
### This project uses ESM syntax instead of CommonJS. Configurations are structured into separate modules in `src/_config` and are then imported into the main configuration file.
- **collections.js**: Manages Eleventy collections such as posts and tags: https://www.11ty.dev/docs/collections/
- **events.js**: For code that should run at certain times during the compiling process: https://www.11ty.dev/docs/events/

22
src/posts/2025/testing/testing.md Normal file
View file

@ -0,0 +1,22 @@
---
title: 'Testing'
description: "Test animations and such here."
date: 2026-01-04
tags: ['test']
---
Behold:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a sem ultrices, congue dui vitae, sodales augue. Mauris congue libero vitae nisi ullamcorper, nec laoreet sapien commodo. Vivamus dignissim urna et metus fermentum porta. Vivamus tempor tortor turpis, in pellentesque nisl viverra eget. Phasellus sed ligula quis massa commodo sagittis. Duis eu rhoncus augue. Vestibulum pretium convallis velit eget pharetra. Nam dapibus lacus eu cursus eleifend. Proin condimentum eros et est volutpat, vitae ullamcorper nulla vulputate. Pellentesque facilisis sem id nulla sodales, eu fermentum erat finibus.
Proin id risus venenatis arcu sollicitudin venenatis. Ut quam nisl, commodo non urna ac, aliquam ullamcorper justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sed dignissim massa, ac pulvinar sem. Etiam elementum justo lectus, nec blandit tortor varius sollicitudin. Nam tincidunt eros non sodales gravida. Donec pellentesque diam ante, sit amet ullamcorper urna efficitur ut. Quisque ut felis id nisi condimentum rhoncus non non eros. Mauris dapibus id magna et hendrerit. Phasellus in imperdiet quam. Vestibulum euismod leo at augue aliquam venenatis. Nullam quis nisi laoreet nisi laoreet ultricies. Morbi ut facilisis libero. Aliquam odio nunc, sagittis vel elit nec, finibus tristique velit. Nunc suscipit venenatis magna ut aliquet. Praesent sodales orci gravida facilisis finibus.
Donec non pretium lectus. Aliquam pulvinar mattis egestas. Phasellus sit amet magna maximus velit dictum convallis. Nam mollis porttitor libero eu ornare. Cras sit amet leo ac mauris lacinia sodales. Maecenas pretium eu sapien sit amet interdum. Mauris sodales accumsan nibh vitae facilisis. Duis leo massa, placerat ut luctus quis, condimentum id dolor. Ut ut velit a ipsum mattis maximus. Praesent porta justo a lectus pretium iaculis.
Nullam congue lectus a convallis dictum. Nunc rhoncus, ante id porta tempor, lorem ex molestie justo, eget egestas risus urna sit amet ipsum. Etiam dapibus eu eros vitae pharetra. Mauris dapibus erat sit amet quam semper laoreet. Suspendisse potenti. Curabitur et dolor quis nulla ultrices varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed auctor faucibus finibus. Integer porttitor, mauris sit amet interdum imperdiet, sapien tellus fermentum metus, non accumsan augue sapien nec ligula.
Suspendisse eu rutrum dolor. Mauris semper, eros quis dapibus euismod, ante mi tempor libero, vel mollis ipsum dolor vel nulla. Sed cursus aliquam luctus. Suspendisse egestas erat ante, fringilla aliquam urna ullamcorper ac. Aliquam facilisis sed magna et bibendum. Nam sed justo a sapien vulputate dignissim vitae imperdiet enim. Integer mi ex, imperdiet porttitor posuere ut, placerat id magna. Pellentesque imperdiet porta blandit. Mauris eget rutrum sapien, luctus consequat ligula. Nullam sed ipsum in velit commodo rutrum. Aenean eu massa in dolor accumsan commodo. Sed vitae fermentum dolor, non vestibulum mi. Sed ac orci ac metus porta finibus.