Add components library script.

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`.

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"}
     ]
   }
 }

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>
+

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.

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.