Add Gallery Item

• Primary documentation URL (required)
• Any additional relevant URLs (API reference, tutorials, etc.)

3. Create the gallery item

Add a new entry to website/data/gallery.json:

{
  "id": "site-slug",
  "name": "Site Name",
  "url": "https://example.com/docs",
  "description": "Synthesized description based on user's input about why it's included, strengths, and what makes it unique.",
  "category": "api-documentation|developer-tools|design-systems|open-source|saas-products|technical-writing",
  "date": "YYYY-MM-DD",
  "images": [],
  "links": [
    {
      "label": "Documentation",
      "url": "https://example.com/docs"
    }
  ],
  "highlights": [
    "Bullet point 1",
    "Bullet point 2"
  ]
}

Field guidelines:

• id: Lowercase slug (e.g., "stripe-docs", "next-js-docs")
• name: Official product/site name
• url: Primary documentation URL
• description: 2-3 sentences synthesized from user input
• category: Choose the most appropriate category
• date: Current date in ISO format (YYYY-MM-DD)
• images: Leave empty initially
• links: Include primary docs link and any additional relevant links
• highlights: Array of specific strengths (4-8 items typically)

4. Take screenshot

Run the screenshot script:

npx tsx website/scripts/take-gallery-screenshots.ts

This script will:

• Read all gallery items
• Take screenshots of any items with empty images arrays
• Save screenshots to website/public/
• Output the filename (e.g., site-slug.png)

5. Update gallery.json with screenshot

Update the gallery item's images array with the screenshot filename:

"images": [
  {
    "url": "/site-slug.png",
    "caption": "Homepage screenshot"
  }
]

6. Review locally

Instruct the user to:

1. Start the website dev server: npm run dev --workspace=website
2. Navigate to the gallery page: http://localhost:3000/gallery
3. Review the new entry for accuracy and visual quality

Key files reference

Common pitfalls

• Forgetting to leave images array empty initially - The screenshot script looks for empty arrays to know which sites to capture
• Not using ISO date format - Use YYYY-MM-DD format for the date field
• Incorrect category - Review existing entries to choose the most appropriate category
• Missing required fields - All fields except images (initially) are required
• Invalid JSON - Ensure proper JSON syntax with trailing commas removed from last items in arrays/objects
• Screenshot script fails - If the script times out or fails, the site may have slow loading or anti-bot measures; try adjusting viewport or wait times in the script