LGS Forge

Appearance

CLAUDE.md - docs/ ​

User-facing documentation site for LGS Forge, built with VitePress.

Tech Stack ​

  • VitePress 1.6.4 (Vue-based static site generator)
  • Hosting: Firebase Hosting at docs.lgsforge.com
  • Theme: Custom neo-brutalist design (matches the app)

Directory Structure ​

docs/
├── .vitepress/
│   ├── config.js              # Main VitePress config (nav, sidebar, SEO, sitemap)
│   ├── theme/
│   │   ├── index.js           # Theme entry (extends DefaultTheme)
│   │   └── custom.css         # Neo-brutalist styles (592 lines)
│   ├── cache/                 # Build cache (gitignored)
│   └── dist/                  # Build output (gitignored)
│
├── guides/                    # User documentation (14 guides)
│   ├── getting-started.md     # Installation and first-time setup
│   ├── connecting-store.md    # Connecting Shopify stores
│   ├── syncing-products.md    # Product sync process
│   ├── pricing-config.md      # Pricing configuration
│   ├── settings-metafields.md # Metafield setup
│   ├── catalog.md             # Browsing MTG catalog
│   ├── sync-history.md        # Reviewing past syncs
│   ├── price-sync-schedule.md # Automated price updates
│   ├── multi-store.md         # Multi-store management
│   ├── billing.md             # Billing and subscription info
│   ├── best-practices.md      # Recommended strategies
│   ├── deleting-products.md   # Product deletion guide
│   ├── troubleshooting.md     # Common issues and solutions
│   └── faq.md                 # Frequently asked questions
│
├── legal/
│   ├── privacy-policy.md      # Privacy policy
│   └── terms-of-service.md    # Terms of service
│
├── public/                    # Static assets (logo, favicons)
├── index.md                   # Documentation homepage
├── homepage.md                # Marketing homepage (for www.lgsforge.com)
├── package.json               # VitePress dependency
├── DEPLOY.md                  # Deployment guide for docs site
├── README.md                  # Docs overview
└── SETUP_CHECKLIST.md         # Setup checklist

Configuration ​

Key settings in .vitepress/config.js:

  • Site title: "LGS Forge Docs"
  • Sidebar: 5 sections (Getting Started, Configuration, Features, Resources, Legal)
  • Search: Local search provider
  • SEO: OG tags, Twitter cards, sitemap at docs.lgsforge.com
  • Clean URLs: Enabled (no .html extensions)
  • Markdown: GitHub light/dark code themes, line numbers enabled

Theme / Design System ​

Neo-brutalist CSS matching the app:

  • Brand colors: Purple #C4A1FF, hot pink #FE91E9, cream #F9F5F2
  • Typography: Space Grotesk (headings), Inter (body)
  • Borders: 3-4px solid black, zero border radius
  • Shadows: 5px offset
  • Dark mode: Supported with color overrides
  • Fonts: Loaded via Google Fonts in <head>

Styles are in .vitepress/theme/custom.css. The theme extends VitePress DefaultTheme.

Development ​

bash
# From docs/ directory:
npm run dev              # Start dev server
npm run build            # Build static site
npm run preview          # Preview build

# From root directory:
npm run docs:install     # Install docs dependencies
npm run docs:dev         # Start docs dev server
npm run docs:build       # Build docs
npm run docs:preview     # Preview docs build

Deployment ​

  • Primary: Firebase Hosting via npm run deploy:docs (from root)
  • Workflow: .github/workflows/deploy-docs.yml
  • Also supports: Vercel, Netlify, GitHub Pages (see DEPLOY.md)

Adding Content ​

  1. Create a new .md file in guides/
  2. Add frontmatter with title and description
  3. Add to sidebar in .vitepress/config.js
  4. Use standard Markdown + VitePress extensions (containers, code groups, etc.)

Common Gotchas ​

  • Docs site is Vue-based (VitePress), NOT React — don't mix with the React client
  • homepage.md is for the marketing site (www.lgsforge.com), not the docs site
  • Build output goes to .vitepress/dist/ (gitignored)
  • npm run docs:install must be run separately from the root npm install