feat: add cover photo option for Markdown pages and tools cover photo

src/layouts/PageLayout.astro

@@ -1,5 +1,6 @@
 ---
 import PageTitle from '../components/PageTitle.astro';
+import Picture from '../components/Picture.astro';
 
 import GridLayout from './GridLayout.astro';
 
@@ -17,6 +18,21 @@ const gridVariant = frontmatter.grid || grid;
 	<PageTitle slot="title" grid={gridVariant} {...frontmatter}>
 		{frontmatter.title}
 	</PageTitle>
+	{
+		frontmatter.cover && (
+			<div
+				slot="before-content"
+				class="col-span-full xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
+			>
+				<Picture
+					alt={frontmatter.title}
+					aspect={1.5}
+					breakpoints={[300, 512, 768, 1024, 1280, 1536, 1700, 2000]}
+					src={frontmatter.cover}
+				/>
+			</div>
+		)
+	}
 	<slot name="before-content" />
 	<slot />
 	<slot name="after-content" />

src/pages/tools.mdx

@@ -3,6 +3,7 @@ layout: ../layouts/PageLayout.astro
 title: Tools
 description: …
 intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools.
+cover: /assets/images/cover/home-office.jpg
 ---
 
 import Toolbox from "../components/Toolbox.astro";
@@ -10,11 +11,11 @@ import { development, design, research, other } from "../data/tools.ts";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
-[Photo of my desk]
-
 ## Home Office
 
-My desk is a [Jarvis Bamboo Standing](https://www.fully.com/standing-desks/jarvis/jarvis-adjustable-height-desk-bamboo.html) Desk by Fully in 140 cm. The chair is a [Capisco](https://www.fully.com/chairs/for-standing-desks/hag-capisco-chair.html) by HÅG with black leather. I use a [black leather desk pad](https://www.amazon.de/gp/product/B07PXDSSZP/) in 75 cm. I use an aluminum [MacBook stand](https://www.amazon.de/gp/product/B01F01DRW6/) and a [bamboo book rest](https://www.amazon.de/gp/product/B01M8HGTX8/) on my desk. The [BenQ Screenbar Plus](https://www.amazon.de/gp/product/B07GGVNXSW/) provides good lighting.
+<AffiliateLink asin="" text="" />
+
+My desk is a [Jarvis Bamboo Standing](https://www.fully.com/standing-desks/jarvis/jarvis-adjustable-height-desk-bamboo.html) Desk by Fully in 140 cm. The chair is a [Capisco](https://www.fully.com/chairs/for-standing-desks/hag-capisco-chair.html) by HÅG with black leather. I use a <AffiliateLink asin="B07PXDSSZP" text="black leather desk pad" /> in 75 cm. I use an aluminum <AffiliateLink asin="B01F01DRW6" text="MacBook stand" /> and a <AffiliateLink asin="B01M8HGTX8" text="bamboo book rest" /> on my desk. The <AffiliateLink asin="B07GGVNXSW" text="BenQ Screenbar Plus" /> provides good lighting. On top of the light is an <AffiliateLink asin="B09MFMTMPD" text="Anker PowerConf C200" /> webcam.
 
 ## Tech
 
@@ -22,7 +23,7 @@ My best computer is a [Mac mini M2 Pro with](https://www.apple.com/mac-mini/) 32
 
 I use two [Apple Magic Mouse](https://www.apple.com/shop/product/MK2E3AM/A/magic-mouse-white-multi-touch-surface), one in white and one in black. My keyboard is a [Keychron K1 Wireless Mechanical Keyboard](https://www.keychron.com/products/keychron-k1-wireless-mechanical-keyboard) with brown [Gateron Low Profile Mechanical Switches](https://www.keychron.com/products/low-profile-gateron-mechanical-switch-set). I bought a [wooden hand rest](https://www.etsy.com/listing/1258050864/) on Etsy.
 
-The main display is an [LG 4K monitor](https://www.amazon.de/gp/product/B08FBH1V9R/) with 31.5”, the notebook display is my second screen. For sound, I use two [Creative Pebble](https://www.amazon.de/gp/product/B07VVP8BGD/) loudspeakers, but I have a [Sonos](https://www.sonos.com/) sound system for music. When I am on the road, I use my [Apple AirPods Pro 2](https://www.apple.com/airpods-pro/).
+The main display is an <AffiliateLink asin="B08FBH1V9R" text="LG 4K monitor" /> with 31.5”, the notebook display is my second screen. For sound, I use two <AffiliateLink asin="B07VVP8BGD" text="Creative Pebble" /> loudspeakers, but I have a [Sonos](https://www.sonos.com/) sound system for music. When I am on the road, I use my [Apple AirPods Pro 2](https://www.apple.com/airpods-pro/).
 
 I have an [iPhone 13 Mini](https://www.apple.com/shop/buy-iphone/iphone-13) that I use when I’m not at home and an [iPad Pro M2](https://www.apple.com/ipad-pro/) with an [Apple Pencil](https://www.apple.com/apple-pencil/) that I use on the Sofa or when I’m creating digital crafts or notes. I can switch my Keychron keyboard to type on my Macs or the iPad.