Skip to content

Redesign landing page layout and enhance interactive demo features #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ric-v merged 4 commits into from
May 9, 2026
Merged

Redesign landing page layout and enhance interactive demo features #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5640dc2
feat(landing-page): redesign hero section with immersive two-column l…
ric-v May 7, 2026
fea752b
feat(landing-page): enhance interactive demo and layout for improved …
ric-v May 9, 2026
e84a0a4
Bump version to 1.2.4
ric-v May 9, 2026
d9b1394
Bump version to 1.2.5
ric-v May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,5 @@ FIXES_APPLIED.md
.cursor/
.agents/
skills-lock.json
graphify-out/
graphify-out/
.superpowers/
91 changes: 30 additions & 61 deletions docs/html/editor-file-views.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,69 +102,38 @@ <h3>Simple flow for teams</h3>
<span class="kw">WHERE</span> created_at &gt;= <span class="fn">NOW</span>() - <span class="kw">INTERVAL</span> <span class="str">'7 days'</span>
<span class="kw">GROUP BY</span> day <span class="kw">ORDER BY</span> day;</code><span class="editor-cursor" aria-hidden="true"></span></pre>
</div>
<div class="query-result" id="query-result">
<div class="result-meta">✓ 7 rows in 43ms · demo_db</div>
<table>
<thead>
<tr>
<th data-col="0" class="sortable-th">day <span class="sort-ind">↕</span></th>
<th data-col="1" class="sortable-th">orders <span class="sort-ind">↕</span></th>
<th data-col="2" class="sortable-th">revenue <span class="sort-ind">↕</span></th>
</tr>
</thead>
<tbody id="result-body">
<tr>
<td>2026-04-07</td>
<td>142</td>
<td>18,420.00</td>
</tr>
<tr>
<td>2026-04-08</td>
<td>158</td>
<td>21,340.50</td>
</tr>
<tr>
<td>2026-04-09</td>
<td>131</td>
<td>17,890.00</td>
</tr>
<tr>
<td>2026-04-10</td>
<td>177</td>
<td>24,110.25</td>
</tr>
<tr>
<td>2026-04-11</td>
<td>191</td>
<td>27,905.40</td>
</tr>
<tr>
<td>2026-04-12</td>
<td>168</td>
<td>22,490.00</td>
</tr>
<tr>
<td>2026-04-13</td>
<td>182</td>
<td>26,331.75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insight-panel" id="insight-panel">
<h3>Execution Insight</h3>
<p id="insight-text">Suggestion: add an index on orders(created_at) and keep daily aggregation in a materialized
view for dashboard latency under 100ms.</p>
</div>

<div class="chart-cell" id="chart-cell">
<div class="chart-header">
<span>📊 Revenue by Day — Bar Chart</span>
<span style="margin-left:auto;font-size:10px">Chart.js</span>
</div>
<div class="chart-body">
<canvas id="revenue-chart" height="160"></canvas>
<div id="query-output-stack" class="query-output-stack query-output-stack--pending" aria-live="polite">
<p class="query-output-hint" id="query-output-hint">Click <strong>Run</strong> to execute this cell — the results table and chart appear below.</p>
<div class="query-output-inner">
<div class="query-result" id="query-result">
<div class="result-meta">✓ 7 rows · demo_db</div>
<table>
<thead>
<tr>
<th data-col="0" class="sortable-th">day <span class="sort-ind">↕</span></th>
<th data-col="1" class="sortable-th">orders <span class="sort-ind">↕</span></th>
<th data-col="2" class="sortable-th">revenue <span class="sort-ind">↕</span></th>
</tr>
</thead>
<tbody id="result-body"></tbody>
</table>
</div>
<div class="insight-panel" id="insight-panel">
<h3>Execution Insight</h3>
<p id="insight-text">Suggestion: add an index on orders(created_at) and keep daily aggregation in a materialized
view for dashboard latency under 100ms.</p>
</div>
<div class="chart-cell" id="chart-cell">
<div class="chart-header">
<span>📊 Revenue by Day — Bar Chart</span>
<span style="margin-left:auto;font-size:10px">Chart.js</span>
</div>
<div class="chart-body">
<canvas id="revenue-chart" height="160"></canvas>
</div>
</div>
</div>
</div>
</article>
Expand Down
432 changes: 362 additions & 70 deletions docs/html/minimized-overview.html
View file
Open in desktop

Large diffs are not rendered by default.

111 changes: 93 additions & 18 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<meta name="theme-color" content="#4d5efc">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="application/ld+json">
{
Expand Down Expand Up @@ -67,20 +67,30 @@
<body class="editor-minimized">
<main class="site-main">
<section class="hero-shell" aria-label="PgStudio interactive homepage demo">
<div class="desktop-topbar" role="navigation" aria-label="PgStudio top navigation">
<div class="desktop-topbar landing-topbar" role="navigation" aria-label="PgStudio top navigation">
<button class="mobile-menu-btn topbar-menu-btn" id="btn-toggle-topbar" aria-label="Toggle Navigation"><svg
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg></button>
<p class="hero-intro"><b style="color:var(--vsc-orange); font-weight: 600; font-size: 15px;">PG Studio</b> · VS
Code Extension </p>
<div class="desktop-topbar-links">
<div class="topbar-brand immersive-brand" aria-hidden="false">
<div class="immersive-brand-mark" aria-hidden="true"></div>
<div class="immersive-brand-text">
<strong class="immersive-brand-title">PG Studio</strong>
<span class="immersive-brand-sub">VS Code Extension</span>
</div>
</div>
<div class="desktop-topbar-links landing-topbar-nav-collapsible">
<button type="button" id="btn-landing-home">Home</button>
<button type="button" id="btn-landing-live-demo">Live demo</button>
<button type="button" data-open="doc-notebooks">Notebooks</button>
<button type="button" data-open="doc-explorer">Explorer</button>
<button type="button" data-open="doc-ai">AI Assistant</button>
<a href="https://github.com/dev-asterix/PgStudio" target="_blank" rel="noopener">GitHub ↗</a>
<a href="https://github.com/dev-asterix/PgStudio" target="_blank" rel="noopener noreferrer">GitHub</a>
<a class="landing-nav-install"
href="https://marketplace.visualstudio.com/items?itemName=ric-v.postgres-explorer" target="_blank"
rel="noopener noreferrer">Install Free</a>
</div>
<div class="topbar-actions">
<button class="topbar-icon-btn" id="theme-toggle" type="button" aria-label="Switch to dark theme"
Expand All @@ -101,14 +111,30 @@
<polygon points="9,7 18,12 9,17"></polygon>
</svg>
</button>
<a class="hero-install-btn topbar-install"
href="https://marketplace.visualstudio.com/items?itemName=ric-v.postgres-explorer">⬇ Install Free</a>
</div>
</div>
<h1>The VS Code-native <span>PostgreSQL</span> workspace</h1>
<p class="hero-subtitle">Connect, explore, query, and optimize - without leaving your editor. Powered by AI, built
for teams.</p>

<!-- Immersive decorative layer: bg-grid, orbit ring, context nodes -->
<div class="workbench-bg-grid" aria-hidden="true"></div>
<div class="shell-orbit" aria-hidden="true"></div>

<!-- Floating context node pills (decorative, pointer-events:none) -->
<div class="ctx-node ctx-one" aria-hidden="true">
<span class="ctx-node-label">Schema context</span>
<span class="ctx-node-value">orders, customers</span>
</div>
<div class="ctx-node ctx-two" aria-hidden="true">
<span class="ctx-node-label">Safe env labels</span>
<span class="ctx-node-value"><span class="ctx-env-dev">DEV</span> / <span class="ctx-env-prod">PROD</span></span>
</div>
<div class="ctx-node ctx-three" aria-hidden="true">
<span class="ctx-node-label">Plan insight</span>
<span class="ctx-node-value">Index recommendation</span>
</div>

<div class="demo-shell-stage">
<div class="demo-shell-frame">
<div class="demo-shell-halo" aria-hidden="true"></div>
<div class="shell" role="application" aria-label="Mac style PgStudio editor demo" aria-hidden="true">
<header class="titlebar">
<div class="mobile-menu-btn" id="btn-toggle-left"><svg viewBox="0 0 24 24" width="16" stroke="currentColor"
Expand Down Expand Up @@ -142,6 +168,29 @@ <h1>The VS Code-native <span>PostgreSQL</span> workspace</h1>
</header>

<div class="workbench">
<!-- Decorative command palette overlay — auto-hides on first interaction -->
<div class="cmd-palette-demo" aria-hidden="true">
<div class="cmd-palette-header">
<span class="cmd-palette-prompt">⌘K</span>
<span class="cmd-palette-title">PgStudio Commands</span>
<span class="cmd-palette-badge">Demo</span>
</div>
<div class="cmd-palette-rows">
<div class="cmd-palette-row">
<span class="cmd-palette-icon">⬡</span>
<span class="cmd-palette-text">&gt; PgStudio: optimize current query</span>
</div>
<div class="cmd-palette-row is-active">
<span class="cmd-palette-icon">✦</span>
<span class="cmd-palette-text">Ask AI with schema context</span>
</div>
<div class="cmd-palette-row">
<span class="cmd-palette-icon">▷</span>
<span class="cmd-palette-text">Run selected SQL cell</span>
</div>
</div>
</div>

<aside class="activity-bar" aria-label="Primary navigation">
<!-- Explorer: shows file-tree sidebar panel -->
<button class="activity-icon active" type="button" data-panel="explorer" title="Explorer"
Expand Down Expand Up @@ -396,13 +445,36 @@ <h1>The VS Code-native <span>PostgreSQL</span> workspace</h1>
</aside>

<section class="editor-region">
<div class="tabs" role="tablist" aria-label="Open files">
<button class="tab active" data-open="query" role="tab" aria-selected="true"><span class="tab-dot"></span>
query.pgsql <span class="tab-close" aria-label="Close tab" tabindex="-1">×</span></button>
<button class="tab" data-open="readme" role="tab" aria-selected="false">README.md <span class="tab-close"
aria-label="Close tab" tabindex="-1">×</span></button>
<button class="tab" data-open="doc-notebooks" role="tab" aria-selected="false">notebooks.md <span
class="tab-close" aria-label="Close tab" tabindex="-1">×</span></button>
<div class="editor-tab-strip">
<div class="tabs" role="tablist" aria-label="Open files">
<button class="tab active" data-open="query" role="tab" aria-selected="true"><span class="tab-dot"></span>
query.pgsql <span class="tab-close" aria-label="Close tab" tabindex="-1">×</span></button>
<button class="tab" data-open="readme" role="tab" aria-selected="false">README.md <span class="tab-close"
aria-label="Close tab" tabindex="-1">×</span></button>
<button class="tab" data-open="doc-notebooks" role="tab" aria-selected="false">notebooks.md <span
class="tab-close" aria-label="Close tab" tabindex="-1">×</span></button>
</div>
<div class="editor-layout-actions" role="toolbar" aria-label="Side panel visibility">
<button type="button" class="layout-toggle-btn" id="btn-toggle-explorer-sidebar"
aria-pressed="false" title="Hide Explorer sidebar"
aria-label="Toggle Explorer sidebar">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="3" y="4" width="8" height="16" rx="1.5" stroke="currentColor" stroke-width="1.5" />
<rect x="14" y="4" width="7" height="6" rx="1" stroke="currentColor" stroke-width="1.5" />
<rect x="14" y="13" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
<button type="button" class="layout-toggle-btn" id="btn-toggle-assistant-sidebar"
aria-pressed="false" title="Hide SQL Assistant panel"
aria-label="Toggle SQL Assistant panel">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="14" y="4" width="8" height="16" rx="1.5" />
<rect x="3" y="5" width="8" height="6" rx="1" />
<rect x="3" y="13" width="8" height="7" rx="1" />
</svg>
</button>
</div>
</div>
<div class="breadcrumb-bar" id="breadcrumb-bar" aria-label="File path">
<span>PGSTUDIO</span>
Expand Down Expand Up @@ -433,6 +505,8 @@ <h1>The VS Code-native <span>PostgreSQL</span> workspace</h1>
<span>PgStudio</span>
</footer>
</div><!-- /shell -->
</div><!-- /demo-shell-frame -->
</div><!-- /demo-shell-stage -->

<div id="partial-minimized-overview" data-partial="html/minimized-overview.html"></div>
<!-- Startup toast — positioned inside shell via absolute, but lives here for stacking -->
Expand Down Expand Up @@ -467,6 +541,7 @@ <h1>The VS Code-native <span>PostgreSQL</span> workspace</h1>
<script src="js/assistant.js"></script>
<script src="js/tour.js"></script>
<script src="js/visuals.js"></script>
<script src="js/landing-capabilities.js"></script>
<script src="js/bootstrap.js"></script>
</body>

Expand Down
80 changes: 77 additions & 3 deletions docs/js/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,99 @@
function wireLandingChrome() {
document.getElementById("btn-landing-home")?.addEventListener("click", () => {
const minimized = document.body.classList.contains("editor-minimized");
if (minimized) {
document.querySelector(".hero-shell")?.scrollTo({ top: 0, behavior: "smooth" });
window.scrollTo({ top: 0, behavior: "smooth" });
return;
}
setEditorMinimizedState(true);
});

document.getElementById("btn-landing-live-demo")?.addEventListener("click", () => {
setEditorMinimizedState(false);
openFile("query");
switchSidebarPanel("pgstudio");
});

document.querySelectorAll("[data-landing-open-demo]").forEach((node) => {
node.addEventListener("click", (e) => {
e.preventDefault();
setEditorMinimizedState(false);
openFile("query");
switchSidebarPanel("pgstudio");
});
});
}

function wireEditorLayoutToggles() {
const wb = document.querySelector(".workbench");
const btnExplorer = document.getElementById("btn-toggle-explorer-sidebar");
const btnAssistant = document.getElementById("btn-toggle-assistant-sidebar");
if (!wb || !btnExplorer || !btnAssistant) return;

function syncLayoutToggleUi() {
const leftHidden = wb.classList.contains("panel-left-hidden");
const rightHidden = wb.classList.contains("panel-right-hidden");
btnExplorer.setAttribute("aria-pressed", leftHidden ? "true" : "false");
btnAssistant.setAttribute("aria-pressed", rightHidden ? "true" : "false");
btnExplorer.setAttribute("title", leftHidden ? "Show Explorer sidebar" : "Hide Explorer sidebar");
btnAssistant.setAttribute("title", rightHidden ? "Show SQL Assistant" : "Hide SQL Assistant");
}

btnExplorer.addEventListener("click", (e) => {
e.stopPropagation();
wb.classList.toggle("panel-left-hidden");
if (wb.classList.contains("panel-left-hidden")) {
wb.classList.remove("show-left");
}
syncLayoutToggleUi();
});

btnAssistant.addEventListener("click", (e) => {
e.stopPropagation();
wb.classList.toggle("panel-right-hidden");
if (wb.classList.contains("panel-right-hidden")) {
wb.classList.remove("show-right");
}
syncLayoutToggleUi();
});

syncLayoutToggleUi();
}

function initializeDesktopExperience() {
wireThemeToggle();
wireTour();
wireLandingChrome();
wireWindowControls();
wireActivityBar();
wireEditorLayoutToggles();
wireNavigation();
wireTabClose();
wireSearch();
wireQueryRunAnimation();
wireQueryToolbarActions();
wireFeatureCards();
if (typeof wireCapabilityModal === "function") wireCapabilityModal();
wireConnectionSimulation();
wireAssistant();
hydrateMarketplaceStats();
showStartupToast();
preloadAssistantConversation();
openFile("query");

window.setTimeout(renderRevenueChart, 500);

document.addEventListener("click", (e) => {
const tab = e.target.closest("[data-open='query']");
if (tab) window.setTimeout(animateSqlTyping, 200);
// On first workbench interaction: schedule context node fade and suppress command palette
if (e.target.closest(".shell")) {
if (!document.body.classList.contains("nodes-faded")) {
window.setTimeout(() => document.body.classList.add("nodes-faded"), 6000);
}
if (!document.body.classList.contains("shell-engaged")) {
document.body.classList.add("shell-engaged");
}
}
});
}

Expand Down Expand Up @@ -60,7 +133,8 @@ function wireMobileUiToggles() {

if (btnCloseEditor && body) {
btnCloseEditor.addEventListener("click", () => {
body.classList.toggle("editor-minimized");
const nextMinimized = !body.classList.contains("editor-minimized");
setEditorMinimizedState(nextMinimized);
});
}

Expand Down
Loading
Loading