Initial commit

Author: nicosalm

README.md

@@ -1,48 +1,87 @@
-# Astro Starter Kit: Basics
+# salm.dev
 
-```sh
-npm create astro@latest -- --template basics
-```
+Personal website and blog built with Astro.
+
+## Acknowledgements
+- [@davidteather](https://github.com/davidteather): His guides on adding [interactive charts](https://dteather.com/blogs/astro-interactive-charts/) and [diagrams](https://dteather.com/blogs/astro-uml-diagrams/) were helpful.
+
+## Acknowledgements
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+- [@davidteather](https://github.com/davidteather): His guides on adding [interactive charts](https://dteather.com/blogs/astro-interactive-charts/) and [diagrams](https://dteather.com/blogs/astro-uml-diagrams/) were helpful.
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## Stack
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+- [Astro](https://astro.build) - Static site generator
+- [Tailwind CSS](https://tailwindcss.com) - Styling
+- [MDX](https://mdxjs.com) - Enhanced markdown for blog posts ([Why MDX?](https://www.codemotion.com/magazine/frontend/how-to-create-an-mdx-blog-in-typescript-with-next-js/#:~:text=Typically%2C%20MDX%20is%20used%20for,to%20achieve%20with%20simple%20Markdown.))
+- [KaTeX](https://katex.org) - Math typesetting
+- [Mermaid](https://mermaid.js.org) - Diagrams
+- [Recharts](https://recharts.org) - Interactive charts
 
-## 🚀 Project Structure
+## Development
 
-Inside of your Astro project, you'll see the following folders and files:
+```bash
+# Install dependencies
+npm install
 
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+# Start development server
+npx astro dev
+
+# Build for production
+npx astro build
+
+# Preview production build
+npx astro preview
 ```
 
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+## Project Structure
 
-## 🧞 Commands
+```
+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
 
-All commands are run from the root of the project, from a terminal:
+### Blog Posts
+```markdown
+---
+title: "Post Title"
+date: "2024-02-01"
+description: "Post description"
+---
+```
+
+### Books
+```markdown
+---
+title: "Book Title"
+author: "Author Name"
+dateRead: "2024-02-01"
+rating: 5
+tags: ["Category One", "Category Two"]
+review: "Book review text"
+links:
+  goodreads: "https://goodreads.com/..."
+  personalSite: "https://example.com"
+---
+```
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+## License
 
-## 👀 Want to learn more?
+MIT
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -1,5 +1,42 @@
-// @ts-check
 import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import rehypePrettyCode from 'rehype-pretty-code';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import codeTheme from './src/utils/code-theme.json';
 
-// https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    site: 'https://salm.dev',
+    integrations: [
+        tailwind(),
+        mdx({
+            remarkPlugins: [remarkMath],
+            rehypePlugins: [rehypeKatex]
+        })
+    ],
+    markdown: {
+        rehypePlugins: [
+            [
+                rehypePrettyCode,
+                {
+                    theme: codeTheme,
+                    onVisitLine(node) {
+                        if (node.children.length === 0) {
+                            node.children = [{ type: 'text', value: ' ' }];
+                        }
+                    },
+                    onVisitHighlightedLine(node) {
+                        node.properties.className.push('highlighted');
+                    },
+                    onVisitHighlightedWord(node) {
+                        node.properties.className = ['word'];
+                    }
+                }
+            ]
+        ],
+        shikiConfig: {
+            wrap: true
+        }
+    }
+});