Configure Colors

root

--vp-c-white #ffffff

--vp-c-black #000000

--vp-c-gray-1 #dddde3

--vp-c-gray-2 #e4e4e9

--vp-c-gray-3 #ebebef

--vp-c-gray-soft #8e96aa24

--vp-c-indigo-1 #3451b2

--vp-c-indigo-2 #3a5ccc

--vp-c-indigo-3 #5672cd

--vp-c-indigo-soft #646cff24

--vp-c-purple-1 #6f42c1

--vp-c-purple-2 #7e4cc9

--vp-c-purple-3 #8e5cd9

--vp-c-purple-soft #9f7aea24

--vp-c-green-1 #18794e

--vp-c-green-2 #299764

--vp-c-green-3 #30a46c

--vp-c-green-soft #10b98124

--vp-c-yellow-1 #915930

--vp-c-yellow-2 #946300

--vp-c-yellow-3 #9f6a00

--vp-c-yellow-soft #eab30824

--vp-c-red-1 #b8272c

--vp-c-red-2 #d5393e

--vp-c-red-3 #e0575b

--vp-c-red-soft #f43f5e24

--vp-c-sponsor #db2777

--vp-c-bg #ffffff

--vp-c-bg-alt #f6f6f7

--vp-c-bg-elv #ffffff

--vp-c-bg-soft #f6f6f7

--vp-c-border #c2c2c4

--vp-c-divider #e2e2e3

--vp-c-gutter #e2e2e3

--vp-c-text-1 #3c3c43

--vp-c-text-2 #67676c

--vp-c-text-3 #929295

dark

--vp-c-gray-1 #515c67

--vp-c-gray-2 #414853

--vp-c-gray-3 #32363f

--vp-c-gray-soft #65758529

--vp-c-indigo-1 #a8b1ff

--vp-c-indigo-2 #5c73e7

--vp-c-indigo-3 #3e63dd

--vp-c-indigo-soft #646cff29

--vp-c-purple-1 #c8abfa

--vp-c-purple-2 #a879e6

--vp-c-purple-3 #8e5cd9

--vp-c-purple-soft #9f7aea29

--vp-c-green-1 #3dd68c

--vp-c-green-2 #30a46c

--vp-c-green-3 #298459

--vp-c-green-soft #10b98129

--vp-c-yellow-1 #f9b44e

--vp-c-yellow-2 #da8b17

--vp-c-yellow-3 #a46a0a

--vp-c-yellow-soft #eab30829

--vp-c-red-1 #f66f81

--vp-c-red-2 #f14158

--vp-c-red-3 #b62a3c

--vp-c-red-soft #f43f5e29

--vp-c-bg #1b1b1f

--vp-c-bg-alt #161618

--vp-c-bg-elv #202127

--vp-c-bg-soft #202127

--vp-c-border #3c3f44

--vp-c-divider #2e2e32

--vp-c-gutter #000000

--vp-c-text-1 #dfdfd6

--vp-c-text-2 #98989f

--vp-c-text-3 #6a6a71

GitHub Pages Deployment Guide

This project is configured to automatically deploy to GitHub Pages whenever changes are merged to the master branch.

Setup Instructions

1. Enable GitHub Pages

1. Go to your repository on GitHub
2. Navigate to Settings → Pages
3. Under "Source", select GitHub Actions
4. Save the configuration

2. Repository Permissions

The workflow requires the following permissions to deploy to GitHub Pages:

• contents: read - To read the repository content
• pages: write - To deploy to GitHub Pages
• id-token: write - For secure deployment authentication

These permissions are automatically configured in the workflow file.

3. Deployment Process

The deployment happens automatically when:

• Code is pushed to the master branch
• A pull request is merged to master
• The workflow is manually triggered from the Actions tab

Manual Deployment

You can also trigger a deployment manually:

1. Go to Actions tab in your GitHub repository
2. Select "Deploy VitePress Site" workflow
3. Click "Run workflow" button
4. Choose the branch (typically master) and click "Run workflow"

How It Works

The deployment workflow consists of two jobs:

Build Job

1. Checkout: Downloads the repository code
2. Setup Node.js: Installs Node.js v20
3. Setup pnpm: Installs pnpm package manager with the exact version specified in package.json
4. Cache: Caches pnpm dependencies for faster builds
5. Install: Installs all project dependencies
6. Generate: Runs pnpm run build to generate the VitePress content using your scripts
7. Build: Runs pnpm run docs:build to build the static VitePress site
8. Upload: Uploads the built site as an artifact for deployment

Deploy Job

1. Deploy: Deploys the built site to GitHub Pages

Build Scripts

The deployment uses these npm scripts in sequence:

{
  "build": "tsx scripts/generate-site.ts",    // Generates content from your data
  "docs:build": "vitepress build docs"         // Builds the VitePress static site
}

Output Location

• Source: docs/ directory contains your VitePress markdown files
• Build Output: docs/.vitepress/dist/ contains the built static site
• Deployment: The contents of the dist folder are deployed to GitHub Pages

Troubleshooting

Build Failures

If the deployment fails:

1. Check the Actions tab for detailed error logs
2. Common issues:
   • Node.js version compatibility
   • Missing dependencies
   • Build script errors
   • TypeScript compilation errors

Access Your Site

Once deployed successfully, your site will be available at:

• https://<username>.github.io/<repository-name>/
• Or your custom domain if configured

Local Testing

Before pushing, you can test the build locally:

# Generate content
pnpm run build

# Build VitePress site
pnpm run docs:build

# Preview the built site
pnpm run docs:preview

Workflow Configuration

The workflow file is located at .github/workflows/deploy.yml and includes:

• Trigger: Runs on pushes to master branch
• Node Version: 20 (as specified in package.json engines)
• Package Manager: pnpm with exact version from packageManager field
• Caching: Intelligent dependency caching for faster builds
• Security: Uses official GitHub Actions with proper permissions

Performance Features

• Dependency Caching: pnpm dependencies are cached between runs
• Concurrent Jobs: Build and deploy run in sequence but are optimized
• Artifact Upload: Efficient transfer of build output to deployment
• Incremental Builds: VitePress only rebuilds changed content