Merge pull request #22 from SilasBerger/feature/shorthands-content-an…

…d-more Fix sync issue, implement special links plugin and usages, add `SeeCodeBadge`, add Micro:bit intro content
SilasBerger · Jan 8, 2024 · 42cb4f3 · 42cb4f3
2 parents e01730f + 8751aec
commit 42cb4f3
Show file tree

Hide file tree

Showing 52 changed files with 545 additions and 167 deletions.
diff --git a/config/scriptsConfigs/teach.scriptsConfigs.json b/config/scriptsConfigs/teach.scriptsConfigs.json
@@ -6,7 +6,9 @@
     "mappings": [
       {"section": "/index.md", "material": "/ScriptLandingPages/teach.gym.mdx"},
       {"section": "Netzwerke", "material": "Netzwerke"},
-      {"section": "Microbit", "material": "Microbit"}
+      {"section": "Microbit/img", "material": "Microbit/img"},
+      {"section": "Microbit/index.mdx", "material": "Microbit/Der-Microbit.gym.mdx"},
+      {"section": "Microbit/01-Projektideen", "material": "Microbit/Projektideen-Python"}
     ]
   },
   "sekundarstufe/medien-und-informatik": {
@@ -15,7 +17,9 @@
     },
     "mappings": [
       {"section": "/index.md", "material": "/ScriptLandingPages/teach.sek.mdx"},
-      {"section": "Microbit", "material": "Microbit"}
+      {"section": "Programmieren-Microbit/img", "material": "Microbit/img"},
+      {"section": "Programmieren-Microbit/index.mdx", "material": "Microbit/Der-Microbit.prim-sek.mdx"},
+      {"section": "Programmieren-Microbit/01-Projektideen-Python", "material": "Microbit/Projektideen-Python"}
     ]
   },
   "primarstufe/medien-und-informatik": {
@@ -24,7 +28,8 @@
     },
     "mappings": [
       {"section": "/index.md", "material": "/ScriptLandingPages/teach.prim.mdx"},
-      {"section": "Microbit", "material": "Microbit"}
+      {"section": "Programmieren-Microbit/img", "material": "Microbit/img"},
+      {"section": "Programmieren-Microbit/index.mdx", "material": "Microbit/Der-Microbit.prim-sek.mdx"}
     ]
   },
   "creative-corner": {

diff --git a/content/material/Components-Gallery/00-Markdown-Features.mdx b/content/material/Components-Gallery/00-Markdown-Features.mdx
@@ -1,8 +1,10 @@
-import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo"
+---
+sidebar_label: Markdown and HTML Features
+---
 
-# Markdown and HTML Features
-These features are part of [standard MDX syntax](https://docusaurus.io/docs/markdown-features) as used by Docusaurus by
-default.
+# 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.
 
 ## Standard features
 ***
@@ -63,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 videoId="bEWP7llgGec" />
+        [@YouTubeVideo](https://youtu.be/bEWP7llgGec)
       </div>
     </details>
   </div>

diff --git a/content/material/Components-Gallery/01-Admonitions.mdx b/content/material/Components-Gallery/01-Admonitions.mdx
@@ -1,4 +1,8 @@
-# Admonitions
+---
+sidebar_label: Admonitions
+---
+
+# 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.
 

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

diff --git a/content/material/Components-Gallery/03-YouTube-Video.mdx b/content/material/Components-Gallery/03-YouTube-Video.mdx
@@ -1,8 +1,29 @@
-import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo"
+---
+sidebar_label: YouTube Video
+---
 
-# YouTube Video
-Videos can be embedded at full width...
-<YouTubeVideo videoId="bEWP7llgGec" />
+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)
+Videos can be embedded at full width:
+[@YouTubeVideo](https://youtu.be/bEWP7llgGec)
 
 ...or scaled down:
-<YouTubeVideo videoId="3yAkX2k_DGs" width="60%" />
+<YouTubeVideo videoUrl="https://youtu.be/3yAkX2k_DGs" width="60%" />
+
+***
+
+:::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)
+```
+
+...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)
+```
+:::
diff --git a/...ry/04-Hero-Image-and-Source-Reference.mdx → ...rial/Components-Gallery/04-Hero-Image.mdx b/...ry/04-Hero-Image-and-Source-Reference.mdx → ...rial/Components-Gallery/04-Hero-Image.mdx
@@ -1,13 +1,14 @@
-import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
-import {Caption} from "@site/src/components/Caption/Caption";
+---
+sidebar_label: Hero Image
+---
 
-# Hero Image
-<HeroContainer>
+# 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)
-</HeroContainer>
-<Caption>
+:::
+:::Caption
   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).
-</Caption>
+:::
 
 🎶 We can be heroes, just for one day.
diff --git a/content/material/Components-Gallery/05-Mermaid-Diagrams.mdx b/content/material/Components-Gallery/05-Mermaid-Diagrams.mdx
@@ -1,4 +1,8 @@
-# Mermaid Diagrams
+---
+sidebar_label: Mermaid Diagrams
+---
+
+# 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).
 

diff --git a/content/material/Components-Gallery/06-Definition-List.mdx b/content/material/Components-Gallery/06-Definition-List.mdx
@@ -1,6 +1,10 @@
+---
+sidebar_label: Definition List
+---
+
 import DefinitionList from "@site/src/components/DefinitionList";
 
-# Definition List
+# 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>

diff --git a/content/material/Components-Gallery/07-Browser-Window.mdx b/content/material/Components-Gallery/07-Browser-Window.mdx
@@ -1,6 +1,10 @@
+---
+sidebar_label: Browser Window
+---
+
 import BrowserWindow, {Browser} from "@site/src/components/BrowserWindow";
 
-# Browser Window
+# 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
 

diff --git a/content/material/Components-Gallery/08-Material-Design-Icons.mdx b/content/material/Components-Gallery/08-Material-Design-Icons.mdx
@@ -1,4 +1,8 @@
-# Material Design Icons (MDI)
+---
+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
 or similar element), we can conveniently include Material Design icons within our MDX pages.
 

diff --git a/content/material/Components-Gallery/index.mdx b/content/material/Components-Gallery/index.mdx
@@ -1,5 +1,5 @@
-import {TileGrid, Layout} from "@site/src/components/tiles/TileGrid/TileGrid";
-import {Tile} from "@site/src/components/tiles/Tile/Tile";
+import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
+import Tile from "@site/src/components/tiles/Tile";
 
 # Components
 A gallery and development sandbox for React components.
diff --git a/content/material/Microbit/01-Projekte-Python.[gym,sek]/01-Health-Points.mdx b/content/material/Microbit/01-Projekte-Python.[gym,sek]/01-Health-Points.mdx
diff --git a/content/material/Microbit/01-Projekte-Python.[gym,sek]/02-Jukebox.mdx b/content/material/Microbit/01-Projekte-Python.[gym,sek]/02-Jukebox.mdx
diff --git a/content/material/Microbit/01-Projekte-Python.[gym,sek]/03-Maqueen-RC-Car.mdx b/content/material/Microbit/01-Projekte-Python.[gym,sek]/03-Maqueen-RC-Car.mdx
diff --git a/content/material/Microbit/Der-Microbit.gym.mdx b/content/material/Microbit/Der-Microbit.gym.mdx
@@ -0,0 +1,38 @@
+---
+sidebar_label: Micro:bit
+---
+
+# Der Micro:bit
+:::Hero
+![Micro:bit in einer Hand](./img/microbit_in_hand.jpeg)
+:::
+:::Caption
+Der Micro:bit: Ein winziger Computer, der sogar in eine Hand passt!
+:::
+
+Dieser Artikel gibt Ihnen einen ersten Einblick in die faszinierende Welt des _Micro:bit_. Mit diesem winzig kleinen
+Computer können Sie Ihre Python-Programmierkenntnisse auf eine spannende neue Plattform übertragen und ganz
+unkompliziert in die Welt der Hardware-Programmierung und Robotik eintauchen!
+
+## Was ist der Micro:bit?
+Der Micro:bit ist eine kompakter _Einplatinencomputer_ - er verfügt also weder über einen Bildschirm, noch über eine
+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?
+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.
+:::
+
+## Was sind seine Anwendungsmöglichkeiten?
+Obwohl der Micro:bit klein ist, bietet er vielfältige Einsatzmöglichkeiten als Plattform. Hier sind einige Dinge, die
+Sie mit diesem kleinen Kraftpaket realisieren können:
+- **Licht und Farben:** Nutzen Sie die eingebauten LEDs, um Muster, Animationen und sogar Nachrichten zu erstellen.
+  Tauchen Sie ein in die Welt der visuellen Kreationen!
+- **Bewegung und Beschleunigung:** Verwenden Sie die integrierten Sensoren, um Bewegungen zu erfassen und Ihre eigenen
+  Bewegungssteuerungen für den Micro:bit als Plattform zu programmieren. Der Micro:bit setzt Ihre Bewegungen in
+  aufregende Aktionen um!
+- **Musik und Töne:** Ja, Sie können sogar Musik mit dem Micro:bit als Plattform kreieren! Programmieren Sie eigene
+  Melodien und entdecken Sie, wie Sie Klänge erzeugen können.
+- **Spiele programmieren:** Entwickeln Sie Ihre eigenen Spiele! Der Micro:bit als Plattform erlaubt es Ihnen, Ihrer
+  Fantasie freien Lauf zu lassen und eigene interaktive Spiele zu programmieren.
diff --git a/content/material/Microbit/Der-Microbit.prim-sek.mdx b/content/material/Microbit/Der-Microbit.prim-sek.mdx
@@ -0,0 +1,39 @@
+---
+sidebar_label: Programmierem mit Micro:bit
+---
+# Der Micro:bit: Dein Einstieg in die spannende Welt der Programmierung!
+:::Hero
+  ![Micro:bit in einer Hand](./img/microbit_in_hand.jpeg)
+:::
+:::Caption
+  Der Micro:bit Microcontroller ist so klein, dass er gut in eine Hand passt!
+:::
+
+Dieser Artikel gibt dir einen ersten Einblick in die faszinierende Welt des _Micro:bit_, eines kleinen Computers, der
+dich unkompliziert und kreativ an die Grundlagen der Programmierung heranführt. Selbst wenn du bisher keine Erfahrung
+mit dem Programmieren hast und nur grundlegende ICT-Kenntnisse besitzt, kannst du ganz entspannt sein – der Micro:bit
+ist der ideale Begleiter für deinen ersten Ausflug in die Welt _Codens_.
+
+## Was ist der Micro:bit?
+Der Micro:bit ist kein gewöhnlicher Computer, wie du ihn in deinem Alltag findet. Er hat weder Maus, noch Bildschirm
+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?
+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.
+:::
+
+## Was kann man damit anstellen?
+Der Micro:bit mag klein erscheinen, aber seine Möglichkeiten sind riesig! Hier sind nur einige spannende Dinge, die du
+mit diesem kleinen Kraftpaket machen kannst:
+- **Licht und Farben:** Der Micro:bit verfügt über eingebaute LEDs, mit denen du Muster, Animationen und sogar
+  Nachrichten erstellen kannst. Macht deine eigenen leuchtenden Kreationen!
+- **Bewegung und Beschleunigung:** Mit den integrierten Sensoren kannst du Bewegungen erkennen und deine eigenen
+  Bewegungssteuerungen programmieren. Der Micro:bit wird deine Bewegungen in aufregende Aktionen umsetzen!
+- **Musik und Töne:** Ja, du kannst mit dem Micro:bit sogar Musik machen! Programmiert deine eigenen Melodien und
+  entdecke, wie du Klänge erzeugen kannst.
+- **Spiele programmieren:** Dein erstes eigenes Spiel erstellen? Mit dem Micro:bit ist das problemlos möglich! Lass
+  deiner Fantasie freien Lauf und programmiere deine eigenen interaktiven Spiele.
+
+
diff --git a/content/material/Microbit/Projektideen-Python/01-Health-Points.mdx b/content/material/Microbit/Projektideen-Python/01-Health-Points.mdx
@@ -0,0 +1,6 @@
+---
+sidebar_label: Health Points
+---
+
+# Health Points [@SeeCode](https://github.com/SilasBerger/microbit/tree/main/projects/health-points)
+[@YouTubeVideo](https://youtu.be/XqjzFh4eGzI)
diff --git a/content/material/Microbit/Projektideen-Python/02-Jukebox.mdx b/content/material/Microbit/Projektideen-Python/02-Jukebox.mdx
@@ -0,0 +1,6 @@
+---
+sidebar_label: Jukebox
+---
+
+# Jukebox [@SeeCode](https://github.com/SilasBerger/microbit/blob/main/projects/jukebox.py)
+[@YouTubeVideo](https://youtu.be/3yAkX2k_DGs)
diff --git a/content/material/Microbit/Projektideen-Python/03-Maqueen-RC-Car.mdx b/content/material/Microbit/Projektideen-Python/03-Maqueen-RC-Car.mdx
@@ -0,0 +1,6 @@
+---
+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)
diff --git a/...Projekte-Python.[gym,sek]/index.[gym].mdx → ...robit/Projektideen-Python/index.[gym].mdx b/...Projekte-Python.[gym,sek]/index.[gym].mdx → ...robit/Projektideen-Python/index.[gym].mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_label: Projekte mit Python
+sidebar_label: Projektideen
 ---
 
 # Micro:bit-Projekte mit Python

diff --git a/...Projekte-Python.[gym,sek]/index.[sek].mdx → ...robit/Projektideen-Python/index.[sek].mdx b/...Projekte-Python.[gym,sek]/index.[sek].mdx → ...robit/Projektideen-Python/index.[sek].mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_label: Projekte mit Python
+sidebar_label: Projektideen mit Python
 ---
 
 # Micro:bit-Projekte mit Python

diff --git a/content/material/Microbit/index.[gym].mdx b/content/material/Microbit/index.[gym].mdx
diff --git a/content/material/Microbit/index.[prim,sek].mdx b/content/material/Microbit/index.[prim,sek].mdx
diff --git a/content/material/Netzwerke/01-World-Wide-Web/03-Anfaenge-des-Web.mdx b/content/material/Netzwerke/01-World-Wide-Web/03-Anfaenge-des-Web.mdx
@@ -1,14 +1,11 @@
-import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
-import {Caption} from "@site/src/components/Caption/Caption";
-
 # Die Anfänge des World Wide Web erkunden
-<HeroContainer>
+:::Hero
   ![Der erste Webserver vom Tim Berners-Lee am CERN](img/first-web-server.jpg)
-</HeroContainer>
-<Caption>
+:::
+:::Caption
   Der erste Webserver vom Tim Berners-Lee am [CERN](https://home.cern/science/computing/birth-web).
   Bild: [Thomas Stiren, Wikipedia](https://de.wikipedia.org/wiki/World_Wide_Web#/media/Datei:Tim_berners_lee_webserver.jpg).
-</Caption>
+:::
 
 :::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

diff --git a/content/material/Netzwerke/01-World-Wide-Web/04-Webserver-mit-Xampp.mdx b/content/material/Netzwerke/01-World-Wide-Web/04-Webserver-mit-Xampp.mdx
@@ -1,5 +1,3 @@
-import {Caption} from "@site/src/components/Caption/Caption"
-
 # Den Laptop zum Web Server verwandeln
 Sie haben bereits mit HTML und CSS gearbeitet und eine eigene Webseite erstellt? Super! In diesem Abschnitt lernen Sie,
 wie Sie Ihren Laptop zu einem Web Server verwandeln, damit Ihre Kolleginnen und Kollegen auf Ihre Webseite zugreifen
@@ -19,9 +17,9 @@ ir verwenden dazu eine Software namens XAMPP. Gehen Sie für die Einrichtung von
    jederzeit aus den Windows Start-Menü öffnen.
 
 ![Windows Firewall: Zugriff für private und öffentliche Netzwerke erlauben](img/xampp-windows-firewall.png)
-<Caption>
+:::Caption
   Windows Firewall: Zugriff für private und öffentliche Netzwerke erlauben.
-</Caption>
+:::
 
 ## Web Server starten
 Sobald Sie XAMPP installiert haben, starten Sie im Control Panel das _Apache_-Modul:

diff --git a/content/material/Netzwerke/01-World-Wide-Web/index.mdx b/content/material/Netzwerke/01-World-Wide-Web/index.mdx
@@ -1,11 +1,8 @@
-import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
-import {Caption} from "@site/src/components/Caption/Caption";
-
 # World Wide Web
-<HeroContainer>
+:::Hero
   ![World Wide Web rund um Wikipedia](./img/www-around-wikipedia.png)
-</HeroContainer>
-<Caption>
+:::Hero
+:::Caption
   Das World Wide Web rund um Wikipedia. Quelle:
   [Chris 73, Wikipedia](https://de.wikipedia.org/wiki/World_Wide_Web#/media/Datei:WorldWideWebAroundWikipedia.png).
-</Caption>
+:::
diff --git a/content/sites/drafts/index.mdx b/content/sites/drafts/index.mdx
@@ -1,5 +1,5 @@
-import {TileGrid, Layout} from "@site/src/components/tiles/TileGrid/TileGrid";
-import {Tile} from "@site/src/components/tiles/Tile/Tile";
+import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
+import Tile from "@site/src/components/tiles/Tile";
 
 # Drafts
 <TileGrid layout={Layout.SMALL_TILES}>

diff --git a/content/sites/gbsl/index.mdx b/content/sites/gbsl/index.mdx
@@ -1,5 +1,5 @@
-import {TileGrid, Layout} from "@site/src/components/tiles/TileGrid/TileGrid";
-import {Tile} from "@site/src/components/tiles/Tile/Tile";
+import TileGrid, {Layout} from "@site/src/components/tiles/TileGrid";
+import Tile from "@site/src/components/tiles/Tile";
 
 # GBSL
 <TileGrid layout={Layout.SMALL_TILES}>