feat: screenshots with vhs for readme and docsite

Author: captjt

README.md

@@ -15,7 +15,7 @@
 
 ---
 
-![DevProc Screenshot](./assets/screenshot.png)
+![DevProc Demo](./assets/demo.gif)
 
 ## Features
 

assets/demo.gif

@@ -10,6 +10,7 @@ export default defineConfig({
     starlight({
       title: "DevProc",
       description: "A terminal UI application for managing your local development environment",
+      favicon: "/favicon.png",
       social: {
         github: "https://github.com/captjt/devproc",
       },

assets/screenshot.png

@@ -21,7 +21,7 @@ import { Card, CardGrid } from "@astrojs/starlight/components"
 import { Image } from "astro:assets"
 import bobby from "../../assets/bobby.png"
 
-![DevProc terminal UI](../../assets/screenshot.png)
+<img src="/devproc/demo.gif" alt="DevProc Demo" style="border-radius: 20px; width: 100%;" />
 
 ## Features
 

docs/astro.config.mjs

@@ -37,6 +37,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prettier:write": "prettier --write .",
+    "screenshot": "bun run scripts/screenshot.ts",
+    "screenshot:gif": "bun run scripts/screenshot.ts --gif",
     "docs:dev": "cd docs && bun run dev",
     "docs:build": "cd docs && bun run build",
     "docs:preview": "cd docs && bun run preview"