

```markdown
# CLAUDE.md - Makarainen.net Project Context

## 🎯 Project Core
- **Type**: Personal portfolio / landing page generator
- **Framework**: CheapIndex (PHP Markdown &rarr; HTML parser)
- **Owner**: Hannu M&auml;k&auml;r&auml;inen (uses "Makarainen" internationally for compatibility)
  - Legal surname: **M&auml;k&auml;r&auml;inen** (with diacritics)
  - Common form: **Makarainen** (ASCII-compatible, used in domains, GitHub, email)
  - Why: Better compatibility with international systems, DNS, URLs, email
- **Domain**: makarainen.net
- **Generator**: This page is generated by **CheapIndex** script (index.php)
- **Input**: `index.md` (Markdown file)
- **Output**: PHP-generated HTML + PicoCSS

## ⚙️ Key Settings (index.php)
```php
$set_title = 'Hannu Makarainen, a bit of a gonzo guy &mdash; a daydreamer at heart';
$site_name = 'Makarainen.net';
$show_profile_header = true;  // GitHub avatar displayed
$github_username = 'hmakarainen';
$enable_line_numbers = false;
$local_dev_mode = false;      // CDN CSS in use
$default_theme = 'light';     // 'light' | 'dark'
$umami_website_id = '';       // Analytics (empty = disabled)
$markdownFile = 'index.md';
```

## 🌐 Routing (Anchor-based)
```php
$url_routes = [
    'contact' => '#contact',
    'about'   => '#about',
    'info'    => '#info'
];
// Dynamic base_path: dirname($_SERVER['SCRIPT_NAME'])
// Supports paths like /makarainen/contact
```

## 🔧 Markdown Features

### Headers (Auto-IDs)
```markdown
# H1-H6 &rarr; <h1 id="slug-id">...</h1>
```

### Alert Boxes
```markdown
[NOTE]Note[/NOTE] &rarr; <div class="alert note">
[WARN]Warning[/WARN] &rarr; <div class="alert warn">
```

### Layout
```markdown
:::center...::: &rarr; Center-block
:::carousel...::: &rarr; Image carousel (slider)
```

### Code
```markdown
```code block``` &rarr; <pre><code> (protected placeholder)
`inline code` &rarr; <code> (htmlspecialchars)
```

### Tables & Links
```markdown
| Header | Data | &rarr; <table>
[page](#anchor) &rarr; <a href="#anchor">
[page](url){.btn-green} &rarr; green button
```

## 🚨 Critical Rules
- **IMPORTANTE**: Code block protection (placeholder system) must not be broken
- **IMPORTANTE**: `[NOTE]/[WARN]` protected before links
- **IMPORTANTE**: `htmlspecialchars()` only for inline code
- **IMPORTANTE**: `data-theme="dark"` for dark mode + localStorage
- **IMPORTANTE**: Routing uses `$_SERVER['SCRIPT_NAME']` + `$_SERVER['REQUEST_URI']`
- **IMPORTANTE**: Do not commit .env or sensitive data
- **IMPORTANTE**: Script attribution: "Crafted with CheapIndex" shown in footer

## 📂 File Structure
```
makarainen.net/
├── index.php           (main entry point, CheapIndex generator)
├── index.md            (content)
├── helpers/
│   ├── CLAUDE.md       (referenced in head)
│   └── pdf.php         (PDF export)
└── assets/
    └── pico.min.css    (only if local_dev_mode=true)
```

## 🎨 CSS Structure
```css
:root {
  --font-system: "Poppins", sans-serif;
  --color-bg: #e6f2ff;
  --color-accent: #1976d2;
}
[data-theme="dark"] {
  --color-bg: #2d2d2d;
  --text-color: #e0e0e0;
}
.alert.note { background: #fed056; }
.alert.warn { background: #fff3e0; }
.theme-toggle { fixed position, mobile bottom-right }
```

## 🔗 External Integrations
- **Analytics**: Umami (`cloud.umami.is/script.js`)
- **CSS**: PicoCSS v2 (CDN)
- **Fonts**: Bunny Fonts (Poppins)
- **Social**: LinkedIn, Facebook, Teams, PDF Export
- **Avatar**: GitHub API (`github.com/{username}.png`)
- **Attribution**: Footer shows "Crafted with CheapIndex" link

## 🛠️ Development Commands
```bash
# Syntax check
php -l index.php

# Local server
php -S localhost:8000

# Test routing
curl localhost:8000/about

# Debug markdown parsing
grep -A5 -B5 "Protected" index.php
```

## 📊 Markdown Parser Logic
```
1. Parse lines &rarr; HTML (headings, lists, tables, etc.)
2. PROTECT code blocks &rarr; ___PROTECTED_CODE_X___
3. PROTECT inline code &rarr; ___PROTECTED_INLINE_X___
4. PROTECT alerts &rarr; ___PROTECTED_ALERT_X___
5. Process links/buttons
6. RESTORE all placeholders
```

## ✅ Testing Checklist
- [ ] Dark/light mode toggle works
- [ ] Routing (#about, #contact) redirects correctly
- [ ] Code blocks display correctly
- [ ] Alert boxes ([NOTE]/[WARN]) render
- [ ] Carousel images visible
- [ ] PDF export link works
- [ ] Social share buttons generate URLs
- [ ] "Crafted with CheapIndex" appears in footer

## 🤖 Claude Code Usage
```bash
cd makarainen.net
claude  # CLAUDE.md loads automatically

# Ask about project
"What's the markdown syntax for alert boxes?"
"How does the routing work?"
"What generator created this page?"
```
```