feat: add scale prop to svg element filter & refactor all SVG file usage

Author: toddeTV

components/SvgElementFilter.vue

@@ -10,6 +10,9 @@ const props = defineProps<{
 
   // A string or array of strings representing CSS classes to be applied to the generated inner SVG element.
   svgClass?: string | string[]
+
+  // An optional scale factor to apply to the SVG. This can be used to resize the SVG.
+  scale?: number
 }>()
 
 const svgContainer = ref(null)
@@ -37,6 +40,9 @@ function processAndFilterSvg() {
   // Create a new SVG element to house the filtered children
   const newSvgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
 
+  const scaleFactor = props.scale || 1
+  newSvgElement.setAttribute('transform', `scale(${scaleFactor})`)
+
   // Copy attributes from the original SVG to the new one (e.g., viewBox, width, height)
   Array.from(svgElement.attributes).forEach((attr) => {
     newSvgElement.setAttribute(attr.name, attr.value)

components/SvgWrapper/ClientSideAndServerSideSvg.vue

@@ -4,6 +4,10 @@ import { computed } from 'vue'
 import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/client-side-and-server-side_light.svg?raw'
 
+const prop = defineProps<{
+  scale?: number
+}>()
+
 const { clicks } = useNav()
 
 const elementsToShow = computed<number[] | 'all'>(() => {
@@ -40,7 +44,7 @@ const elementsToShow = computed<number[] | 'all'>(() => {
 <template>
   <SvgElementFilter
     :display-indices="elementsToShow"
-    svg-class="w-full"
+    :scale="prop.scale"
     :svg-content="mySvgContent"
   />
 </template>

components/SvgWrapper/InternetFoundationSvg.vue

@@ -4,6 +4,10 @@ import { computed } from 'vue'
 import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/internet-foundation_light.svg?raw'
 
+const prop = defineProps<{
+  scale?: number
+}>()
+
 const { clicks } = useNav()
 
 const fonts = [0, 1, 2]
@@ -63,7 +67,7 @@ const elementsToShow = computed<number[] | 'all'>(() => {
 <template>
   <SvgElementFilter
     :display-indices="elementsToShow"
-    svg-class="w-full"
+    :scale="prop.scale"
     :svg-content="mySvgContent"
   />
 </template>

components/SvgWrapper/OsiLayersSvg.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/osi-layers_light.svg?raw'
+
+const prop = defineProps<{
+  scale?: number
+}>()
 </script>
 
 <template>
   <SvgElementFilter
     display-indices="all"
-    svg-class="w-full"
+    :scale="prop.scale"
     :svg-content="mySvgContent"
   />
 </template>

components/SvgWrapper/WhatIsTheWebSvg.vue

@@ -4,6 +4,10 @@ import { computed } from 'vue'
 import SvgElementFilter from '../SvgElementFilter.vue'
 import mySvgContent from '/assets/excalidraw-drawings/Web-Mindmap_light.svg?raw'
 
+const prop = defineProps<{
+  scale?: number
+}>()
+
 const { clicks } = useNav()
 
 const elementsToShow = computed<number[] | 'all'>(() => {
@@ -17,7 +21,7 @@ const elementsToShow = computed<number[] | 'all'>(() => {
 <template>
   <SvgElementFilter
     :display-indices="elementsToShow"
-    svg-class="w-full"
+    :scale="prop.scale"
     :svg-content="mySvgContent"
   />
 </template>

content/client-side-and-server-side.md

@@ -4,8 +4,8 @@ layout: basic
 
 # Client-Side & Server-Side
 
-<div class="w-full flex justify-center -mt-20">
-  <ClientSideAndServerSideSvg class="w-[90%]" />
+<div class="w-full h-full flex justify-center items-center -mt-20">
+  <ClientSideAndServerSideSvg :scale="0.95" />
 </div>
 
 <!-- dummy only to force the click count on this slide manually -->

content/internet-foundation.md

@@ -4,8 +4,8 @@ layout: basic
 
 # Internet Foundation
 
-<div class="w-full flex justify-center -mt-27">
-  <InternetFoundationSvg class="w-full" />
+<div class="w-full h-full flex justify-center items-center -mt-18">
+  <InternetFoundationSvg :scale="0.9" />
 </div>
 
 <!-- dummy only to force the click count on this slide manually -->

content/osi-layers.md

@@ -9,7 +9,7 @@ layout: basic
 </div>
 
 <div class="w-full h-full flex justify-center items-center mt-0">
-  <OsiLayersSvg class="w-[70%]" />
+  <OsiLayersSvg :scale="1" />
 </div>
 
 <!-- dummy only to force the click count on this slide manually -->

content/what-is-the-web.md

@@ -4,8 +4,8 @@ layout: basic
 
 # What is the Web?
 
-<div class="w-full flex justify-center -mt-25">
-  <WhatIsTheWebSvg class="w-full" />
+<div class="w-full h-full flex justify-center items-center -mt-15">
+  <WhatIsTheWebSvg :scale="0.8" />
 </div>
 
 <!-- dummy only to force the click count on this slide manually -->