Website for Dave Snider

https://davesnider.com

This site is powered by SvelteKit, Svelte, Turso, Cloudflare R2 and hosted on Fly.io. It is provided publicly so others can learn from the code, but please do not copy the design.

The fonts are paid-fonts I've licensed through SG Type and Berkeley Graphics. Using these fonts in your own project without obtaining your own license is illegal and not very cool.

Architecture

graph TB
    subgraph Activity["Activity Feed"]
        APIS[GitHub / Bluesky / Reddit<br/>Hacker News / BoardGameGeek]
        WORKERS[Cloudflare Workers<br/>scheduled cron jobs]
        PLEX[Plex Server]
    end

    subgraph Museum["Museum"]
        WATCH[Linux Desktop<br/>watchfiles script]
        VISION[Google Vision API<br/>OCR + labels]
    end

    subgraph Content["Blog Content"]
        MDSVEX[mdsvex markdown<br/>with Svelte components]
    end

    subgraph FLY["Fly.io"]
        APP[SvelteKit App]
    end

    subgraph Storage
        TURSO[(Turso SQLite<br/>embedded replica)]
        R2[Cloudflare R2]
        GCS[Google Cloud Storage<br/>backup]
    end

    APIS --> WORKERS
    WORKERS -->|POST /api/activity/ingest| APP
    PLEX -->|webhook| APP

    WATCH --> VISION
    WATCH --> R2
    WATCH --> GCS
    WATCH --> TURSO

    MDSVEX --> APP
    APP --> TURSO
    APP --> R2

Loading

Credentials

You'll need access to a Turso API key to run the museum locally. If you're curious, I wrote up a detailed blog about how it works over here.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:5177
pnpm run build	Build your production site to .svelte-kit/
pnpm run preview	Preview your build locally, before deploying
pnpm run lint	Run eslint and svelte-check
pnpm run format-write	Format code with Prettier
pnpm run test	Run Playwright e2e tests

Scripts

The src/scripts directory has a few Desktop scripts I use on my Linux desktop to upload to the museum portion of this site.

Watch script

The watchfiles script monitors a local folder for new files (screenshots, images, etc.) and automatically:

1. Uploads them to both Google Cloud Storage (backup) and Cloudflare R2 (serving)
2. Creates a database record in Turso with a unique ID
3. Runs Google Vision API on images to extract labels, text content, and dominant colors
4. Sends a desktop notification with the shareable URL (copied to clipboard)
5. Deletes the local file after processing

This powers the screenshot workflow described in this blog post. Configure WATCH_FOLDER in your .env to point to your screenshot directory.

pnpm run watchfiles

Upload Script

The uploadfiles script is for batch uploading a folder of files into a named gallery. Useful for one-time migrations or creating curated collections.

pnpm run uploadfiles /path/to/folder "Gallery Name"

Local Tunnel for Webhooks

To test webhooks locally (Plex, GitHub, etc.), use cloudflared to create a tunnel that exposes your local dev server to the internet.

First-time setup

1. Install cloudflared:

   # Arch Linux
   yay -S cloudflared
   
   # macOS
   brew install cloudflared
   
   # Other: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/

2. Authenticate with Cloudflare:

   cloudflared tunnel login

3. Create the tunnel:

   cloudflared tunnel create local-dev

   Note the tunnel ID from the output.

4. Route DNS (requires domain on Cloudflare):

   cloudflared tunnel route dns local-dev local.davesnider.com

5. Create ~/.cloudflared/config.yml:

   tunnel: local-dev
   credentials-file: /home/YOUR_USER/.cloudflared/TUNNEL_ID.json
   
   ingress:
     - hostname: tunnel.site.com
       service: http://localhost:5177
     - service: http_status:404

Running the tunnel

cloudflared tunnel run local-dev

Your local server is now accessible at https://tunnel.site.com. Use this URL for webhook configurations (Plex, GitHub, etc.).