Merge pull request #28 from SilasBerger/feature/directives

Rework directives and clean up `src` directory

README.md

@@ -1,5 +1,5 @@
 # Website
-My teaching website, built with [Docusaurus](https://docusaurus.io/).
+My teaching website, built with [Docusaurus](https://docusaurus.io/). Visit at [https://teach.silasberger.ch/](https://teach.silasberger.ch/).
 
 ## Install and build
 - `yarn install`: Install dependencies.

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

@@ -2,7 +2,7 @@
 sidebar_label: Markdown and HTML Features
 ---
 
-# Markdown and HTML Features [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/00-Markdown-Features.mdx)
+# Markdown and HTML Features :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/00-Markdown-Features.mdx]
 
 These features are part of [standard MDX syntax](https://docusaurus.io/docs/markdown-features) as used by Docusaurus by default.
 
@@ -65,7 +65,7 @@ Footnotes[^1] are a great[^2] way to move additional information to the bottom o
       <summary>Details can even be nested...</summary>
       <div>
         <span>...and nothing stops you from hiding a YouTube video here, if you want 😎</span>
-        [@YouTubeVideo](https://youtu.be/bEWP7llgGec)
+        ::youtube[https://youtu.be/bEWP7llgGec]
       </div>
     </details>
   </div>

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

@@ -2,41 +2,41 @@
 sidebar_label: Admonitions
 ---
 
-# Admonitions [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/01-Admonitions.mdx)
+# Admonitions :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/01-Admonitions.mdx]
 Admonitions are a [builtin feature](https://docusaurus.io/docs/markdown-features/admonition) of the Docusaurus default theme. This project uses a customized version of
 the Admonition component, with its own semantics.
 
-:::danger Danger
+:::danger[Danger]
 Do not forget to **save your work** before leaving the site!
 :::
 
-:::warning Warning
+:::warning[Warning]
 If you get an error saying `SyntaxError: expected ':'`, double-check whether your `if`-line ends with a `:`.
 :::
 
-:::key Key Takeaway
+:::key[Key Takeaway]
 We use `for`-loops to repeat a set of instructions for a _known, predetermined number of iterations_.
 :::
 
-:::definition Definition
+:::definition[Definition]
 An algorithm is a finite sequence of rigorous instructions, typically used to solve a class of specific problems or to
 perform a computation. [[Wikipedia](https://en.wikipedia.org/wiki/Algorithm)]
 :::
 
-:::insight Insight
+:::insight[Insight]
 The tradition of using the string `Hello, World!` for small test programs goes back to at least 1978, where it was used
 in the book [The C Programming Language](https://en.wikipedia.org/wiki/The_C_Programming_Language).
 :::
 
-:::info Tip
+:::info[Tip]
 Remember: (255)<sub>2</sub> = (11111111)<sub>2</sub>
 :::
 
 ## Nested Admonitions
-:::insight Good to know!
+:::insight[Good to know!]
 Admonitions can be nested.
 
-:::warning Design
+:::warning[Design]
 While nesting Admonitions may be useful in some cases, this can also result in visual clutter.
 :::
 

content/material/Components-Gallery/02-Tiles.mdx

@@ -2,10 +2,10 @@
 sidebar_label: Tiles
 ---
 
-import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
-import Tile from "@site/src/components/tiles/Tile";
+import TileGrid, {Layout} from "@site/src/app/components/tiles/TileGrid";
+import Tile from "@site/src/app/components/tiles/Tile";
 
-# Tiles [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/02-Tiles.mdx)
+# Tiles :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/02-Tiles.mdx]
 ## Tile types
 <TileGrid>
   <Tile title="Title"></Tile>

content/material/Components-Gallery/03-YouTube-Video.mdx

@@ -2,28 +2,26 @@
 sidebar_label: YouTube Video
 ---
 
-import YouTubeVideo from "@site/src/components/YouTubeVideo"
-
-# YouTube Video [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/03-YouTube-Video.mdx)
+# YouTube Video :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/03-YouTube-Video.mdx]
 Videos can be embedded at full width:
-[@YouTubeVideo](https://youtu.be/bEWP7llgGec)
+::youtube[https://youtu.be/bEWP7llgGec]
 
 ...or scaled down:
-<YouTubeVideo videoUrl="https://youtu.be/3yAkX2k_DGs" width="60%" />
+::youtube[https://youtu.be/bEWP7llgGec]{width=60%}
 
 ***
 
-:::info Good to know
+:::info[Good to know]
 This will put the plain text line right above the video player:
 ```markdown
 Videos can be embedded at full width...
-[@YouTubeVideo](https://youtu.be/bEWP7llgGec)
+::youtube[https://youtu.be/bEWP7llgGec]
 ```
 
 ...while this will result in a paragraph spacing between the text and the video player:
 ```markdown
 Videos can be embedded at full width...
 
-[@YouTubeVideo](https://youtu.be/bEWP7llgGec)
+::youtube[https://youtu.be/bEWP7llgGec]
 ```
 :::

content/material/Components-Gallery/04-Hero-Image.mdx

@@ -2,7 +2,7 @@
 sidebar_label: Hero Image
 ---
 
-# Hero Image [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx)
+# Hero Image :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx]
 :::Hero
   ![Hero](img/hero.jpeg)
 :::

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

@@ -2,7 +2,7 @@
 sidebar_label: Mermaid Diagrams
 ---
 
-# Mermaid Diagrams [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/05-Mermaid-Diagrams.mdx)
+# Mermaid Diagrams :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/05-Mermaid-Diagrams.mdx]
 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).
 

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

@@ -2,9 +2,9 @@
 sidebar_label: Definition List
 ---
 
-import DefinitionList from "@site/src/components/DefinitionList";
+import DefinitionList from "@site/src/app/components/DefinitionList";
 
-# Definition List [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/06-Definition-List.mdx)
+# Definition List :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/06-Definition-List.mdx]
 <DefinitionList>
   <dt>Purpose</dt>
   <dd>Add an _at a glance_ informational header to a page.</dd>

content/material/Components-Gallery/07-Browser-Window.mdx

@@ -2,9 +2,9 @@
 sidebar_label: Browser Window
 ---
 
-import BrowserWindow, {Browser} from "@site/src/components/BrowserWindow";
+import BrowserWindow, {Browser} from "@site/src/app/components/BrowserWindow";
 
-# Browser Window [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/07-Browser-Window.mdx)
+# Browser Window :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/07-Browser-Window.mdx]
 <BrowserWindow url="https://en.wikipedia.org/wiki/Web_browser" browser={Browser.CHROME}>
   ## Web browser
 

content/material/Components-Gallery/08-Material-Design-Icons.mdx

@@ -2,22 +2,22 @@
 sidebar_label: Material Design Icons
 ---
 
-# Material Design Icons (MDI) [@SeeCode](https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/08-Material-Design-Icons.mdx)
-Using the `:mdi-<material-icon-name>:` shorthand pattern in a plain text paragraph (that is, not inside an inline code
+# Material Design Icons (MDI) :seeCode[https://github.com/SilasBerger/teaching-website/blob/main/content/material/Components-Gallery/08-Material-Design-Icons.mdx]
+Using the `:mdi[<mdi-icon-name>]` text directive in a plain text paragraph (that is, not inside an inline code
 or similar element), we can conveniently include Material Design icons within our MDX pages.
 
 Here are some examples:
 
 | Shorthand                          |           Yields icon            |
 |------------------------------------|:--------------------------------:|
-| `:mdi-google-chrome:`              |       :mdi-google-chrome:        |
-| `:mdi-microsoft-edge:`             |       :mdi-microsoft-edge:       |
-| `:mdi-apple-safari:`               |        :mdi-apple-safari:        |
-| `:mdi-firefox:`                    |          :mdi-firefox:           |
-| `:mdi-lightbulb:`                  |         :mdi-lightbulb:          |
-| `:mdi-alarm:`                      |           :mdi-alarm:            |
-| `:mdi-heart-outline:`              |       :mdi-heart-outline:        |
-| `:mdi-application-braces-outline:` | :mdi-application-braces-outline: |
-| `:mdi-language-python:`            |      :mdi-language-python:       |
+| `:mdi[google-chrome]`              |       :mdi[google-chrome]        |
+| `:mdi[microsoft-edge]`             |       :mdi[microsoft-edge]       |
+| `:mdi[apple-safari]`               |        :mdi[apple-safari]        |
+| `:mdi[firefox]`                    |          :mdi[firefox]           |
+| `:mdi[lightbulb]`                  |         :mdi[lightbulb]          |
+| `:mdi[alarm]`                      |           :mdi[alarm]            |
+| `:mdi[heart-outline]`              |       :mdi[heart-outline]        |
+| `:mdi[application-braces-outline]` | :mdi[application-braces-outline] |
+| `:mdi[language-python]`            |      :mdi[language-python]       |
 
 Search the [MDI library on Iconify](https://icon-sets.iconify.design/mdi/) for an icon that suits your needs!

content/material/Components-Gallery/index.[cc].mdx

@@ -1,7 +1,7 @@
 # Komponentengalerie
 Entdecken Sie hier eine Galerie sämtlicher Komponenten, die für diese Unterrichtswebseite zur Verfügung stehen.
 
-:::info Technische Dokumentation
+:::info[Technische Dokumentation]
 Bei diesem Abschnitt handelt es sich um einen Auszug aus der technischen Dokumentation dieses Projekts. Daher sind
 alle Artikel in englischer Sprache verfasst.
 :::

content/material/Components-Gallery/index.mdx

@@ -1,5 +1,5 @@
-import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
-import Tile from "@site/src/components/tiles/Tile";
+import TileGrid, {Layout} from "@site/src/app/components/tiles/TileGrid";
+import Tile from "@site/src/app/components/tiles/Tile";
 
 # Components
 A gallery and development sandbox for React components.

content/material/Microbit/Der-Microbit.gym.mdx

@@ -19,7 +19,7 @@ Der Micro:bit ist eine kompakter _Einplatinencomputer_ - er verfügt also weder
 Maus oder eine Tastatur. Sie verwenden den Micro:bit, indem Sie auf ihrem Laptop ein Programm dafür entwickeln, welches
 Sie anschliessend via USB-Kabel auf das Gerät übertragen.
 
-:::insight Wozu wurde dieser Computer entwickelt?
+:::insight[Wozu wurde der Micro\:bit entwickelt?]
 Der Micro:bit wurde von der BBC (_British Broadcasting Corporation_) entwickelt, damit Menschen von jung bis alt die
 Grundlagen der Programmierung und der Robotik auf spannende, kreative Weise entdecken können.
 :::

content/material/Microbit/Der-Microbit.prim-sek.mdx

@@ -19,7 +19,7 @@ Der Micro:bit ist kein gewöhnlicher Computer, wie du ihn in deinem Alltag finde
 oder Tastatur. Er ist so klein, dass du ihn vielleicht sogar in deiner Faust verstecken kannst! Der Micro:bit ist
 nämlich winziger sogenannter _Einplatinencomputer_.
 
-:::insight Wozu wurde dieser Computer entwickelt?
+:::insight[Wozu wurde der Micro\:bit entwickelt?]
 Der Micro:bit wurde von der BBC (_British Broadcasting Corporation_) entwickelt, damit Menschen von jung bis alt die
 Grundlagen der Programmierung und der Robotik auf spannende, kreative Weise entdecken können.
 :::

content/material/Microbit/Projektideen-Python/01-Health-Points.mdx

@@ -2,5 +2,5 @@
 sidebar_label: Health Points
 ---
 
-# Health Points [@SeeCode](https://github.com/SilasBerger/microbit/tree/main/projects/health-points)
-[@YouTubeVideo](https://youtu.be/XqjzFh4eGzI)
+# Health Points :seeCode[https://github.com/SilasBerger/microbit/tree/main/projects/health-points]
+::youtube[https://youtu.be/XqjzFh4eGzI]

content/material/Microbit/Projektideen-Python/02-Jukebox.mdx

@@ -2,5 +2,5 @@
 sidebar_label: Jukebox
 ---
 
-# Jukebox [@SeeCode](https://github.com/SilasBerger/microbit/blob/main/projects/jukebox.py)
-[@YouTubeVideo](https://youtu.be/3yAkX2k_DGs)
+# Jukebox :seeCode[https://github.com/SilasBerger/microbit/blob/main/projects/jukebox.py]
+::youtube[https://youtu.be/3yAkX2k_DGs]

content/material/Microbit/Projektideen-Python/03-Maqueen-RC-Car.mdx

@@ -2,5 +2,5 @@
 sidebar_label: Maqueen RC Car
 ---
 
-# Maqueen RC Car [@SeeCode](https://github.com/SilasBerger/microbit/tree/main/projects/maqueen-rc-car)
-[@YouTubeVideo](https://youtu.be/bEWP7llgGec)
+# Maqueen RC Car :seeCode[https://github.com/SilasBerger/microbit/tree/main/projects/maqueen-rc-car]
+::youtube[https://youtu.be/bEWP7llgGec]

content/material/Netzwerke/01-World-Wide-Web/01-Ablauf-Webseitenaufruf.mdx

@@ -10,7 +10,7 @@ In diesem Abschnitt verschaffen wir uns einen Überblick über den Ablauf eines
 Der erste Teilnehmer ist dabei der sogenannte **Browser** - also ein Programm auf dem Computer der Benutzerin, welches
 Webseiten aufrufen und anzeigen kann.
 
-:::definition Browser
+:::definition[Browser]
 **Webbrowser** oder allgemein auch **Browser** (englisch: _to browse_, 'stöbern') sind Computerprogramme zur Darstellung
 von Webseiten im World Wide Web oder allgemein von Dokumenten und Daten.
 :::
@@ -22,7 +22,7 @@ konzeptuell die Partei, die um etwas bittet (in diesem Fall um eine HTML-Datei),
 anbietet. Wir können dabei sowohl den Browser als auch den Computer der Benutzerin als Client bezeichnen - im Prinzip
 sogar die Benutzerin selbst.
 
-:::definition Client und Server
+:::definition[Client und Server]
 - Ein **Client** ist ein Programm oder ein Gerät, das Dienste von einem _Server_ abruft. Ein _Browser_ ist also ein
 Beispiel für einen Client.
 - Ein **Server** ist ein Programm oder Gerät, das auf die Kontaktaufnahme eines _Clients_ wartet, um eine bestimmte
@@ -45,7 +45,7 @@ finden Sie im [nächsten Abschnitt](./02-Http-Status-Codes.mdx).
 
 ![HTTP-Webseitenaufruf, Schritt 2: Antwort (Response)](img/http-response.png)
 
-:::definition Payload
+:::definition[Payload]
 In der Datenübertragung ist die **Payload** derjenige Anteil eines Pakets, bei dem es sich um den eigentlichen Inhalt
 der Übertragung handelt. Bei einer _Response_ würde man zum Beispiel die angefragte HTML-Datei als Payload bezeichnen.
 
@@ -59,7 +59,7 @@ erhaltene HTML-Datei nun entgegen und präsentiert deren Inhalt auf dem Bildschi
 ![HTTP-Webseitenaufruf, Schritt 3: Die Webseite ist angekommen](img/http-website-loaded.png)
 
 ***
-:::key Request-Response-Prinzip
+:::key[Request-Response-Prinzip]
 Ein Webseitenaufruf erfolgt nach sogenannten **Request-Resopnse-Prinzip**: Der _Client_ sendet eine
 **Anfrage (Request)** an den _Server_. Diese Anfrage beinhaltet unter anderem Informationen darüber, welche Ressource
 (z.B. welche HTML-Datei) der Client in Anspruch nehmen möchte.
@@ -74,7 +74,7 @@ dieses Request-Response-Prinzips, bestimmt andererseits aber auch, wie diese Anf
 Antwort (Response) auszusehen haben. Solange sich beide Parteien, also Client und Server, an diese Spielregeln halten,
 können wir sicherstellen, dass ein solcher Aufruf ordnungsgemäss funktioniert.
 
-:::definition Protokoll
+:::definition[Protokoll]
 In der Informatik und in der Telekommunikation ist ein **Protokoll** (oder **Kommunikationsprotokoll**) eine
 Vereinbarung, nach der die Datenübertragung zwischen zwei oder mehreren Parteien abläuft.
 :::

content/material/Netzwerke/01-World-Wide-Web/02-Http-Status-Codes.mdx

@@ -1,4 +1,4 @@
-import DefinitionList from "@site/src/components/DefinitionList";
+import DefinitionList from "@site/src/app/components/DefinitionList";
 
 # HTTP Status Codes
 Wie wir im vorherigen Abschnitt gesehen haben, enthält das Antwortpaket nicht nur die gewünschte Ressource
@@ -21,7 +21,7 @@ vermutlich einloggen, oder um die entsprechende Berechtigung fragen. Der Status
 die Benutzerin insbesondere im Fall einer unerwarteten Antwort möglichst genau zu informieren, weshalb es etwas nicht
 geklappt hat.
 
-:::insight Häufig verwendete Status Codes
+:::insight[Häufig verwendete Status Codes]
   <DefinitionList>
     <dt>`301`</dt>
     <dd>`Moved Permanently`</dd>

content/material/Netzwerke/01-World-Wide-Web/03-Anfaenge-des-Web.mdx

@@ -7,12 +7,12 @@
   Bild: [Thomas Stiren, Wikipedia](https://de.wikipedia.org/wiki/World_Wide_Web#/media/Datei:Tim_berners_lee_webserver.jpg).
 :::
 
-:::key Die erste Webseite
+:::key[Die erste Webseite]
 Anfang der 1990er-Jahre veröffentlichte [Tim Berners-Lee](https://de.wikipedia.org/wiki/Tim_Berners-Lee) am CERN in Genf **die erste Webseite der Welt**. Diese
 Seite besteht bis heute unverändert unter http://info.cern.ch/hypertext/WWW/TheProject.html.
 :::
 
-:::insight CERN: Anfänge des World Wide Web
+:::insight[CERN: Anfänge des World Wide Web]
 Mehr Informationen zur Geburt des World Wide Web finden Sie auf dieser [Webseite des CERN](https://home.cern/science/computing/birth-web).
 :::
 
@@ -32,7 +32,7 @@ im Menu auf "Links" → "Follow link":
 
 ![Erster Web Browser: Einem Hyperlink folgen](img/first-browser-follow-hyperlink.png)
 
-:::insight Parallelen
+:::insight[Parallelen]
 Unsere modernen Web Browser wie Google Chrome, Microsoft Edge, Safari und Firefox sind zweifellos viel mächtiger und
 benutzerfreundlicher als der _WorldWideWeb_ Browser von damals. Welche Elemente sind dennoch bis heute erhalten
 geblieben?
@@ -49,6 +49,6 @@ Vision einer weltweiten Vernetzung von Informationen und Geräten ein entscheide
 
 Auch vom line-mode Browser gibt es eine Nachbildung, die Sie [hier ausprobieren](https://line-mode.cern.ch/) können.
 
-:::warning Verfügbarkeit
+:::warning[Verfügbarkeit]
 Die Nachbildung des line-mode Browsers ist leider ab und zu nicht verfügbar.
 :::

content/material/Netzwerke/01-World-Wide-Web/04-Webserver-mit-Xampp.mdx

@@ -31,7 +31,7 @@ Wenn alles funktioniert hat, sollte das Control Panel am Schluss wie folgt ausse
 Um das zu kontrollieren, rufen Sie die Adresse http://127.0.0.1 auf. Es sollte folgende Webseite angezeigt werden:
 ![XAMPP Standard-Homepage im Browser](img/xampp-default-page.png)
 
-:::insight Exkurs: Die Loopback-Adresse
+:::insight[Exkurs: Die Loopback-Adresse]
 Sie haben damit auch gleich eine spezielle IP-Adresse kennengelernt: `127.0.0.1` ist die sogenannte
 **Loopback-Adresse**, auch **Localhost** genannt. Unter dieser Adresse erreicht jedes Gerät immer sich selbst
 (deshalb _Loopback_), unabhängig von der tatsächlichen IP-Adresse, welche dem Gerät im Netzwerk zugewiesen wurde.
@@ -46,7 +46,7 @@ erstellt haben.
 - Unter Windows finden Sie diesen unter `C:\xampp\htdocs`
 - Unter macOS befindet er sich unter `Programme → XAMPP → xamppfiles → htdocs`
 
-:::info Zur Orientierung...
+:::info[Zur Orientierung...]
 Im XAMPP `htdocs`-Ordner finden Sie einige Dateien wie `index.php` und `applications.html`, sowie einige Ordner wie
 `dashboard` und `img`. Wenn Sie diese sehen, dann sind sie am richtigen Ort.
 :::
@@ -59,7 +59,7 @@ Diese Webseite können Sie jetzt im Browser öffnen. Angenommen, Ihre HTML-Datei
 die Adresse [http://127.0.0.1/meine-webseite/webseite.html](http://127.0.0.1/meine-webseite/webseite.html) aufrufen und
 sehen dort Ihr Werk!
 
-:::insight Ausnahme: index.html
+:::insight[Ausnahme: index.html]
 Falls Sie Ihre HTML-Datei `index.html` genannt haben, dann reicht es, wenn Sie die Adresse nur als
 [http://127.0.0.1/meine-webseite/](http://127.0.0.1/meine-webseite/) angeben - der Web Server sucht dann automatisch
 nach einer Datei namens `index.html`.
@@ -74,7 +74,7 @@ dem **Namen ihrer HTML-Datei**. Rufen Sie anschliessend die Adresse
 `http://<IP der Person>/meine-webseite/<Name der HTML-Datei>.html` auf. Dabei ersetzen Sie natürlich die Angaben in
 spitzen Klammern `<>` durch die echten Angaben Ihrer Kollegin oder Ihres Kollegen.
 
-:::info Beispiel
+:::info[Beispiel]
 Angenommen, die IP-Adersse sei `192.168.10.20` und der Name der HTML-Datei sei `website.html`. Dann lautet die
 Adresse dieser Webseite
 [http://192.168.10.20/meine-webseite/website.html](http://192.168.10.20/meine-webseite/website.html).

content/sites/drafts/index.mdx

@@ -1,5 +1,5 @@
-import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
-import Tile from "@site/src/components/tiles/Tile";
+import TileGrid, {Layout} from "@site/src/app/components/tiles/TileGrid";
+import Tile from "@site/src/app/components/tiles/Tile";
 
 # Drafts
 <TileGrid layout={Layout.SMALL_TILES}>