Technical Details

This site is written using the Astro framework and static site generator. It is written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.

Integrations

It uses the following official and third party Astro integrations:

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

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

It follows the JAMstack architecture by automatically building a static version from the Git repository. The demo is deployed on Github Pages.