About
Description of Hello Astro Starter
This is multi-purpose Astro starter template based on the following:
- Astro as a modern static site generator
- TypeScript
- TailwindCSS and TailwindUI
- Iconify
- Hero Patterns
- unDraw for illustrations
- Markdown
- MDX
- Markdoc
- Schema.org and JSON for Linking Data, type-checked using schema-dts
- Open Graph used by Facebook
- Twitter Cards
- AlpineJS
- Local full text search using Lunr
- Math equations using KaTeX via remark-math and rehype-katex
- Diagrams using Mermaid, Markmap and PlantUML
- Open Street Map using Leaflet
- reading-time
- PhotoSwipe
- exifr
- Swiper
- Remark Emoji
It follows the JAMstack architecture by automatically building a static version from the Git repository. The demo is deployed on Github Pages.
Hello Astro can used for any/all of the following:
- corporate/marketing site
- blog
- documentation site
- portfolio site supporting photo galleries
This starter is open source (MIT licence) - fork it and customise for your needs.
Features
- Author content in a mix of Markdown, MDX and Markdoc
- Full-featured blog with frontmatter (title, description, author, date, image, tags)
- High performance low overhead with minimal Javascript (AlpineJS)
- Full text client based search of blog pages via lunrjs (search index only loaded on first invocation of search on a page)
- Index page and individual pages for authors, categories and tags, including pagination
- Support for RSS feed, sitemap and robots.txt
- SVG design (unDraw, Hero Patterns, Iconify)
- Support for code syntax highlighting
- Full SEO support including Open Graph, Twitter Cards and Schema.org via JSON-LD
- Full support for light and dark UI modes, as well as following system preferences, in accordance to TailwindCSS recommendation
- Customised 404 error page
- Display math equations using KaTeX via remark-math/rehype-katex (enclosed in
$
…$
or$$
…$$
) - Display Mermaid, Markmap, PlantUML diagrams (authored as a code block with language
mermaid
,markmap
andplantuml
) - Display map at geo coordinates and zoom level using
Map
component (need to also includeextra: ['map']
in frontmatter to load CSS/JS assets for page) - Calculates and show reading time for blog posts
- CSS/JS assets of external libraries loaded only when needed on a per page and per package basis - no unnecessary bloat
- Photo gallery and lightbox using PhotoSwipe (including display of EXIF tags)
- Carousel component using Swiper
- Documentation pages (modelled after astro docs starter but using Tailwind)