hello-astro

Hello Astro is a full featured Astro multi-purpose starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.

More info

Hello Astro can used for any/all of the following:

corporate/marketing site
blog
documentation site
portfolio site supporting photo galleries

Uses the following integrations:

@astrojs/mdx
@astrojs/markdoc
@astrojs/sitemap
@astrojs/rss
@astrojs/tailwind
@astrojs/alpinejs
astro-icon
astro-seo
astro-robots-txt

In addition, SVG and PNG illustrations sourced from Undraw

This project initially started as a bare bones port of hello-gatsby-starter, but now contains more features (light/dark modes, category pages, search, diagrams, math and more!)

Features

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 and plantuml)
Display map at geo coordinates and zoom level using Map component (need to also include extra: ['map'] is 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)

External Packages

The start uses the following external packages:

Astro
TypeScript
TailwindCSS and TailwindUI
Iconify
Hero Patterns
unDraw for illustrations
MDX and Markdown
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.

🚀 Project Structure

Inside this starter, you'll see the following folders and files:

/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

Astro looks for .astro, .md or .mdx files in the src/pages/ directory. Each page is exposed as a route based on its file name.

src/components/ is where we put any Astro components and similarly src/layouts/ for layouts.

Images can be placed in src/assets/.

Blog and documentation content are created as collections of Markdown or MDX files in src/content.

Any static assets, eg. images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal: