diff --git a/config/scriptsConfigs/teach.scriptsConfigs.json b/config/scriptsConfigs/teach.scriptsConfigs.json index 961fbb77..73c76502 100644 --- 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 index aea344f4..1db69203 100644 --- 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 Details can even be nested...
...and nothing stops you from hiding a YouTube video here, if you want 😎 - + [@YouTubeVideo](https://youtu.be/bEWP7llgGec)
diff --git a/content/material/Components-Gallery/01-Admonitions.mdx b/content/material/Components-Gallery/01-Admonitions.mdx index 9f5ab59c..1d7e7719 100644 --- 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 index 336ee1ff..0262b8b6 100644 --- 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 diff --git a/content/material/Components-Gallery/03-YouTube-Video.mdx b/content/material/Components-Gallery/03-YouTube-Video.mdx index 74bfb861..36f2ae94 100644 --- 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... - +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: - + + +*** + +:::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/content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx b/content/material/Components-Gallery/04-Hero-Image.mdx similarity index 65% rename from content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx rename to content/material/Components-Gallery/04-Hero-Image.mdx index f5423731..79948404 100644 --- a/content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx +++ b/content/material/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 - +# 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) - - +::: +:::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). - +::: 🎶 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 index 6b1e350c..017ebfd2 100644 --- 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 index c97acf2d..3357b0c8 100644 --- 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)
Purpose
Add an _at a glance_ informational header to a page.
diff --git a/content/material/Components-Gallery/07-Browser-Window.mdx b/content/material/Components-Gallery/07-Browser-Window.mdx index a49ee059..e30c2420 100644 --- 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) ## Web browser diff --git a/content/material/Components-Gallery/08-Material-Design-Icons.mdx b/content/material/Components-Gallery/08-Material-Design-Icons.mdx index fe100c38..865f23c1 100644 --- 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-:` 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 index 0c6da9bf..b3c3d3e5 100644 --- 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 deleted file mode 100644 index 3faefcd2..00000000 --- a/content/material/Microbit/01-Projekte-Python.[gym,sek]/01-Health-Points.mdx +++ /dev/null @@ -1,4 +0,0 @@ -import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo" - -# Health Points - 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 deleted file mode 100644 index 35f8534a..00000000 --- a/content/material/Microbit/01-Projekte-Python.[gym,sek]/02-Jukebox.mdx +++ /dev/null @@ -1,4 +0,0 @@ -import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo" - -# Jukebox - 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 deleted file mode 100644 index c6b5094f..00000000 --- a/content/material/Microbit/01-Projekte-Python.[gym,sek]/03-Maqueen-RC-Car.mdx +++ /dev/null @@ -1,4 +0,0 @@ -import { YouTubeVideo } from "@site/src/components/YouTubeVideo/YouTubeVideo" - -# Maqueen RC Car - diff --git a/content/material/Microbit/Der-Microbit.gym.mdx b/content/material/Microbit/Der-Microbit.gym.mdx new file mode 100644 index 00000000..5aae3eec --- /dev/null +++ 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 new file mode 100644 index 00000000..31bf874a --- /dev/null +++ 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 new file mode 100644 index 00000000..8970b14f --- /dev/null +++ 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 new file mode 100644 index 00000000..d4b5e459 --- /dev/null +++ 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 new file mode 100644 index 00000000..eaa55ccf --- /dev/null +++ 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/content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[gym].mdx b/content/material/Microbit/Projektideen-Python/index.[gym].mdx similarity index 87% rename from content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[gym].mdx rename to content/material/Microbit/Projektideen-Python/index.[gym].mdx index 756a338c..73191b9a 100644 --- a/content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[gym].mdx +++ b/content/material/Microbit/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/content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[sek].mdx b/content/material/Microbit/Projektideen-Python/index.[sek].mdx similarity index 86% rename from content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[sek].mdx rename to content/material/Microbit/Projektideen-Python/index.[sek].mdx index 650d6847..539dd4e3 100644 --- a/content/material/Microbit/01-Projekte-Python.[gym,sek]/index.[sek].mdx +++ b/content/material/Microbit/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 deleted file mode 100644 index 727c343a..00000000 --- a/content/material/Microbit/index.[gym].mdx +++ /dev/null @@ -1 +0,0 @@ -# Die Micro:bit-Plattform diff --git a/content/material/Microbit/index.[prim,sek].mdx b/content/material/Microbit/index.[prim,sek].mdx deleted file mode 100644 index bae77a3c..00000000 --- a/content/material/Microbit/index.[prim,sek].mdx +++ /dev/null @@ -1,6 +0,0 @@ -# Der Micro:bit -Der Micro:bit ist ein so kleiner Computer, dass du ihn vielleicht sogar in deiner Faust verstecken kannst. Es ist aber -kein Computer, so wie du ihn kennst: Er hat weder einen Bildschirm, noch eine Tastatur, eine Maus oder ein Touchpad. -Der Micro:bit ist nämlich ein sogenannter _Microcontroller_. - -![Micro:bit in einer Hand](./img/microbit_in_hand.jpeg) 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 index 5feb4756..e42a32f9 100644 --- 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 - +:::Hero ![Der erste Webserver vom Tim Berners-Lee am CERN](img/first-web-server.jpg) - - +::: +:::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). - +::: :::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 index 5261e612..5ac2d262 100644 --- 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 Windows Firewall: Zugriff für private und öffentliche Netzwerke erlauben. - +::: ## 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 index 96916400..12f82760 100644 --- 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 - +:::Hero ![World Wide Web rund um Wikipedia](./img/www-around-wikipedia.png) - - +:::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). - +::: diff --git a/content/sites/drafts/index.mdx b/content/sites/drafts/index.mdx index 08b1a1fe..59ed45f0 100644 --- 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 diff --git a/content/sites/gbsl/index.mdx b/content/sites/gbsl/index.mdx index cc45f34e..cdebccfb 100644 --- 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 diff --git a/content/sites/lerbermatt/index.mdx b/content/sites/lerbermatt/index.mdx index d10ddcd3..ad7d54d5 100644 --- a/content/sites/lerbermatt/index.mdx +++ b/content/sites/lerbermatt/index.mdx @@ -1,5 +1,5 @@ -import {TileGrid} from "@site/src/components/tiles/TileGrid/TileGrid"; -import {Tile} from "@site/src/components/tiles/Tile/Tile"; +import TileGrid from "@site/src/components/tiles/TileGrid"; +import Tile from "@site/src/components/tiles/Tile"; # Lerbermatt diff --git a/content/sites/teach/index.mdx b/content/sites/teach/index.mdx index 612475c9..b9833c8e 100644 --- a/content/sites/teach/index.mdx +++ b/content/sites/teach/index.mdx @@ -1,5 +1,5 @@ -import {TileGrid} from "@site/src/components/tiles/TileGrid/TileGrid"; -import {Tile} from "@site/src/components/tiles/Tile/Tile"; +import TileGrid from "@site/src/components/tiles/TileGrid"; +import Tile from "@site/src/components/tiles/Tile"; # Teach diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 9afd2796..70f86710 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -8,7 +8,9 @@ import * as osPath from "path"; import { Logger } from './src/builder/util/logger'; import remarkMdi from "./src/plugins/remark-mdi"; import remarkFencedBlocks from "./src/plugins/remark-fenced-blocks"; -import {fencedBlocksConfig} from "./src/pluginConfigs/remark-fenced-blocks.plugin-config"; +import {fencedBlocksDefinedKeywords, fencedBlocksConfig} from "./src/pluginConfigs/remark-fenced-blocks.plugin-config"; +import remarkSpecialLinks from "./src/plugins/remark-special-links"; +import {specialLinksConfig} from "./src/pluginConfigs/remark-special-links.plugin-config"; const siteConfig = loadSiteConfig(); Logger.instance.info(`🔧 Building site '${siteConfig.siteId}'`); @@ -16,8 +18,9 @@ Logger.instance.info(`🔧 Building site '${siteConfig.siteId}'`); const scriptRoots = buildScripts(siteConfig.properties.scriptsConfigsFile); Logger.instance.info(`📂 Creating docs plugin roots: [${scriptRoots}]`); + const admonitionConfig = { - keywords: ['danger', 'warning', 'key', 'definition', 'insight', 'tip'], + keywords: fencedBlocksDefinedKeywords(), }; const docsConfigs = scriptRoots.map((scriptRoot, index) => { @@ -31,7 +34,8 @@ const docsConfigs = scriptRoots.map((scriptRoot, index) => { admonitions: admonitionConfig, remarkPlugins: [ remarkMdi, - [remarkFencedBlocks, fencedBlocksConfig] + [remarkFencedBlocks, fencedBlocksConfig], + [remarkSpecialLinks, specialLinksConfig], ] } ]; diff --git a/src/builder/scripts-builder.ts b/src/builder/scripts-builder.ts index 16af45c7..f6d89020 100644 --- a/src/builder/scripts-builder.ts +++ b/src/builder/scripts-builder.ts @@ -11,9 +11,8 @@ import {applyMarkers, applySectionMappings, collectSyncPairs} from "./sync/sync- export function buildScripts(scriptsConfigsFile: string) { const scriptsConfigs = _loadScriptsConfigs(scriptsConfigsFile); - const materialTree = _createMaterialTree(); Object.entries(scriptsConfigs).forEach(([scriptRoot, scriptConfig]: [string, ScriptConfig]) => { - _buildScript(scriptRoot, scriptConfig, materialTree); + _buildScript(scriptRoot, scriptConfig); }); return Object.keys(scriptsConfigs); } @@ -31,8 +30,9 @@ function _createMaterialTree(): SourceNode { return createSourceTree(materialRootPath); } -function _buildScript(scriptRoot: string, scriptConfig: ScriptConfig, materialTree: SourceNode) { +function _buildScript(scriptRoot: string, scriptConfig: ScriptConfig) { Logger.instance.info(`📝 Building script '${scriptRoot}'`); + const materialTree = _createMaterialTree(); const scriptRootPath = osPath.resolve(osPath.join(SCRIPTS_ROOT, scriptRoot)); const scriptTree = createDestTree(scriptRootPath); _synchronizeToScript(materialTree, scriptTree, scriptConfig); diff --git a/src/components/Caption/Caption.tsx b/src/components/Caption/index.tsx similarity index 65% rename from src/components/Caption/Caption.tsx rename to src/components/Caption/index.tsx index bbc02290..363bf57b 100644 --- a/src/components/Caption/Caption.tsx +++ b/src/components/Caption/index.tsx @@ -1,11 +1,11 @@ import {ReactNode} from "react"; -import styles from "./Caption.module.scss"; +import styles from "./styles.module.scss"; export interface Props { children?: ReactNode, } -export const Caption = ({children}: Props) => { +export default ({children}: Props) => { return (
{children} diff --git a/src/components/Caption/Caption.module.scss b/src/components/Caption/styles.module.scss similarity index 100% rename from src/components/Caption/Caption.module.scss rename to src/components/Caption/styles.module.scss diff --git a/src/components/HeroContainer/HeroContainer.tsx b/src/components/HeroContainer/index.tsx similarity index 62% rename from src/components/HeroContainer/HeroContainer.tsx rename to src/components/HeroContainer/index.tsx index 06275be9..4998fec6 100644 --- a/src/components/HeroContainer/HeroContainer.tsx +++ b/src/components/HeroContainer/index.tsx @@ -1,11 +1,11 @@ -import styles from "./HeroContainer.module.scss"; +import styles from "./styles.module.scss"; import {ReactNode} from "react"; export interface Props { children?: ReactNode; } -export const HeroContainer = ({children}: Props) => { +export default ({children}: Props) => { return (
{ children } diff --git a/src/components/HeroContainer/HeroContainer.module.scss b/src/components/HeroContainer/styles.module.scss similarity index 100% rename from src/components/HeroContainer/HeroContainer.module.scss rename to src/components/HeroContainer/styles.module.scss diff --git a/src/components/SeeCodeBadge/index.tsx b/src/components/SeeCodeBadge/index.tsx new file mode 100644 index 00000000..1869c658 --- /dev/null +++ b/src/components/SeeCodeBadge/index.tsx @@ -0,0 +1,16 @@ +import styles from "./styles.module.scss"; +import clsx from "clsx"; + +export interface Props { + url: string; +} + +export default ({url}: Props) => { + return ( + + ); +}; diff --git a/src/components/SeeCodeBadge/styles.module.scss b/src/components/SeeCodeBadge/styles.module.scss new file mode 100644 index 00000000..c00a69f5 --- /dev/null +++ b/src/components/SeeCodeBadge/styles.module.scss @@ -0,0 +1,22 @@ +.badge { + display: inline-block; + vertical-align: middle; + width: fit-content; + border-radius: 2em; + padding: 0.7em 1em; + + color: var(--ifm-color-primary); + font-size: 1rem; + background-color: var(--ifm-breadcrumb-item-background-active); + + cursor: pointer; + transition: scale var(--ifm-transition-fast); + + &:hover { + scale: 105%; + } + + a:hover { + text-decoration: none; + } +} diff --git a/src/components/YouTubeVideo/YouTubeVideo.tsx b/src/components/YouTubeVideo/index.tsx similarity index 59% rename from src/components/YouTubeVideo/YouTubeVideo.tsx rename to src/components/YouTubeVideo/index.tsx index 06470242..445d7551 100644 --- a/src/components/YouTubeVideo/YouTubeVideo.tsx +++ b/src/components/YouTubeVideo/index.tsx @@ -1,16 +1,21 @@ -import styles from "./YouTubeVideo.module.scss"; +import styles from "./styles.module.scss"; export interface Props { - videoId: string, + videoUrl: string, title?: string, width?: string } -export const YouTubeVideo = ({videoId, title, width}: Props) => { +function rewriteUrlToNoCookie(videoUrl: string) { + const url = new URL(videoUrl); + return `https://www.youtube-nocookie.com/embed/${url.pathname}`; +} + +export default ({videoUrl, title, width}: Props) => { return (