using page

astro.config.mjs

@@ -6,10 +6,11 @@ import remarkEmbedImages from "remark-embed-images";
 
 import node from "@astrojs/node";
 import { setLayout } from "./src/lib/remark-default-layout";
+import mdx from "@astrojs/mdx"
 
 export default defineConfig({
   site: "https://andri.dk/",
-  integrations: [react(), tailwind(), icon()],
+  integrations: [react(), mdx(), tailwind(), icon()],
   trailingSlash: "ignore",
   markdown: {
     drafts: true,

package.json

@@ -16,6 +16,7 @@
     "check": "astro check"
   },
   "dependencies": {
+    "@astrojs/mdx": "^3.1.6",
     "@astrojs/node": "^8.3.3",
     "@astrojs/react": "^3.6.2",
     "@astrojs/rss": "^4.0.7",

src/components/Icon.astro

@@ -1,30 +1,28 @@
 ---
-import calendarIcon from "heroicons/20/solid/calendar.svg?raw";
-import heartIcon from "heroicons/20/solid/heart.svg?raw";
-import github from "simple-icons/icons/github.svg?raw";
-import linkedIn from "simple-icons/icons/linkedin.svg?raw";
-import twitter from "simple-icons/icons/x.svg?raw";
-import mastodon from "simple-icons/icons/mastodon.svg?raw";
-import bluesky from "simple-icons/icons/bluesky.svg?raw";
+import { Icon as BaseIcon } from "astro-icon/components";
+import { twMerge } from "tailwind-merge";
 
 interface Props {
 	name: keyof typeof icons;
 	class?: string;
 }
 
 const icons = {
-	calendar: calendarIcon,
-	heart: heartIcon,
-	github,
-	twitter,
-	linkedIn,
-	mastodon,
-	bluesky,
+	calendar: "tabler:calendar",
+	heart: "tabler:heart",
+	github: "tabler:brand-github",
+	twitter: "tabler:brand-twitter",
+	linkedIn: "tabler:brand-linkedin",
+	mastodon: "tabler:brand-mastodon",
+	bluesky: "tabler:brand-bluesky",
+	windows: "tabler:brand-windows",
+	mac: "tabler:brand-apple",
+	linux: "simple-icons:linux",
 };
 
 const baseClass = "inline-icon";
 const { name, class: className = "" } = Astro.props;
 const iconData = icons[name];
 ---
 
-<svg class={`${baseClass} ${className}`} set:html={iconData} />
+<BaseIcon name={iconData} class={twMerge(baseClass, className)} />

src/components/nav-items.astro

@@ -10,4 +10,5 @@ const { isHome } = Astro.props;
 
 {!isHome && <NavItem href="/">Home</NavItem>}
 <NavItem href="/blog/">Blog</NavItem>
+<NavItem href="/using/">Using</NavItem>
 <NavItem href="/rss.xml">RSS</NavItem>

src/layouts/MarkdownLayout.astro

@@ -26,7 +26,9 @@ if (post.title === undefined)
 			<div
 				class="bg-white py-10 shadow px-5 lg:px-10 flex-1 lg:max-w-6xl"
 			>
-				<article class="mb-6 prose lg:prose-lg prose-li:m-0">
+				<article
+					class="mb-6 prose lg:prose-lg prose-li:m-0 prose-headings:mb-1 prose-headings:m-0"
+				>
 					<slot />
 				</article>
 

src/pages/using.mdx

@@ -0,0 +1,31 @@
+---
+title: Using
+---
+
+import Icon from "@components/Icon.astro";
+
+# Using
+
+Here is a list of tools that I use. If I need to reinstall a computer, this serves as a nice document. If it helps you too, that's a bonus!
+
+## Hardware
+
+- **Personal laptop**: <Icon name="mac" /> Apple Macbook Air M3
+- **Work laptop**: <Icon name="mac" /> Apple Macbook Pro M1 Max w. 32G RAM.
+- **Gaming PC**: <Icon name="linux" /> AMD Ryzen 3500 w. AMD RX 7900XT GPU, 32G RAM, 2TB SSD
+- **Mouse**: Razer Basilisk V3
+- **Keyboard**: Ducky One 2 TKL RGB
+- **Monitor**: [Samsung 34" CF791](https://www.samsung.com/us/computing/monitors/gaming/34--cf791-wqhd-monitor-lc34f791wqnxza/) for home-office/gaming
+- **Office Chair**: [Herman Miller Aeron](https://www.hermanmiller.com/products/seating/office-chairs/aeron-chair/). It's comfortable during work, play or just relaxing
+- **Office Chair**: [HÅG Capisco 8106](https://www.officechairsusa.com/hag-capisco-8106-15-day-standard-ship/) is great for work; but not for relaxing. It's rigid and forces you sit "correctly". It's great!
+
+## Software
+
+### Utilities
+
+- [Rectangle Pro](https://rectangleapp.com/pro): <Icon name="mac" /> Great for managing windows, tiling and different displays.
+
+### This website
+
+- [Astro](https://astro.build): Web framework that works with multiple view libraries. Runs this site.
+- [Fly.io](https://fly.io): Hosting provider. Easy to use if you know Dockerfile, and nice free tier.