221 lines
9.9 KiB
Plaintext
221 lines
9.9 KiB
Plaintext
---
|
||
import Layout from "../layouts/Layout.astro";
|
||
import { faqItems } from "../data/faq";
|
||
import {
|
||
buildSoftwareApplicationJsonLd,
|
||
buildFaqJsonLd,
|
||
buildOrganizationJsonLd,
|
||
buildWebSiteJsonLd,
|
||
buildProductJsonLd,
|
||
buildBreadcrumbJsonLd,
|
||
} from "../lib/seo";
|
||
import { Image } from "astro:assets";
|
||
import HeroDbViewer from "../components/hero/HeroDbViewer";
|
||
import queryEditor from "../assets/screenshots/query-editor.png";
|
||
import erDiagram from "../assets/screenshots/er-diagram.png";
|
||
import home from "../assets/screenshots/home.png";
|
||
import dataGrid from "../assets/screenshots/data-grid.png";
|
||
const version = "0.7.15";
|
||
const site = "https://getgridline.app";
|
||
const jsonLd = [
|
||
buildSoftwareApplicationJsonLd({
|
||
name: "Gridline",
|
||
url: `${site}/`,
|
||
description:
|
||
"The open-source database GUI for PostgreSQL, MySQL, SQLite, and Redis. No paywalls, no tab limits, fully open source.",
|
||
image: `${site}/og.png`,
|
||
operatingSystem: "macOS, Windows, Linux",
|
||
applicationCategory: "DeveloperApplication",
|
||
offersPrice: 0,
|
||
offersCurrency: "USD",
|
||
downloadUrl: "https://git.ranio.xyz/adrianbonpin/gridline/releases",
|
||
}),
|
||
buildFaqJsonLd(faqItems),
|
||
buildOrganizationJsonLd({
|
||
name: "Gridline",
|
||
url: `${site}/`,
|
||
logo: `${site}/gridline-icon.svg`,
|
||
sameAs: [
|
||
"https://git.ranio.xyz/adrianbonpin/gridline",
|
||
"https://x.com/AdrianBonpin",
|
||
],
|
||
}),
|
||
buildWebSiteJsonLd({
|
||
name: "Gridline",
|
||
url: `${site}/`,
|
||
}),
|
||
buildProductJsonLd({
|
||
name: "Gridline",
|
||
url: `${site}/`,
|
||
description:
|
||
"The open-source database GUI for PostgreSQL, MySQL, SQLite, and Redis. No paywalls, no tab limits, fully open source.",
|
||
image: `${site}/og.png`,
|
||
offersPrice: 0,
|
||
offersCurrency: "USD",
|
||
}),
|
||
buildBreadcrumbJsonLd([
|
||
{ name: "Home", url: `${site}/` },
|
||
]),
|
||
];
|
||
---
|
||
<Layout title="Gridline, Free Open-Source Database GUI" jsonLd={jsonLd}>
|
||
<script src="/landing.js" defer></script>
|
||
|
||
<!-- Hero -->
|
||
<header id="hero" class="relative pt-32 pb-20 md:pt-44 md:pb-28 overflow-hidden">
|
||
<div class="max-w-7xl mx-auto px-6 text-center">
|
||
<div class="hero-animate">
|
||
<p class="font-mono text-xs tracking-[0.15em] uppercase text-[var(--accent)] mb-5">Open-Source Database GUI</p>
|
||
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl leading-[1.05] tracking-tight max-w-4xl mx-auto lowercase">
|
||
the open-source database <span class="text-[var(--accent)]">gui</span>
|
||
</h1>
|
||
<p class="mt-6 text-lg md:text-xl text-[var(--text-muted)] max-w-xl mx-auto">
|
||
Query, explore, sync, and edit PostgreSQL, MySQL, SQLite, and Redis, with no paywalls, no tab limits, no account required.
|
||
</p>
|
||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||
<a id="download" href="https://git.ranio.xyz/adrianbonpin/gridline/releases" class="primary-btn" data-download>
|
||
Download
|
||
</a>
|
||
<a href="https://git.ranio.xyz/adrianbonpin/gridline" target="_blank" rel="noopener" class="ghost-btn">
|
||
View on Gitea
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-screenshot mt-14 md:mt-20 mx-auto max-w-6xl">
|
||
<div class="hidden md:block aspect-[16/9]">
|
||
<HeroDbViewer client:visible />
|
||
</div>
|
||
<div class="md:hidden">
|
||
<Image
|
||
src={queryEditor}
|
||
alt="Gridline query editor and data grid"
|
||
widths={[640, 1024, 1600]}
|
||
sizes="(max-width: 1024px) 100vw, 1024px"
|
||
formats={["webp", "avif"]}
|
||
loading="eager"
|
||
fetchpriority="high"
|
||
class="w-full h-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="mt-8 text-xs md:text-sm text-[var(--text-muted)] font-mono">
|
||
Free for personal and commercial use · Apache 2.0 · v{version}
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Why Gridline -->
|
||
<section id="why" class="section-animate py-20 md:py-28">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<h2 class="font-serif text-3xl md:text-5xl text-center max-w-2xl mx-auto">
|
||
Everything the paid apps lock behind a subscription.
|
||
</h2>
|
||
<div class="mt-12 grid md:grid-cols-3 gap-5">
|
||
<article class="glass-card">
|
||
<p class="font-mono text-xs text-[var(--accent)] mb-3">01</p>
|
||
<h3 class="text-xl font-semibold mb-2">No limits</h3>
|
||
<p class="text-[var(--text-muted)] text-sm leading-relaxed">
|
||
Unlimited connections, open tabs, saved queries, and exports. The free plan is the full plan.
|
||
</p>
|
||
</article>
|
||
<article class="glass-card">
|
||
<p class="font-mono text-xs text-[var(--accent)] mb-3">02</p>
|
||
<h3 class="text-xl font-semibold mb-2">DB-to-DB sync</h3>
|
||
<p class="text-[var(--text-muted)] text-sm leading-relaxed">
|
||
Pipe <code class="font-mono text-xs">pg_dump</code> directly into <code class="font-mono text-xs">pg_restore</code> between two live connections. No file round-trip needed.
|
||
</p>
|
||
</article>
|
||
<article class="glass-card">
|
||
<p class="font-mono text-xs text-[var(--accent)] mb-3">03</p>
|
||
<h3 class="text-xl font-semibold mb-2">Deeper PG explorer</h3>
|
||
<p class="text-[var(--text-muted)] text-sm leading-relaxed">
|
||
Full detail views for functions, triggers, sequences, enums, extensions, roles, and grants.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Feature highlights -->
|
||
<section id="features" class="section-animate py-20 md:py-28">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<p class="font-mono text-xs text-[var(--accent)] uppercase tracking-[0.15em] text-center mb-3">Features</p>
|
||
<h2 class="font-serif text-3xl md:text-5xl text-center mb-14">Explore, query, and move data.</h2>
|
||
<div class="grid md:grid-cols-2 gap-5">
|
||
<article class="feature-card">
|
||
<p class="font-mono text-xs text-[var(--text-muted)] mb-3">QUERY & EDIT</p>
|
||
<h3 class="text-xl font-semibold mb-2">SQL editor + virtualized grid</h3>
|
||
<p class="text-[var(--text-muted)] text-sm mb-4">Run queries with autocomplete, inline edit cells, and browse 100k+ rows without breaking a sweat.</p>
|
||
<Image src={queryEditor} alt="SQL query editor" widths={[640, 1024]} sizes="(max-width: 1024px) 100vw, 640px" formats={["webp", "avif"]} loading="lazy" class="w-full h-auto" />
|
||
</article>
|
||
<article class="feature-card">
|
||
<p class="font-mono text-xs text-[var(--text-muted)] mb-3">VISUALIZE</p>
|
||
<h3 class="text-xl font-semibold mb-2">ER diagram</h3>
|
||
<p class="text-[var(--text-muted)] text-sm mb-4">Auto-layout schema graphs with crow’s foot relationships across schemas, right inside the app.</p>
|
||
<Image src={erDiagram} alt="ER diagram" widths={[640, 1024]} sizes="(max-width: 1024px) 100vw, 640px" formats={["webp", "avif"]} loading="lazy" class="w-full h-auto" />
|
||
</article>
|
||
<article class="feature-card">
|
||
<p class="font-mono text-xs text-[var(--text-muted)] mb-3">MOVE DATA</p>
|
||
<h3 class="text-xl font-semibold mb-2">Backup, restore, and sync</h3>
|
||
<p class="text-[var(--text-muted)] text-sm mb-4">Point-and-click <code class="font-mono text-xs">pg_dump</code>/<code class="font-mono text-xs">pg_restore</code>, SQLite dumps, and live DB-to-DB sync.</p>
|
||
<Image src={home} alt="Gridline home screen" widths={[640, 1024]} sizes="(max-width: 1024px) 100vw, 640px" formats={["webp", "avif"]} loading="lazy" class="w-full h-auto" />
|
||
</article>
|
||
<article class="feature-card">
|
||
<p class="font-mono text-xs text-[var(--text-muted)] mb-3">MANAGE</p>
|
||
<h3 class="text-xl font-semibold mb-2">Objects, roles, and grants</h3>
|
||
<p class="text-[var(--text-muted)] text-sm mb-4">Create and edit tables, foreign keys, indexes, functions, triggers, sequences, roles, and privileges.</p>
|
||
<Image src={dataGrid} alt="Data grid with foreign key preview" widths={[640, 1024]} sizes="(max-width: 1024px) 100vw, 640px" formats={["webp", "avif"]} loading="lazy" class="w-full h-auto" />
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Open source -->
|
||
<section id="oss" class="section-animate py-20 md:py-28 text-center">
|
||
<div class="max-w-[800px] mx-auto px-6">
|
||
<p class="font-mono text-xs text-[var(--accent)] uppercase tracking-[0.15em] mb-3">Open Source</p>
|
||
<h2 class="font-serif text-3xl md:text-5xl mb-5">Free. Open source. Apache 2.0.</h2>
|
||
<p class="text-[var(--text-muted)] mb-8 max-w-md mx-auto">
|
||
Gridline is Apache 2.0 and developed openly. Contributions, issues, and feature requests are welcome.
|
||
</p>
|
||
<div class="flex flex-wrap items-center justify-center gap-3">
|
||
<a href="https://git.ranio.xyz/adrianbonpin/gridline" target="_blank" rel="noopener" class="ghost-btn">
|
||
Star on Gitea
|
||
</a>
|
||
<a href="https://ko-fi.com/adrianbonpin" target="_blank" rel="noopener" class="ghost-btn">
|
||
☕ Support on Ko-fi
|
||
</a>
|
||
</div>
|
||
<p class="mt-6 text-xs text-[var(--text-muted)] max-w-sm mx-auto">
|
||
Gridline stays free. No feature is ever behind a payment. Ko-fi is only for those who want to say thanks.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section id="faq" class="section-animate py-20 md:py-28">
|
||
<div class="max-w-[800px] mx-auto px-6">
|
||
<h2 class="font-serif text-3xl md:text-5xl text-center mb-12">Questions? Answered.</h2>
|
||
<div class="faq-list space-y-3">
|
||
{
|
||
faqItems.map((item, i) => (
|
||
<details class="faq-item" open={i === 0}>
|
||
<summary class="faq-summary">
|
||
<span>{item.question}</span>
|
||
<span class="faq-chevron">⌄</span>
|
||
</summary>
|
||
<div class="faq-body">
|
||
<p class="text-[var(--text-muted)] text-sm leading-relaxed">{item.answer}</p>
|
||
</div>
|
||
</details>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</Layout>
|
||
|