commit 33dab637ab9df88a8caeab4e51bd5d453c732370 Author: Nathan Schneider Date: Tue Nov 18 14:58:52 2025 -0700 Initial commit: Digital zine for Collective Governance for AI Built with Astro featuring: - Markdown-based content with automatic section splitting - Interactive TOC sidebar with stack-style navigation - ASCII background patterns unique to each section - Scroll-based animations and highlighting - Mobile-responsive with hamburger menu - Black-and-white zine aesthetic πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..16d54bb --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..22a1505 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d642209 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..f276560 --- /dev/null +++ b/README.md @@ -0,0 +1,131 @@ +# Collective Governance for AI: Points of Intervention + +A single-page, responsive, static website for a digital zine with interactive scroll effects. Built in Astro with Claude Code. + +## Features + +- **Markdown-based content**: Edit your zine content in `src/content/zine.md` +- **Scroll animations**: Sections fade in as you scroll +- **ASCII background patterns**: Each section has unique repeating ASCII symbols with gradient fades +- **Interactive TOC sidebar**: Stack-style navigation with connecting lines to current section +- **Mobile hamburger menu**: Touch-friendly navigation for small screens +- **Responsive design**: Optimized for all screen sizes +- **Zero JavaScript framework**: Uses vanilla JavaScript for interactions +- **Black-and-white zine aesthetic**: Bold typography, rough edges, and texture overlay + +## Prerequisites + +Node.js >= 18.20.8 (or upgrade to Node.js 20+ for best compatibility) + +## Getting Started + +1. **Install dependencies**: + ```bash + npm install + ``` + +2. **Start the development server**: + ```bash + npm run dev + ``` + +3. **Build for production**: + ```bash + npm run build + ``` + +4. **Preview production build**: + ```bash + npm run preview + ``` + +## Project Structure + +``` +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ content/ +β”‚ β”‚ └── zine.md # Your zine content in Markdown +β”‚ └── pages/ +β”‚ └── index.astro # Main page that renders the zine +β”œβ”€β”€ public/ # Static assets +└── astro.config.mjs # Astro configuration +``` + +## Editing Your Zine + +1. Open `src/content/zine.md` +2. Write your content using Markdown +3. Use `## Heading` for section breaks (each becomes a full-height section) +4. The dev server will hot-reload your changes + +### Markdown Tips + +- `# Main Title` - Top-level heading (animated) +- `## Section Title` - Creates a new scrolling section +- Regular Markdown formatting works: **bold**, *italic*, [links](url), etc. + +## Customization + +### Changing ASCII Patterns + +Edit the CSS in `src/pages/index.astro` (lines 198-213) to change the ASCII symbols for each section: +```css +section:nth-child(2)::after { content: 'β—† β—‡ β—† β—‡ ...' } +``` + +### Adjusting Colors + +All styling is black-and-white by default. Edit the CSS variables: +- Border color: `#000000` throughout +- Background: `#ffffff` +- Hover states: lines 91-95 + +### Adjusting Scroll Effects + +Modify the JavaScript in `index.astro`: +- Intersection threshold: Line 444 (currently 0.15 = 15% visibility) +- Root margin: Line 445 (currently -10% = middle 80% of viewport) +- Scroll behavior: Line 531 (`'smooth'` for animated scrolling) + +### Adding More Interactive Elements + +The page uses: +- **Intersection Observer API** for scroll-based section visibility and TOC highlighting +- **SVG line drawing** for connecting TOC to current section +- **CSS animations** for fade-in effects +- **Mobile menu toggle** with hamburger icon + +You can extend the JavaScript in the ` + + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..8bf91d3 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +}