From 8e871e10edfdbdc4b96a02ebf585c53814a2c737 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 13 Apr 2023 16:16:40 +0200
Subject: [PATCH] feat: add page for "Traditional Colors of Japan"

---
 .../traditional-colors-of-japan/intro.mdx     |  5 ++
 src/pages/traditional-colors-of-japan.astro   | 47 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/content/traditional-colors-of-japan/intro.mdx
 create mode 100644 src/pages/traditional-colors-of-japan.astro

diff --git a/src/content/traditional-colors-of-japan/intro.mdx b/src/content/traditional-colors-of-japan/intro.mdx
new file mode 100644
index 0000000..ec033e3
--- /dev/null
+++ b/src/content/traditional-colors-of-japan/intro.mdx
@@ -0,0 +1,5 @@
+Some years ago I found by accident the book <cite>The Traditional Colors of Japan</cite> by **Nobyoshi Hamada** in a bookstore. He also wrote the sister book <cite>Traditional Japanese Color Palette</cite>.
+
+It’s the best book about Japanese colors I know. The book has beautiful photography showing examples of nature, craftsmanship, and art applying the colors.
+
+I took the time and converted all colors in the book into an ASE (Adobe Swatch Exchange) file that is usable in all Graphic software. You can download the file or browse all colors on this page.
diff --git a/src/pages/traditional-colors-of-japan.astro b/src/pages/traditional-colors-of-japan.astro
new file mode 100644
index 0000000..3d8ab89
--- /dev/null
+++ b/src/pages/traditional-colors-of-japan.astro
@@ -0,0 +1,47 @@
+---
+import GridLayout from '../layouts/GridLayout.astro';
+
+import PageTitle from '../components/PageTitle.astro';
+
+import { Content as Intro } from '../content/traditional-colors-of-japan/intro.mdx';
+
+import { mapping } from '../mdx-components';
+---
+
+<GridLayout title="The Traditional Colors of Japan" grid="wide" class="grid" innerGrid>
+	<PageTitle grid="wide" innerGrid>The Traditional Colors of&nbsp;Japan</PageTitle>
+
+	<article
+		class="color-japan-introduction col-start-1 col-end-17 grid md:col-end-8 xl:content-center"
+	>
+		<Intro components={mapping} />
+	</article>
+
+	<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" -%}
+		-->
+	</article>
+
+	<article class="color-japan-grid col-start-1 col-end-17 grid grid-cols-books gap-[20px]">
+		<div>Color 1</div>
+		<div>Color 2</div>
+		<div>Color 3</div>
+		<div>Color 4</div>
+		<div>Color 5</div>
+		<div>Color 6</div>
+		<div>Color 7</div>
+		<div>Color 8</div>
+		<div>Color 9</div>
+		<div>Color 10</div>
+		<!-- 
+		{% for item in colorsJapan %}
+			{%- color item.color, item.name, item.description -%}
+		{% endfor %}
+		-->
+	</article>
+</GridLayout>