mirror of
https://github.com/andwati/andwati.com.git
synced 2026-10-20 02:04:24 +00:00
andwati
cd3a9eac70
Interaction/layout pattern is my own implementation, inspired by observing (not copying source from) adammaj.com/reading: a horizontal scrollable shelf of book "spines" above a list, click-through to a per-book detail page where the shelf re-renders with that book's spine expanded into a cover. - src/lib/spine-color.ts: deterministic per-title color + width hash, so every book gets a distinct-looking spine without needing a manually-set color field. - src/lib/cover-exists.ts: checks the referenced cover_image file actually exists under public/ before rendering an <img> — the ISBN/ DOI cover lookup only runs on live Strapi create/update, so hand-seeded content (like our two placeholder books) has a cover_image path with no cached file yet. Falls back to the colored spine block instead of a broken image. - src/components/BookSpines.astro: the shelf itself, reused on both the index and detail pages; a scroll button, hover-lift, and the active book's spine widens into its cover/fallback. - Bookshelf index now renders full reviews inline (was previously just a bare metadata list) with cover thumbnails. - New src/pages/bookshelf/[...slug].astro: first individual page route for bookshelf entries (portfolio still only has a list page). Verified in-browser: shelf renders, hover/click navigation works, active-book expansion on the detail page, and the cover-exists fallback correctly avoids broken <img> tags for our two seed books.
Astro Starter Kit: Minimal
npm 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 |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
👀 Want to learn more?
Feel free to check our documentation or jump into our Discord server.