Astro Component Template 🧑🚀
This is an unofficial template meant to ease the development of components for Astro that are intended for distribution. It does so by providing you with:
Folder Structure
├── .vscode/ # VS Code settings folder
│ ├── settings.json # Workspace settings
│ └── extensions.json # Recommended extensions to install
├── src/ # Your component source code
│ ├── Component.astro # Example component file
│ └── main.ts # Example source code file
├── test/ # Your component tests
│ └── example.test.js # Example tests
└── index.ts # Should contain all the exports your component provide to users
Theme Goals
two themes, one minimilaist and clean, the other more colourful and playful
Goals:
- not to have an extensive design system
- have a design system with "essential" bare minimum (plus a couple of nice to have) components for a developer to setup an astro ecommerce site with snipcart
- some light weight interactivty where time allows
Requirements:
- a single homepage/product store page layout per theme
- need a typography component
- need a title component
- need a paragraph component
- need a description component
- need a typography component
- a single product page layout
- a button component per theme that can be used for anything, but primarly to add the wrapping product with
- a "variant" component to allow a user to pick a variant (may just constrain this to colour for mvp) and the add button will do the correct thing
- a component to render a table of snipcart custom fields or maybe with dd/dt/dl
- a product card per theme
- a product grid to abstract grids for developers
- a flex box component to abstract flex for developers
- a component to display product features
- a product price component
Nice to have:
- slot inside Snipcart setup component to allow some proof of concept customisation of snipcart checkout
- some hero/feather icons?
- subscriptions