From f2d809dd3bc4e0cebcd2282034fdcf46eaa08b68 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Mon, 17 Apr 2023 17:59:06 +0200
Subject: [PATCH] feat: add Book and AmazonBook components

---
 src/components/AmazonBook.tsx               | 25 +++++++++++++++++++++
 src/components/Book.tsx                     | 22 ++++++++++++++++++
 src/components/index.ts                     |  2 ++
 src/mdx-components.ts                       |  4 ++++
 src/pages/traditional-colors-of-japan.astro | 16 ++++++++-----
 tailwind.config.cjs                         |  3 +++
 6 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AmazonBook.tsx
 create mode 100644 src/components/Book.tsx

diff --git a/src/components/AmazonBook.tsx b/src/components/AmazonBook.tsx
new file mode 100644
index 0000000..8bad828
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/Book.tsx b/src/components/Book.tsx
new file mode 100644
index 0000000..1a65c4a
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 1786f83..5ea2acd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,5 @@
+export * from './AmazonBook';
+export * from './Book';
 export * from './Divider';
 export * from './Headline';
 export * from './Image';
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index ba72d7d..da41f64 100644
--- a/src/mdx-components.ts
+++ b/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,
diff --git a/src/pages/traditional-colors-of-japan.astro b/src/pages/traditional-colors-of-japan.astro
index 3d8ab89..5a37181 100644
--- a/src/pages/traditional-colors-of-japan.astro
+++ b/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]">
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d6cf309..4fb4196 100644
--- a/tailwind.config.cjs
+++ b/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',