feat: Initialize IF.docs.md2html - Magazine-style Markdown viewer
Features: - Magazine-style layout with CSS Grid (2-column + sidebar) - ICW NextSpread design system (colors, typography, animations) - Adaptive animation timing based on scroll speed - URL query parameter support (?parse=https://url/file.md) - Drag-and-drop file upload - Syntax highlighting (VS Code Dark+ theme) - Full-bleed hero section with gradient overlay - Responsive design (mobile-first, 44px touch targets) - Static export ready for StackCP deployment Tech Stack: - Next.js 14 (static export) - React 18 + TypeScript - Framer Motion (animations) - markdown-it + highlight.js - Tailwind CSS Design Ported From: - ICW NextSpread property pages (icantwait.ca) - useAdaptiveDuration, useScrollSpeed animation hooks - Webflow-style easing curves - Gallery staggered reveal patterns Deployment: - Configured for digital-lab.ca/infrafabric/IF.docs.md2html - .htaccess with SPA routing and CORS headers - Static files in /out/ directory 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Danny Stocker
commit
f950357096
24 changed files with 3733 additions and 0 deletions
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
37
.htaccess
Normal file
37
.htaccess
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
# IF.docs.md2html - StackCP deployment config
|
||||||
|
|
||||||
|
# Enable URL rewriting
|
||||||
|
RewriteEngine On
|
||||||
|
RewriteBase /infrafabric/IF.docs.md2html/
|
||||||
|
|
||||||
|
# Handle Next.js static export routing
|
||||||
|
# Allow access to static files
|
||||||
|
RewriteCond %{REQUEST_FILENAME} -f [OR]
|
||||||
|
RewriteCond %{REQUEST_FILENAME} -d
|
||||||
|
RewriteRule ^ - [L]
|
||||||
|
|
||||||
|
# Route all other requests to index.html (SPA)
|
||||||
|
RewriteRule ^(.*)$ index.html [L,QSA]
|
||||||
|
|
||||||
|
# CORS headers for fetching external markdown files
|
||||||
|
<IfModule mod_headers.c>
|
||||||
|
Header set Access-Control-Allow-Origin "*"
|
||||||
|
Header set Access-Control-Allow-Methods "GET, OPTIONS"
|
||||||
|
Header set Access-Control-Allow-Headers "Content-Type"
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Gzip compression for text files
|
||||||
|
<IfModule mod_deflate.c>
|
||||||
|
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Browser caching
|
||||||
|
<IfModule mod_expires.c>
|
||||||
|
ExpiresActive On
|
||||||
|
ExpiresByType text/html "access plus 1 hour"
|
||||||
|
ExpiresByType text/css "access plus 1 month"
|
||||||
|
ExpiresByType application/javascript "access plus 1 month"
|
||||||
|
ExpiresByType image/png "access plus 1 year"
|
||||||
|
ExpiresByType image/jpeg "access plus 1 year"
|
||||||
|
ExpiresByType image/svg+xml "access plus 1 year"
|
||||||
|
</IfModule>
|
||||||
165
DEPLOY.md
Normal file
165
DEPLOY.md
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
# Deployment Instructions for StackCP
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- SSH access to StackCP server
|
||||||
|
- `digital-lab.ca` domain configured
|
||||||
|
|
||||||
|
## Deployment Steps
|
||||||
|
|
||||||
|
### 1. Build Production Version
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /home/setup/IF.docs.md2html
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
This creates `/out/` directory with static files.
|
||||||
|
|
||||||
|
### 2. Deploy to StackCP
|
||||||
|
|
||||||
|
**Option A: Manual SCP Upload**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# From local machine
|
||||||
|
scp -r out/* user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
|
||||||
|
# Copy .htaccess
|
||||||
|
scp .htaccess user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Option B: SSH and Copy**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# SSH into StackCP
|
||||||
|
ssh user@stackcp-server
|
||||||
|
|
||||||
|
# Create directory if not exists
|
||||||
|
mkdir -p ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html
|
||||||
|
|
||||||
|
# From local machine, rsync the files
|
||||||
|
rsync -avz --delete out/ user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Set Permissions
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# SSH into StackCP
|
||||||
|
chmod -R 755 ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
chmod 644 ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/.htaccess
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Test Deployment
|
||||||
|
|
||||||
|
Open in browser:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://digital-lab.ca/infrafabric/IF.docs.md2html
|
||||||
|
```
|
||||||
|
|
||||||
|
Test URL parsing:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://digital-lab.ca/infrafabric/IF.docs.md2html?parse=https://raw.githubusercontent.com/dannystocker/infrafabric-core/main/README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### 404 Errors on Refresh
|
||||||
|
|
||||||
|
- Check `.htaccess` is present and readable
|
||||||
|
- Verify `mod_rewrite` is enabled in Apache
|
||||||
|
- Check RewriteBase matches deployment path
|
||||||
|
|
||||||
|
### CORS Errors Loading External URLs
|
||||||
|
|
||||||
|
- Verify CORS headers in `.htaccess`
|
||||||
|
- Check external URL allows cross-origin requests
|
||||||
|
- Test with raw GitHub URLs (they support CORS)
|
||||||
|
|
||||||
|
### Blank Page
|
||||||
|
|
||||||
|
- Check browser console for errors
|
||||||
|
- Verify basePath in `next.config.mjs` matches deployment path
|
||||||
|
- Test with `npm run dev` locally first
|
||||||
|
|
||||||
|
### Styles Not Loading
|
||||||
|
|
||||||
|
- Check `_next/static/` directory exists
|
||||||
|
- Verify file permissions (755 for dirs, 644 for files)
|
||||||
|
- Hard refresh browser (Ctrl+Shift+R)
|
||||||
|
|
||||||
|
## File Structure on Server
|
||||||
|
|
||||||
|
```
|
||||||
|
~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
├── _next/
|
||||||
|
│ ├── static/
|
||||||
|
│ │ ├── chunks/
|
||||||
|
│ │ └── css/
|
||||||
|
│ └── data/
|
||||||
|
├── index.html
|
||||||
|
├── 404.html
|
||||||
|
└── .htaccess
|
||||||
|
```
|
||||||
|
|
||||||
|
## Quick Deploy Script
|
||||||
|
|
||||||
|
Create `deploy.sh`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
#!/bin/bash
|
||||||
|
set -e
|
||||||
|
|
||||||
|
echo "Building production version..."
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
echo "Deploying to StackCP..."
|
||||||
|
rsync -avz --delete \
|
||||||
|
--exclude='.git' \
|
||||||
|
--exclude='node_modules' \
|
||||||
|
out/ user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
|
||||||
|
echo "Copying .htaccess..."
|
||||||
|
scp .htaccess user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
|
||||||
|
echo "Setting permissions..."
|
||||||
|
ssh user@stackcp-server "chmod -R 755 ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/ && chmod 644 ~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/.htaccess"
|
||||||
|
|
||||||
|
echo "✅ Deployment complete!"
|
||||||
|
echo "🌐 https://digital-lab.ca/infrafabric/IF.docs.md2html"
|
||||||
|
```
|
||||||
|
|
||||||
|
Make executable:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
chmod +x deploy.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./deploy.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
## Updating After Changes
|
||||||
|
|
||||||
|
1. Make code changes
|
||||||
|
2. Test locally: `npm run dev`
|
||||||
|
3. Build: `npm run build`
|
||||||
|
4. Deploy: `./deploy.sh` or manual SCP
|
||||||
|
|
||||||
|
## Rollback
|
||||||
|
|
||||||
|
Keep backups of `/out/` directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Before deployment
|
||||||
|
cp -r out out-backup-$(date +%Y%m%d-%H%M%S)
|
||||||
|
```
|
||||||
|
|
||||||
|
To rollback:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rsync -avz --delete out-backup-YYYYMMDD-HHMMSS/ user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/
|
||||||
|
```
|
||||||
176
README.md
Normal file
176
README.md
Normal file
|
|
@ -0,0 +1,176 @@
|
||||||
|
# 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.
|
||||||
15
next.config.mjs
Normal file
15
next.config.mjs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
output: 'export',
|
||||||
|
basePath: '/infrafabric/IF.docs.md2html',
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
},
|
||||||
|
webpack: (config) => {
|
||||||
|
config.resolve.fallback = { fs: false, path: false };
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
2238
package-lock.json
generated
Normal file
2238
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
30
package.json
Normal file
30
package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "if-docs-md2html",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "Magazine-style Markdown viewer with ICW NextSpread design system",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "^14.2.0",
|
||||||
|
"react": "^18.3.0",
|
||||||
|
"react-dom": "^18.3.0",
|
||||||
|
"framer-motion": "^11.0.0",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
|
"highlight.js": "^11.9.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^18",
|
||||||
|
"@types/react-dom": "^18",
|
||||||
|
"@types/markdown-it": "^14.1.0",
|
||||||
|
"typescript": "^5",
|
||||||
|
"autoprefixer": "^10.4.0",
|
||||||
|
"postcss": "^8.4.0",
|
||||||
|
"tailwindcss": "^3.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
22
src/app/layout.tsx
Normal file
22
src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { Inter } from 'next/font/google';
|
||||||
|
import '../styles/globals.css';
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ['latin'] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'IF.docs - Magazine-Style Markdown Viewer',
|
||||||
|
description: 'Beautiful markdown documentation viewer with InfraFabric design system',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body className={inter.className}>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
19
src/app/page.tsx
Normal file
19
src/app/page.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Suspense } from 'react';
|
||||||
|
import { ViewerContent } from '@/components/ViewerContent';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<Suspense fallback={
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-block w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin mb-4"></div>
|
||||||
|
<p className="regular-m text-neutral-600">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}>
|
||||||
|
<ViewerContent />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
188
src/components/FileUploader.tsx
Normal file
188
src/components/FileUploader.tsx
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useState, useRef } from 'react';
|
||||||
|
|
||||||
|
const webflowEase = [0.25, 0.46, 0.45, 0.94] as const;
|
||||||
|
|
||||||
|
interface FileUploaderProps {
|
||||||
|
onMarkdownLoad: (markdown: string) => void;
|
||||||
|
onTitleExtract: (title: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FileUploader({ onMarkdownLoad, onTitleExtract }: FileUploaderProps) {
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const extractTitle = (markdown: string): string => {
|
||||||
|
// Extract first H1 heading
|
||||||
|
const h1Match = markdown.match(/^#\s+(.+)$/m);
|
||||||
|
if (h1Match) return h1Match[1];
|
||||||
|
|
||||||
|
// Fallback to filename or generic title
|
||||||
|
return 'Untitled Document';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFile = (file: File) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
const content = e.target?.result as string;
|
||||||
|
const title = extractTitle(content);
|
||||||
|
onTitleExtract(title);
|
||||||
|
onMarkdownLoad(content);
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(false);
|
||||||
|
|
||||||
|
const file = e.dataTransfer.files[0];
|
||||||
|
if (file && (file.name.endsWith('.md') || file.name.endsWith('.markdown'))) {
|
||||||
|
handleFile(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
handleFile(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-6">
|
||||||
|
<motion.div
|
||||||
|
className="w-full max-w-2xl"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, ease: webflowEase }}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<motion.div
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-neutral-200 rounded-full mb-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.1, ease: webflowEase }}
|
||||||
|
>
|
||||||
|
<div className="w-2 h-2 bg-primary-500 rounded-full animate-pulse" />
|
||||||
|
<span className="regular-s">Magazine-Style Markdown Viewer</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
className="h1 mb-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2, ease: webflowEase }}
|
||||||
|
>
|
||||||
|
IF.docs
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
className="regular-m text-neutral-600 max-w-xl mx-auto"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3, ease: webflowEase }}
|
||||||
|
>
|
||||||
|
Transform your Markdown files into beautiful, magazine-style documents
|
||||||
|
with ICW NextSpread design system
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Drop zone */}
|
||||||
|
<motion.div
|
||||||
|
className={`
|
||||||
|
relative border-2 border-dashed rounded-3xl p-12 text-center
|
||||||
|
transition-all duration-300
|
||||||
|
${isDragging
|
||||||
|
? 'border-primary-500 bg-primary-50'
|
||||||
|
: 'border-neutral-300 bg-white hover:border-neutral-400 hover:bg-neutral-50'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
onDragOver={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(true);
|
||||||
|
}}
|
||||||
|
onDragLeave={() => setIsDragging(false)}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4, ease: webflowEase }}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept=".md,.markdown"
|
||||||
|
onChange={handleFileInput}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mb-6">
|
||||||
|
<svg
|
||||||
|
className="w-16 h-16 mx-auto text-neutral-400"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="h4 mb-2">Drop your Markdown file here</h3>
|
||||||
|
<p className="regular-s text-neutral-600 mb-6">
|
||||||
|
or click to browse (.md, .markdown)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
className="inline-flex items-center gap-2 px-8 py-4 bg-neutral-900 text-white rounded-full hover:bg-neutral-800 transition-all"
|
||||||
|
>
|
||||||
|
<span className="medium-s">Choose File</span>
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Sample docs */}
|
||||||
|
<motion.div
|
||||||
|
className="mt-8 text-center"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.6, ease: webflowEase }}
|
||||||
|
>
|
||||||
|
<p className="regular-xs text-neutral-500 mb-3">Try with sample documents:</p>
|
||||||
|
<div className="flex flex-wrap gap-2 justify-center">
|
||||||
|
{[
|
||||||
|
{ name: 'agents.md', path: '/home/setup/infrafabric/agents.md' },
|
||||||
|
{ name: 'README.md', path: '/home/setup/navidocs/README.md' },
|
||||||
|
].map((doc) => (
|
||||||
|
<button
|
||||||
|
key={doc.name}
|
||||||
|
className="px-4 py-2 bg-neutral-100 text-neutral-700 rounded-full hover:bg-neutral-200 transition-colors regular-xs"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/load-file?path=${encodeURIComponent(doc.path)}`);
|
||||||
|
const content = await response.text();
|
||||||
|
const title = extractTitle(content);
|
||||||
|
onTitleExtract(title);
|
||||||
|
onMarkdownLoad(content);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load sample:', error);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{doc.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
src/components/HeroSection.tsx
Normal file
72
src/components/HeroSection.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion, useReducedMotion } from 'framer-motion';
|
||||||
|
import { useAdaptiveDuration } from '@/lib/useAdaptiveDuration';
|
||||||
|
|
||||||
|
const webflowEase = [0.25, 0.46, 0.45, 0.94] as const;
|
||||||
|
|
||||||
|
interface HeroSectionProps {
|
||||||
|
title: string;
|
||||||
|
onReset: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HeroSection({ title, onReset }: HeroSectionProps) {
|
||||||
|
const shouldReduceMotion = useReducedMotion();
|
||||||
|
const titleDuration = useAdaptiveDuration(0.7);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative w-full">
|
||||||
|
{/* Full-bleed hero with gradient (ICW style) */}
|
||||||
|
<div className="relative w-full h-[40vh] md:h-[50vh] overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/30 to-transparent" />
|
||||||
|
|
||||||
|
<div className="absolute inset-0 flex items-end">
|
||||||
|
<div className="w-layout-blockcontainer container w-container pb-8 md:pb-12">
|
||||||
|
<motion.div
|
||||||
|
className="caption inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full mb-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : 0.5,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="caption-shape w-2 h-2 bg-primary-500 rounded-full animate-pulse" />
|
||||||
|
<div className="regular-s text-white">IF.docs</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
className="text-white text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight drop-shadow-lg max-w-5xl"
|
||||||
|
initial={{ opacity: 0, y: 24 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : titleDuration,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title || 'Document Viewer'}
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="mt-6 flex items-center gap-4"
|
||||||
|
initial={{ opacity: 0, y: 12 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : 0.5,
|
||||||
|
delay: shouldReduceMotion ? 0 : 0.1,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={onReset}
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-white text-neutral-900 rounded-full hover:bg-neutral-100 transition-all"
|
||||||
|
>
|
||||||
|
← Load New Document
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
100
src/components/MagazineContent.tsx
Normal file
100
src/components/MagazineContent.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion, useReducedMotion } from 'framer-motion';
|
||||||
|
import { useAdaptiveDuration } from '@/lib/useAdaptiveDuration';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
const webflowEase = [0.25, 0.46, 0.45, 0.94] as const;
|
||||||
|
|
||||||
|
interface MagazineContentProps {
|
||||||
|
html: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MagazineContent({ html }: MagazineContentProps) {
|
||||||
|
const shouldReduceMotion = useReducedMotion();
|
||||||
|
const sectionDuration = useAdaptiveDuration(0.6);
|
||||||
|
const contentRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Apply staggered animations to child elements (ICW Gallery style)
|
||||||
|
useEffect(() => {
|
||||||
|
if (!contentRef.current) return;
|
||||||
|
|
||||||
|
const elements = contentRef.current.querySelectorAll(
|
||||||
|
'h1, h2, h3, h4, p, pre, blockquote, ul, ol, img, table'
|
||||||
|
);
|
||||||
|
|
||||||
|
elements.forEach((el, index) => {
|
||||||
|
const element = el as HTMLElement;
|
||||||
|
element.style.opacity = '0';
|
||||||
|
element.style.transform = 'translateY(20px)';
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const delay = shouldReduceMotion ? 0 : index * 0.05;
|
||||||
|
const duration = shouldReduceMotion ? 0 : 0.6;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
element.style.transition = `opacity ${duration}s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform ${duration}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
|
||||||
|
element.style.opacity = '1';
|
||||||
|
element.style.transform = 'translateY(0)';
|
||||||
|
}, delay * 1000);
|
||||||
|
|
||||||
|
observer.unobserve(element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ threshold: 0.1, rootMargin: '-10%' }
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(element);
|
||||||
|
});
|
||||||
|
}, [html, shouldReduceMotion]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-layout-blockcontainer container w-container">
|
||||||
|
{/* Magazine-style grid layout */}
|
||||||
|
<div className="magazine-wrap grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 lg:gap-12">
|
||||||
|
{/* Main content column (2-column text on desktop) */}
|
||||||
|
<motion.article
|
||||||
|
ref={contentRef}
|
||||||
|
className="magazine-content prose prose-lg lg:prose-xl max-w-none"
|
||||||
|
dangerouslySetInnerHTML={{ __html: html }}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : sectionDuration,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Sidebar for metadata/navigation */}
|
||||||
|
<motion.aside
|
||||||
|
className="magazine-sidebar bg-neutral-50 rounded-2xl p-6 lg:p-8 h-fit sticky top-8"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : sectionDuration,
|
||||||
|
delay: shouldReduceMotion ? 0 : 0.2,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3 className="h4 mb-4">Navigation</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<button
|
||||||
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||||
|
className="w-full text-left px-4 py-2 rounded-lg hover:bg-neutral-100 transition-colors regular-s"
|
||||||
|
>
|
||||||
|
↑ Back to top
|
||||||
|
</button>
|
||||||
|
<div className="border-t border-neutral-200 my-4" />
|
||||||
|
<p className="regular-xs text-neutral-600">
|
||||||
|
Rendered with IF.docs magazine-style viewer
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
43
src/components/MarkdownViewer.tsx
Normal file
43
src/components/MarkdownViewer.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion, useReducedMotion } from 'framer-motion';
|
||||||
|
import { useAdaptiveDuration } from '@/lib/useAdaptiveDuration';
|
||||||
|
import { parseMarkdown } from '@/lib/markdown-parser';
|
||||||
|
import { HeroSection } from './HeroSection';
|
||||||
|
import { MagazineContent } from './MagazineContent';
|
||||||
|
|
||||||
|
const webflowEase = [0.25, 0.46, 0.45, 0.94] as const;
|
||||||
|
|
||||||
|
interface MarkdownViewerProps {
|
||||||
|
markdown: string;
|
||||||
|
title: string;
|
||||||
|
onReset: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MarkdownViewer({ markdown, title, onReset }: MarkdownViewerProps) {
|
||||||
|
const shouldReduceMotion = useReducedMotion();
|
||||||
|
const contentDuration = useAdaptiveDuration(0.8);
|
||||||
|
|
||||||
|
const html = parseMarkdown(markdown);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full min-h-screen">
|
||||||
|
{/* Hero Section with ICW styling */}
|
||||||
|
<HeroSection title={title} onReset={onReset} />
|
||||||
|
|
||||||
|
{/* Magazine-style content */}
|
||||||
|
<motion.section
|
||||||
|
className="relative bg-white py-16 md:py-24"
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: shouldReduceMotion ? 0 : contentDuration,
|
||||||
|
delay: shouldReduceMotion ? 0 : 0.3,
|
||||||
|
ease: webflowEase,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MagazineContent html={html} />
|
||||||
|
</motion.section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
78
src/components/ViewerContent.tsx
Normal file
78
src/components/ViewerContent.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
import { MarkdownViewer } from '@/components/MarkdownViewer';
|
||||||
|
import { FileUploader } from '@/components/FileUploader';
|
||||||
|
|
||||||
|
export function ViewerContent() {
|
||||||
|
const [markdown, setMarkdown] = useState('');
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
// Load markdown from URL query parameter ?parse=https://url/file.md
|
||||||
|
useEffect(() => {
|
||||||
|
const parseUrl = searchParams.get('parse');
|
||||||
|
if (parseUrl) {
|
||||||
|
setLoading(true);
|
||||||
|
fetch(parseUrl)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) throw new Error(`Failed to fetch: ${res.statusText}`);
|
||||||
|
return res.text();
|
||||||
|
})
|
||||||
|
.then((content) => {
|
||||||
|
// Extract title from first H1
|
||||||
|
const h1Match = content.match(/^#\s+(.+)$/m);
|
||||||
|
const extractedTitle = h1Match ? h1Match[1] : 'Document';
|
||||||
|
setTitle(extractedTitle);
|
||||||
|
setMarkdown(content);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setError(`Error loading document: ${err.message}`);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-block w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin mb-4"></div>
|
||||||
|
<p className="regular-m text-neutral-600">Loading document...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center p-6">
|
||||||
|
<div className="max-w-lg text-center">
|
||||||
|
<div className="text-6xl mb-4">⚠️</div>
|
||||||
|
<h2 className="h3 mb-2">Error Loading Document</h2>
|
||||||
|
<p className="regular-m text-neutral-600 mb-6">{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => { setError(''); }}
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-neutral-900 text-white rounded-full hover:bg-neutral-800 transition-all"
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-neutral-50">
|
||||||
|
{!markdown ? (
|
||||||
|
<FileUploader onMarkdownLoad={setMarkdown} onTitleExtract={setTitle} />
|
||||||
|
) : (
|
||||||
|
<MarkdownViewer markdown={markdown} title={title} onReset={() => { setMarkdown(''); setTitle(''); }} />
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
src/lib/markdown-parser.ts
Normal file
27
src/lib/markdown-parser.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import MarkdownIt from 'markdown-it';
|
||||||
|
import hljs from 'highlight.js';
|
||||||
|
|
||||||
|
const md: MarkdownIt = new MarkdownIt({
|
||||||
|
html: true,
|
||||||
|
linkify: true,
|
||||||
|
typographer: true,
|
||||||
|
highlight: function (str: string, lang: string) {
|
||||||
|
if (lang && hljs.getLanguage(lang)) {
|
||||||
|
try {
|
||||||
|
return `<pre class="hljs"><code class="language-${lang}">${
|
||||||
|
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
|
||||||
|
}</code></pre>`;
|
||||||
|
} catch (__) {}
|
||||||
|
}
|
||||||
|
return `<pre class="hljs"><code>${MarkdownIt().utils.escapeHtml(str)}</code></pre>`;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse Markdown to HTML with syntax highlighting
|
||||||
|
* @param markdown - Raw markdown string
|
||||||
|
* @returns Rendered HTML string
|
||||||
|
*/
|
||||||
|
export function parseMarkdown(markdown: string): string {
|
||||||
|
return md.render(markdown);
|
||||||
|
}
|
||||||
32
src/lib/useAdaptiveDuration.ts
Normal file
32
src/lib/useAdaptiveDuration.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useReducedMotion } from 'framer-motion';
|
||||||
|
import { useScrollSpeed } from './useScrollSpeed';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adaptive animation duration hook from ICW NextSpread
|
||||||
|
* Adjusts animation speed based on user scroll velocity
|
||||||
|
* @param baseDuration - Base duration in seconds
|
||||||
|
* @returns Adjusted duration (0 if reduced motion preferred)
|
||||||
|
*/
|
||||||
|
export function useAdaptiveDuration(baseDuration: number): number {
|
||||||
|
const shouldReduceMotion = useReducedMotion();
|
||||||
|
const scrollSpeed = useScrollSpeed();
|
||||||
|
const [duration, setDuration] = useState(baseDuration);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (shouldReduceMotion) {
|
||||||
|
setDuration(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Map scroll speed (0-100) to duration multiplier (0.5x-1.5x)
|
||||||
|
// Faster scroll = shorter animations
|
||||||
|
const speedFactor = 1 - (scrollSpeed / 200);
|
||||||
|
const clampedFactor = Math.max(0.5, Math.min(1.5, speedFactor));
|
||||||
|
setDuration(baseDuration * clampedFactor);
|
||||||
|
}, [baseDuration, scrollSpeed, shouldReduceMotion]);
|
||||||
|
|
||||||
|
return duration;
|
||||||
|
}
|
||||||
18
src/lib/useClientReady.ts
Normal file
18
src/lib/useClientReady.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Client-side hydration guard from ICW NextSpread
|
||||||
|
* Prevents hydration mismatches for client-only features
|
||||||
|
* @returns true when component is mounted on client
|
||||||
|
*/
|
||||||
|
export function useClientReady(): boolean {
|
||||||
|
const [isReady, setIsReady] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsReady(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return isReady;
|
||||||
|
}
|
||||||
59
src/lib/useScrollSpeed.ts
Normal file
59
src/lib/useScrollSpeed.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll speed detection hook from ICW NextSpread
|
||||||
|
* Measures scroll velocity to adapt animation timing
|
||||||
|
* @returns Current scroll speed (0-100)
|
||||||
|
*/
|
||||||
|
export function useScrollSpeed(): number {
|
||||||
|
const [scrollSpeed, setScrollSpeed] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
let lastTimestamp = Date.now();
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
const updateScrollSpeed = () => {
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
const currentTimestamp = Date.now();
|
||||||
|
|
||||||
|
const deltaY = Math.abs(currentScrollY - lastScrollY);
|
||||||
|
const deltaTime = currentTimestamp - lastTimestamp;
|
||||||
|
|
||||||
|
// Calculate pixels per second
|
||||||
|
const speed = deltaTime > 0 ? (deltaY / deltaTime) * 1000 : 0;
|
||||||
|
|
||||||
|
// Normalize to 0-100 range (assuming max speed of 5000px/s)
|
||||||
|
const normalizedSpeed = Math.min(100, (speed / 5000) * 100);
|
||||||
|
|
||||||
|
setScrollSpeed(normalizedSpeed);
|
||||||
|
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
lastTimestamp = currentTimestamp;
|
||||||
|
ticking = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(updateScrollSpeed);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Decay speed over time when not scrolling
|
||||||
|
const decayInterval = setInterval(() => {
|
||||||
|
setScrollSpeed((prev) => Math.max(0, prev * 0.9));
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
clearInterval(decayInterval);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return scrollSpeed;
|
||||||
|
}
|
||||||
82
src/styles/globals.css
Normal file
82
src/styles/globals.css
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@import './markdown.css';
|
||||||
|
@import './highlight.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--webflow-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-neutral-50 text-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ICW Design System Typography */
|
||||||
|
.h1 {
|
||||||
|
@apply text-5xl md:text-7xl font-bold tracking-tight text-neutral-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2 {
|
||||||
|
@apply text-3xl md:text-5xl font-semibold tracking-tight text-neutral-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3 {
|
||||||
|
@apply text-2xl md:text-3xl font-semibold text-neutral-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h4 {
|
||||||
|
@apply text-xl md:text-2xl font-semibold text-neutral-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular-s {
|
||||||
|
@apply text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular-m {
|
||||||
|
@apply text-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular-xs {
|
||||||
|
@apply text-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium-s {
|
||||||
|
@apply text-sm font-medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium-m {
|
||||||
|
@apply text-base font-medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ICW Container System */
|
||||||
|
.w-layout-blockcontainer {
|
||||||
|
@apply max-w-7xl mx-auto px-6 md:px-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
@apply w-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-container {
|
||||||
|
@apply max-w-screen-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
@apply bg-neutral-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-neutral-400 rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
@apply bg-neutral-600;
|
||||||
|
}
|
||||||
76
src/styles/highlight.css
Normal file
76
src/styles/highlight.css
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
/* VS Code Dark+ theme for syntax highlighting */
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 1.5em;
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #d4d4d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-link {
|
||||||
|
color: #569cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string {
|
||||||
|
color: #ce9178;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-template-variable {
|
||||||
|
color: #4ec9b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote,
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #6a9955;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #b5cea8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-function {
|
||||||
|
color: #dcdcaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag,
|
||||||
|
.hljs-doctag {
|
||||||
|
color: #569cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr {
|
||||||
|
color: #9cdcfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-params {
|
||||||
|
color: #d4d4d4;
|
||||||
|
}
|
||||||
155
src/styles/markdown.css
Normal file
155
src/styles/markdown.css
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
/* Magazine-style Markdown prose styling (ICW inspired) */
|
||||||
|
|
||||||
|
.magazine-content.prose {
|
||||||
|
@apply text-neutral-700;
|
||||||
|
color: #404040;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings with ICW typography */
|
||||||
|
.magazine-content.prose h1 {
|
||||||
|
@apply text-5xl md:text-6xl font-bold tracking-tight text-neutral-900 mt-12 mb-6;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose h2 {
|
||||||
|
@apply text-3xl md:text-4xl font-semibold tracking-tight text-neutral-900 mt-10 mb-4;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose h3 {
|
||||||
|
@apply text-2xl md:text-3xl font-semibold text-neutral-900 mt-8 mb-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose h4 {
|
||||||
|
@apply text-xl md:text-2xl font-semibold text-neutral-900 mt-6 mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose h5 {
|
||||||
|
@apply text-lg md:text-xl font-semibold text-neutral-900 mt-4 mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose h6 {
|
||||||
|
@apply text-base md:text-lg font-semibold text-neutral-900 mt-4 mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paragraphs */
|
||||||
|
.magazine-content.prose p {
|
||||||
|
@apply mb-6 leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose p:first-of-type {
|
||||||
|
@apply text-xl md:text-2xl leading-relaxed text-neutral-800;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links with ICW hover effect */
|
||||||
|
.magazine-content.prose a {
|
||||||
|
@apply text-primary-600 no-underline hover:text-primary-500 transition-colors;
|
||||||
|
border-bottom: 1px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose a:hover {
|
||||||
|
border-bottom: 2px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lists */
|
||||||
|
.magazine-content.prose ul,
|
||||||
|
.magazine-content.prose ol {
|
||||||
|
@apply my-6 space-y-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose li {
|
||||||
|
@apply leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose ul > li {
|
||||||
|
@apply relative pl-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose ul > li::before {
|
||||||
|
content: '';
|
||||||
|
@apply absolute left-0 top-[0.6em] w-1.5 h-1.5 bg-primary-500 rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose ol {
|
||||||
|
@apply list-decimal pl-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blockquotes (magazine pull-quote style) */
|
||||||
|
.magazine-content.prose blockquote {
|
||||||
|
@apply my-8 py-4 px-6 border-l-4 border-primary-500 bg-neutral-50 rounded-r-xl;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose blockquote p {
|
||||||
|
@apply mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks with syntax highlighting */
|
||||||
|
.magazine-content.prose pre {
|
||||||
|
@apply my-6 rounded-2xl overflow-hidden;
|
||||||
|
background: #1e1e1e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose pre code {
|
||||||
|
@apply block p-6 overflow-x-auto text-sm leading-relaxed;
|
||||||
|
font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
.magazine-content.prose :not(pre) > code {
|
||||||
|
@apply px-2 py-1 bg-neutral-100 text-neutral-800 rounded text-sm;
|
||||||
|
font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Images (full-bleed with rounded corners) */
|
||||||
|
.magazine-content.prose img {
|
||||||
|
@apply my-8 rounded-2xl shadow-lg w-full;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
.magazine-content.prose table {
|
||||||
|
@apply my-8 w-full border-collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose thead {
|
||||||
|
@apply bg-neutral-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose th {
|
||||||
|
@apply px-4 py-3 text-left font-semibold text-neutral-900 border-b-2 border-neutral-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose td {
|
||||||
|
@apply px-4 py-3 border-b border-neutral-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose tbody tr:hover {
|
||||||
|
@apply bg-neutral-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal rule (section divider) */
|
||||||
|
.magazine-content.prose hr {
|
||||||
|
@apply my-12 border-t-2 border-neutral-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Strong and emphasis */
|
||||||
|
.magazine-content.prose strong {
|
||||||
|
@apply font-semibold text-neutral-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine-content.prose em {
|
||||||
|
@apply italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Magazine-style drop cap (first letter) */
|
||||||
|
.magazine-content.prose p:first-of-type::first-letter {
|
||||||
|
@apply text-6xl font-bold float-left mr-2 leading-none text-neutral-900;
|
||||||
|
margin-top: 0.1em;
|
||||||
|
}
|
||||||
36
tailwind.config.js
Normal file
36
tailwind.config.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
500: '#10B981',
|
||||||
|
600: '#059669',
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
50: '#FAFAFA',
|
||||||
|
100: '#F5F5F5',
|
||||||
|
200: '#E5E5E5',
|
||||||
|
600: '#737373',
|
||||||
|
700: '#404040',
|
||||||
|
800: '#262626',
|
||||||
|
900: '#171717',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||||
|
serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'],
|
||||||
|
mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace'],
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue