IF.docs.md2html/README.md

# IF.docs - Magazine-Style Markdown Viewer

Beautiful markdown documentation viewer with **ICW NextSpread design system**.

## Features

- **Magazine-style layout** with CSS Grid (2-column text, sticky sidebar)
- **ICW animations** (adaptive duration, scroll-reveal, staggered entrance)
- **Full-bleed hero** section with gradient overlay
- **Syntax highlighting** with VS Code Dark+ theme
- **Drag-and-drop** file upload
- **URL parsing** via query parameter: `?parse=https://url/file.md`
- **Responsive design** (mobile-first, 44px+ touch targets)
- **Accessibility** (reduced motion support, semantic HTML)

## Design System

Ported from **ICW NextSpread** property pages:
- Typography: Inter (headings), System fonts (body), JetBrains Mono (code)
- Colors: Neutral palette (50-900), Primary green (#10B981)
- Animations: Webflow ease curves, adaptive timing
- Layout: 8-point grid, generous white space
- Components: Hero, Gallery-style staggered reveals

## Usage

### Local Development

```bash
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

### File Upload

1. Drag & drop `.md` or `.markdown` files
2. Or click "Choose File" to browse

### URL Parsing

Load any publicly accessible markdown file:

```
http://localhost:3000?parse=https://raw.githubusercontent.com/user/repo/main/README.md
```

**Production Example:**
```
https://digital-lab.ca/infrafabric/IF.docs.md2html?parse=https://example.com/docs/api.md
```

## Deployment to StackCP

### 1. Build for Production

```bash
npm run build
```

This generates a static export in `/out/` directory.

### 2. Deploy to StackCP

```bash
# SSH into StackCP
ssh user@stackcp-server

# Create directory
mkdir -p ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html

# Copy build files
scp -r out/* user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
```

### 3. Configure .htaccess

Create `~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/.htaccess`:

```apache
# Enable URL rewriting
RewriteEngine On
RewriteBase /infrafabric/IF.docs.md2html/

# Route all requests to index.html (SPA)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html [L,QSA]

# CORS headers for fetching external markdown
<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>
```

### 4. Test Deployment

```
https://digital-lab.ca/infrafabric/IF.docs.md2html
https://digital-lab.ca/infrafabric/IF.docs.md2html?parse=https://example.com/file.md
```

## Project Structure

```
IF.docs.md2html/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home page with URL parsing
│   ├── components/
│   │   ├── FileUploader.tsx    # Drag-and-drop UI
│   │   ├── HeroSection.tsx     # ICW-style hero
│   │   ├── MagazineContent.tsx # Magazine layout
│   │   └── MarkdownViewer.tsx  # Main viewer
│   ├── lib/
│   │   ├── markdown-parser.ts  # markdown-it config
│   │   ├── useAdaptiveDuration.ts  # ICW animation hook
│   │   ├── useScrollSpeed.ts   # Scroll velocity tracker
│   │   └── useClientReady.ts   # Hydration guard
│   └── styles/
│       ├── globals.css         # Base styles + Tailwind
│       ├── markdown.css        # Prose styling
│       └── highlight.css       # Code syntax theme
├── package.json
├── next.config.mjs
├── tailwind.config.js
└── README.md
```

## ICW Design System Features

### Animations
- **Adaptive Duration**: Speeds up during fast scrolling
- **Staggered Reveals**: Gallery-style cascade (50ms delay per element)
- **Scroll Triggers**: IntersectionObserver with 10% threshold
- **Reduced Motion**: Respects `prefers-reduced-motion`

### Typography
- **Drop Cap**: First paragraph first letter (6xl, float left)
- **Lead Paragraph**: First paragraph 2xl size
- **Headings**: -0.02em letter spacing (optical tightening)
- **Body**: 1.75 line height (comfortable reading)

### Layout
- **Magazine Grid**: 2fr main column + 1fr sidebar (desktop)
- **Full-Bleed Hero**: 40vh mobile, 50vh desktop
- **Sticky Sidebar**: `sticky top-8` navigation
- **Max Width**: 1280px container, centered

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS 14+, Android Chrome 90+)

## Dependencies

- **next** (^14.2.0) - React framework
- **react** (^18.3.0) - UI library
- **framer-motion** (^11.0.0) - Animations
- **markdown-it** (^14.1.0) - Markdown parser
- **highlight.js** (^11.9.0) - Syntax highlighting
- **tailwindcss** (^3.4.0) - Utility CSS

## License

MIT

## Credits

Design system ported from **ICW NextSpread** (icantwait.ca property showcase).

Animation patterns inspired by Webflow luxury sites and Airbnb editorial pages.