Refactor: Make Sanity submission scripts reusable with CLI arguments

[gsinghjay]

Overview

The project has two utility scripts for managing gallery submissions that currently have hardcoded configuration. These scripts should be refactored to accept CLI arguments or use a configuration file, making them reusable for future submissions.

Difficulty: Beginner-Intermediate
Skills: JavaScript, Node.js, CLI development

---

Current State

Scripts Location

• scripts/generate-screenshots.mjs - Captures screenshots of demo sites
• scripts/create-featured-submissions.mjs - Uploads to Sanity CMS

Problem

Both scripts have hardcoded site URLs and submission data:

// Currently hardcoded in generate-screenshots.mjs
const sites = [
  {
    name: 'swiss-metro',
    url: 'https://gsinghjay.github.io/swiss_metro/',
    filename: 'swiss-metro-screenshot.png'
  }
];

---

Proposed Solution

Implement one or more of these approaches:

Option A: JSON Configuration File (Easiest)

Create scripts/submissions-config.json:

{
  "submissions": [
    {
      "id": "submission-example",
      "name": "example-style",
      "demoUrl": "https://example.com/demo",
      "styleRef": "example-style",
      "featuredBlurb": "Description here..."
    }
  ],
  "settings": {
    "viewport": { "width": 1280, "height": 800 },
    "screenshotDir": "../screenshots"
  }
}

Option B: CLI Arguments (More Flexible)

# Generate single screenshot
node scripts/generate-screenshot.mjs \
  --url "https://example.com" \
  --name "my-style" \
  --width 1920

# Upload single submission
node scripts/create-submission.mjs \
  --id "submission-example" \
  --screenshot "./screenshots/example.png" \
  --style-ref "example-style"

Option C: NPM Scripts (Best DX)

Add to package.json:

{
  "scripts": {
    "submission:screenshot": "node scripts/generate-screenshot.mjs",
    "submission:upload": "node scripts/create-submission.mjs",
    "submission:full": "npm run submission:screenshot && npm run submission:upload"
  }
}

---

Acceptance Criteria

• Scripts read configuration from file OR accept CLI arguments
• No hardcoded URLs or submission data in script files
• Clear error messages when required arguments missing
• --help flag shows usage information
• Existing functionality preserved (scripts still work)
• Documentation updated in docs/guides/sanity-submission-scripts.md

---

Getting Started

1. Read the Documentation

📚 Sanity Submission Scripts Guide - Comprehensive docs with:

• Current script behavior
• Proposed refactoring patterns
• Code examples for all three approaches

2. Set Up Environment

# Clone and install
git clone https://github.com/gsinghjay/MyWebClass.git
cd MyWebClass
npm install

# Copy environment template
cp .env.example .env
# Add your Sanity token (ask maintainers if needed)

3. Test Current Scripts

# Verify current behavior works
mkdir -p screenshots
node scripts/generate-screenshots.mjs

---

Helpful Resources

• Node.js parseArgs - Built-in CLI argument parsing
• Commander.js - Popular CLI framework (optional)
• Sanity Client Docs - For understanding the upload script

---

Mentorship

This is a good first issue - maintainers are happy to help! Feel free to:

• Ask questions in the comments
• Submit a draft PR for early feedback
• Start with just Option A (JSON config) if the full solution feels large

---

Labels: good first issue, enhancement, documentation