Word Cloud added

slides/datastar/components/Words copy.vue

@@ -0,0 +1,42 @@
+<script setup>
+import Vue3WordCloud from 'vue3-word-cloud'
+
+// Example word list — you can make this a prop if you like
+const props = defineProps({
+  words: {
+    type: Array,
+    default: () => [
+      ['SSE', 20],
+      ['No-Build-Step', 21],
+      ['Fat Morph', 20],
+      ['Hypermedia', 19],
+      ['HTMX', 13],
+      ['Idiomorph', 12],
+      ['Architecture Description Record', 14],
+      ['HATEOAS', 18],
+      ['Templating', 12],
+      ['Declarative vs. Imperative', 10],
+      ['Alien Signals', 12],
+      ['Plug-ins', 17],
+      ['Brotli Compression', 20],
+      ['Comforms to Specification', 21],
+      ['Web Components', 14],
+      ['Pro Version', 10],
+      ['Locality of Behavior', 11],
+      ['SDKs', 22],
+      ['Web Sockets', 10],
+      ['Attributes And Actions', 22],
+      ['Datastar', 30],
+    ],
+  },
+})
+</script>
+
+<template>
+  <Vue3WordCloud
+    style="width: 100%; height: 100%"
+    :words="words"
+    :color="([, w]) => (w > 20 ? 'DeepPink' : w > 10 ? 'RoyalBlue' : 'Gray')"
+    font-family="Arial"
+  />
+</template>

slides/datastar/components/Words.vue

@@ -0,0 +1,45 @@
+<script setup>
+import Vue3WordCloud from 'vue3-word-cloud'
+
+// Example word list — you can make this a prop if you like
+const props = defineProps({
+  words: {
+    type: Array,
+    default: () => [
+      ['Server Sent Events', 20],
+      ['No-Build-Step', 21],
+      ['Fat Morph', 18],
+      ['Hypermedia', 19],
+      ['HTMX', 22],
+      ['Idiomorph', 14],
+      ['Architecture Description Record', 14],
+      ['HATEOAS', 14],
+      ['Templating', 17],
+      ['Declarative vs. Imperative', 10],
+      ['Alien Signals', 14],
+      ['Plug-ins', 17],
+      ['Brotli Compression', 20],
+      ['Comforms to Specification', 19],
+      ['Web Components', 14],
+      ['Pro Version', 10],
+      ['Locality of Behavior', 11],
+      ['SDKs', 22],
+      ['Web Sockets', 10],
+      ['Full Stack', 17],
+      ['Attributes And Actions', 22],
+      ['Datastar', 36],
+    ],
+  },
+})
+</script>
+
+<template>
+  <Vue3WordCloud style="width: 100%; height: 100%" :words="words" :color="([, w]) => {
+    if (w > 25) return 'DeepPink'
+    if (w > 20) return 'DarkOrange'
+    if (w > 15) return 'LimeGreen'
+    if (w > 10) return 'DodgerBlue'
+    if (w > 5) return 'Violet'
+    return 'MediumTurquoise'
+  }" font-family="Arial" />
+</template>

slides/datastar/package.json

@@ -11,6 +11,7 @@
     "@slidev/cli": "^52.2.5",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue3-word-cloud": "^1.0.4"
   }
 }

slides/datastar/pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       vue:
         specifier: ^3.5.22
         version: 3.5.22(typescript@5.9.3)
+      vue3-word-cloud:
+        specifier: ^1.0.4
+        version: 1.0.4(vue@3.5.22(typescript@5.9.3))
 
 packages:
 
@@ -2646,6 +2649,11 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-word-cloud@1.0.4:
+    resolution: {integrity: sha512-wGHVW6qu7Nt2+vT1McQkufKOCa+MqWPNQFuFEUVFuoai5CVCZclEozv8bKuhwOVJbCLCaVkNocWJ9Hi/HfTCVQ==}
+    peerDependencies:
+      vue: ^3.x
+
   vue@3.5.22:
     resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
     peerDependencies:
@@ -5868,6 +5876,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
 
+  vue3-word-cloud@1.0.4(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
   vue@3.5.22(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.22

slides/datastar/slides.md

@@ -123,7 +123,7 @@ transition: fade-out
 
 ### Finding my combination of web technologies for a minimal viable web application.
 
-<div class="mt-10"/>
+<div class="mt-10"/>  v
 
 - Part 1: The Database: SQLite
 - Part 2: The No-ORM ORM - A very simple Data Abstraction Layer.
@@ -153,6 +153,8 @@ Since everybody knows SQLite, today just a few highlights:
 - It's CTEs make SQL Turing complete.
 - The SQLite CLI can be used to execute "SQL-scripts". See demo.
 
+\* It lacks features essential for a client-server environment, primarily multi-user concurrent write access, built-in security and user management, and some advanced data types.
+
 <div class="mt-40"/>
 
 <div> * from my pov and for my needs and purposes</div>
@@ -167,7 +169,7 @@ transition: fade-out
 
 Features:
 - Simplified Database Lifecycle Management.
-- Generic Data Handling.
+- A 'Record' Data Type for Generic Data Handling.
 - High-Level CRUD Operations.
 - Fluent Transaction API.
 - Abstraction and Safety.
@@ -202,6 +204,9 @@ transition: fade-out
 
 # Part 4: Datastar
 
+## Build reactive web apps that stand the test of time
+Datastar is a lightweight framework for building everything from simple sites to real-time collaborative web apps.
+
 <div class="mt-10"/>
 
 Quote Gillian Delany: 
@@ -221,6 +226,10 @@ ADR, core+plugins, Signals, Ideomorph, Core-Engine, Plug-ins, SSE,
 You have to control the backend, Templating, HTMX, Hypermedia, Hateoas, 
 Locality of behaviour, 
 Declarative vs. Imperative, DS conforms strictly to the web's specs.
+---
+class: default
+---
+<Words />
 
 ---
 class: default