feat: create custom image for osi layers

Author: toddeTV

README.md

@@ -128,7 +128,6 @@ _(including images & 3D models; mostly only those requiring attribution)_
 - Image `MK3_NEF_500px-1.png` from [https://help.prusa3d.com/de/product/mk3s](https://help.prusa3d.com/de/product/mk3s).
 - Image `x1Series-main-bg-v1.png` from [https://bambulab.com/de-de/x1](https://bambulab.com/de-de/x1).
 - Image `Math_Lady_meme.jpg` from [https://en.wikipedia.org/wiki/Math_Lady](https://en.wikipedia.org/wiki/Math_Lady).
-- Image `The-7-Layers-of-OSI.png` from [https://insights.profitap.com/osi-7-layers-explained-the-easy-way](https://insights.profitap.com/osi-7-layers-explained-the-easy-way)
 - Model `3D Benchy`/`Benchy` from [https://www.printables.com/model/3161-3d-benchy](https://www.printables.com/model/3161-3d-benchy)
 
 ## License

assets/excalidraw-drawings/osi-layers_light.svg

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import SvgElementFilter from '../SvgElementFilter.vue'
+import mySvgContent from '/assets/excalidraw-drawings/osi-layers_light.svg?raw'
+</script>
+
+<template>
+  <SvgElementFilter
+    display-indices="all"
+    svg-class="w-full"
+    :svg-content="mySvgContent"
+  />
+</template>

components/SvgWrapper/OsiLayersSvg.vue

@@ -4,14 +4,13 @@ layout: basic
 
 # The 7 Layers of OSI
 
-<div class="flex justify-center pt-10">
-    <img
-        v-click
-        class="h-[90%]"
-        src="/assets/The-7-Layers-of-OSI.png"
-    />
+<div class="w-full h-full flex justify-center items-center">
+  <OsiLayersSvg class="w-full" />
 </div>
 
+<!-- dummy only to force the click count on this slide manually -->
+<div v-click="0" />
+
 <!--
 OSI = Open Systems Interconnection