Ryan Malloy
3915d1784f
An existing product called PG Orbit (a mobile PostgreSQL client) creates a naming conflict. pg_orrery — a database orrery built from Keplerian parameters and SQL instead of brass gears. Build system: control file, Makefile, Dockerfile, docker init script. C source: GUC prefix, PG_FUNCTION_INFO_V1 symbol, header guards, ereport prefixes, comments across ~30 files including vendored SGP4. SQL: all 5 install/migration scripts, function name pg_orrery_ephemeris_info. Tests: 9 SQL suites, 8 expected outputs, standalone DE reader test. Documentation: CLAUDE.md, README.md, DESIGN.md, Starlight site infra, 36 MDX pages, OG renderer, logo SVG, docker-compose, agent threads. All 13 regression suites pass. Docs site builds (37 pages).
184 lines
4.1 KiB
TypeScript
184 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import type { RenderFunctionInput } from "astro-opengraph-images";
|
|
|
|
export async function pgOrreryOgImage({
|
|
title,
|
|
description,
|
|
}: RenderFunctionInput): Promise<React.ReactNode> {
|
|
return Promise.resolve(
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
backgroundColor: "#0a0e17",
|
|
fontFamily: "Inter, system-ui, sans-serif",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* Top accent bar */}
|
|
<div
|
|
style={{
|
|
height: "4px",
|
|
width: "100%",
|
|
background: "linear-gradient(to right, #f59e0b, #fbbf24, #f59e0b)",
|
|
}}
|
|
/>
|
|
|
|
{/* Decorative orbital rings (top-right) */}
|
|
<svg
|
|
width="320"
|
|
height="320"
|
|
viewBox="0 0 320 320"
|
|
style={{
|
|
position: "absolute",
|
|
top: "-60px",
|
|
right: "-40px",
|
|
opacity: 0.08,
|
|
}}
|
|
>
|
|
<ellipse
|
|
cx="160"
|
|
cy="160"
|
|
rx="140"
|
|
ry="60"
|
|
stroke="#f59e0b"
|
|
stroke-width="2"
|
|
fill="none"
|
|
transform="rotate(-20 160 160)"
|
|
/>
|
|
<ellipse
|
|
cx="160"
|
|
cy="160"
|
|
rx="120"
|
|
ry="45"
|
|
stroke="#fbbf24"
|
|
stroke-width="1.5"
|
|
fill="none"
|
|
transform="rotate(35 160 160)"
|
|
/>
|
|
<ellipse
|
|
cx="160"
|
|
cy="160"
|
|
rx="90"
|
|
ry="35"
|
|
stroke="#f59e0b"
|
|
stroke-width="1"
|
|
fill="none"
|
|
transform="rotate(-5 160 160)"
|
|
/>
|
|
<circle cx="160" cy="160" r="8" fill="#f59e0b" />
|
|
</svg>
|
|
|
|
{/* Content area */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
flexGrow: 1,
|
|
padding: "48px 64px",
|
|
}}
|
|
>
|
|
{/* Title + description */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
marginTop: "32px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: 56,
|
|
fontWeight: 700,
|
|
color: "#e2e8f0",
|
|
lineHeight: 1.15,
|
|
maxWidth: "900px",
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
{description && (
|
|
<div
|
|
style={{
|
|
fontSize: 28,
|
|
color: "#8896a8",
|
|
marginTop: "20px",
|
|
lineHeight: 1.4,
|
|
maxWidth: "800px",
|
|
}}
|
|
>
|
|
{description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
{/* Amber dot */}
|
|
<div
|
|
style={{
|
|
width: "12px",
|
|
height: "12px",
|
|
borderRadius: "50%",
|
|
backgroundColor: "#f59e0b",
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
color: "#e2e8f0",
|
|
}}
|
|
>
|
|
pg_orrery
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 20,
|
|
color: "#556677",
|
|
marginLeft: "4px",
|
|
}}
|
|
>
|
|
Celestial mechanics for PostgreSQL
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 18,
|
|
color: "#556677",
|
|
}}
|
|
>
|
|
pg-orrery.warehack.ing
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom accent bar */}
|
|
<div
|
|
style={{
|
|
height: "4px",
|
|
width: "100%",
|
|
background: "linear-gradient(to right, #f59e0b, #fbbf24, #f59e0b)",
|
|
}}
|
|
/>
|
|
</div>,
|
|
);
|
|
}
|