dannystocker/IF.docs.md2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
IF.docs.md2html/DEPLOY.md
Danny Stocker f950357096 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>
2025-11-14 17:51:52 +01:00

3.5 KiB
Raw Export PDF Permalink Blame History

Deployment Instructions for StackCP

Prerequisites

  • SSH access to StackCP server
  • digital-lab.ca domain configured

Deployment Steps

1. Build Production Version

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

# 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

# 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

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

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

chmod +x deploy.sh

Run:

./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:

# Before deployment
cp -r out out-backup-$(date +%Y%m%d-%H%M%S)

To rollback:

rsync -avz --delete out-backup-YYYYMMDD-HHMMSS/ user@stackcp-server:~/public_html/digital-lab.ca/infrafabric/IF.docs.md2html/