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
Astro Starter Kit: Minimal
bun create astro@latest -- --template minimal
🧑🚀 Seasoned astronaut? Delete this file. Have fun!
🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.
🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
bun install |
Installs dependencies |
bun dev |
Starts local dev server at localhost:4321 |
bun build |
Build your production site to ./dist/ |
bun preview |
Preview your build locally, before deploying |
bun astro ... |
Run CLI commands like astro add, astro check |
bun astro -- --help |
Get help using the Astro CLI |
👀 Want to learn more?
Feel free to check our documentation or jump into our Discord server.