From 2faf3efe59b12fa5400a4e6a1519341897da45eb Mon Sep 17 00:00:00 2001 From: Siddharth Kumar Sah Date: Thu, 26 Mar 2026 22:42:47 +0800 Subject: [PATCH] docs: add logo implementation plan --- .../plans/2026-03-26-logo-implementation.md | 336 ++++++++++++++++++ 1 file changed, 336 insertions(+) create mode 100644 docs/superpowers/plans/2026-03-26-logo-implementation.md diff --git a/docs/superpowers/plans/2026-03-26-logo-implementation.md b/docs/superpowers/plans/2026-03-26-logo-implementation.md new file mode 100644 index 00000000..cbe0d385 --- /dev/null +++ b/docs/superpowers/plans/2026-03-26-logo-implementation.md @@ -0,0 +1,336 @@ +# Logo Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add the faceted gem logo as the default brand mark across the web app, docs site, and all meta assets (favicon, PWA icons, social preview). + +**Architecture:** Create SVG logo assets in `apps/web/public/`, wire them into `index.html` as favicon/meta, display the gem icon in the app header/sidebar as the default (before any custom logo is uploaded), and add logo + favicon config to the VitePress docs site. + +**Tech Stack:** SVG (hand-authored), Vite static assets, HTML meta tags, VitePress config + +--- + +### Task 1: Create the SVG logo assets + +**Files:** +- Create: `apps/web/public/logo-icon.svg` +- Create: `apps/web/public/favicon.svg` +- Create: `apps/web/public/logo.svg` + +- [ ] **Step 1: Create `apps/web/public/` directory** + +```bash +mkdir -p apps/web/public +``` + +- [ ] **Step 2: Create `apps/web/public/logo-icon.svg` — full-detail gem icon** + +```svg + + + + + + + + + +``` + +- [ ] **Step 3: Create `apps/web/public/favicon.svg` — simplified gem for small sizes (no outline, no girdle)** + +```svg + + + + + + + +``` + +- [ ] **Step 4: Create `apps/web/public/logo.svg` — full combination mark (icon + wordmark)** + +```svg + + + + + + + + + + + + + Stirling + Image + +``` + +- [ ] **Step 5: Commit** + +```bash +git add apps/web/public/logo-icon.svg apps/web/public/favicon.svg apps/web/public/logo.svg +git commit -m "feat(branding): add faceted gem SVG logo assets" +``` + +--- + +### Task 2: Wire favicon and meta tags into index.html + +**Files:** +- Modify: `apps/web/index.html` + +- [ ] **Step 1: Add favicon and Open Graph meta tags to `apps/web/index.html`** + +Replace the current `` content with: + +```html + + + + + + Stirling Image + + + + + + + + +
+ + + +``` + +- [ ] **Step 2: Verify favicon loads in dev** + +```bash +pnpm dev +``` + +Open http://localhost:1349 in a browser. The browser tab should show the blue gem favicon. + +- [ ] **Step 3: Commit** + +```bash +git add apps/web/index.html +git commit -m "feat(branding): add favicon and meta tags to index.html" +``` + +--- + +### Task 3: Display gem icon as default logo in app header + +**Files:** +- Modify: `apps/web/src/components/layout/app-layout.tsx` + +The current code shows the text "Stirling Image" when no custom logo is uploaded. Replace it with the gem SVG icon + text. + +- [ ] **Step 1: Create an inline GemLogo component at the top of `app-layout.tsx`** + +Add this after the existing imports (before the `AppLayoutProps` interface): + +```tsx +function GemLogo({ className = "h-6 w-6" }: { className?: string }) { + return ( + + + + + + + + + + ); +} +``` + +Note: Uses `currentColor` so it inherits the text-primary blue color from Tailwind. + +- [ ] **Step 2: Replace the text-only fallback in the mobile sidebar header (around line 59-62)** + +Replace: +```tsx + + Stirling Image + +``` + +With: +```tsx +
+ + + Stirling Image + +
+``` + +- [ ] **Step 3: Replace the text-only fallback in the mobile top bar (around line 104-107)** + +Replace the same text-only span with the same icon + text pattern: + +```tsx +
+ + + Stirling Image + +
+``` + +- [ ] **Step 4: Verify in dev** + +```bash +pnpm dev +``` + +Open http://localhost:1349. The gem icon should appear next to "Stirling Image" in both mobile and desktop views. Test both light and dark mode — the icon should inherit the blue primary color. + +- [ ] **Step 5: Commit** + +```bash +git add apps/web/src/components/layout/app-layout.tsx +git commit -m "feat(branding): show gem icon in app header as default logo" +``` + +--- + +### Task 4: Add logo and favicon to VitePress docs site + +**Files:** +- Create: `apps/docs/public/favicon.svg` +- Modify: `apps/docs/.vitepress/config.mts` + +- [ ] **Step 1: Create `apps/docs/public/` directory and copy the favicon** + +```bash +mkdir -p apps/docs/public +cp apps/web/public/favicon.svg apps/docs/public/favicon.svg +``` + +- [ ] **Step 2: Add favicon `head` entry and logo to `apps/docs/.vitepress/config.mts`** + +Replace the existing `head` array: + +```ts +head: [ + ["meta", { name: "theme-color", content: "#3b82f6" }], + ["link", { rel: "icon", type: "image/svg+xml", href: "/Stirling-Image/favicon.svg" }], +], +``` + +Note: The `href` includes the base path `/Stirling-Image/` because VitePress is deployed to GitHub Pages with that base. + +- [ ] **Step 3: Verify docs site in dev** + +```bash +cd apps/docs && npx vitepress dev +``` + +Open the docs site in a browser. The tab should show the gem favicon. + +- [ ] **Step 4: Commit** + +```bash +git add apps/docs/public/favicon.svg apps/docs/.vitepress/config.mts +git commit -m "feat(docs): add gem favicon to VitePress site" +``` + +--- + +### Task 5: Generate PNG assets for PWA and social preview + +**Files:** +- Create: `apps/web/public/logo-192.png` +- Create: `apps/web/public/logo-512.png` +- Modify: `apps/web/index.html` (add PWA manifest link) +- Create: `apps/web/public/manifest.json` + +- [ ] **Step 1: Generate PNG icons from the SVG using Sharp** + +Create a one-off script and run it: + +```bash +cd /Users/sidd/Desktop/Personal/Projects/Stirling-Image +node -e " +const sharp = require('sharp'); +const fs = require('fs'); +const svg = fs.readFileSync('apps/web/public/logo-icon.svg'); + +Promise.all([ + sharp(svg).resize(192, 192).png().toFile('apps/web/public/logo-192.png'), + sharp(svg).resize(512, 512).png().toFile('apps/web/public/logo-512.png'), +]).then(() => console.log('PNGs generated')); +" +``` + +If `require` doesn't work (ESM), use: + +```bash +node --input-type=module -e " +import sharp from 'sharp'; +import { readFileSync } from 'fs'; +const svg = readFileSync('apps/web/public/logo-icon.svg'); +await sharp(svg).resize(192, 192).png().toFile('apps/web/public/logo-192.png'); +await sharp(svg).resize(512, 512).png().toFile('apps/web/public/logo-512.png'); +console.log('PNGs generated'); +" +``` + +- [ ] **Step 2: Create `apps/web/public/manifest.json`** + +```json +{ + "name": "Stirling Image", + "short_name": "Stirling Image", + "icons": [ + { "src": "/logo-192.png", "sizes": "192x192", "type": "image/png" }, + { "src": "/logo-512.png", "sizes": "512x512", "type": "image/png" } + ], + "theme_color": "#3b82f6", + "background_color": "#ffffff", + "display": "standalone" +} +``` + +- [ ] **Step 3: Add manifest link to `apps/web/index.html`** + +Add after the favicon link in ``: + +```html + +``` + +- [ ] **Step 4: Verify PNGs were generated correctly** + +```bash +file apps/web/public/logo-192.png apps/web/public/logo-512.png +``` + +Expected: both should report as PNG image data with correct dimensions. + +- [ ] **Step 5: Commit** + +```bash +git add apps/web/public/logo-192.png apps/web/public/logo-512.png apps/web/public/manifest.json apps/web/index.html +git commit -m "feat(branding): add PWA manifest and PNG logo assets" +```