feat: add Book and AmazonBook components

src/components/AmazonBook.tsx

@@ -0,0 +1,25 @@
+import type { FunctionalComponent, JSX } from 'preact';
+
+import { Book, Link } from '.';
+
+interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
+	alt?: string;
+	asin: string;
+	class?: string;
+}
+
+export const AmazonBook: FunctionalComponent<Props> = ({
+	alt = '',
+	asin,
+	class: className,
+	...props
+}) => {
+	const amazonImageUrl = `https://images-na.ssl-images-amazon.com/images/P/${asin}.01.LZZZZZZZ.jpg`;
+	const affiliateUrl = `http://www.amazon.de/gp/product/${asin}?ie=UTF8&tag=stefanimhoffde-21&linkCode=as2&camp=1638&creative=6742&creativeASIN=${asin}`;
+
+	return (
+		<Link href={affiliateUrl} class={className} {...props}>
+			<Book alt={alt} src={amazonImageUrl} />
+		</Link>
+	);
+};

src/components/Book.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent, JSX } from 'preact';
+
+interface Props extends JSX.HTMLAttributes<HTMLImageElement> {
+	alt?: string;
+	class?: string;
+	src: string;
+}
+
+export const Book: FunctionalComponent<Props> = ({ alt = '', class: className, src, ...props }) => {
+	const classes = cx(
+		"image-shadow relative box-border grid h-auto max-w-[250px] shrink grow justify-self-center overflow-hidden align-bottom shadow-book before:absolute before:z-10 before:block before:h-full before:w-[0.5em] before:bg-gradient-to-r before:from-black/30 before:to-transparent before:shadow-book-before before:content-[''] before:rounded-is-1",
+		className
+	);
+
+	return (
+		<div class={classes} tabIndex={0}>
+			<img alt={alt} src={src} {...props} />
+		</div>
+	);
+};

src/components/index.ts

@@ -1,3 +1,5 @@
+export * from './AmazonBook';
+export * from './Book';
 export * from './Divider';
 export * from './Headline';
 export * from './Image';

src/mdx-components.ts

@@ -1,4 +1,6 @@
 import {
+	AmazonBook,
+	Book,
 	Divider,
 	Headline,
 	Image,
@@ -15,6 +17,8 @@ import {
 
 export const mapping = {
 	a: TextLink,
+	AmazonBook,
+	Book,
 	h1: Title,
 	h2: Headline,
 	h3: Subheadline,

src/pages/traditional-colors-of-japan.astro

@@ -2,6 +2,7 @@
 import GridLayout from '../layouts/GridLayout.astro';
 
 import PageTitle from '../components/PageTitle.astro';
+import { AmazonBook } from '../components';
 
 import { Content as Intro } from '../content/traditional-colors-of-japan/intro.mdx';
 
@@ -20,11 +21,16 @@ import { mapping } from '../mdx-components';
 	<article
 		class="color-japan-books col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end"
 	>
-		Books
-		<!-- 
-		{%- book "475624100X", "The Traditional Colors of Japan" -%}
-		{%- book "475624114X", "Traditional Japanese Color Palette" -%}
-		-->
+		<AmazonBook
+			alt="The Traditional Colors of Japan"
+			asin="475624100X"
+			class="mie-[1.5vw] max-w-[300px] [&_img]:self-end"
+		/>
+		<AmazonBook
+			alt="Traditional Japanese Color Palette"
+			asin="475624114X"
+			class="mis-[1.5vw] max-w-[300px] [&_img]:self-end"
+		/>
 	</article>
 
 	<article class="color-japan-grid col-start-1 col-end-17 grid grid-cols-books gap-[20px]">

tailwind.config.cjs

@@ -143,6 +143,9 @@ module.exports = {
 				subtle: '0 0 50px rgb(0 0 0 / 0.2)',
 				beveled: '0 1px 0 rgb(0 0 0 / 0.2), inset 0 0 0 2px #ffffff',
 				darkInset: 'inset 0 0 0 1px rgb(0 0 0 / 0.2)',
+				book: '0 0.1em 0.5em rgba(0, 0, 0, 0.5)',
+				'book-before': '0.1em 0 rgba(0, 0, 0, 0.1), 2px 0 0px rgba(255, 255, 255, 0.1)',
+				'book-after': '0 0 2em rgba(0, 0, 0, 0.8)',
 			},
 			listStyleType: {
 				none: 'none',