feat(www): interactive DB viewer hero + max-w-7xl centering (#28)

Replace the static hero screenshot with a self-contained React mockup of the full Gridline DB viewer (sidebar, table tree, tab bar, fake SQL editor, data grid, queries/objects/schema-visualizer views, disabled Tools state). - Add @astrojs/react and mount the island via client:visible - 16:9 aspect-ratio mockup, hidden on mobile (static image fallback) - JSON cell popover: solid surface, anchored within the mockup window, Escape/outside-click close - Dependency-free HTML5 drag-to-reorder tabs - Theme-aware app tokens (canvas, surface-raised, popover bg) - Site-wide max-w-7xl (was max-w-[1200px]) so sections center on big screens - Regenerate standalone www/bun.lock for deterministic Dokploy builds
2026-08-17 23:31:31 +08:00
parent c22e675f2b
commit 96d34a68a1
9 changed files with 1924 additions and 18 deletions
@@ -0,0 +1,302 @@
+// Hardcoded sample data for the interactive DB viewer hero mockup.
+// No real database — just realistic-looking rows so the grid feels alive.
+
+export interface DemoColumn {
+  name: string;
+  data_type: string;
+  is_pk?: boolean;
+  is_fk?: boolean;
+  fk_ref?: [string, string];
+  is_nullable?: boolean;
+}
+
+export interface DemoTable {
+  name: string;
+  table_type: "TABLE" | "VIEW";
+  columns: DemoColumn[];
+  rows: unknown[][];
+}
+
+export const demoTables: DemoTable[] = [
+  {
+    name: "users",
+    table_type: "TABLE",
+    columns: [
+      { name: "id", data_type: "int4", is_pk: true },
+      { name: "name", data_type: "text" },
+      { name: "email", data_type: "text" },
+      { name: "role", data_type: "text" },
+      { name: "created_at", data_type: "timestamptz" },
+      { name: "metadata", data_type: "jsonb" },
+    ],
+    rows: [
+      [1, "Ada Lovelace", "ada@example.com", "admin", "2024-01-15 09:30:00+00", { active: true, plan: "pro" }],
+      [2, "Grace Hopper", "grace@example.com", "editor", "2024-02-03 14:12:00+00", { active: true, plan: "free" }],
+      [3, "Alan Turing", "alan@example.com", "viewer", "2024-03-22 08:45:00+00", { active: false, plan: "free" }],
+      [4, "Katherine Johnson", "katherine@example.com", "editor", "2024-04-10 18:20:00+00", { active: true, plan: "pro" }],
+      [5, "Margaret Hamilton", "margaret@example.com", "admin", "2024-05-01 11:05:00+00", { active: true, plan: "enterprise" }],
+      [6, "Tim Berners-Lee", "tim@example.com", "viewer", "2024-06-19 16:40:00+00", { active: true, plan: "free" }],
+      [7, "Barbara Liskov", "barbara@example.com", "editor", "2024-07-07 10:15:00+00", { active: false, plan: "pro" }],
+      [8, "Donald Knuth", "donald@example.com", "viewer", "2024-08-25 13:55:00+00", { active: true, plan: "free" }],
+    ],
+  },
+  {
+    name: "orders",
+    table_type: "TABLE",
+    columns: [
+      { name: "id", data_type: "int4", is_pk: true },
+      { name: "user_id", data_type: "int4", is_fk: true, fk_ref: ["users", "id"] },
+      { name: "total", data_type: "numeric" },
+      { name: "status", data_type: "text" },
+      { name: "created_at", data_type: "timestamptz" },
+    ],
+    rows: [
+      [1, 1, 129.99, "completed", "2024-05-12 10:00:00+00"],
+      [2, 2, 45.5, "pending", "2024-06-01 09:30:00+00"],
+      [3, 1, 89.0, "shipped", "2024-06-15 14:20:00+00"],
+      [4, 4, 250.0, "completed", "2024-07-02 11:45:00+00"],
+      [5, 6, 19.99, "cancelled", "2024-07-20 08:10:00+00"],
+      [6, 2, 320.75, "completed", "2024-08-08 17:05:00+00"],
+    ],
+  },
+  {
+    name: "products",
+    table_type: "TABLE",
+    columns: [
+      { name: "id", data_type: "int4", is_pk: true },
+      { name: "name", data_type: "text" },
+      { name: "price", data_type: "numeric" },
+      { name: "stock", data_type: "int4" },
+      { name: "category_id", data_type: "int4", is_fk: true, fk_ref: ["categories", "id"] },
+    ],
+    rows: [
+      [1, "Wireless Mouse", 29.99, 150, 1],
+      [2, "Mechanical Keyboard", 89.0, 42, 1],
+      [3, '27" Monitor', 249.99, 18, 3],
+      [4, "USB-C Hub", 45.5, 200, 1],
+      [5, "Laptop Stand", 39.0, 75, 2],
+      [6, "Desk Mat", 24.99, 120, 2],
+    ],
+  },
+  {
+    name: "categories",
+    table_type: "TABLE",
+    columns: [
+      { name: "id", data_type: "int4", is_pk: true },
+      { name: "name", data_type: "text" },
+    ],
+    rows: [
+      [1, "Accessories"],
+      [2, "Furniture"],
+      [3, "Electronics"],
+    ],
+  },
+  {
+    name: "audit_log",
+    table_type: "TABLE",
+    columns: [
+      { name: "id", data_type: "int4", is_pk: true },
+      { name: "action", data_type: "text" },
+      { name: "details", data_type: "jsonb" },
+      { name: "created_at", data_type: "timestamptz" },
+    ],
+    rows: [
+      [1, "user.login", { ip: "192.168.1.10", device: "macos" }, "2024-08-01 09:00:00+00"],
+      [2, "order.created", { order_id: 6, total: 320.75 }, "2024-08-08 17:05:00+00"],
+      [3, "user.updated", { user_id: 3, field: "role" }, "2024-08-10 12:30:00+00"],
+      [4, "export.run", { format: "csv", rows: 500 }, "2024-08-12 15:45:00+00"],
+    ],
+  },
+  {
+    name: "order_summary",
+    table_type: "VIEW",
+    columns: [
+      { name: "user_id", data_type: "int4" },
+      { name: "total_orders", data_type: "int8" },
+      { name: "total_spent", data_type: "numeric" },
+    ],
+    rows: [
+      [1, 2, 218.99],
+      [2, 2, 366.25],
+      [4, 1, 250.0],
+      [6, 1, 19.99],
+    ],
+  },
+];
+
+// Canned result shown when the user hits "Run Query" in the mockup.
+export const cannedQueryResult: { columns: DemoColumn[]; rows: unknown[][] } = {
+  columns: [
+    { name: "id", data_type: "int4", is_pk: true },
+    { name: "name", data_type: "text" },
+    { name: "email", data_type: "text" },
+    { name: "role", data_type: "text" },
+    { name: "created_at", data_type: "timestamptz" },
+  ],
+  rows: [
+    [1, "Ada Lovelace", "ada@example.com", "admin", "2024-01-15 09:30:00+00"],
+    [2, "Grace Hopper", "grace@example.com", "editor", "2024-02-03 14:12:00+00"],
+    [3, "Alan Turing", "alan@example.com", "viewer", "2024-03-22 08:45:00+00"],
+    [4, "Katherine Johnson", "katherine@example.com", "editor", "2024-04-10 18:20:00+00"],
+    [5, "Margaret Hamilton", "margaret@example.com", "admin", "2024-05-01 11:05:00+00"],
+  ],
+};
+
+export const defaultQuery = `SELECT id, name, email, role, created_at
+FROM users
+ORDER BY created_at DESC
+LIMIT 5;`;
+
+export function abbreviateType(t: string): string {
+  const map: Record<string, string> = {
+    int4: "int4",
+    int8: "int8",
+    text: "text",
+    numeric: "num",
+    timestamptz: "ts",
+    jsonb: "jsonb",
+  };
+  return map[t] ?? t;
+}
+
+// ─── Queries history (Queries view) ─────────────────────
+
+export interface DemoQuery {
+  sql: string;
+  ms: number;
+  rows: number;
+  favorite?: boolean;
+}
+
+export const demoQueries: DemoQuery[] = [
+  { sql: "SELECT * FROM users WHERE role = 'admin';", ms: 12, rows: 2, favorite: true },
+  { sql: "SELECT id, name, price FROM products ORDER BY price DESC;", ms: 8, rows: 6 },
+  { sql: "SELECT status, COUNT(*) FROM orders GROUP BY status;", ms: 15, rows: 4 },
+  { sql: "SELECT u.name, o.total FROM users u JOIN orders o ON o.user_id = u.id;", ms: 21, rows: 6 },
+  { sql: "SELECT * FROM audit_log ORDER BY created_at DESC LIMIT 10;", ms: 9, rows: 4, favorite: true },
+  { sql: "VACUUM ANALYZE;", ms: 340, rows: 0 },
+];
+
+// ─── Objects (Objects view) ─────────────────────────────
+
+export interface DemoObjectItem {
+  name: string;
+  schema?: string;
+  signature?: string;
+  detail: { label: string; value: string; mono?: boolean; accent?: boolean }[];
+  source?: string;
+  labels?: string[];
+}
+
+export type ObjectType = "functions" | "triggers" | "sequences" | "enums" | "extensions";
+
+export const demoObjects: Record<ObjectType, DemoObjectItem[]> = {
+  functions: [
+    {
+      name: "get_user_orders",
+      schema: "public",
+      signature: "(uid int4)",
+      detail: [
+        { label: "Returns", value: "SETOF orders", mono: true, accent: true },
+        { label: "Language", value: "plpgsql" },
+        { label: "Kind", value: "Function" },
+        { label: "Schema", value: "public", mono: true },
+      ],
+      source: `CREATE OR REPLACE FUNCTION public.get_user_orders(uid int4)
+RETURNS SETOF orders
+LANGUAGE plpgsql
+AS $function$
+BEGIN
+    RETURN QUERY
+    SELECT *
+    FROM orders
+    WHERE user_id = uid
+    ORDER BY created_at DESC;
+END;
+$function$;`,
+    },
+    {
+      name: "total_spent",
+      schema: "public",
+      signature: "(uid int4)",
+      detail: [
+        { label: "Returns", value: "numeric", mono: true, accent: true },
+        { label: "Language", value: "sql" },
+        { label: "Kind", value: "Function" },
+        { label: "Schema", value: "public", mono: true },
+      ],
+      source: `CREATE FUNCTION public.total_spent(uid int4)
+RETURNS numeric
+LANGUAGE sql
+AS $function$
+  SELECT COALESCE(SUM(total), 0)
+  FROM orders
+  WHERE user_id = uid
+    AND status <> 'cancelled';
+$function$;`,
+    },
+  ],
+  triggers: [
+    {
+      name: "set_updated_at",
+      schema: "public",
+      detail: [
+        { label: "Table", value: "users", mono: true },
+        { label: "Event", value: "UPDATE" },
+        { label: "Timing", value: "BEFORE" },
+        { label: "Orientation", value: "ROW" },
+        { label: "Status", value: "ENABLED" },
+      ],
+      source: `CREATE TRIGGER set_updated_at
+BEFORE UPDATE ON users
+FOR EACH ROW
+EXECUTE FUNCTION set_updated_at();`,
+    },
+  ],
+  sequences: [
+    { name: "users_id_seq", schema: "public", signature: "users.id", detail: [
+      { label: "Current value", value: "8", mono: true, accent: true },
+      { label: "Increment", value: "1", mono: true },
+      { label: "Start", value: "1", mono: true },
+      { label: "Min", value: "1", mono: true },
+      { label: "Max", value: "9223372036854775807", mono: true },
+      { label: "Cycle", value: "No" },
+    ] },
+    { name: "orders_id_seq", schema: "public", signature: "orders.id", detail: [
+      { label: "Current value", value: "6", mono: true, accent: true },
+      { label: "Increment", value: "1", mono: true },
+      { label: "Start", value: "1", mono: true },
+      { label: "Min", value: "1", mono: true },
+      { label: "Max", value: "9223372036854775807", mono: true },
+      { label: "Cycle", value: "No" },
+    ] },
+  ],
+  enums: [
+    {
+      name: "user_role",
+      schema: "public",
+      labels: ["admin", "editor", "viewer"],
+      detail: [],
+    },
+  ],
+  extensions: [
+    { name: "pgcrypto", schema: "public", signature: "1.3", detail: [
+      { label: "Version", value: "1.3", mono: true, accent: true },
+      { label: "Schema", value: "public", mono: true },
+      { label: "Comment", value: "cryptographic functions" },
+    ] },
+    { name: "pg_stat_statements", schema: "public", signature: "1.10", detail: [
+      { label: "Version", value: "1.10", mono: true, accent: true },
+      { label: "Schema", value: "public", mono: true },
+      { label: "Comment", value: "track execution statistics of all SQL statements" },
+    ] },
+  ],
+};
+
+export const objectTypeLabels: Record<ObjectType, string> = {
+  functions: "Functions",
+  triggers: "Triggers",
+  sequences: "Sequences",
+  enums: "Enums",
+  extensions: "Extensions",
+};