Merge pull request #55 from GBSL-Informatik/feature/remark-media-codepen

feature/remark-media-codepen

docs/Komponentengalerie/remark-media/audio.mdx

@@ -0,0 +1,32 @@
+---
+page_id: 41c6a9c0-61fd-4c97-9375-936f552de079
+---
+
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::audio
+
+Bindet eine lokale Audio-Datei ein.
+
+```mdx
+::audio[./assets/sound.mp3]
+@by [KAM HESARI - Chill](https://freemusicarchive.org/music/kam-hesari/single/chill-3/)
+```
+
+<BrowserWindow>
+::audio[./assets/sound.mp3]
+@by [KAM HESARI - Chill](https://freemusicarchive.org/music/kam-hesari/single/chill-3/)
+</BrowserWindow>
+
+## Optionen
+
+css Eigenschaften
+: Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das Video angewendet werden.
+
+```mdx
+::audio[./assets/sound.mp3]{marginLeft=auto marginRight=auto display=block}
+```
+
+<BrowserWindow>
+::audio[./assets/sound.mp3]{marginLeft=auto marginRight=auto display=block}
+</BrowserWindow>

docs/Komponentengalerie/remark-media/circuitverse.mdx

@@ -0,0 +1,38 @@
+---
+page_id: 41c6a9c0-61fd-4c97-9375-936f552de079
+---
+
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::circuitverse
+
+Bindet einen [Circuitverse](https://circuitverse.org/) Schaltkreis ein.
+
+```mdx
+::circuitverse[https://circuitverse.org/simulator/embed/rothe-inverter]
+```
+
+<BrowserWindow>
+::circuitverse[https://circuitverse.org/simulator/embed/rothe-inverter]
+</BrowserWindow>
+
+## Optionen
+
+`height`
+: Höhe des iframes.
+: Standardmässig auf __315px__ gesetzt.
+: z.B. `height=200px`
+`width`
+: Breite des iframes.
+: Standardmässig auf __100%__ gesetzt.
+css Eigenschaften
+: Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das iframe angewendet werden.
+
+
+```mdx
+::circuitverse[https://circui...]{width=300px height=200px border="2px solid red"}
+```
+
+<BrowserWindow>
+::circuitverse[https://circuitverse.org/simulator/embed/rothe-inverter]{width=300px height=200px border="2px solid red"}
+</BrowserWindow>

docs/Komponentengalerie/remark-media/codepen.mdx

@@ -0,0 +1,55 @@
+---
+page_id: 41c6a9c0-61fd-4c97-9375-936f552de079
+---
+
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::codepen
+
+Bindet ein [Codepen](https://codepen.io/) ein.
+
+```mdx
+::codepen[https://codepen.io/lebalz/pen/PwYoOBK]
+```
+
+<BrowserWindow>
+::codepen[https://codepen.io/lebalz/pen/PwYoOBK]
+</BrowserWindow>
+
+:::note[URL]
+Es dürfen jeweils nur `codepen.io/user/embed/*` URLs verwendet werden, auf codepen.io wird allerdings die URL `codepen.io/<user>/pen/*` verwendet. Aus den __pen__ URLs wird automatisch die korrekte __embed__ URL generiert.
+:::
+
+## Optionen
+
+`editable`
+: Erlaubt das Bearbeiten des Codepens.
+: Standardmässig `true`.
+: z.B. `editable=false`
+`theme`
+: Wählt das Theme des Codepens.
+: Standardmässig nicht gesetzt.
+: z.B. `theme=dark` oder `theme=light`
+`defaultTab`
+: Wählt die Standard-Tabs des Codepens.
+: Standardmässig `result`.
+: z.B. `defaultTab=html,result` oder `defaultTab=css,js`
+`height`
+: Höhe des iframes.
+: Standardmässig auf __500px__ gesetzt.
+: z.B. `height=200px`
+`width`
+: Breite des iframes.
+: Standardmässig auf __100%__ gesetzt.
+: z.B. `width=200px`
+css Eigenschaften
+: Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das iframe angewendet werden.
+
+
+```mdx
+::codepen[https://codepen.io/lebalz/pen/PwYoOBK]{editable=false theme=light defaultTab=html,result height=300px}
+```
+
+<BrowserWindow>
+::codepen[https://codepen.io/lebalz/pen/PwYoOBK]{editable=false theme=light defaultTab=html,result height=300px}
+</BrowserWindow>

docs/Komponentengalerie/remark-media/index.mdx

@@ -0,0 +1,32 @@
+---
+page_id: 117c8fba-9e80-4400-944d-050129aa9fe5
+---
+import DocCardList from '@theme/DocCardList';
+
+# Remark Media
+
+Das Remark-Media Plugin hilft, iframes einfach einzubinden:
+
+```mdx
+::<typ>[url]{optionen}
+```
+
+<DocCardList/>
+
+## Installation
+
+:::info[Code]
+- `src/plugins/remark-media`
+:::
+
+:::info[`docusaurus.config.ts`]
+
+```ts
+import mediaPlugin from './src/plugins/remark-media/plugin';
+
+const REMARK_PLUGINS = [
+    /* ... */
+    mediaPlugin,
+];
+```
+:::

docs/Komponentengalerie/remark-media/learningapps.mdx

@@ -0,0 +1,37 @@
+---
+page_id: 41c6a9c0-61fd-4c97-9375-936f552de079
+---
+
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::learningapps
+
+Bindet eine [Learning-App](https://learningapps.org/) ein.
+
+```mdx
+::learningapps[https://learningapps.org/7863213]
+```
+
+<BrowserWindow>
+::learningapps[https://learningapps.org/7863213]
+</BrowserWindow>
+
+## Optionen
+`height`
+: Höhe des iframes.
+: Standardmässig auf __500px__ gesetzt.
+: z.B. `height=200px`
+`width`
+: Breite des iframes.
+: Standardmässig auf __100%__ gesetzt.
+: z.B. `width=200px`
+css Eigenschaften
+: Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das iframe angewendet werden.
+
+```mdx
+::learningapps[https://learningapps.org/7863213]{width=300px height=200px border="2px solid red"}
+```
+
+<BrowserWindow>
+::learningapps[https://learningapps.org/7863213]{width=300px height=200px border="2px solid red"}
+</BrowserWindow>

docs/Komponentengalerie/remark-media/video.mdx

@@ -0,0 +1,49 @@
+---
+page_id: 41c6a9c0-61fd-4c97-9375-936f552de079
+---
+
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::video
+
+Fügt ein lokales Video ein.
+
+```mdx
+::video[./assets/yogi-bear.mp4]
+```
+
+<BrowserWindow>
+::video[./assets/yogi-bear.mp4]
+</BrowserWindow>
+
+## Optionen
+`autoplay`
+: Startet das Video automatisch.
+: Standardmässig `false`.
+: z.B. `autoplay`
+`muted`
+: Schaltet den Ton des Videos stumm.
+: Standardmässig `false`.
+: z.B. `muted`
+`loop`
+: Startet das Video automatisch neu, wenn es beendet ist.
+: Standardmässig `false`.
+: z.B. `loop`
+`height`
+: Höhe des Videos.
+: z.B. `height=200px`
+`width`
+: Breite des Videos.
+: Standardmässig auf die natürliche Breite des Videos gesetzt (wobei `max-width=100%` gesetzt wird).
+: z.B. `width=200px`
+css Eigenschaften
+: Es können beliebige css-Eigenschaften in Form `eigenschaft=wert` angegeben werden, die auf das Video angewendet werden.
+
+
+```mdx
+::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red"}
+```
+
+<BrowserWindow>
+::video[./assets/yogi-bear.mp4]{width=300px height=200px muted autoplay loop border="2px solid red"}
+</BrowserWindow>

docs/Komponentengalerie/remark-media/youtube.mdx

@@ -0,0 +1,35 @@
+---
+page_id: 9492f5bd-6e5d-403d-ad01-a9e1ba83d2e7
+---
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# ::youtube
+
+Fügt ein YouTube-Video ein.
+
+```mdx
+::youtube[https://www.youtube.com/embed/QPZ0pIK_wsc?si=fP8L8fYQ-TYgYwUe]
+```
+
+<BrowserWindow>
+::youtube[https://www.youtube.com/embed/QPZ0pIK_wsc?si=fP8L8fYQ-TYgYwUe]
+</BrowserWindow>
+
+## Optionen
+
+`height`
+: Höhe des Videos.
+: Standardmässig nicht gesetzt, dann wird das __16 / 9__ Breitbildformat verwendet.
+: z.B. `height=200px`
+`width`
+: Breite des Videos, wobei die `max-width` standardmässig auf `100%` gesetzt ist.
+: z.B. `width=200px`
+
+
+```mdx
+::youtube[https://www.youtube...]{width=300px height=200px}
+```
+
+<BrowserWindow>
+::youtube[https://www.youtube.com/embed/QPZ0pIK_wsc?si=fP8L8fYQ-TYgYwUe]{height=200px width=300px}
+</BrowserWindow>