default remark layout, navitems, tweaks

andrioid · Sep 14, 2024 · 6b58127 · 6b58127
1 parent 87fa208
commit 6b58127
Show file tree

Hide file tree

Showing 20 changed files with 140 additions and 105 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,14 +5,15 @@ import { defineConfig } from "astro/config";
 import remarkEmbedImages from "remark-embed-images";
 
 import node from "@astrojs/node";
+import { setLayout } from "./src/lib/remark-default-layout";
 
 export default defineConfig({
   site: "https://andri.dk/",
   integrations: [react(), tailwind(), icon()],
   trailingSlash: "ignore",
   markdown: {
     drafts: true,
-    remarkPlugins: [remarkEmbedImages],
+    remarkPlugins: [remarkEmbedImages, setLayout],
     syntaxHighlight: "shiki",
     shikiConfig: { theme: "github-dark" },
   },

diff --git a/package.json b/package.json
@@ -61,7 +61,9 @@
     "remark-embed-images": "^3.1.0",
     "sanitize-html": "^2.13.0",
     "simple-icons": "^13.9.0",
-    "tailwindcss": "~3.4.11"
+    "tailwindcss": "~3.4.11",
+    "unified": "^11.0.5",
+    "vfile": "^6.0.3"
   },
   "engines": {
     "node": ">=18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -2,6 +2,13 @@
 import { Image } from "astro:assets";
 import andratar from "../../static/img/coffee-art.jpg";
 import NavItem from "./NavItem.astro";
+import NavItems from "./nav-items.astro";
+
+type Props = {
+	isHome: boolean;
+};
+
+const { isHome } = Astro.props;
 ---
 
 <nav
@@ -21,8 +28,6 @@ import NavItem from "./NavItem.astro";
 	</a>
 
 	<ul class="flex space-x-y topmenu gap-2">
-		<NavItem href="/">Home</NavItem>
-		<NavItem href="/blog/">Blog</NavItem>
-		<NavItem href="/rss.xml">RSS</NavItem>
+		<NavItems isHome={isHome} />
 	</ul>
 </nav>
diff --git a/src/components/nav-items.astro b/src/components/nav-items.astro
@@ -0,0 +1,13 @@
+---
+import NavItem from "./NavItem.astro";
+
+type Props = {
+	isHome: boolean;
+};
+
+const { isHome } = Astro.props;
+---
+
+{!isHome && <NavItem href="/">Home</NavItem>}
+<NavItem href="/blog/">Blog</NavItem>
+<NavItem href="/rss.xml">RSS</NavItem>
diff --git a/src/layout/MarkdownLayout.astro b/src/layout/MarkdownLayout.astro
diff --git a/src/layout/Layout.astro → src/layouts/Layout.astro b/src/layout/Layout.astro → src/layouts/Layout.astro
@@ -45,10 +45,10 @@ const ogImage = blogPost ? `/blog/${blogPost.slug}.png` : undefined;
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:image" content={ogImage} />
 
-		<title>{title}</title>
+		<title>{`andri.dk | ${title}`}</title>
 	</head>
 
-	<body>
+	<body class="bg-gray-200">
 		<slot />
 		<script
 			data-goatcounter="https://andrioid.goatcounter.com/count"

diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -0,0 +1,37 @@
+---
+// Find all blog posts to generate
+import type { CommonBlog } from "src/lib/cms";
+import Layout from "./Layout.astro";
+import PagesLayout from "./PagesLayout.astro";
+
+type Props = {
+	frontmatter: CommonBlog;
+};
+
+const { frontmatter: post } = Astro.props;
+if (post.title === undefined)
+	throw new Error("Frontmatter page title missing. E.g. 'title: Moo'");
+---
+
+<Layout
+	title={post.title}
+	description={post.description}
+	subtitle={post.description}
+	blogPost={post}
+>
+	<PagesLayout>
+		<div
+			class="pt-4 bg-gray-200 py-2 md:py-10 md:px-10 md:flex justify-center"
+		>
+			<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">
+					<slot />
+				</article>
+
+				<p>&nbsp;</p>
+			</div>
+		</div>
+	</PagesLayout>
+</Layout>
diff --git a/src/layout/PagesLayout.astro → src/layouts/PagesLayout.astro b/src/layout/PagesLayout.astro → src/layouts/PagesLayout.astro
diff --git a/src/lib/remark-default-layout/index.ts b/src/lib/remark-default-layout/index.ts
@@ -0,0 +1,23 @@
+import { VFile } from "vfile";
+import type { CommonBlog } from "../cms";
+
+// This sets our default layout even if there is no frontmatter
+// - Use case: Simple pages like /now or /using
+interface AstroFile extends VFile {
+	data: {
+		astro: {
+			frontmatter: CommonBlog & {
+				layout?: string;
+			};
+		};
+	};
+}
+
+export const setLayout = () => {
+	const transformer = (_, file: AstroFile) => {
+		file.data.astro.frontmatter.layout =
+			file.data.astro.frontmatter.layout ??
+			"@layouts/MarkdownLayout.astro";
+	};
+	return transformer;
+};
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -1,8 +1,8 @@
 ---
 // Find all blog posts to generate
 import { type CollectionEntry } from "astro:content";
-import Layout from "../../layout/Layout.astro";
-import PagesLayout from "../../layout/PagesLayout.astro";
+import Layout from "@layouts/Layout.astro";
+import PagesLayout from "@layouts/PagesLayout.astro";
 import { getPost } from "../../lib/cms";
 import { IS_DEV } from "../../lib/utils/dev";
 

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,7 +1,7 @@
 ---
 import Card from "../../components/card.astro";
-import Layout from "../../layout/Layout.astro";
-import PagesLayout from "../../layout/PagesLayout.astro";
+import Layout from "@layouts/Layout.astro";
+import PagesLayout from "@layouts/PagesLayout.astro";
 import Section from "../../components/Section.astro";
 import { getPosts } from "../../lib/cms";
 

diff --git a/src/pages/contact/index.astro b/src/pages/contact/index.astro
@@ -1,18 +1,21 @@
 ---
+import PagesLayout from "@layouts/PagesLayout.astro";
 import { actions } from "astro:actions";
-import Layout from "../../layout/Layout.astro";
-import PagesLayout from "../../layout/PagesLayout.astro";
 import { isInputError } from "astro:actions";
 
 const result = Astro.getActionResult(actions.contactMe);
-const inputErrors = isInputError(result?.error) ? result.error.fields : {}
-
+const inputErrors = isInputError(result?.error) ? result.error.fields : {};
 ---
 
 <PagesLayout title="Contact me">
 	<form method="post" action={actions.contactMe}>
-		<input class="block rounded-md border py-1 px-2" name="email" type="email" aria-describedby="error"/>
-        {inputErrors.email && <p id="error">{inputErrors.email.join(',')}</p>}
+		<input
+			class="block rounded-md border py-1 px-2"
+			name="email"
+			type="email"
+			aria-describedby="error"
+		/>
+		{inputErrors.email && <p id="error">{inputErrors.email.join(",")}</p>}
 		<button type="submit">Wat</button>
 	</form>
 </PagesLayout>
diff --git a/src/pages/da/index.astro b/src/pages/da/index.astro
@@ -9,11 +9,11 @@ import flagIS from "../../../static/img/iceland-flag.svg";
 import coffeeAndri from "../../../static/img/coffee-art.jpg";
 import cvJSON from "../../../packages/cv/resume.json";
 import { dataTransform } from "../../lib/cv";
-import Layout from "../../layout/Layout.astro";
 import BlogCards from "../../components/blog-cards.astro";
 import Icon from "../../components/Icon.astro";
 import { Image } from "astro:assets";
 import { getPosts } from "../../lib/cms";
+import Layout from "@layouts/Layout.astro";
 
 const blogPosts = await getPosts({ limit: 6 });
 const description = "Jeg udvikler og drifter softwareløsninger til alle formål";

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,10 +1,11 @@
 ---
 import { Icon } from "astro-icon/components";
-import Layout from "../layout/Layout.astro";
+import Layout from "@layouts/Layout.astro";
 import cv from "../../packages/cv/resume.json";
 import { dataTransform } from "../lib/cv";
 import ProfileIcon from "../components/profile-icon.astro";
 import SkillOverview from "./_cmp/skill-overview.astro";
+import NavItems from "@components/nav-items.astro";
 
 const dt = dataTransform(cv.skills, cv.work);
 ---
@@ -55,20 +56,10 @@ const dt = dataTransform(cv.skills, cv.work);
 				})
 			}
 		</div>
-		<header class="relative z-20 p-4 flex justify-between items-center">
+		<header class="relative z-20 p-4 flex justify-end items-center">
 			<nav>
 				<ul class="flex space-x-y topmenu gap-2">
-					<li>
-						<a href="/blog/">Blog</a>
-					</li>
-					<!--
-					<li>
-						<a href="/using">Using</a>
-					</li>
-					<li>
-						<a href="/now">Now</a>
-					</li>
-					 -->
+					<NavItems isHome={true} />
 				</ul>
 			</nav>
 		</header>

diff --git a/src/pages/is/index.astro b/src/pages/is/index.astro
@@ -9,11 +9,12 @@ import flagIS from "../../../static/img/iceland-flag.svg";
 import coffeeAndri from "../../../static/img/coffee-art.jpg";
 import cvJSON from "../../../packages/cv/resume.json";
 import { dataTransform } from "../../lib/cv";
-import Layout from "../../layout/Layout.astro";
+
 import BlogCards from "../../components/blog-cards.astro";
 import Icon from "../../components/Icon.astro";
 import { Image } from "astro:assets";
 import { getPosts } from "../../lib/cms";
+import Layout from "@layouts/Layout.astro";
 
 const blogPosts = await getPosts({ limit: 6 });
 const description = "Ég þróa og rek hugbúnað til allra nota";

diff --git a/src/pages/old.astro b/src/pages/old.astro
@@ -9,7 +9,7 @@ import flagIS from "../../static/img/iceland-flag.svg";
 import coffeeAndri from "../../static/img/coffee-art.jpg";
 import cvJSON from "../../packages/cv/resume.json";
 import { dataTransform } from "../lib/cv";
-import Layout from "../layout/Layout.astro";
+import Layout from "@layouts/Layout.astro";
 import BlogCards from "../components/blog-cards.astro";
 import Icon from "../components/Icon.astro";
 import { Image } from "astro:assets";

diff --git a/src/pages/test2.md b/src/pages/test2.md
diff --git a/src/pages/using.md b/src/pages/using.md
@@ -1,5 +1,22 @@
 ---
-layout: "../components/MarkdownLayout.astro"
+title: Using
 ---
 
-# Hello
+# 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!
+
+## Work
+
+- **Computer**: Apple Macbook Pro M1 Max w. 32G RAM.
+
+## Hobby programming
+
+- **Computer**: Apple Macbook Air M3
+
+## Gaming
+
+- **Computer**: AMD Ryzen 3500 w. AMD RX 7900XT GPU, 32G RAM, 2TB SSD
+- **Mouse**: Razer Basilisk V3
+- **Keyboard**: Ducky One 2 RKL RGB
+- **Monitor**: [Samsung 34" CF791](https://www.samsung.com/us/computing/monitors/gaming/34--cf791-wqhd-monitor-lc34f791wqnxza/)
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,12 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "strictFunctionTypes": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"]
+    }
   },
   "extends": "astro/tsconfigs/strict",
   "exclude": ["packages/react-cv/dist", "dist"]