feat: add Toolbox component and Tool icons

astro.config.mjs

@@ -1,10 +1,20 @@
-import { defineConfig } from 'astro/config';
+import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
+import preact from '@astrojs/preact';
 import svelte from '@astrojs/svelte';
 import tailwind from '@astrojs/tailwind';
-import preact from "@astrojs/preact";
+
+import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx(), svelte(), tailwind(), preact()]
+	integrations: [
-});
+		mdx(),
+		svelte(),
+		tailwind(),
+		preact(),
+		image({
+			serviceEntryPoint: '@astrojs/image/sharp',
+		}),
+	],
+});

package.json

@@ -12,6 +12,7 @@
 		"prepare": "husky install"
 	},
 	"dependencies": {
+		"@astrojs/image": "^0.16.6",
 		"@astrojs/mdx": "^0.16.0",
 		"@astrojs/preact": "^2.1.0",
 		"@astrojs/svelte": "^2.0.1",
@@ -22,6 +23,7 @@
 		"classnames": "^2.3.2",
 		"postcss": "^8.4.21",
 		"preact": "^10.6.5",
+		"sharp": "^0.31.3",
 		"svelte": "^3.54.0",
 		"tailwindcss": "^3.0.24"
 	},

src/components/Toolbox.astro

@@ -0,0 +1,31 @@
+---
+import { Image } from '@astrojs/image/components';
+import { Link } from '.';
+
+import type { ToolsProps } from '../data/tools';
+
+export interface Props {
+	tools: ToolsProps[];
+}
+
+const { tools } = Astro.props;
+---
+
+<ul class="grid grid-cols-toolbox items-center gap-2 rounded-2 bg-black/5 p-5 dark:bg-white/5">
+	{
+		tools.map(({ name, url, image }) => (
+			<li>
+				<Link href={url} title={name}>
+					<Image
+						alt={name}
+						aspectRatio="1:1"
+						format="avif"
+						height={80}
+						src={image}
+						width={80}
+					/>
+				</Link>
+			</li>
+		))
+	}
+</ul>

src/components/index.ts

@@ -3,6 +3,7 @@ import DownloadLink from './DownloadLink.astro';
 import EmailLink from './EmailLink.astro';
 import MoreLink from './MoreLink.astro';
 import Pagination from './Pagination.astro';
+import Toolbox from './Toolbox.astro';
 
 export * from './AffiliateLink';
 export * from './AmazonBook';
@@ -28,4 +29,4 @@ export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
 export * from './YouTubeVideo';
-export { DownloadLink, EmailLink, MoreLink, Pagination };
+export { DownloadLink, EmailLink, MoreLink, Pagination, Toolbox };

src/data/tools.ts

@@ -0,0 +1,177 @@
+export type ToolsProps = {
+	name: string;
+	url?: string;
+	image: string;
+};
+
+export const development = [
+	{
+		name: 'Neovim',
+		url: 'https://neovim.io/',
+		image: '/assets/images/tools/neovim.png',
+	},
+	{
+		name: 'Tmux',
+		url: 'https://tmux.github.io/',
+		image: '/assets/images/tools/tmux.png',
+	},
+	{
+		name: 'Kitty',
+		url: 'https://sw.kovidgoyal.net/kitty/',
+		image: '/assets/images/tools/kitty.png',
+	},
+	{
+		name: 'Visual Studio Code',
+		url: 'https://code.visualstudio.com/',
+		image: '/assets/images/tools/visual-studio-code.png',
+	},
+	{
+		name: 'Kaleidoscope',
+		url: 'https://kaleidoscope.app/',
+		image: '/assets/images/tools/kaleidoscope.png',
+	},
+];
+
+export const design = [
+	{
+		name: 'Affinity Designer',
+		url: 'https://affinity.serif.com/designer/',
+		image: '/assets/images/tools/affinity-designer.png',
+	},
+	{
+		name: 'Affinity Photo',
+		url: 'https://affinity.serif.com/photo/',
+		image: '/assets/images/tools/affinity-photo.png',
+	},
+	{
+		name: 'Affinity Publisher',
+		url: 'https://affinity.serif.com/publisher/',
+		image: '/assets/images/tools/affinity-publisher.png',
+	},
+	{
+		name: 'Procreate',
+		url: 'https://procreate.com/',
+		image: '/assets/images/tools/procreate.png',
+	},
+	{
+		name: 'Typeface',
+		url: 'https://typefaceapp.com/',
+		image: '/assets/images/tools/typeface.png',
+	},
+];
+
+export const research = [
+	{
+		name: 'iA Writer',
+		url: 'https://ia.net/writer',
+		image: '/assets/images/tools/ia-writer.png',
+	},
+	{
+		name: 'iA Presenter',
+		url: 'https://ia.net/presenter',
+		image: '/assets/images/tools/ia-presenter.png',
+	},
+	{
+		name: 'Obsidian',
+		url: 'https://obsidian.md/',
+		image: '/assets/images/tools/obsidian.png',
+	},
+	{
+		name: 'DEVONthink',
+		url: 'https://www.devontechnologies.com/apps/devonthink',
+		image: '/assets/images/tools/devonthink.png',
+	},
+	{
+		name: 'Raindrop.io',
+		url: 'https://raindrop.io/',
+		image: '/assets/images/tools/raindrop.io.png',
+	},
+	{
+		name: 'Reeder',
+		url: 'https://reeder.app/',
+		image: '/assets/images/tools/reeder.png',
+	},
+	{
+		name: 'Readwise Reader',
+		url: 'https://readwise.io/read',
+		image: '/assets/images/tools/readwise-reader.png',
+	},
+	{
+		name: 'Readwise',
+		url: 'https://readwise.io/i/stefan805',
+		image: '/assets/images/tools/readwise.png',
+	},
+	{
+		name: 'Overcast',
+		url: 'https://overcast.fm',
+		image: '/assets/images/tools/overcast.png',
+	},
+	{
+		name: 'Snipd',
+		url: 'https://www.snipd.com/',
+		image: '/assets/images/tools/snipd.png',
+	},
+	{
+		name: 'MindNode',
+		url: 'https://www.mindnode.com/',
+		image: '/assets/images/tools/mindnode.png',
+	},
+	{
+		name: 'BibDesk',
+		url: 'https://bibdesk.sourceforge.io/',
+		image: '/assets/images/tools/bibdesk.png',
+	},
+];
+
+export const other = [
+	{
+		name: 'Things',
+		url: 'https://culturedcode.com/things/',
+		image: '/assets/images/tools/things.png',
+	},
+	{
+		name: 'Raycast',
+		url: 'https://www.raycast.com/',
+		image: '/assets/images/tools/raycast.png',
+	},
+	{
+		name: 'Arc',
+		url: 'https://arc.net/',
+		image: '/assets/images/tools/arc-browser.png',
+	},
+	{
+		name: 'Brave Browser',
+		url: 'https://brave.com/',
+		image: '/assets/images/tools/brave-browser.png',
+	},
+	{
+		name: 'Bitwarden',
+		url: 'https://bitwarden.com/',
+		image: '/assets/images/tools/bitwarden.png',
+	},
+	{
+		name: 'ProtonMail',
+		url: '',
+		image: '/assets/images/tools/protonmail.png',
+	},
+	{
+		name: 'ProtonVPN',
+		url: 'https://protonvpn.com/',
+		image: '/assets/images/tools/protonvpn.png',
+	},
+	{
+		name: 'Espanso',
+		url: 'https://espanso.org/',
+		image: '/assets/images/tools/espanso.png',
+	},
+	{
+		name: 'Yoink',
+		url: 'https://eternalstorms.at/yoink/mac/',
+		image: '/assets/images/tools/yoink.png',
+	},
+	{
+		name: 'Karabiner-Elements',
+		url: 'https://karabiner-elements.pqrs.org/',
+		image: '/assets/images/tools/karabiner-elements.png',
+	},
+];

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />

src/pages/tools.mdx

@@ -4,6 +4,8 @@ title: Tools
 intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools.
 ---
 
+import { Toolbox } from "../components";
+import { development, design, research, other } from "../data/tools.ts";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
@@ -19,7 +21,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](https://www.apple.com/airpods-pro/).
+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/).
 
 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 both the MacBook or the iPad.
 
@@ -29,51 +31,26 @@ Besides that, I have a few backup hard drives for automatic Time Machine backups
 
 I use [Neovim](https://neovim.io/) for development, using [LazyVim](https://www.lazyvim.org/) as a plugin manager. I use it in the [Kitty terminal emulator](https://sw.kovidgoyal.net/kitty/) with the [Tmux terminal multiplexer](https://tmux.github.io/). Occasionally, I use [Visual Studio Code](https://code.visualstudio.com/) with the [Neovim extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim). I use [LazyGit](https://github.com/jesseduffield/lazygit) for Git.
 
-- [Kitty](https://sw.kovidgoyal.net/kitty/)
+<Toolbox tools={development} />
-- [Neovim](https://neovim.io/)
-- [Visual Studio Code](https://code.visualstudio.com/)
-- [Tmux](https://tmux.github.io/)
 
 ## Design
 
 I love the [Affinity](https://affinity.serif.com/) suite by Serif and use it for all my creative work. I ditched Adobe a few years ago and never looked back. Furthermore, I use all Affinity apps on Desktop and iPad. Additionally, I use [Procreate](https://procreate.com/) on my iPad Pro for creative work. My favorite font app is [Typeface](https://typefaceapp.com/).
 
-- [Affinity Designer](https://affinity.serif.com/designer/)
+<Toolbox tools={design} />
-- [Affinity Photo](https://affinity.serif.com/photo/)
-- [Affinity Publisher](https://affinity.serif.com/publisher/)
-- [Procreate](https://procreate.com/)
-- [Typeface](https://typefaceapp.com/)
 
-## Research & Note-Taking
+## Research & Writing
 
 My favorite writing app is [iA Writer](https://ia.net/writer), I write nearly everything with it, but another writing app I use for my note-taking is [Obsidian](https://obsidian.md/). [DEVONthink](https://www.devontechnologies.com/apps/devonthink) is the app where I store everything, from PDF documents, to inspirational items to references. Everything is synchronized encrypted between all my devices.
 
 [Raindrop.io](https://raindrop.io/) is my favorite app to save any bookmark and to find anything again in seconds. I have more than 25,000 bookmarks.
 
-I consume all my content with the [Reeder](https://reeder.app/) app, from RSS Feeds, to Twitter or Reddit threads, to YouTube videos. From there, I transfer everything to [Readwise Reader](https://readwise.io/read) to read it and create highlights to remember and review later in [Readwise](https://readwise.io/).
+I consume all my content with the [Reeder](https://reeder.app/) app, from RSS Feeds, to Twitter or Reddit threads, to YouTube videos. From there, I transfer everything to [Readwise Reader](https://readwise.io/read) to read it and create highlights to remember and review later in [Readwise](https://readwise.io/i/stefan805).
 
-- [iA Writer](https://ia.net/writer)
+<Toolbox tools={research} />
-- [Obsidian](https://obsidian.md/)
-- [DEVONthink](https://www.devontechnologies.com/apps/devonthink)
-- [Raindrop.io](https://raindrop.io/)
-- [Reeder](https://reeder.app/)
-- [Readwise Reeder](https://readwise.io/read)
-- [Readwise](https://readwise.io/)
-- [Snipd](https://www.snipd.com/)
-- [Overcast](https://overcast.fm/podcasts)
-- [MindNode](https://www.mindnode.com/)
-- [BibDesk](https://bibdesk.sourceforge.io/)
 
 ## Other
 
 I use plenty of additional tools, too many to list them all. Here are a few of my favorite apps.
 
-- [Things](https://culturedcode.com/things/)
+<Toolbox tools={other} />
-- [Raycast](https://www.raycast.com/)
-- [Arc](https://arc.net/)
-- [Brave Browser](https://brave.com/)
-- [Bitwarden](https://bitwarden.com/)
-- [ProtonVPN](https://protonvpn.com/)
-- [Espanso](https://espanso.org/)
-- [Yoink](https://eternalstorms.at/yoink/mac/)
-- [Karabiner-Elements](https://karabiner-elements.pqrs.org/)

tailwind.config.cjs

@@ -52,6 +52,7 @@ module.exports = {
 				haiku: 'repeat(auto-fit, minmax(15rem, 1fr))',
 				'haiku-xl': 'repeat(auto-fit, minmax(25rem, 1fr)',
 				'haiku-list': 'repeat(auto-fill, minmax(3rem, 1fr))',
+				toolbox: 'repeat(auto-fit, minmax(80px, 1fr))',
 			},
 			gridTemplateRows: ({ theme }) => ({
 				layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,