kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add colors on page

Browse Source
This commit is contained in:
Stefan Imhoff
2023-04-17 20:28:11 +02:00
parent bf0e88df20
commit 44453bdbca
2 changed files with 1509 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1502
src/data/colors-japan.json Normal file
View File

File diff suppressed because it is too large Load Diff

23
src/pages/traditional-colors-of-japan.astro
View File

@@ -2,9 +2,10 @@
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import { AmazonBook } from '../components';
import { AmazonBook, ColorSwatch } from '../components';
import { Content as Intro } from '../content/traditional-colors-of-japan/intro.mdx';
import colors from '../data/colors-japan.json';
import { mapping } from '../mdx-components';
---
@@ -34,20 +35,10 @@ import { mapping } from '../mdx-components';
</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 %}
-->
{
colors.map(({ name, description, color }) => (
<ColorSwatch client:visible color={color} title={name} description={description} />
))
}
</article>
</GridLayout>