From 27728fd15771deb28f8f2c3e30480d43ab821020 Mon Sep 17 00:00:00 2001
From: Silas Berger <silas.berger@outlook.com>
Date: Thu, 4 Jan 2024 18:59:30 +0100
Subject: [PATCH] Add components library script.

---
 README.md                                     |  3 ++
 .../scriptsConfigs/drafts.scriptsConfigs.json |  3 +-
 .../material/Components-Gallery/02-tiles.mdx  | 33 +++++++++++++++++++
 content/material/Components-Gallery/index.mdx |  5 +++
 content/material/ScriptLandingPages/drafts.md |  6 ++++
 5 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 content/material/Components-Gallery/02-tiles.mdx
 create mode 100644 content/material/Components-Gallery/index.mdx
 create mode 100644 content/material/ScriptLandingPages/drafts.md

diff --git a/README.md b/README.md
index 21ca25a3..634ea895 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,9 @@ My teaching website, built with [Docusaurus](https://docusaurus.io/).
 
 For more examples, check out the CI workflows in `.github`.
 
+### Where do I start?
+A good place to start is to run `SITE=drafts yarn start` and then visit http://localhost:3000/default/Components/.
+
 ## General configuration
 ### Environment variables
 - `SITE`: Which site should be built; must correspond to an entry in `config/siteProperties/site-properties.ts`.
diff --git a/config/scriptsConfigs/drafts.scriptsConfigs.json b/config/scriptsConfigs/drafts.scriptsConfigs.json
index 5809c4db..0b011d25 100644
--- a/config/scriptsConfigs/drafts.scriptsConfigs.json
+++ b/config/scriptsConfigs/drafts.scriptsConfigs.json
@@ -4,7 +4,8 @@
       "draft": 0
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "index.md", "material": "ScriptLandingPages/drafts.md"},
+      {"section": "01-Components", "material": "Components-Gallery"}
     ]
   }
 }
diff --git a/content/material/Components-Gallery/02-tiles.mdx b/content/material/Components-Gallery/02-tiles.mdx
new file mode 100644
index 00000000..336ee1ff
--- /dev/null
+++ b/content/material/Components-Gallery/02-tiles.mdx
@@ -0,0 +1,33 @@
+import {TileGrid, Layout} from "@site/src/components/tiles/TileGrid/TileGrid";
+import {Tile} from "@site/src/components/tiles/Tile/Tile";
+
+# Tiles
+## Tile types
+<TileGrid>
+  <Tile title="Title"></Tile>
+  <Tile title="Title and body">This tile has a title and a body</Tile>
+  <Tile title="Title, body, link" href="#">This tile has a title, a body, and a link</Tile>
+  <Tile title="Title and link" href="#"></Tile>
+
+</TileGrid>
+
+## Larger tiles
+<TileGrid layout={Layout.LARGE_TILES}>
+  <Tile title="Alpha">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Bravo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Charlie">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Delta">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+</TileGrid>
+
+## Smaller tiles (and without grow-on-hover)
+<TileGrid layout={Layout.SMALL_TILES} preventGrowOnHover={true}>
+  <Tile title="Alpha">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Bravo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Charlie">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Delta">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Echo">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Foxtrot">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Golf">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+  <Tile title="Hotel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</Tile>
+</TileGrid>
+
diff --git a/content/material/Components-Gallery/index.mdx b/content/material/Components-Gallery/index.mdx
new file mode 100644
index 00000000..0c6da9bf
--- /dev/null
+++ b/content/material/Components-Gallery/index.mdx
@@ -0,0 +1,5 @@
+import {TileGrid, Layout} from "@site/src/components/tiles/TileGrid/TileGrid";
+import {Tile} from "@site/src/components/tiles/Tile/Tile";
+
+# Components
+A gallery and development sandbox for React components.
diff --git a/content/material/ScriptLandingPages/drafts.md b/content/material/ScriptLandingPages/drafts.md
new file mode 100644
index 00000000..f66be15f
--- /dev/null
+++ b/content/material/ScriptLandingPages/drafts.md
@@ -0,0 +1,6 @@
+---
+sidebar_position: 0
+---
+
+# ✍🏽 Drafts
+A place to develop everything that should not yet be published to a real script.