Merge pull request #12 from SilasBerger/feature/components

Add and collect components, fix #11, fix #3

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.mdx", "material": "ScriptLandingPages/drafts.mdx"},
+      {"section": "01-Components", "material": "Components-Gallery"}
     ]
   }
 }

config/scriptsConfigs/gbsl.scriptsConfigs.json

@@ -7,7 +7,7 @@
       "gbsl.gym": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "26d": {
@@ -18,7 +18,7 @@
       "gbsl.gym": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "26f": {
@@ -29,7 +29,7 @@
       "gbsl.gym": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "26Fb": {
@@ -40,7 +40,7 @@
       "gbsl.fms": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "27Gi": {
@@ -51,7 +51,7 @@
       "gbsl.gym": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "27Gf": {
@@ -62,7 +62,7 @@
       "gbsl.gym": 2
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   }
 }

config/scriptsConfigs/lerbermatt.scriptsConfigs.json

@@ -4,15 +4,15 @@
       "lerb.26d": 0
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   },
   "27k": {
     "markers": {
       "lerb.27k": 0
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"}
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"}
     ]
   }
 }

config/scriptsConfigs/teach.scriptsConfigs.json

@@ -4,7 +4,7 @@
       "gym": 1
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.md"},
+      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"},
       {"section": "Microbit", "material": "Microbit"}
     ]
   },
@@ -13,7 +13,7 @@
       "sek": 1
     },
     "mappings": [
-      {"section": "index.md", "material": "/ScriptLandingPages/wip.md"},
+      {"section": "index.md", "material": "/ScriptLandingPages/wip.mdx"},
       {"section": "Microbit", "material": "Microbit"}
     ]
   },
@@ -22,8 +22,17 @@
       "prim": 1
     },
     "mappings": [
-      {"section": "index.md", "material": "/ScriptLandingPages/wip.md"},
+      {"section": "index.md", "material": "/ScriptLandingPages/wip.mdx"},
       {"section": "Microbit", "material": "Microbit"}
     ]
+  },
+  "creative-corner": {
+    "markers": {
+      "cc": 1
+    },
+    "mappings": [
+      {"section": "index.md", "material": "/ScriptLandingPages/creative-corner.mdx"},
+      {"section": "/01-Komponentengalerie", "material": "/Components-Gallery"}
+    ]
   }
 }

config/sidebars/teach.sidebars.ts

@@ -5,6 +5,7 @@ const sidebars: SidebarsConfig = {
   "gymnasium/informatik": [{type: 'autogenerated', dirName: '.'}],
   "sekundarstufe/medien-und-informatik": [{type: 'autogenerated', dirName: '.'}],
   "primarstufe/medien-und-informatik": [{type: 'autogenerated', dirName: '.'}],
+  "allerlei": [{type: 'autogenerated', dirName: '.'}],
 };
 
 export default sidebars;

config/siteProperties/teach.site-properties.ts

@@ -4,6 +4,7 @@ const navbarItems = [
   {to: 'gymnasium', label: 'Gymnasium', position: 'left'},
   {to: 'sekundarstufe', label: 'Sekundarstufe', position: 'left'},
   {to: 'primarstufe', label: 'Primarstufe', position: 'left'},
+  {to: 'creative-corner', label: '🎨 Creative Corner', position: 'right'},
 ];
 
 const footer = {

content/material/Components-Gallery/00-Markdown-Features.mdx

@@ -0,0 +1,70 @@
+import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo"
+
+# Markdown and HTML Features
+These features are part of [standard MDX syntax](https://docusaurus.io/docs/markdown-features) as used by Docusaurus by
+default.
+
+## Standard features
+***
+All **standard features** you would _expect_ from `Markdown` are available [here](#) as well.
+
+![Shelter](img/shelter.jpeg)
+
+***
+
+## Code blocks
+A simple code block:
+```py
+def greet():
+    print("Hello, world!")
+```
+
+A code block with line numbers and a highlighted section:
+```html {3-6} showLineNumbers
+<html>
+  <body>
+    <h1>My first website</h1>
+    <div>
+        <span>This is my first website!</span>
+    </div>
+  </body>
+</html>
+```
+
+## Blockquotes
+> Thou dost snore distinctly.\
+> There’s meaning in thy snores.
+>
+> — Shakespeare, William. _The Tempest_. 2.1.244-245.
+
+## Footnotes
+Footnotes[^1] are a great[^2] way to move additional information to the bottom of the page.[^5]
+
+[^1]: "**Footnotes** are notes at the foot of the page _[...]_". ([Wikipedia](https://en.wikipedia.org/wiki/Note_(typography)))
+[^2]: **great** _(adj.)_: 1. _notably large in size._ 3. _remarkable in magnitude, degree, or effectiveness._
+      ([Merriam-Webster](https://www.merriam-webster.com/dictionary/great))
+[^5]: An especially useful feature of the way MDX handles footnotes is that you don't need to ensure a continuous
+      enumeration. Additionally, you can define your footnotes right where you reference them, and they will still
+      be placed at the end of the page.
+
+## Tables
+| First name | Middle name | Last Name     |
+|-----------:|:-----------:|---------------|
+|        Jon |  DeLorean   | Doe           |
+|       Jane |   Charlie   | Jefferson     |
+|      Billy |   Beanbag   | Bumblebee IV. |
+
+## Details
+<details>
+  <summary>Toggle to see more...</summary>
+  <div>
+    <span>Here's the "more" 😉</span>
+    <details>
+      <summary>Details can even be nested...</summary>
+      <div>
+        <span>...and nothing stops you from hiding a YouTube video here, if you want 😎</span>
+        <YouTubeVideo videoId="bEWP7llgGec" />
+      </div>
+    </details>
+  </div>
+</details>

content/material/Components-Gallery/01-Admonitions.mdx

@@ -0,0 +1,23 @@
+# Admonitions
+Admonitions are a [builtin feature](https://docusaurus.io/docs/markdown-features/admonition) of the Docusaurus default
+theme.
+
+:::note
+Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::
+
+:::tip
+Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::
+
+:::info
+Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::
+
+:::warning
+Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::
+
+:::danger
+Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::

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/03-YouTube-Video.mdx

@@ -0,0 +1,8 @@
+import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo"
+
+# YouTube Video
+Videos can be embedded at full width...
+<YouTubeVideo videoId="bEWP7llgGec" />
+
+...or scaled down:
+<YouTubeVideo videoId="3yAkX2k_DGs" width="60%" />

content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx

@@ -0,0 +1,13 @@
+import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
+import {SourceReference} from "@site/src/components/SourceReference/SourceReference";
+
+# Hero Image
+<HeroContainer>
+  ![Hero](img/hero.jpeg)
+</HeroContainer>
+<SourceReference>
+  Photo by [Alex Gruber](https://unsplash.com/@alex_gruber?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
+  on [Unsplash](https://unsplash.com/photos/man-in-black-jacket-and-black-pants-standing-on-rock-formation-looking-at-the-mountains-during-ZOCb5G9tA7A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
+</SourceReference>
+
+🎶 We can be heroes, just for one day.

content/material/Components-Gallery/05-Mermaid-Diagrams.mdx

@@ -0,0 +1,51 @@
+# Mermaid Diagrams
+Mermaid is a plugin for rendering complex diagrams from Markdown code blocks. In Docusaurus, it is provided by the
+`@docusaurus/theme-mermaid` plugin as described [here](https://docusaurus.io/docs/next/markdown-features/diagrams).
+
+A simple Mermaid diagram can look as follows:
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+Below are some examples from the [Mermaid website](https://mermaid.js.org/syntax/examples.html).
+
+## Pie chart
+```mermaid
+pie title NETFLIX
+    "Time spent looking for movie" : 90
+    "Time spent watching it" : 10
+```
+
+## Sequence diagram
+```mermaid
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+```
+
+## Git graph
+```mermaid
+gitGraph:
+    commit "Ashish"
+    branch newbranch
+    checkout newbranch
+    commit id:"1111"
+    commit tag:"test"
+    checkout main
+    commit type: HIGHLIGHT
+    commit
+    merge newbranch
+    commit
+    branch b2
+    commit
+```

content/material/Components-Gallery/06-Definition-List.mdx

@@ -0,0 +1,22 @@
+import DefinitionList from "@site/src/components/DefinitionList";
+
+# Definition List
+<DefinitionList>
+  <dt>Purpose</dt>
+  <dd>Add an _at a glance_ informational header to a page.</dd>
+  <dd>Display **important** information as key/value pairs.</dd>
+
+  <dt>Why they're great</dt>
+  <dd>✅ Easy to use</dd>
+  <dd>⏱️ Quick to create</dd>
+  <dd>😍 Look amazing</dd>
+</DefinitionList>
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+sit amet.
+
+Thanks, [@Balthasar Hofer](https://github.com/lebalz/ofi-blog)!