salm.dev

Personal website and blog built with Astro.

Acknowledgements

• @davidteather: His guides on adding interactive charts and diagrams were helpful.

Stack

• Astro - Static site generator
• Tailwind CSS - Styling
• MDX - Enhanced markdown for blog posts (Why MDX?)
• KaTeX - Math typesetting
• Mermaid - Diagrams
• Recharts - Interactive charts

Development

# Install dependencies
npm install

# Start development server
npx astro dev

# Build for production
npx astro build

# Preview production build
npx astro preview

Project Structure

src/
├── components/         # Reusable components
│   ├── Chart.astro     # Interactive chart component
│   ├── Mermaid.astro   # Diagram component
│   └── ...
├── content/            # Content collections
│   ├── blog/           # Blog posts in MDX
│   └── books/          # Reading list entries
├── layouts/            # Page layouts
│   ├── BlogPost.astro  # Blog post template
│   └── Layout.astro    # Base site layout
├── pages/              # Route pages
│   ├── blog/           # Blog pages
│   ├── books.astro     # Reading list
│   └── ...
└── styles/            # Global styles

Content Collections

Blog Posts

---
title: "Post Title"
date: "2024-02-01"
description: "Post description"
---

Books

---
title: "Book Title"
author: "Author Name"
dateRead: "2024-02-01"
rating: 5
tags: ["Category One", "Category Two"]
review: "Book review text"
links:
  personalSite: "https://example.com"
---

License

MIT