45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<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> |