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

npm install
npm run dev

Open 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

npm run build

This generates a static export in /out/ directory.

2. Deploy to StackCP

# 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:

# 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.