Required things
Pages for Route
pages is the required sub-directory cause Astro is file-based routing
components, layouts and styles are all conventional but not required sub-directories. They are used to decorate the content
layouts are used for layouting each type of pages rendering. components and styles are used for flexible customizing pages.
Markdown content files
src/contents sub-directory is used for contents. Once defining collections, markdown files are required to match schema
Astro Advantages
- Frontend Development Friendly
- Flexible and Highly Customized
- Great Ecosystem and Fast Growth Community
- Well Organized Documentaries
Others Things
- Tailwind Using
@apply is using to extract repeated utility patterns to custom CSS classes which is simply naming a group of styles into a class
tip: avoid premature abstraction
Some tricks
If there has some logic in script depending styles, than the <script> need to be placed after the <style> part, otherwise, the logic in script cannot manipulate the styles
TSX with Astro components
Once you create a tsx component, it cannot use astro components as sub-components bacause it cannot match astro components’ props
TODO
There are something can be optimized, such as:
- Use a CLI to create content with auto frontmatters generating
There are something to be clarified, such as:
- How to set correct datetime