From 61d08f336a62d2e9d4122670980986d2712b9c13 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 21:52:37 +0300
Subject: [PATCH 1/9] =?UTF-8?q?docs:=20design=20spec=20for=20unifying=20de?=
 =?UTF-8?q?ploy=20(B2=20=E2=80=94=20single-source=20content,=20shared=20ID?=
 =?UTF-8?q?E=20shell)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../designs/2026-06-23-deploy-unify-design.md | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 docs/designs/2026-06-23-deploy-unify-design.md

diff --git a/docs/designs/2026-06-23-deploy-unify-design.md b/docs/designs/2026-06-23-deploy-unify-design.md
new file mode 100644
index 0000000..0e1e782
--- /dev/null
+++ b/docs/designs/2026-06-23-deploy-unify-design.md
@@ -0,0 +1,139 @@
+# Unify Deploy — single-source content, consistent IDE shell (B2)
+
+> Problem: `/deploy` (a Google-indexed URL) renders as a classic centered
+> Header/Footer page, while the homepage Explorer→deploy shows a sparse IDE
+> result-set teaser. Two different approaches AND two different content depths.
+> Goal: one rich deploy content authored ONCE, shown in the SAME IDE shell both
+> on the homepage `#deploy` section and at `/deploy` — without losing `/deploy`'s
+> SEO and without duplicating content or the shell.
+
+## Decisions (locked with user, 2026-06-23)
+- **B2**: keep `/deploy` as a real, indexed page (do NOT redirect — it's indexed;
+  a hash `/#deploy` is not a separate indexable URL, so redirecting would
+  consolidate `/deploy` into the homepage and drop the dedicated URL).
+- **Single source, hard requirement**: the deploy *content* is authored exactly
+  once (in `DeploySection.astro`) and rendered from two places. No second copy.
+- **Shared shell**: extract the IDE chrome into `StudioShell.astro` so both pages
+  use one shell (no shell duplication either).
+- Scope: deploy only. Other sub-pages (`/docker-compose-example`,
+  `/privacy-policy`, `/404`) keep Header/Footer for now (separate future pass).
+
+## Architecture
+
+### 1. `StudioShell.astro` (NEW) — the one IDE chrome
+Extracts what `index.astro` currently inlines: desktop `TopBar`, `MobileTopBar`,
+the workbench (`<aside>` Explorer sidebar + `<main class="studio-pane">` with a
+`<slot/>` for sections), desktop `StatusBar`, `Console`, `CommandPalette`, and the
+`<script>import '../scripts/studio.ts'</script>`.
+- Props:
+  - `active: string` — the initially-active section id.
+  - `standalone?: boolean` (default `false`) — true for focused sub-pages (`/deploy`)
+    that render a single section; flips Explorer/MobileTopBar links to absolute
+    `/#{id}` (navigate to the homepage studio) and tells `studio.ts` not to do
+    in-page swapping.
+- Root element carries flags for the script:
+  `<div class="studio" data-studio data-standalone={standalone ? '' : null} data-initial-active={active}>`.
+
+### 2. `index.astro` (MOD)
+Replace the inlined shell with `<StudioShell active="home">` wrapping the existing
+8 `<SectionShell>`s in the default slot. No behavior change (home active, in-page
+swap, palette, etc. all unchanged). The deploy `SectionShell` now contains the rich
+`<DeploySection />` (see §4).
+
+### 3. `deploy.astro` (MOD → thin, ~25 lines)
+```
+<Layout title={deployTitle} description={deployDescription}>
+  <Fragment slot="head"><script type="application/ld+json" set:html={ItemList JSON-LD} /></Fragment>
+  <StudioShell active="deploy" standalone>
+    <SectionShell section={sectionById['deploy']}><DeploySection /></SectionShell>
+  </StudioShell>
+</Layout>
+```
+- Keeps its own `<title>`, meta description, automatic canonical (`/deploy`), and
+  the deploy **ItemList JSON-LD** (deploy-specific structured data — authored once
+  here; it is metadata, not the visible content, so this is not content duplication).
+- Drops `<Header/>`, `<Footer/>`, the centered `<main>` layout, the breadcrumb, and
+  ALL the inline visible deploy markup (that markup moves into `DeploySection`).
+- The build-time `getStars` call and the client star-refresh `<script>` move into
+  `DeploySection` (single source), so `deploy.astro` does not re-author them.
+
+### 4. `DeploySection.astro` (MOD) — the SINGLE source of deploy content
+Becomes the rich content (lifted verbatim from old `deploy.astro`'s body), replacing
+the current sparse teaser (5 count-cards + chips + "+N more"):
+- Header: `SectionHeader` "Deploy anywhere" + subtitle with `{platformCount}+
+  platforms and {installMethodCount} install methods`.
+- A compact **summary strip** (keep the existing 5 category count-cards as an
+  at-a-glance band — nice in the IDE result view).
+- **Official one-click integrations**: cards for `status === 'official'`
+  (Railway, CapRover) — logo, blurb, Deploy-now/Install-guide + Docs buttons.
+- **Category-grouped platform list**: for each `deployCategory` (ordered) → group
+  title + tagline + responsive grid of `<PlatformCard target stars=…>`; targets
+  sorted official→available→planned.
+- **Investor band**: "{totalStars}+ GitHub stars" + planned-names line.
+- Build-time stars: `const stars = await getStars(starRepos)` in frontmatter,
+  passed to each `PlatformCard`.
+- Client **star-refresh `<script>`** (the `[data-stars-repo]` live-update + total)
+  lives here too — so it runs wherever `DeploySection` is rendered.
+- Rendered by BOTH `index.astro` (homepage `#deploy` pane, scrolls) and
+  `deploy.astro`. Authored once.
+- Internal CTA links (Docker Compose example, GitHub, live demo) kept.
+
+### 5. `Explorer.astro` + `MobileTopBar.astro` (MOD)
+Add a `standalone?: boolean` prop. Section links become
+`${standalone ? '/' : ''}#${id}` → `#features` on the homepage (in-page swap),
+`/#features` on `/deploy` (navigate home). `MobileTopBar` forwards `standalone` to
+its drawer `Explorer`.
+
+### 6. `studio.ts` (MOD) — standalone awareness
+- Read flags from `[data-studio]`: `standalone = dataset.standalone !== undefined`;
+  `initialActive = dataset.initialActive || 'home'`.
+- Initial active on load: `location.hash ? currentHash() : initialActive` (so
+  `/deploy` with no hash activates `deploy`).
+- `setActive(id)`: **no-op if `[data-section="${id}"]` is absent** from the DOM
+  (protects focused pages from blanking on an unknown hash).
+- `onLinkClick`: when `standalone`, do NOT `preventDefault` — let the `/#{id}`
+  anchor navigate to the homepage (no in-page swap on focused pages).
+- Command palette "Jump to {section}": when `standalone`, navigate via
+  `location.href = '/#'+id` instead of setting `location.hash`.
+- All other behaviors (toasts, run, copy, export, explain, search) unchanged and
+  work on `/deploy` (deploy section present).
+
+### 7. `Layout.astro` (MOD)
+Add a named `head` slot (`<slot name="head" />` inside `<head>`) so a page can inject
+page-specific `<head>` content (deploy's ItemList JSON-LD). Existing global JSON-LD
+unchanged. Homepage adds nothing to this slot (no duplicate ItemList across URLs).
+
+## SEO
+- `/deploy` keeps its URL, `<title>`, description, self-canonical, and ItemList
+  JSON-LD → stays indexed; a same-URL design change does not deindex it.
+- Homepage JSON-LD unchanged. Deploy content appearing on both `/` (one section
+  among many) and `/deploy` (focused) is the standard section + dedicated-page
+  pattern; each self-canonicalises.
+- Internal links to `/deploy` (Hero "Deploy in one click", get_started pointer,
+  Header/Footer "Deploy") stay as `/deploy` (it's a real page).
+
+## Files
+```
+src/components/studio/StudioShell.astro     NEW  extracted shell (active, standalone)
+src/pages/index.astro                       MOD  use StudioShell active=home + 8 sections
+src/pages/deploy.astro                      MOD  thin: Layout(SEO+ItemList) + StudioShell standalone + DeploySection; drop Header/Footer/centered layout & inline deploy markup
+src/components/sections/DeploySection.astro MOD  rich SINGLE-SOURCE content (summary + official + grouped PlatformCards + investor band) + getStars + star-refresh script
+src/components/studio/Explorer.astro        MOD  standalone -> /#id links
+src/components/studio/MobileTopBar.astro    MOD  forward standalone to drawer Explorer
+src/scripts/studio.ts                       MOD  standalone awareness (data flags, setActive bail, link navigate, palette jump)
+src/layouts/Layout.astro                    MOD  add named `head` slot
+```
+Unchanged data: `deploy-targets.ts`, `deploy-categories.ts`, `sections.ts`.
+`PlatformCard.astro` / `StatusBadge.astro` now consumed by `DeploySection` (were by `deploy.astro`).
+
+## Success criteria
+- The deploy content exists in exactly ONE source file (`DeploySection.astro`);
+  `index.astro` and `deploy.astro` both render `<DeploySection/>` with no copied markup.
+- Homepage `#deploy` and `/deploy` show the same rich content in the same IDE shell.
+- `/deploy` still returns 200 at its own URL with its `<title>` + ItemList JSON-LD
+  (indexing preserved); no redirect.
+- On `/deploy`, Explorer/palette navigation to other tables goes to `/#section`;
+  deploy stays active on load.
+- `bunx astro build` passes; homepage and `/deploy` both render; existing homepage
+  interactions (swap/palette/toasts/etc.) unaffected.
+```

From b1899a6e93c461248addb63f41c2f2778b48ce6c Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 21:54:36 +0300
Subject: [PATCH 2/9] docs: update live demo link in README to new domain

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9bca1c5..3f03057 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Any push to the `main` branch will trigger an automatic build and deployment.
 
 - **Live Site**: https://libredb.github.io
 - **Main Project**: https://github.com/libredb/libredb-studio
-- **Live Demo**: https://demo.libredb.studio
+- **Live Demo**: https://app.libredb.org
 - **LinkedIn**: https://www.linkedin.com/company/libredb
 
 ## License

From d24d592ddb88240ce54a5bf2ae70db5fb9d7ca98 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 21:56:08 +0300
Subject: [PATCH 3/9] docs: implementation plan for unifying deploy (B2, 6
 tasks)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-06-23-unify-deploy.md          | 601 ++++++++++++++++++
 1 file changed, 601 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-23-unify-deploy.md

diff --git a/docs/superpowers/plans/2026-06-23-unify-deploy.md b/docs/superpowers/plans/2026-06-23-unify-deploy.md
new file mode 100644
index 0000000..b6350ce
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-23-unify-deploy.md
@@ -0,0 +1,601 @@
+# Unify Deploy (B2) 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:** Author the rich deploy content ONCE (`DeploySection.astro`) and render it in the SAME IDE shell both on the homepage `#deploy` section and at `/deploy`, keeping `/deploy` a real indexed page.
+
+**Architecture:** Extract the IDE chrome into a shared `StudioShell.astro` (props `active`, `standalone`). `index.astro` uses it with all 8 sections (home active). `deploy.astro` becomes a thin page: Layout (deploy SEO + ItemList JSON-LD via a new Layout `head` slot) → `StudioShell standalone active="deploy"` → one `SectionShell` with `DeploySection`. `studio.ts` gains standalone awareness so a focused single-section page activates correctly and its Explorer/palette navigation points back to `/#section`.
+
+**Tech Stack:** Astro 6, Tailwind v4, TypeScript. Build check: `bunx astro build` (NOT `bun run build` — it mutates tracked compose files). Dev: `bun run dev` → :4321. No unit tests for these (Astro components + DOM wiring) — verify with build + browser.
+
+## Global Constraints
+- **Single source of deploy content**: the visible deploy content lives in exactly ONE file (`DeploySection.astro`). `index.astro` and `deploy.astro` must both render `<DeploySection/>` with NO copied markup. (Deploy-specific ItemList JSON-LD is metadata, authored once in `deploy.astro` — not visible content.)
+- Design tokens only (no raw hex): `bg-canvas/panel/raised`, `border-edge/edge-strong/line`, `text-fg/bright/muted/dim/faint`, accents `primary/ok/bad/warn/ai`. Mono everywhere. Sharp corners (≤6px on chips/buttons).
+- `/deploy` stays a real 200 page with its own `<title>`, meta description, self-canonical, and ItemList JSON-LD — NO redirect (it is Google-indexed).
+- Internal links to deploy stay `/deploy` (Hero, get_started, Header, Footer) — unchanged.
+- Other sub-pages (`/docker-compose-example`, `/privacy-policy`, `/404`) keep Header/Footer — out of scope.
+- Progressive enhancement preserved: content present without JS; `/deploy` shows its single section server-rendered active.
+- Verify each task with `bunx astro build` (must pass, 5 pages) + the stated browser check.
+
+## File Structure
+```
+src/layouts/Layout.astro                    MOD  add named `head` slot (Task 1)
+src/components/studio/StudioShell.astro      NEW  extracted shell; props active, standalone (Task 2)
+src/components/studio/StatusBar.astro        MOD  accept `active` prop (Task 2)
+src/components/studio/Explorer.astro         MOD  `standalone` prop → /#id links (Task 2)
+src/components/studio/MobileTopBar.astro     MOD  `standalone` prop, forward to drawer Explorer (Task 2)
+src/pages/index.astro                        MOD  use StudioShell active=home + 8 sections (Task 2)
+src/scripts/studio.ts                        MOD  standalone awareness (Task 3)
+src/components/sections/DeploySection.astro  MOD  rich SINGLE-SOURCE content + getStars + star-refresh script (Task 4)
+src/pages/deploy.astro                       MOD  thin: Layout(SEO+ItemList head slot) + StudioShell standalone + DeploySection (Task 5)
+```
+Unchanged: `deploy-targets.ts`, `deploy-categories.ts`, `sections.ts`, `PlatformCard.astro`, `StatusBadge.astro`.
+
+---
+
+### Task 1: Add a `head` slot to Layout
+
+**Files:**
+- Modify: `src/layouts/Layout.astro`
+
+**Interfaces:**
+- Produces: a named slot `head` rendered inside `<head>`, so pages can inject page-specific head markup (deploy's ItemList JSON-LD in Task 5).
+
+- [ ] **Step 1: Add the slot**
+
+In `src/layouts/Layout.astro`, inside `<head>`, immediately BEFORE the closing `</head>` (after the existing `<title>{title}</title>` line), add:
+```astro
+    <slot name="head" />
+```
+
+- [ ] **Step 2: Build verify**
+
+Run: `bunx astro build`
+Expected: PASS (5 pages). No visual/markup change to existing pages (the slot is empty everywhere today).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/layouts/Layout.astro
+git commit -m "feat: add named head slot to Layout for page-specific <head> markup"
+```
+
+---
+
+### Task 2: Extract `StudioShell` + adopt it in `index.astro`
+
+**Files:**
+- Create: `src/components/studio/StudioShell.astro`
+- Modify: `src/components/studio/StatusBar.astro`
+- Modify: `src/components/studio/Explorer.astro`
+- Modify: `src/components/studio/MobileTopBar.astro`
+- Modify: `src/pages/index.astro`
+
+**Interfaces:**
+- Produces: `StudioShell` (props `active?: string = 'home'`, `standalone?: boolean = false`); renders the shell with `<slot/>` for the main pane sections, and the root `<div class="studio" data-studio data-initial-active={active} data-standalone={standalone?'':undefined}>`. Explorer/MobileTopBar gain `standalone?: boolean`; StatusBar gains `active?: string`.
+- Consumes: existing `TopBar`, `MobileTopBar`, `Explorer`, `StatusBar`, `Console`, `CommandPalette`, `studio.ts`.
+
+- [ ] **Step 1: StatusBar accepts an `active` prop**
+
+Replace the frontmatter of `src/components/studio/StatusBar.astro`:
+```astro
+---
+import { sectionById } from '../../data/sections';
+interface Props { active?: string; }
+const { active = 'home' } = Astro.props;
+const meta = sectionById[active] ?? sectionById['home'];
+---
+```
+Then in the markup replace the two `home.` references so it renders the active section:
+- `<span data-statusbar-table>{home.table}</span>` → `<span data-statusbar-table>{meta.table}</span>`
+- `<span data-statusbar-rows>{home.rows}</span>` → `<span data-statusbar-rows>{meta.rows}</span>`
+(Leave the `cursor-default select-none` and all other classes intact.)
+
+- [ ] **Step 2: Explorer accepts `standalone` → absolute links**
+
+In `src/components/studio/Explorer.astro`, add `standalone` to Props:
+```astro
+const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true, standalone = false } = Astro.props;
+const linkBase = standalone ? '/' : '';
+```
+(Add `standalone?: boolean;` to the `interface Props`.) Then change the section link href:
+```astro
+              href={`${linkBase}#${s.id}`}
+```
+(It currently reads `href={`#${s.id}`}`. Everything else — `data-section-link={s.id}`, classes — stays.)
+
+- [ ] **Step 3: MobileTopBar forwards `standalone`**
+
+In `src/components/studio/MobileTopBar.astro`, add `standalone` to Props and forward it to the drawer Explorer:
+```astro
+interface Props { active?: string; standalone?: boolean; }
+const { active = 'home', standalone = false } = Astro.props;
+```
+And the drawer Explorer call:
+```astro
+      <Explorer active={active} idPrefix="drawer" showConnectionsLabel={false} standalone={standalone} />
+```
+
+- [ ] **Step 4: Create `StudioShell.astro`**
+
+```astro
+---
+// src/components/studio/StudioShell.astro
+// The shared IDE chrome. index.astro and deploy.astro both render through this.
+import TopBar from './TopBar.astro';
+import MobileTopBar from './MobileTopBar.astro';
+import Explorer from './Explorer.astro';
+import StatusBar from './StatusBar.astro';
+import Console from './Console.astro';
+import CommandPalette from './CommandPalette.astro';
+
+interface Props {
+  active?: string;
+  standalone?: boolean;
+}
+const { active = 'home', standalone = false } = Astro.props;
+---
+<div
+  class="studio flex min-h-screen flex-col"
+  data-studio
+  data-initial-active={active}
+  data-standalone={standalone ? '' : undefined}
+>
+  <div class="hidden lg:block"><TopBar /></div>
+  <MobileTopBar active={active} standalone={standalone} />
+
+  <div class="studio-workbench flex min-h-0 flex-1">
+    <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-edge lg:block">
+      <Explorer active={active} idPrefix="side" standalone={standalone} />
+    </aside>
+
+    <main class="studio-pane min-w-0 flex-1 lg:flex lg:flex-col">
+      <slot />
+    </main>
+  </div>
+
+  <div class="hidden lg:block"><StatusBar active={active} /></div>
+  <Console />
+</div>
+
+<CommandPalette />
+
+<script>
+  import '../../scripts/studio.ts';
+</script>
+```
+
+- [ ] **Step 5: Rewrite `index.astro` to use `StudioShell`**
+
+Replace the entire body of `src/pages/index.astro` with:
+```astro
+---
+import Layout from '../layouts/Layout.astro';
+import StudioShell from '../components/studio/StudioShell.astro';
+import SectionShell from '../components/studio/SectionShell.astro';
+import { sectionById } from '../data/sections';
+
+import HomeSection from '../components/sections/HomeSection.astro';
+import FeaturesSection from '../components/sections/FeaturesSection.astro';
+import DatabasesSection from '../components/sections/DatabasesSection.astro';
+import CompareSection from '../components/sections/CompareSection.astro';
+import TechStackSection from '../components/sections/TechStackSection.astro';
+import GetStartedSection from '../components/sections/GetStartedSection.astro';
+import FaqSection from '../components/sections/FaqSection.astro';
+import DeploySection from '../components/sections/DeploySection.astro';
+
+const s = sectionById;
+---
+<Layout title="LibreDB Studio - AI-Powered Open-Source SQL IDE">
+  <StudioShell active="home">
+    <SectionShell section={s.home} active><HomeSection /></SectionShell>
+    <SectionShell section={s.features}><FeaturesSection /></SectionShell>
+    <SectionShell section={s.databases}><DatabasesSection /></SectionShell>
+    <SectionShell section={s.compare}><CompareSection /></SectionShell>
+    <SectionShell section={s.tech_stack}><TechStackSection /></SectionShell>
+    <SectionShell section={s.get_started}><GetStartedSection /></SectionShell>
+    <SectionShell section={s.faq}><FaqSection /></SectionShell>
+    <SectionShell section={s.deploy}><DeploySection /></SectionShell>
+  </StudioShell>
+</Layout>
+```
+(Note: the `<script>import '../scripts/studio.ts'</script>` now lives in StudioShell, so it is removed from index.astro. The script path in StudioShell is `'../../scripts/studio.ts'` because StudioShell is one directory deeper.)
+
+- [ ] **Step 6: Build + browser verify (homepage unchanged)**
+
+Run: `bunx astro build` → PASS (5 pages).
+In dev (`bun run dev`, :4321), load `/`: the homepage is visually unchanged. Verify the studio still works:
+```js
+// in the browser console
+document.querySelector('[data-studio]').classList.contains('js')  // true (script ran)
+document.querySelector('[data-section-link="compare"]').getAttribute('href')  // "#compare" (NOT /#compare — homepage is not standalone)
+```
+Click an Explorer item → section swaps; press ⌘/Ctrl+K → palette opens. (No regression from the extraction.)
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/components/studio/StudioShell.astro src/components/studio/StatusBar.astro src/components/studio/Explorer.astro src/components/studio/MobileTopBar.astro src/pages/index.astro
+git commit -m "refactor: extract StudioShell; index.astro renders through it"
+```
+
+---
+
+### Task 3: `studio.ts` standalone awareness
+
+**Files:**
+- Modify: `src/scripts/studio.ts`
+
+**Interfaces:**
+- Consumes: `[data-studio]` dataset flags `data-initial-active`, `data-standalone` (from StudioShell, Task 2).
+- Behavior: on a standalone page (single section), the section activates on load even with no hash; `setActive` no-ops if the target section is absent; Explorer link clicks navigate (no in-page swap); palette "Jump" navigates to `/#id`.
+
+- [ ] **Step 1: Read the flags**
+
+Near the top of `src/scripts/studio.ts`, just after `const studio = document.querySelector<HTMLElement>('[data-studio]');`, add:
+```ts
+const standalone = !!studio && studio.hasAttribute('data-standalone');
+const initialActive = studio?.dataset.initialActive || 'home';
+```
+
+- [ ] **Step 2: `setActive` falls back to the page's initial active and bails if the section is absent**
+
+In `setActive`, replace the opening lines. Current:
+```ts
+function setActive(id: string, opts: { scroll?: boolean } = {}) {
+  if (!ids.has(id)) id = 'home';
+  const meta = sectionById[id];
+```
+Replace with:
+```ts
+function setActive(id: string, opts: { scroll?: boolean } = {}) {
+  if (!ids.has(id)) id = initialActive;
+  // Focused/standalone pages render a single section; if the requested one
+  // isn't in the DOM, keep the current view instead of blanking it.
+  if (!document.querySelector(`[data-section="${id}"]`)) return;
+  const meta = sectionById[id];
+```
+
+- [ ] **Step 3: `currentHash` defaults to the page's initial active**
+
+Replace:
+```ts
+function currentHash(): string {
+  return (location.hash || '#home').slice(1);
+}
+```
+with:
+```ts
+function currentHash(): string {
+  return (location.hash || `#${initialActive}`).slice(1);
+}
+```
+
+- [ ] **Step 4: On standalone, let Explorer links navigate (no in-page swap)**
+
+In `onLinkClick`, add a standalone short-circuit at the top. Current:
+```ts
+function onLinkClick(e: Event, id: string) {
+  if (isDesktop()) {
+```
+Replace with:
+```ts
+function onLinkClick(e: Event, id: string) {
+  if (standalone) { closeDrawer(); return; } // links are /#id → let the browser navigate home
+  if (isDesktop()) {
+```
+
+- [ ] **Step 5: Palette "Jump to section" navigates cross-page when standalone**
+
+In the palette `paletteItems()` jump mapping, the jump currently does `location.hash = \`#${s.id}\``. Replace that run body:
+```ts
+    run: () => { location.hash = `#${s.id}`; },
+```
+with:
+```ts
+    run: () => {
+      if (standalone) location.href = `/#${s.id}`;
+      else location.hash = `#${s.id}`;
+    },
+```
+
+- [ ] **Step 6: Build + browser verify (homepage still fine)**
+
+Run: `bunx astro build` → PASS.
+In dev load `/` (NOT standalone): everything works as before — section swap, palette jump (sets `#section`, stays on page), search. The standalone branches don't fire on the homepage (no `data-standalone`). Confirm:
+```js
+document.querySelector('[data-studio]').hasAttribute('data-standalone')  // false on homepage
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/scripts/studio.ts
+git commit -m "feat: studio.ts standalone awareness (initial-active, setActive bail, cross-page nav)"
+```
+
+---
+
+### Task 4: `DeploySection.astro` becomes the single-source rich content
+
+**Files:**
+- Modify: `src/components/sections/DeploySection.astro`
+
+**Interfaces:**
+- Consumes: `deployTargets`, `starRepos` (`../../data/deploy-targets`), `deployCategories` (`../../data/deploy-categories`), `getStars`/`formatStars` (`../../lib/github-stars`), `PlatformCard` (`../deploy/PlatformCard.astro`), `SectionHeader` (`./SectionHeader.astro`).
+- Produces: the full deploy result content, rendered identically wherever `<DeploySection/>` appears. Includes the build-time `getStars` call and the client `[data-stars-repo]` refresh `<script>`.
+
+- [ ] **Step 1: Replace DeploySection with the rich, single-source version**
+
+Replace the ENTIRE contents of `src/components/sections/DeploySection.astro` with:
+```astro
+---
+import SectionHeader from './SectionHeader.astro';
+import PlatformCard from '../deploy/PlatformCard.astro';
+import { deployTargets, starRepos } from '../../data/deploy-targets';
+import { deployCategories } from '../../data/deploy-categories';
+import { getStars, formatStars } from '../../lib/github-stars';
+
+const stars = await getStars(starRepos);
+
+const STATUS_ORDER = { official: 0, available: 1, planned: 2 } as const;
+const sortedCategories = [...deployCategories].sort((a, b) => a.order - b.order);
+const targetsByCategory = (id: string) =>
+  deployTargets
+    .filter((t) => t.category === id)
+    .sort((a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status]);
+
+const official = deployTargets.filter((t) => t.status === 'official');
+const totalStars = Object.values(stars).reduce((sum, n) => sum + n, 0);
+
+const platformCount = deployTargets.length;
+const installMethodCount = deployTargets.filter((t) => t.category === 'registry').length;
+const plannedNames = deployTargets.filter((t) => t.status === 'planned').map((t) => t.name);
+
+const catColors = ['text-primary', 'text-ok', 'text-ai', 'text-warn', 'text-bad'];
+const summary = sortedCategories.map((c, i) => ({
+  title: c.title,
+  count: deployTargets.filter((t) => t.category === c.id).length,
+  color: catColors[i % catColors.length],
+}));
+---
+<div class="mx-auto max-w-6xl">
+  <SectionHeader
+    title="Deploy anywhere"
+    subtitle={`One open-source image, every layer of the deploy stack — ${platformCount}+ platforms and ${installMethodCount} install methods.`}
+  />
+
+  <!-- Category summary strip -->
+  <div class="grid grid-cols-2 gap-px overflow-hidden border border-edge bg-edge md:grid-cols-3 lg:grid-cols-5">
+    {summary.map((c) => (
+      <div class="bg-panel p-5">
+        <div class={`text-3xl font-bold ${c.color}`}>{c.count}</div>
+        <div class="mt-2 text-[12.5px] leading-snug text-dim">{c.title}</div>
+      </div>
+    ))}
+  </div>
+
+  <!-- Official one-click integrations -->
+  <section class="mt-10">
+    <h3 class="text-[15px] font-semibold text-bright">Official one-click integrations</h3>
+    <p class="mt-1 text-[13px] text-dim">Listed in their marketplaces — deploy in a click, today.</p>
+    <div class="mt-4 grid gap-4 md:grid-cols-2">
+      {official.map((t) => (
+        <div class="flex flex-col border border-edge-strong bg-panel p-6">
+          <div class="mb-3 flex items-center gap-3">
+            {t.logo
+              ? <img src={t.logo} alt={`${t.name} logo`} width="40" height="40" class="h-10 w-10 object-contain" />
+              : <span class="grid h-10 w-10 place-items-center rounded-md bg-primary/20 text-lg font-bold text-primary">{t.name.charAt(0)}</span>}
+            <h4 class="text-lg font-semibold text-bright">{t.name}</h4>
+          </div>
+          <p class="mb-5 text-sm text-muted">{t.blurb}</p>
+          <div class="mt-auto flex flex-wrap gap-3">
+            <a href={t.deployUrl ?? t.docsUrl ?? t.url} target="_blank" rel="noopener noreferrer"
+               class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-bright">
+              {t.deployUrl ? 'Deploy now' : 'View install guide'} <span aria-hidden="true">→</span>
+            </a>
+            {t.docsUrl && (
+              <a href={t.docsUrl} target="_blank" rel="noopener noreferrer"
+                 class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-4 py-2 text-sm font-medium text-fg transition-colors hover:bg-raised">
+                Docs
+              </a>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  </section>
+
+  <!-- Category grids -->
+  {sortedCategories.map((cat) => (
+    <section class="mt-10">
+      <h3 class="text-[15px] font-semibold text-bright">{cat.title}</h3>
+      <p class="mt-1 max-w-2xl text-[13px] text-dim">{cat.tagline}</p>
+      <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {targetsByCategory(cat.id).map((t) => (
+          <PlatformCard target={t} stars={t.github ? stars[t.github] : undefined} />
+        ))}
+      </div>
+    </section>
+  ))}
+
+  <!-- Investor depth band -->
+  <section class="mt-10 border border-edge-strong bg-panel p-6 text-center md:p-8">
+    <p class="mb-2 text-sm text-muted">Embedded across open-source ecosystems totaling</p>
+    <div class="mb-3 text-3xl font-bold text-primary md:text-4xl">
+      <span data-stars-total>{formatStars(totalStars)}</span>+ GitHub stars
+    </div>
+    <p class="mx-auto max-w-2xl text-sm text-muted">
+      LibreDB Studio doesn’t just support these platforms — it ships inside communities that
+      millions of developers already trust. More on the roadmap: {plannedNames.slice(0, 8).join(', ')}, and more.
+    </p>
+  </section>
+
+  <!-- CTA -->
+  <section class="mt-8 flex flex-wrap gap-3">
+    <a href="/docker-compose-example" class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-raised">Docker Compose example</a>
+    <a href="https://github.com/libredb/libredb-studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-raised">View on GitHub</a>
+    <a href="https://app.libredb.org" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-bright">Try the live demo</a>
+  </section>
+</div>
+
+<script>
+  import { formatStars } from '../../lib/github-stars';
+
+  async function refreshStars() {
+    const spans = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-repo]'));
+    await Promise.all(
+      spans.map(async (span) => {
+        const repo = span.getAttribute('data-stars-repo');
+        if (!repo) return;
+        try {
+          const res = await fetch(`https://api.github.com/repos/${repo}`, {
+            headers: { Accept: 'application/vnd.github+json' },
+          });
+          if (!res.ok) return;
+          const data = await res.json();
+          if (typeof data.stargazers_count !== 'number') return;
+          span.setAttribute('data-stars-count', String(data.stargazers_count));
+          span.textContent = formatStars(data.stargazers_count);
+        } catch {
+          /* keep the baked-in number */
+        }
+      }),
+    );
+    const total = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-count]'))
+      .reduce((sum, el) => sum + (Number(el.getAttribute('data-stars-count')) || 0), 0);
+    const totalEl = document.querySelector<HTMLElement>('[data-stars-total]');
+    if (totalEl && total > 0) totalEl.textContent = formatStars(total);
+  }
+  refreshStars();
+</script>
+```
+
+- [ ] **Step 2: Build + browser verify (homepage deploy is now rich)**
+
+Run: `bunx astro build` → PASS (5 pages). (GitHub API 403s during build are expected and fall back to baked-in star counts — not a failure.)
+In dev, open `/#deploy`: the deploy result pane now shows the summary strip, "Official one-click integrations" (Railway/CapRover), the category grids of `PlatformCard`s with star counts, the investor band, and the CTA — the same content `/deploy` used to have. Confirm:
+```js
+document.querySelectorAll('[data-section="deploy"] [data-stars-repo]').length > 0  // PlatformCards rendered
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/sections/DeploySection.astro
+git commit -m "feat: DeploySection is the single rich source for deploy content"
+```
+
+---
+
+### Task 5: Rewrite `deploy.astro` thin (shell-wrapped, single section, SEO preserved)
+
+**Files:**
+- Modify: `src/pages/deploy.astro`
+
+**Interfaces:**
+- Consumes: `StudioShell` (Task 2), `SectionShell`, `DeploySection` (Task 4), `sectionById`, Layout `head` slot (Task 1), `deployTargets` (for ItemList JSON-LD).
+
+- [ ] **Step 1: Replace `deploy.astro` entirely**
+
+Replace the ENTIRE contents of `src/pages/deploy.astro` with:
+```astro
+---
+import Layout from '../layouts/Layout.astro';
+import StudioShell from '../components/studio/StudioShell.astro';
+import SectionShell from '../components/studio/SectionShell.astro';
+import DeploySection from '../components/sections/DeploySection.astro';
+import { sectionById } from '../data/sections';
+import { deployTargets } from '../data/deploy-targets';
+
+const title = 'Deploy LibreDB Studio Anywhere — One-Click Apps, Helm, Docker & Cloud';
+const description =
+  'Run the open-source LibreDB Studio SQL IDE anywhere: official Railway and CapRover one-click apps, Docker Hub & GHCR images, a Helm chart on Artifact Hub, npm, and every major open-source PaaS, managed PaaS, and cloud.';
+
+const itemListSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  name: 'LibreDB Studio deployment targets',
+  about: { '@id': 'https://libredb.org/#application' },
+  itemListElement: deployTargets.map((t, i) => ({
+    '@type': 'ListItem',
+    position: i + 1,
+    name: t.name,
+    url: t.deployUrl ?? t.docsUrl ?? t.url,
+  })),
+};
+---
+<Layout title={title} description={description}>
+  <script slot="head" is:inline type="application/ld+json" set:html={JSON.stringify(itemListSchema)} />
+  <StudioShell active="deploy" standalone>
+    <SectionShell section={sectionById['deploy']} active><DeploySection /></SectionShell>
+  </StudioShell>
+</Layout>
+```
+
+- [ ] **Step 2: Build + browser verify (/deploy in the shell, SEO intact)**
+
+Run: `bunx astro build` → PASS (5 pages, including `/deploy/index.html`).
+Verify the built page keeps its SEO and renders in the shell:
+```bash
+grep -c 'application/ld+json' dist/deploy/index.html   # >= 4 (3 global + 1 ItemList)
+grep -o '<title>[^<]*</title>' dist/deploy/index.html   # the deploy title
+grep -c 'data-studio' dist/deploy/index.html            # 1 (shell present)
+```
+In dev, open `/deploy`: it renders inside the IDE shell with deploy active (deploy.sql chrome, Explorer with deploy highlighted), showing the same rich `DeploySection`. Confirm standalone nav:
+```js
+document.querySelector('[data-studio]').hasAttribute('data-standalone')          // true
+document.querySelector('[data-section-link="features"]').getAttribute('href')    // "/#features"
+document.querySelector('.studio-section.is-active')?.id                          // "deploy"
+```
+Clicking Explorer "features" navigates to `/#features` (homepage, features active). No `<Header>`/`<Footer>` on `/deploy`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/deploy.astro
+git commit -m "feat: /deploy renders in the IDE shell via DeploySection (single source), SEO preserved"
+```
+
+---
+
+### Task 6: QA pass
+
+**Files:** none (verification + fixes only).
+
+- [ ] **Step 1: Full build + sitemap**
+
+Run: `bunx astro build`
+Expected: PASS, 5 pages (`/`, `/deploy`, `/docker-compose-example`, `/privacy-policy`, `404`). Confirm `/deploy` still emitted (not dropped).
+Run: `bun test src/` → still 21/21 pass (no test files changed; sanity that nothing broke imports).
+
+- [ ] **Step 2: Single-source check**
+
+Run: `grep -rl "Official one-click integrations" src/` 
+Expected: ONLY `src/components/sections/DeploySection.astro` (the phrase exists in exactly one source file — proves no content duplication).
+
+- [ ] **Step 3: Browser matrix (dev :4321), desktop 1440 + mobile 390**
+
+- `/#deploy` (homepage): rich deploy content in the result pane; other sections still swap; ⌘K palette works; explorer links are `#section` (in-page).
+- `/deploy`: same rich content in the shell, deploy active on load; explorer links are `/#section`; clicking one navigates to the homepage; no Header/Footer.
+- Mobile `/deploy`: stacked, deploy query-card + content; hamburger drawer explorer links are `/#section`.
+- Stars: PlatformCards show counts; investor band shows total.
+- StatusBar on `/deploy` shows `deploy` / its row count (not `home`).
+
+- [ ] **Step 4: Revert any tracked compose mutation (safety)**
+
+Run: `git status --short` — if `src/data/docker-compose.example.yml` or `public/docker-compose.example.yml` show as modified (only happens if `bun run build` was used by mistake), revert them: `git checkout -- '**/docker-compose.example.yml'`. With `bunx astro build` they are untouched.
+
+- [ ] **Step 5: Commit any fixes**
+
+```bash
+git add -A
+git commit -m "test: QA pass for deploy unification (build, single-source, browser matrix)"
+```
+
+---
+
+## Self-Review (completed by plan author)
+- **Spec coverage:** Layout head slot (Task 1) ✓; StudioShell + Explorer/MobileTopBar/StatusBar standalone/active props + index adoption (Task 2) ✓; studio.ts standalone awareness — initial-active, setActive bail, link navigate, palette jump (Task 3) ✓; DeploySection single-source rich content + stars + refresh script (Task 4) ✓; thin deploy.astro in shell with SEO + ItemList via head slot (Task 5) ✓; SEO/no-redirect + single-source verification (Tasks 5–6) ✓.
+- **Placeholder scan:** none — every code step is complete and verbatim; no TBD/TODO.
+- **Type/name consistency:** `StudioShell` props `active`/`standalone`; data attributes `data-initial-active`/`data-standalone` read by `studio.ts` as `initialActive`/`standalone`; `Explorer`/`MobileTopBar` `standalone`; `StatusBar` `active`; `DeploySection` exports nothing new (self-contained). Script path `'../../scripts/studio.ts'` correct from `src/components/studio/`. `linkBase` derives from `standalone`. All consistent across tasks.

From 6eafda96ae4bd7f43b1cb589f9760db50903b4e8 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 21:57:32 +0300
Subject: [PATCH 4/9] feat: add named head slot to Layout for page-specific
 <head> markup

---
 src/layouts/Layout.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6e68c42..e21732f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -140,6 +140,7 @@ const webSiteSchema = {
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
 
     <title>{title}</title>
+    <slot name="head" />
   </head>
   <body class="bg-canvas text-fg font-sans antialiased">
     <slot />

From 65553dfd180d1c936eee65c60e5cbda5e8e761e7 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 22:00:32 +0300
Subject: [PATCH 5/9] refactor: extract StudioShell; index.astro renders
 through it

---
 src/components/studio/Explorer.astro     |  6 ++--
 src/components/studio/MobileTopBar.astro |  8 ++---
 src/components/studio/StatusBar.astro    |  8 +++--
 src/components/studio/StudioShell.astro  | 44 +++++++++++++++++++++++
 src/pages/index.astro                    | 46 ++++++------------------
 5 files changed, 67 insertions(+), 45 deletions(-)
 create mode 100644 src/components/studio/StudioShell.astro

diff --git a/src/components/studio/Explorer.astro b/src/components/studio/Explorer.astro
index 8ccf63c..bab7ef9 100644
--- a/src/components/studio/Explorer.astro
+++ b/src/components/studio/Explorer.astro
@@ -5,8 +5,10 @@ interface Props {
   active?: string;
   idPrefix?: string; // to keep ids unique between desktop sidebar & mobile drawer
   showConnectionsLabel?: boolean;
+  standalone?: boolean;
 }
-const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true } = Astro.props;
+const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true, standalone = false } = Astro.props;
+const linkBase = standalone ? '/' : '';
 ---
 <div data-explorer-root class="flex h-full flex-col text-[13px]">
   <!-- Connections -->
@@ -56,7 +58,7 @@ const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true } = Astro
               <span class="caret-icon" aria-hidden="true">▸</span>
             </button>
             <a
-              href={`#${s.id}`}
+              href={`${linkBase}#${s.id}`}
               class="flex flex-1 items-center justify-between gap-2 py-1.5 pl-0.5 pr-1"
               data-section-link={s.id}
             >
diff --git a/src/components/studio/MobileTopBar.astro b/src/components/studio/MobileTopBar.astro
index 60592cb..8ae0b1f 100644
--- a/src/components/studio/MobileTopBar.astro
+++ b/src/components/studio/MobileTopBar.astro
@@ -1,10 +1,8 @@
 ---
 import Explorer from './Explorer.astro';
 
-interface Props {
-  active?: string;
-}
-const { active = 'home' } = Astro.props;
+interface Props { active?: string; standalone?: boolean; }
+const { active = 'home', standalone = false } = Astro.props;
 const DEMO = 'https://app.libredb.org';
 ---
 <header class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-edge bg-canvas/95 px-3 backdrop-blur lg:hidden">
@@ -47,7 +45,7 @@ const DEMO = 'https://app.libredb.org';
       <button type="button" class="text-faint hover:text-fg" aria-label="Close explorer" data-drawer-close>✕</button>
     </div>
     <div class="h-[calc(100%-49px)]">
-      <Explorer active={active} idPrefix="drawer" showConnectionsLabel={false} />
+      <Explorer active={active} idPrefix="drawer" showConnectionsLabel={false} standalone={standalone} />
     </div>
   </aside>
 </div>
diff --git a/src/components/studio/StatusBar.astro b/src/components/studio/StatusBar.astro
index 2536829..34323d6 100644
--- a/src/components/studio/StatusBar.astro
+++ b/src/components/studio/StatusBar.astro
@@ -1,6 +1,8 @@
 ---
 import { sectionById } from '../../data/sections';
-const home = sectionById['home'];
+interface Props { active?: string; }
+const { active = 'home' } = Astro.props;
+const meta = sectionById[active] ?? sectionById['home'];
 ---
 <footer class="flex h-7 shrink-0 items-center justify-between border-t border-edge bg-panel px-4 text-[11.5px] text-dim cursor-default select-none">
   <div class="flex items-center gap-4">
@@ -9,10 +11,10 @@ const home = sectionById['home'];
     </span>
     <span class="text-faint">LibreDB:latest</span>
     <span class="text-faint">public</span>
-    <span class="text-muted"><span data-statusbar-table>{home.table}</span>.sql</span>
+    <span class="text-muted"><span data-statusbar-table>{meta.table}</span>.sql</span>
   </div>
   <div class="flex items-center gap-4">
-    <span><span data-statusbar-rows>{home.rows}</span> rows</span>
+    <span><span data-statusbar-rows>{meta.rows}</span> rows</span>
     <span class="text-faint">Ln 1, Col 1</span>
     <span class="text-faint">UTF-8</span>
     <span class="text-faint">SQL</span>
diff --git a/src/components/studio/StudioShell.astro b/src/components/studio/StudioShell.astro
new file mode 100644
index 0000000..b328a2d
--- /dev/null
+++ b/src/components/studio/StudioShell.astro
@@ -0,0 +1,44 @@
+---
+// src/components/studio/StudioShell.astro
+// The shared IDE chrome. index.astro and deploy.astro both render through this.
+import TopBar from './TopBar.astro';
+import MobileTopBar from './MobileTopBar.astro';
+import Explorer from './Explorer.astro';
+import StatusBar from './StatusBar.astro';
+import Console from './Console.astro';
+import CommandPalette from './CommandPalette.astro';
+
+interface Props {
+  active?: string;
+  standalone?: boolean;
+}
+const { active = 'home', standalone = false } = Astro.props;
+---
+<div
+  class="studio flex min-h-screen flex-col"
+  data-studio
+  data-initial-active={active}
+  data-standalone={standalone ? '' : undefined}
+>
+  <div class="hidden lg:block"><TopBar /></div>
+  <MobileTopBar active={active} standalone={standalone} />
+
+  <div class="studio-workbench flex min-h-0 flex-1">
+    <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-edge lg:block">
+      <Explorer active={active} idPrefix="side" standalone={standalone} />
+    </aside>
+
+    <main class="studio-pane min-w-0 flex-1 lg:flex lg:flex-col">
+      <slot />
+    </main>
+  </div>
+
+  <div class="hidden lg:block"><StatusBar active={active} /></div>
+  <Console />
+</div>
+
+<CommandPalette />
+
+<script>
+  import '../../scripts/studio.ts';
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 08f6e5f..fb022c5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import TopBar from '../components/studio/TopBar.astro';
-import MobileTopBar from '../components/studio/MobileTopBar.astro';
-import Explorer from '../components/studio/Explorer.astro';
-import StatusBar from '../components/studio/StatusBar.astro';
-import Console from '../components/studio/Console.astro';
-import CommandPalette from '../components/studio/CommandPalette.astro';
+import StudioShell from '../components/studio/StudioShell.astro';
 import SectionShell from '../components/studio/SectionShell.astro';
 import { sectionById } from '../data/sections';
 
@@ -21,33 +16,14 @@ import DeploySection from '../components/sections/DeploySection.astro';
 const s = sectionById;
 ---
 <Layout title="LibreDB Studio - AI-Powered Open-Source SQL IDE">
-  <div class="studio flex min-h-screen flex-col" data-studio>
-    <div class="hidden lg:block"><TopBar /></div>
-    <MobileTopBar active="home" />
-
-    <div class="studio-workbench flex min-h-0 flex-1">
-      <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-edge lg:block">
-        <Explorer active="home" idPrefix="side" />
-      </aside>
-
-      <main class="studio-pane min-w-0 flex-1 lg:flex lg:flex-col">
-        <SectionShell section={s.home} active><HomeSection /></SectionShell>
-        <SectionShell section={s.features}><FeaturesSection /></SectionShell>
-        <SectionShell section={s.databases}><DatabasesSection /></SectionShell>
-        <SectionShell section={s.compare}><CompareSection /></SectionShell>
-        <SectionShell section={s.tech_stack}><TechStackSection /></SectionShell>
-        <SectionShell section={s.get_started}><GetStartedSection /></SectionShell>
-        <SectionShell section={s.faq}><FaqSection /></SectionShell>
-        <SectionShell section={s.deploy}><DeploySection /></SectionShell>
-      </main>
-    </div>
-
-    <div class="hidden lg:block"><StatusBar /></div>
-    <Console />
-    <CommandPalette />
-  </div>
-
-  <script>
-    import '../scripts/studio.ts';
-  </script>
+  <StudioShell active="home">
+    <SectionShell section={s.home} active><HomeSection /></SectionShell>
+    <SectionShell section={s.features}><FeaturesSection /></SectionShell>
+    <SectionShell section={s.databases}><DatabasesSection /></SectionShell>
+    <SectionShell section={s.compare}><CompareSection /></SectionShell>
+    <SectionShell section={s.tech_stack}><TechStackSection /></SectionShell>
+    <SectionShell section={s.get_started}><GetStartedSection /></SectionShell>
+    <SectionShell section={s.faq}><FaqSection /></SectionShell>
+    <SectionShell section={s.deploy}><DeploySection /></SectionShell>
+  </StudioShell>
 </Layout>

From e79d3dcfc84f29b97690120aeeef0a13c755c701 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 22:03:59 +0300
Subject: [PATCH 6/9] feat: studio.ts standalone awareness (initial-active,
 setActive bail, cross-page nav)

---
 src/scripts/studio.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/scripts/studio.ts b/src/scripts/studio.ts
index 1149d81..0746973 100644
--- a/src/scripts/studio.ts
+++ b/src/scripts/studio.ts
@@ -13,11 +13,16 @@ import { filterItems, fuzzyMatch } from './lib/filter';
  */
 
 const studio = document.querySelector<HTMLElement>('[data-studio]');
+const standalone = !!studio && studio.hasAttribute('data-standalone');
+const initialActive = studio?.dataset.initialActive || 'home';
 const isDesktop = () => window.matchMedia('(min-width: 1024px)').matches;
 const ids = new Set(sections.map((s) => s.id));
 
 function setActive(id: string, opts: { scroll?: boolean } = {}) {
-  if (!ids.has(id)) id = 'home';
+  if (!ids.has(id)) id = initialActive;
+  // Focused/standalone pages render a single section; if the requested one
+  // isn't in the DOM, keep the current view instead of blanking it.
+  if (!document.querySelector(`[data-section="${id}"]`)) return;
   const meta = sectionById[id];
 
   // Toggle sections (desktop locked mode uses .is-active; CSS ignores it on mobile)
@@ -50,10 +55,11 @@ function setActive(id: string, opts: { scroll?: boolean } = {}) {
 }
 
 function currentHash(): string {
-  return (location.hash || '#home').slice(1);
+  return (location.hash || `#${initialActive}`).slice(1);
 }
 
 function onLinkClick(e: Event, id: string) {
+  if (standalone) { closeDrawer(); return; } // links are /#id → let the browser navigate home
   if (isDesktop()) {
     e.preventDefault();
     if (location.hash !== `#${id}`) history.pushState(null, '', `#${id}`);
@@ -273,7 +279,10 @@ function paletteItems(): PaletteItem[] {
   const jumps: PaletteItem[] = sections.map((s) => ({
     label: `Jump to ${s.table}`,
     hint: `${s.rows} rows`,
-    run: () => { location.hash = `#${s.id}`; },
+    run: () => {
+      if (standalone) location.href = `/#${s.id}`;
+      else location.hash = `#${s.id}`;
+    },
   }));
   const actions: PaletteItem[] = [
     { label: 'Copy link to current section', hint: 'clipboard', run: () => copyLink() },

From 652537108dd32c579bd4ac6505c1444b0c85f371 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 22:07:07 +0300
Subject: [PATCH 7/9] feat: DeploySection is the single rich source for deploy
 content

---
 src/components/sections/DeploySection.astro | 146 ++++++++++++++++----
 1 file changed, 116 insertions(+), 30 deletions(-)

diff --git a/src/components/sections/DeploySection.astro b/src/components/sections/DeploySection.astro
index 29d8fbe..b635162 100644
--- a/src/components/sections/DeploySection.astro
+++ b/src/components/sections/DeploySection.astro
@@ -1,29 +1,32 @@
 ---
 import SectionHeader from './SectionHeader.astro';
-import { deployTargets } from '../../data/deploy-targets';
+import PlatformCard from '../deploy/PlatformCard.astro';
+import { deployTargets, starRepos } from '../../data/deploy-targets';
 import { deployCategories } from '../../data/deploy-categories';
+import { getStars, formatStars } from '../../lib/github-stars';
+
+const stars = await getStars(starRepos);
+
+const STATUS_ORDER = { official: 0, available: 1, planned: 2 } as const;
+const sortedCategories = [...deployCategories].sort((a, b) => a.order - b.order);
+const targetsByCategory = (id: string) =>
+  deployTargets
+    .filter((t) => t.category === id)
+    .sort((a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status]);
+
+const official = deployTargets.filter((t) => t.status === 'official');
+const totalStars = Object.values(stars).reduce((sum, n) => sum + n, 0);
 
 const platformCount = deployTargets.length;
 const installMethodCount = deployTargets.filter((t) => t.category === 'registry').length;
+const plannedNames = deployTargets.filter((t) => t.status === 'planned').map((t) => t.name);
 
 const catColors = ['text-primary', 'text-ok', 'text-ai', 'text-warn', 'text-bad'];
-const cats = [...deployCategories]
-  .sort((a, b) => a.order - b.order)
-  .map((c, i) => ({
-    title: c.title,
-    count: deployTargets.filter((t) => t.category === c.id).length,
-    color: catColors[i % catColors.length],
-  }));
-
-const exportRows = deployTargets.map((t) => ({ platform: t.name, slug: t.slug, category: t.category, status: t.status }));
-
-// Featured chips (display labels); the rest live on /deploy
-const featured = [
-  'Docker', 'Kubernetes', 'Helm', 'npm', 'Railway', 'CapRover', 'Render', 'Koyeb',
-  'Netlify', 'Fly.io', 'DigitalOcean', 'Google Cloud', 'Coolify', 'Dokku', 'AWS',
-  'Azure', 'Heroku', 'Northflank', 'Rancher', 'Portainer', 'OpenShift', 'Artifact Hub',
-];
-const moreCount = Math.max(0, platformCount - featured.length);
+const summary = sortedCategories.map((c, i) => ({
+  title: c.title,
+  count: deployTargets.filter((t) => t.category === c.id).length,
+  color: catColors[i % catColors.length],
+}));
 ---
 <div class="mx-auto max-w-6xl">
   <SectionHeader
@@ -31,9 +34,9 @@ const moreCount = Math.max(0, platformCount - featured.length);
     subtitle={`One open-source image, every layer of the deploy stack — ${platformCount}+ platforms and ${installMethodCount} install methods.`}
   />
 
-  <!-- Category count cards -->
+  <!-- Category summary strip -->
   <div class="grid grid-cols-2 gap-px overflow-hidden border border-edge bg-edge md:grid-cols-3 lg:grid-cols-5">
-    {cats.map((c) => (
+    {summary.map((c) => (
       <div class="bg-panel p-5">
         <div class={`text-3xl font-bold ${c.color}`}>{c.count}</div>
         <div class="mt-2 text-[12.5px] leading-snug text-dim">{c.title}</div>
@@ -41,14 +44,97 @@ const moreCount = Math.max(0, platformCount - featured.length);
     ))}
   </div>
 
-  <!-- Platform chips -->
-  <div class="mt-6 flex flex-wrap gap-2.5">
-    {featured.map((p) => (
-      <a href="/deploy" class="border border-edge bg-panel px-3.5 py-2 text-[13px] text-fg transition-colors hover:border-line hover:bg-raised">{p}</a>
-    ))}
-    {moreCount > 0 && (
-      <a href="/deploy" class="border border-edge-strong bg-canvas px-3.5 py-2 text-[13px] font-medium text-primary transition-colors hover:bg-raised">+{moreCount} more →</a>
-    )}
-  </div>
+  <!-- Official one-click integrations -->
+  <section class="mt-10">
+    <h3 class="text-[15px] font-semibold text-bright">Official one-click integrations</h3>
+    <p class="mt-1 text-[13px] text-dim">Listed in their marketplaces — deploy in a click, today.</p>
+    <div class="mt-4 grid gap-4 md:grid-cols-2">
+      {official.map((t) => (
+        <div class="flex flex-col border border-edge-strong bg-panel p-6">
+          <div class="mb-3 flex items-center gap-3">
+            {t.logo
+              ? <img src={t.logo} alt={`${t.name} logo`} width="40" height="40" class="h-10 w-10 object-contain" />
+              : <span class="grid h-10 w-10 place-items-center rounded-md bg-primary/20 text-lg font-bold text-primary">{t.name.charAt(0)}</span>}
+            <h4 class="text-lg font-semibold text-bright">{t.name}</h4>
+          </div>
+          <p class="mb-5 text-sm text-muted">{t.blurb}</p>
+          <div class="mt-auto flex flex-wrap gap-3">
+            <a href={t.deployUrl ?? t.docsUrl ?? t.url} target="_blank" rel="noopener noreferrer"
+               class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-bright">
+              {t.deployUrl ? 'Deploy now' : 'View install guide'} <span aria-hidden="true">→</span>
+            </a>
+            {t.docsUrl && (
+              <a href={t.docsUrl} target="_blank" rel="noopener noreferrer"
+                 class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-4 py-2 text-sm font-medium text-fg transition-colors hover:bg-raised">
+                Docs
+              </a>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  </section>
+
+  <!-- Category grids -->
+  {sortedCategories.map((cat) => (
+    <section class="mt-10">
+      <h3 class="text-[15px] font-semibold text-bright">{cat.title}</h3>
+      <p class="mt-1 max-w-2xl text-[13px] text-dim">{cat.tagline}</p>
+      <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {targetsByCategory(cat.id).map((t) => (
+          <PlatformCard target={t} stars={t.github ? stars[t.github] : undefined} />
+        ))}
+      </div>
+    </section>
+  ))}
+
+  <!-- Investor depth band -->
+  <section class="mt-10 border border-edge-strong bg-panel p-6 text-center md:p-8">
+    <p class="mb-2 text-sm text-muted">Embedded across open-source ecosystems totaling</p>
+    <div class="mb-3 text-3xl font-bold text-primary md:text-4xl">
+      <span data-stars-total>{formatStars(totalStars)}</span>+ GitHub stars
+    </div>
+    <p class="mx-auto max-w-2xl text-sm text-muted">
+      LibreDB Studio doesn't just support these platforms — it ships inside communities that
+      millions of developers already trust. More on the roadmap: {plannedNames.slice(0, 8).join(', ')}, and more.
+    </p>
+  </section>
+
+  <!-- CTA -->
+  <section class="mt-8 flex flex-wrap gap-3">
+    <a href="/docker-compose-example" class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-raised">Docker Compose example</a>
+    <a href="https://github.com/libredb/libredb-studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-md border border-edge-strong px-5 py-2.5 text-sm font-medium text-fg transition-colors hover:bg-raised">View on GitHub</a>
+    <a href="https://app.libredb.org" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-bright">Try the live demo</a>
+  </section>
 </div>
-<script type="application/json" data-export-payload="deploy" data-export-filename="deploy.csv" data-export-format="csv" set:html={JSON.stringify(exportRows)} />
+
+<script>
+  import { formatStars } from '../../lib/github-stars';
+
+  async function refreshStars() {
+    const spans = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-repo]'));
+    await Promise.all(
+      spans.map(async (span) => {
+        const repo = span.getAttribute('data-stars-repo');
+        if (!repo) return;
+        try {
+          const res = await fetch(`https://api.github.com/repos/${repo}`, {
+            headers: { Accept: 'application/vnd.github+json' },
+          });
+          if (!res.ok) return;
+          const data = await res.json();
+          if (typeof data.stargazers_count !== 'number') return;
+          span.setAttribute('data-stars-count', String(data.stargazers_count));
+          span.textContent = formatStars(data.stargazers_count);
+        } catch {
+          /* keep the baked-in number */
+        }
+      }),
+    );
+    const total = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-count]'))
+      .reduce((sum, el) => sum + (Number(el.getAttribute('data-stars-count')) || 0), 0);
+    const totalEl = document.querySelector<HTMLElement>('[data-stars-total]');
+    if (totalEl && total > 0) totalEl.textContent = formatStars(total);
+  }
+  refreshStars();
+</script>

From faeedfebd666c09b5764849be4885be90c9fd0b2 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 22:11:03 +0300
Subject: [PATCH 8/9] feat: /deploy renders in the IDE shell via DeploySection
 (single source), SEO preserved

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/deploy.astro | 175 ++---------------------------------------
 1 file changed, 8 insertions(+), 167 deletions(-)

diff --git a/src/pages/deploy.astro b/src/pages/deploy.astro
index c4468a6..93ae385 100644
--- a/src/pages/deploy.astro
+++ b/src/pages/deploy.astro
@@ -1,38 +1,10 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import PlatformCard from '../components/deploy/PlatformCard.astro';
+import StudioShell from '../components/studio/StudioShell.astro';
+import SectionShell from '../components/studio/SectionShell.astro';
+import DeploySection from '../components/sections/DeploySection.astro';
+import { sectionById } from '../data/sections';
 import { deployTargets } from '../data/deploy-targets';
-import { deployCategories } from '../data/deploy-categories';
-import { starRepos } from '../data/deploy-targets';
-import { getStars, formatStars } from '../lib/github-stars';
-
-const stars = await getStars(starRepos);
-
-const STATUS_ORDER = { official: 0, available: 1, planned: 2 };
-const sortedCategories = [...deployCategories].sort((a, b) => a.order - b.order);
-const targetsByCategory = (id: string) =>
-  deployTargets
-    .filter((t) => t.category === id)
-    .sort((a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status]);
-
-const official = deployTargets.filter((t) => t.status === 'official');
-const totalStars = Object.values(stars).reduce((sum, n) => sum + n, 0);
-
-const platformCount = deployTargets.length;
-const categoryCount = deployCategories.length;
-const installMethodCount = deployTargets.filter((t) => t.category === 'registry').length;
-const plannedNames = deployTargets
-  .filter((t) => t.status === 'planned')
-  .map((t) => t.name);
-
-const stats = [
-  { value: String(categoryCount), label: 'Deploy categories' },
-  { value: `${platformCount}+`, label: 'Platforms & registries' },
-  { value: String(installMethodCount), label: 'Install methods' },
-  { value: 'MIT', label: 'Open-source license' },
-];
 
 const title = 'Deploy LibreDB Studio Anywhere — One-Click Apps, Helm, Docker & Cloud';
 const description =
@@ -51,140 +23,9 @@ const itemListSchema = {
   })),
 };
 ---
-
 <Layout title={title} description={description}>
-  <Header />
-  <main class="pt-24 pb-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <!-- Breadcrumb -->
-      <nav class="text-xs text-faint mb-4" aria-label="Breadcrumb">
-        <a href="/" class="hover:text-muted transition-colors">Home</a>
-        <span class="mx-1.5">/</span>
-        <span class="text-muted">Deploy</span>
-      </nav>
-
-      <!-- Hero -->
-      <section class="text-center max-w-3xl mx-auto mb-12">
-        <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-bright mb-4">
-          Deploy LibreDB Studio <span class="text-primary">anywhere</span>
-        </h1>
-        <p class="text-base md:text-lg text-fg leading-relaxed">
-          One open-source container image — so LibreDB Studio runs on every layer of the
-          modern deploy stack. Pick a one-click app, a package registry, your self-hosted
-          PaaS, or your cloud. We meet your team where it already deploys.
-        </p>
-      </section>
-
-      <!-- Stat band -->
-      <section class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-16">
-        {stats.map((s) => (
-          <div class="text-center p-4 border border-edge bg-panel">
-            <div class="text-2xl md:text-3xl font-bold text-primary">{s.value}</div>
-            <div class="text-xs md:text-sm text-muted mt-1">{s.label}</div>
-          </div>
-        ))}
-      </section>
-
-      <!-- Official spotlight -->
-      <section class="mb-16">
-        <h2 class="text-xl md:text-2xl font-bold text-bright mb-1">Official one-click integrations</h2>
-        <p class="text-sm text-muted mb-6">Listed in their marketplaces — deploy in a click, today.</p>
-        <div class="grid md:grid-cols-2 gap-4">
-          {official.map((t) => (
-            <div class="flex flex-col p-6 bg-panel border border-edge-strong">
-              <div class="flex items-center gap-3 mb-3">
-                {t.logo
-                  ? <img src={t.logo} alt={`${t.name} logo`} width="40" height="40" class="w-10 h-10 object-contain" />
-                  : <span class="w-10 h-10 rounded-md bg-primary/20 text-primary text-lg font-bold grid place-items-center">{t.name.charAt(0)}</span>}
-                <h3 class="text-lg font-semibold text-bright">{t.name}</h3>
-              </div>
-              <p class="text-sm text-muted mb-5">{t.blurb}</p>
-              <div class="mt-auto flex flex-wrap gap-3">
-                <a href={t.deployUrl ?? t.docsUrl ?? t.url} target="_blank" rel="noopener noreferrer"
-                   class="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-bright text-white text-sm font-medium rounded-md transition-colors">
-                  {t.deployUrl ? 'Deploy now' : 'View install guide'}
-                  <span aria-hidden="true">&rarr;</span>
-                </a>
-                {t.docsUrl && (
-                  <a href={t.docsUrl} target="_blank" rel="noopener noreferrer"
-                     class="inline-flex items-center gap-2 px-4 py-2 border border-edge-strong text-fg hover:bg-raised text-sm font-medium rounded-md transition-colors">
-                    Docs
-                  </a>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <!-- Classification grids -->
-      {sortedCategories.map((cat) => (
-        <section class="mb-14">
-          <h2 class="text-xl md:text-2xl font-bold text-bright mb-1">{cat.title}</h2>
-          <p class="text-sm text-muted mb-6 max-w-2xl">{cat.tagline}</p>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
-            {targetsByCategory(cat.id).map((t) => (
-              <PlatformCard target={t} stars={t.github ? stars[t.github] : undefined} />
-            ))}
-          </div>
-        </section>
-      ))}
-
-      <!-- Investor depth band -->
-      <section class="mt-4 p-6 md:p-8 bg-panel border border-edge-strong text-center">
-        <p class="text-sm text-muted mb-2">Embedded across open-source ecosystems totaling</p>
-        <div class="text-3xl md:text-4xl font-bold text-primary mb-3">
-          <span data-stars-total>{formatStars(totalStars)}</span>+ GitHub stars
-        </div>
-        <p class="text-sm text-muted max-w-2xl mx-auto">
-          LibreDB Studio doesn't just support these platforms — it ships inside communities
-          that millions of developers already trust. More on the roadmap:
-          {' '}{plannedNames.slice(0, 8).join(', ')}, and more.
-        </p>
-      </section>
-
-      <!-- CTA -->
-      <section class="mt-12 flex flex-wrap justify-center gap-3">
-        <a href="/docker-compose-example" class="inline-flex items-center gap-2 px-5 py-2.5 border border-edge-strong text-fg hover:bg-raised text-sm font-medium rounded-md transition-colors">Docker Compose example</a>
-        <a href="https://github.com/libredb/libredb-studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 border border-edge-strong text-fg hover:bg-raised text-sm font-medium rounded-md transition-colors">View on GitHub</a>
-        <a href="https://app.libredb.org" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary-bright text-white text-sm font-medium rounded-md transition-colors">Try the live demo</a>
-      </section>
-    </div>
-  </main>
-  <Footer />
-
-  <script is:inline type="application/ld+json" set:html={JSON.stringify(itemListSchema)} />
+  <script slot="head" is:inline type="application/ld+json" set:html={JSON.stringify(itemListSchema)} />
+  <StudioShell active="deploy" standalone>
+    <SectionShell section={sectionById['deploy']} active><DeploySection /></SectionShell>
+  </StudioShell>
 </Layout>
-
-<script>
-  import { formatStars } from '../lib/github-stars';
-
-  async function refreshStars() {
-    const spans = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-repo]'));
-    await Promise.all(
-      spans.map(async (span) => {
-        const repo = span.getAttribute('data-stars-repo');
-        if (!repo) return;
-        try {
-          const res = await fetch(`https://api.github.com/repos/${repo}`, {
-            headers: { Accept: 'application/vnd.github+json' },
-          });
-          if (!res.ok) return;
-          const data = await res.json();
-          if (typeof data.stargazers_count !== 'number') return;
-          span.setAttribute('data-stars-count', String(data.stargazers_count));
-          span.textContent = formatStars(data.stargazers_count);
-        } catch {
-          /* keep the baked-in number */
-        }
-      }),
-    );
-
-    const total = Array.from(document.querySelectorAll<HTMLElement>('[data-stars-count]'))
-      .reduce((sum, el) => sum + (Number(el.getAttribute('data-stars-count')) || 0), 0);
-    const totalEl = document.querySelector<HTMLElement>('[data-stars-total]');
-    if (totalEl && total > 0) totalEl.textContent = formatStars(total);
-  }
-
-  refreshStars();
-</script>

From 7354eda74b55687500ba843da7889098d23598c0 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Tue, 23 Jun 2026 22:14:33 +0300
Subject: [PATCH 9/9] fix: update pgAdmin score representation in
 CompareSection for accuracy

---
 src/components/sections/CompareSection.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/CompareSection.astro b/src/components/sections/CompareSection.astro
index acdd5b9..c33d82d 100644
--- a/src/components/sections/CompareSection.astro
+++ b/src/components/sections/CompareSection.astro
@@ -11,7 +11,7 @@ const rows: Row[] = [
   { tool: 'LibreDB Studio', recommended: true, scores: [true, true, true, true, true], price: '$0', priceClass: 'text-ok' },
   { tool: 'DataGrip', scores: [false, false, false, false, false], price: '$199/yr', priceClass: 'text-faint' },
   { tool: 'DBeaver', scores: [false, false, false, false, 'partial'], price: 'Free / Pro', priceClass: 'text-faint' },
-  { tool: 'pgAdmin', scores: [false, false, false, false, true], price: 'PG only', priceClass: 'text-faint' },
+  { tool: 'pgAdmin', scores: ['partial', false, false, false, true], price: 'PG only', priceClass: 'text-faint' },
   { tool: 'TablePlus', scores: [false, false, false, false, false], price: '$89', priceClass: 'text-faint' },
 ];