|
| 1 | +# LibreDB Website Redesign — Design & Implementation Spec |
| 2 | + |
| 3 | +> Source of truth: `docs/designs/LibreDBStudio-Desktop.html` and `…-Mobile.html` |
| 4 | +> (professional design exports). Rendered references captured in |
| 5 | +> `docs/designs/_ref/` — `desktop.css` (full CSS), `desktop.body.html` |
| 6 | +> (rendered DOM), `sections-text.json` (all section copy), `shots/*.png` |
| 7 | +> (per-section screenshots, desktop + mobile). |
| 8 | +
|
| 9 | +## 1. Concept |
| 10 | + |
| 11 | +The entire website is reimagined as an **interactive database IDE** — the |
| 12 | +"LibreDB Studio" product shell itself. The site doesn't *describe* the product; |
| 13 | +it *is* a live demo of it. Every content section is a **table** in a schema |
| 14 | +explorer; selecting it "runs a query" and renders the content as a styled |
| 15 | +**result set**. |
| 16 | + |
| 17 | +This makes the marketing site indistinguishable from the product — the strongest |
| 18 | +possible proof for a SQL IDE. |
| 19 | + |
| 20 | +## 2. Design tokens (extracted, exact) |
| 21 | + |
| 22 | +``` |
| 23 | +FONT JetBrains Mono — everywhere (mono-first). Fallback: ui-monospace, monospace. |
| 24 | +CORNERS Sharp by default (0px). 6px on chips/buttons/cards. No large radii. |
| 25 | +
|
| 26 | +— Surfaces — |
| 27 | +--bg #0a0a0c app base |
| 28 | +--panel #0c0c0f panels, cards, query editor |
| 29 | +--elevated #16181d hover / raised rows |
| 30 | +--green-tint #0d1410 success-tinted surface (sparingly) |
| 31 | +
|
| 32 | +— Borders — |
| 33 | +--border #1d1d22 default hairline |
| 34 | +--border-2 #27272d stronger divider |
| 35 | +--border-3 #3f3f46 zinc-700, emphasis |
| 36 | +
|
| 37 | +— Text — |
| 38 | +--fg #e4e4e7 primary (zinc-200) |
| 39 | +--fg-bright #fafafa headings / white |
| 40 | +--muted #a1a1aa zinc-400 |
| 41 | +--muted-2 #71717a zinc-500 (labels, most common) |
| 42 | +--faint #52525b zinc-600 |
| 43 | +
|
| 44 | +— Accent / semantic — |
| 45 | +--primary #2f6feb blue — buttons, links, active, SQL keywords accent |
| 46 | +--green #4ade80 true / online / strings / success |
| 47 | +--red #f87171 false / destructive / SQL keyword red |
| 48 | +--salmon #f07178 syntax keyword (alt red) |
| 49 | +--amber #fbbf24 partial / MIT / warning / numbers |
| 50 | +--purple #a78bfa AI features |
| 51 | +``` |
| 52 | + |
| 53 | +Maps cleanly onto Tailwind's `zinc` scale + `blue/green/red/amber/violet-400`. |
| 54 | +These become `@theme` tokens in `src/styles/global.css`. |
| 55 | + |
| 56 | +## 3. Layout architecture |
| 57 | + |
| 58 | +### Desktop (≥ lg) — viewport-locked IDE, three zones + bars |
| 59 | +``` |
| 60 | +┌─ TOP BAR ───────────────────────────────────────────────────────────┐ |
| 61 | +│ ◆ LibreDB Studio │ libredb.org PRODUCTION•ONLINE │ GitHub★ Online Monitoring [Live Demo→] v0.9.29 │ |
| 62 | +├──────────────┬──────────────────────────────────────────────────────┤ |
| 63 | +│ SIDEBAR │ TAB BAR: README.md │ {table}.sql ✕ + │ |
| 64 | +│ Connections │ QUERY TOOLBAR: ▾Query Save [▶RUN] BEGIN SANDBOX EDIT │ |
| 65 | +│ libredb.org │ SUB-TOOLBAR: Format Copy Clear Lines AI · Explain ⌘↵│ |
| 66 | +│ │ EDITOR: 1 │ SELECT … FROM {table} …; │ |
| 67 | +│ Explorer (8) │ RESULTS TABS: Results Explain History Saved Charts … │ |
| 68 | +│ ▾ public │ RESULT META: ● N rows │ C columns │ {table}.sql EXEC │ |
| 69 | +│ ▸ home 1 │ ┌─ RESULT CONTENT (the section) ──────────────────────┐│ |
| 70 | +│ ▸ features │ │ …rendered section… ││ |
| 71 | +│ … 8 tables │ └─────────────────────────────────────────────────────┘│ |
| 72 | +│ ●Connected │ │ |
| 73 | +├──────────────┴──────────────────────────────────────────────────────┤ |
| 74 | +│ STATUS BAR: ●Connected PostgreSQL 16.2 │ public │ {table}.sql … Ln1 Col1 UTF-8 SQL ◆ v0.9.29 │ |
| 75 | +└──────────────────────────────────────────────────────────────────────┘ |
| 76 | +``` |
| 77 | +- Selecting an explorer table swaps: active tab name, the `SELECT …` query, the |
| 78 | + result meta (row/col counts, exec time), and the result content. |
| 79 | +- Only the active section's content is shown at a time. |
| 80 | + |
| 81 | +### Mobile — vertical scroll |
| 82 | +``` |
| 83 | +┌ TOP BAR: ☰ ◆ libredb.org ●ONLINE•PostgreSQL [▶RUN] ┐ |
| 84 | +│ QUERY CARD: # {table}.sql ⚡Explain │ |
| 85 | +│ SELECT … ; │ |
| 86 | +│ ● N rows │ C cols [Nms] │ |
| 87 | +│ … section content (stacked, full width) … │ |
| 88 | +└───────────────────────────────────────────────────────┘ |
| 89 | +☰ opens a left DRAWER = Connections + Explorer tree (jump to section). |
| 90 | +``` |
| 91 | + |
| 92 | +### Implementation model (Astro) |
| 93 | +- **All 8 sections render into the DOM** (one `index.astro`). Good for SEO. |
| 94 | +- **Desktop:** show only the active section; explorer click toggles via small |
| 95 | + client script + URL hash (`#features`). Viewport-locked shell, internal scroll |
| 96 | + in result pane. |
| 97 | +- **Mobile:** the same sections display **stacked & scrolling**, each preceded by |
| 98 | + its compact query-card header; drawer links jump (anchor) to a section. |
| 99 | +- One responsive component set drives both; CSS handles desktop-swap vs |
| 100 | + mobile-stack. Progressive enhancement: with JS off, desktop falls back to |
| 101 | + stacked scroll too (content always present). |
| 102 | +- Standalone pages (`/deploy`, `/docker-compose-example`, `/privacy-policy`, |
| 103 | + `/404`) are restyled in the same language; the homepage `deploy` table shows a |
| 104 | + summary + “+15 more →” linking to `/deploy`. |
| 105 | + |
| 106 | +## 4. Section render patterns (the 8 tables) |
| 107 | + |
| 108 | +| table | query (shown in editor) | schema (columns) | render | |
| 109 | +|---|---|---|---| |
| 110 | +| **home** | `SELECT * FROM libredb_studio;` | headline, tagline, stats(JSONB) | Hero: badge, big 2-tone H1, subtitle w/ colored DB names, 2 CTAs, 4-stat grid | |
| 111 | +| **features** | `SELECT name, category, summary FROM features ORDER BY category` | name, category(ENUM), summary | Card grid; each card = category tag + title + summary | |
| 112 | +| **databases** | `SELECT name, type, driver FROM databases` | name, type, driver | List/grid: engine name + `type · driver` | |
| 113 | +| **compare** | `SELECT * FROM tools ORDER BY freedom DESC;` | tool, scores(BOOL[]), price | Result TABLE: cols TOOL/ZERO_INSTALL/MOBILE/AI_NATIVE/SSO_OIDC/FREE/PRICE; true=green false=red partial=amber; LibreDB row highlighted ★recommended. Mobile → stacked cards w/ chips | |
| 114 | +| **tech_stack** | `SELECT layer, tools FROM tech_stack` | layer, tools(TEXT[]) | Grouped by layer (FRONTEND, EDITOR & DATA…) each with tool + role | |
| 115 | +| **get_started** | `SELECT step, title, command FROM quickstart ORDER BY step;` | step(INT), title, command | 3 numbered step cards w/ shell command blocks | |
| 116 | +| **faq** | `SELECT * FROM faq;` | question, answer | Accordion (first open) | |
| 117 | +| **deploy** | `SELECT platform, category FROM deploy_targets ORDER BY category;` | platform, category, method | 5 category count-cards + platform chips + “+15 more →” to /deploy | |
| 118 | + |
| 119 | +Exact copy per section: see `docs/designs/_ref/sections-text.json` and the |
| 120 | +content inventory (§6). Counts: features 17 · databases 7 · compare 5×7 · |
| 121 | +tech_stack 4 · get_started 3 · faq 7 · deploy 39 (5 categories). |
| 122 | + |
| 123 | +## 5. Component plan |
| 124 | + |
| 125 | +``` |
| 126 | +src/styles/global.css → new @theme tokens (mono, zinc, semantic), base |
| 127 | +src/layouts/Layout.astro → head/SEO/fonts (JetBrains Mono), keep meta |
| 128 | +src/components/studio/ |
| 129 | + TopBar.astro → desktop top bar |
| 130 | + StatusBar.astro → desktop bottom status bar |
| 131 | + Explorer.astro → sidebar schema tree (desktop) + drawer (mobile) |
| 132 | + QueryHeader.astro → tab + query toolbar + editor + results-tab + meta |
| 133 | + (desktop chrome; mobile = compact query card) |
| 134 | + MobileTopBar.astro → mobile top bar + hamburger |
| 135 | +src/components/sections/ |
| 136 | + HomeSection.astro (home) |
| 137 | + FeaturesSection.astro |
| 138 | + DatabasesSection.astro |
| 139 | + CompareSection.astro |
| 140 | + TechStackSection.astro |
| 141 | + GetStartedSection.astro |
| 142 | + FaqSection.astro |
| 143 | + DeploySection.astro |
| 144 | +src/scripts/studio.ts → explorer select / tab swap / hash routing (desktop) |
| 145 | +src/pages/index.astro → compose shell + sections |
| 146 | ++ restyle: deploy.astro, docker-compose-example.astro, privacy-policy.astro, 404.astro |
| 147 | +``` |
| 148 | +Data reused as-is: `src/data/deploy-targets.ts`, `deploy-categories.ts`. |
| 149 | +Other section data (features, compare, databases, tech_stack, get_started, faq) |
| 150 | +extracted from current components into small typed data modules under `src/data/`. |
| 151 | + |
| 152 | +## 6. Content contract |
| 153 | +Preserve ALL existing copy. Full verbatim inventory appended by the content-audit |
| 154 | +pass (see companion section / agent output). Verify counts & facts against the |
| 155 | +live site (libredb.org) and the GitHub repo when in doubt. |
| 156 | + |
| 157 | +### Resolved decisions (2026-06-23) |
| 158 | +1. **Testimonials**: DROPPED from homepage (design has no testimonials table). |
| 159 | + Content remains in git history; can return later as a `reviews` table. |
| 160 | +2. **Interaction model**: HYBRID (faithful to design) — desktop view-swap with |
| 161 | + URL hash routing (`#features`), mobile stacked scroll, drawer jumps. All |
| 162 | + content always in DOM; JS-off falls back to stacked scroll on desktop too. |
| 163 | + |
| 164 | +### Content notes (from content audit) |
| 165 | +- Deploy: data file has **42** platforms / 5 categories (design's "39" was a |
| 166 | + snapshot). Use the live `deploy-targets.ts` count dynamically. |
| 167 | +- FAQ: **9** Q&A pairs exist (design showed 7). Keep all 9 (accordion scales). |
| 168 | +- All current copy preserved verbatim per the content inventory. |
| 169 | + |
| 170 | +## ✅ Status (2026-06-23) — IMPLEMENTED |
| 171 | +All 7 build steps complete & verified. `bunx astro build` passes (5 pages). |
| 172 | +Build screenshots in `_ref/build/`. Notable fix: the `base` color token collided |
| 173 | +with Tailwind's `text-base` font-size utility (hid text ≥sm) → token renamed to |
| 174 | +`canvas`. Orphaned legacy components removed; Header/Footer/CookieConsent and the |
| 175 | +4 standalone pages restyled to the IDE language. Dev preview: `bun run dev` → :4321. |
| 176 | + |
| 177 | +## 7. Build order (incremental, verify each) |
| 178 | +1. Tokens + Layout head (global.css, Layout.astro, fonts) — no visual regressions baseline. |
| 179 | +2. Studio shell: TopBar, StatusBar, Explorer, mobile top bar + drawer (static, home active). |
| 180 | +3. HomeSection (hero) — validate look vs `shots/desktop-home.png` + `mobile-home.png`. |
| 181 | +4. Sections in order: features → databases → compare → tech_stack → get_started → faq → deploy. |
| 182 | +5. studio.ts interaction (explorer select, tab swap, hash, mobile drawer jump). |
| 183 | +6. Restyle standalone pages (/deploy, /docker-compose-example, /privacy-policy, /404). |
| 184 | +7. Full QA: responsive (sm/md/lg/xl), keyboard a11y, Lighthouse, build, link audit. |
| 185 | +``` |
| 186 | +``` |
0 commit comments