Skip to content

CLAUDE.md

Latest commit

 

History

History
62 lines (42 loc) · 3.28 KB

CLAUDE.md

File metadata and controls

62 lines (42 loc) · 3.28 KB
Raw

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What This Repo Is

This is the marketing website for MDViewer (a Windows desktop Markdown viewer), hosted at mdviewer.app via GitHub Pages. The actual desktop application lives in a separate repository (mdviewer-core).

There is no build system. All pages are plain HTML/CSS/vanilla JS — edit and commit.

Development

Open any .html file directly in a browser, or use a local server:

# Serve locally (Python)
python -m http.server 8080

# Or use VS Code Live Server extension

Deploy by pushing to main — GitHub Pages auto-publishes.

Architecture

Pages

  • index.html — Landing page, hero, features, CTA
  • pricing.html — Three tiers (Free, Pro $19/year, Business $79/seat/year) with Stripe checkout
  • downloads.html — Fetches latest release from GitHub API; renders download links dynamically
  • docs.html — Documentation hub linking to setup/docs/ markdown files
  • download-access.html — Post-payment thank-you page (reads ?tier= and ?amount= from URL)
  • cloudflare-worker.js — Stripe payment backend; deploy to Cloudflare Workers (not GitHub Pages)

Payment Flow

  1. User clicks a tier on pricing.html
  2. supportWithStripe(amount) POSTs to the Cloudflare Worker endpoint
  3. Worker creates a Stripe Checkout session and returns its URL
  4. Browser redirects to Stripe, then back to download-access.html?tier=paid&amount=X

The Cloudflare Worker URL is hardcoded in pricing.html. See PAYMENT-SETUP.md and STRIPE-SETUP-INSTRUCTIONS.md for deployment steps.

Styling Conventions

All pages share the same CSS variable palette (defined inline per page). No shared stylesheet — keep consistent by copying the :root block and nav/footer HTML when adding a new page. CSS uses flexbox throughout; no CSS frameworks.

Accessibility

Emoji used as decorative icons should be wrapped in <span role="img" aria-label="description"> for screen reader compatibility. This applies to feature icons, section heading emojis, and any emoji serving as a visual indicator rather than inline decoration.

External links (GitHub, LinkedIn) should include target="_blank" rel="noopener noreferrer" so they open in a new tab and don't leak referrer info.

Link text should be descriptive of the destination — avoid generic text like "Learn More" or "Click Here". Use specific labels like "View Documentation" or "Download MDViewer" instead.

Documentation (setup/docs/)

User-facing docs are Markdown files rendered by the MDViewer app itself (dogfooding). They are also linked from docs.html. Edit these when documenting new app features.

ClickOnce Installer (setup/)

setup/Application Files/ contains versioned ClickOnce release bundles. MDViewer.application and Publish.html are the ClickOnce manifest and landing page. These are generated by the Visual Studio publish process in the mdviewer-core repo and committed here.

Key External Dependencies

  • GitHub API (api.github.com/repos/) — fetches latest release metadata in downloads.html
  • Stripe — payment processing via Cloudflare Worker
  • Microsoft Clarity — analytics (script tag in each page <head>)
  • cash.app/$JonJaques — donation links