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

This commit is contained in:
Stefan Imhoff
2023-06-10 18:30:43 +02:00
parent 2cd63962d4
commit 1ea4ab26e8
3 changed files with 21 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View File

@@ -1,5 +1,6 @@
--- ---
import PageTitle from '../components/PageTitle.astro'; import PageTitle from '../components/PageTitle.astro';
import Picture from '../components/Picture.astro';
import GridLayout from './GridLayout.astro'; import GridLayout from './GridLayout.astro';
@@ -17,6 +18,21 @@ const gridVariant = frontmatter.grid || grid;
<PageTitle slot="title" grid={gridVariant} {...frontmatter}> <PageTitle slot="title" grid={gridVariant} {...frontmatter}>
{frontmatter.title} {frontmatter.title}
</PageTitle> </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 name="before-content" />
<slot /> <slot />
<slot name="after-content" /> <slot name="after-content" />

View File

@@ -3,6 +3,7 @@ layout: ../layouts/PageLayout.astro
title: Tools title: Tools
description: … description: …
intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools. 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"; 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"; import { mapping } from "../mdx-components.ts";
export const components = mapping; export const components = mapping;
[Photo of my desk]
## Home Office ## 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 ## 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. 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 Im 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 Im creating digital crafts or notes. I can switch my Keychron keyboard to type on my Macs or the iPad. I have an [iPhone 13 Mini](https://www.apple.com/shop/buy-iphone/iphone-13) that I use when Im 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 Im creating digital crafts or notes. I can switch my Keychron keyboard to type on my Macs or the iPad.