feat: add slide "Client-Side & Server-Side"

Author: toddeTV

assets/excalidraw-drawings/client-side-and-server-side_light.svg

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useNav } from '@slidev/client'
+import { computed } from 'vue'
+import SvgElementFilter from '../SvgElementFilter.vue'
+import mySvgContent from '/assets/excalidraw-drawings/client-side-and-server-side_light.svg?raw'
+
+const { clicks } = useNav()
+
+const elementsToShow = computed<number[] | 'all'>(() => {
+  if (clicks.value >= 7) {
+    return 'all'
+  }
+
+  let res: number[] = []
+  if (clicks.value >= 1) { // container backend
+    res = [...res, 0, 1, 2, 3, 6, 8, 10, 22]
+  }
+  if (clicks.value >= 2) { // container frontend
+    res = [...res, 4, 5, 9]
+  }
+  if (clicks.value >= 3) { // frontend to backend connection
+    res = [...res, 7]
+  }
+  if (clicks.value >= 4) { // content backend
+    res = [...res, 11, 12, 13, 14, 15, 16, 17, 18, 19]
+  }
+  if (clicks.value >= 5) { // content frontend
+    res = [...res, 20, 21, 23, 24, 25, 26, 27, 28, 29]
+  }
+  if (clicks.value >= 6) { // APIs
+    res = [...res, 30]
+  }
+  if (clicks.value >= 7) { // note
+    res = [...res, 31, 32, 33]
+  }
+  return res
+})
+</script>
+
+<template>
+  <SvgElementFilter
+    :display-indices="elementsToShow"
+    svg-class="w-full"
+    :svg-content="mySvgContent"
+  />
+</template>

components/SvgWrapper/ClientSideAndServerSideSvg.vue

@@ -0,0 +1,16 @@
+---
+layout: basic
+---
+
+# Client-Side & Server-Side
+
+<div class="w-full flex justify-center -mt-20">
+  <ClientSideAndServerSideSvg class="w-[90%]" />
+</div>
+
+<!-- dummy only to force the click count on this slide manually -->
+<div v-click="7" />
+
+<!--
+Backend: many languages possible, depends on the Interpreter on the Server.
+-->

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

@@ -75,6 +75,10 @@ src: content/internet-foundation.md
 src: content/osi-layers.md
 ---
 
+---
+src: content/client-side-and-server-side.md
+---
+
 ---
 src: content/need-for-portfolio.md
 ---