feat: add a themeable thumbs up image

Author: gureckis

components/Thumb.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue'
+//import { resolveColor } from '../layoutHelper'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white',
+  },
+  dir: {
+    type: String,
+    default: 'up',
+  },
+  width: {
+    type: String,
+    default: '70px', // Default width in pixels
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const thumbRotation = computed(() => {
+  return props.dir === 'down' ? 'rotate(180deg)' : 'rotate(0deg)'
+})
+
+// const colorFill = computed(() => resolveColor(props.color))
+// const colorEdge = computed(() => resolveColor(props.edge))
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 800 800"
+    :width="width"
+    :style="{ transform: thumbRotation }"
+  >
+    <defs></defs>
+    <g id="bg">
+      <polygon
+        class="cls-1"
+        :class="colorscheme"
+        points="170 433 258 381 374 280 439 200 492 88 530 37 586 69 596 142 584 203 559 256 536 305 546 346 608 363 693 367 745 374 765 409 750 453 775 504 769 549 738 578 743 621 715 664 698 691 681 746 502 766 391 747 280 727 231 713 167 708 140 638 140 471 170 433"
+      />
+    </g>
+    <g id="outline">
+      <path
+        class="cls-2"
+        :class="colorscheme"
+        d="M800,517.4c0-17.4-6-33.6-15.9-46.3-3.9-4.9-8.5-9.2-13.4-13.1,7.8-11.9,12.5-26.1,12.5-41.4,0-42-34-76-76-76h-105.3c-10.4-.5-20.9-1.6-29.3-3.9-8.6-2.2-14.4-5.5-16.9-8.3-4.3-4.9-5.2-8-5.4-13.2,0-4.4,1.3-10.3,4.2-17.1,4.2-10.2,11.6-21.8,19.1-33.1,3.7-5.6,7.5-11.2,10.8-16.8s6.4-11.1,8.7-17.3c7.1-19.8,22.5-55.9,22.5-100,0-18.5-2.7-38.6-10-59.1-6.2-17.6-15.7-31.8-27.8-41.6-12-9.8-26.6-15-41-15-17.2,0-33.9,7.3-46.7,19.9-12.8,12.6-21.8,30.4-25.3,51.7-1.1,7-4.6,19.5-10.3,34.2-8.5,22.2-21.7,50-38.6,77.2-16.8,27.2-37.5,53.8-60.1,73.8-28.7,25.4-56,46.8-79.3,65.6-23.3,19-42.6,34.9-55.9,51.3-2.8,3.6-7.9,7.5-14.2,10.9-9.4,5.1-21.3,8.9-30.6,11.1-4.6,1.1-8.6,1.9-11.4,2.4-.7.1-1.1.2-1.7.3v-8.1H57c-31.5,0-57,25.5-57,57v254.6c0,31.5,25.5,57,57,57h68c21,0,38-17,38-38v-1.9h60.8c8.4,0,25.1,2.5,44.9,6.9,29.9,6.4,67.7,16.3,104.5,25,36.9,8.6,72.4,16,100.4,17,29.8,1.1,51.7,1.6,69.1,1.6,37,0,54-2.3,79.3-5.1h.6c0,0,35.5-5.2,35.5-5.2h.3c36.1-5.9,63.7-37,63.7-74.9s-.6-9.6-1.6-14.2c9.7-4.2,18.6-10.2,25.6-17.8,12.5-13.4,20.2-31.6,20.2-51.4,0-11.4-2.6-22.2-7.1-31.9,24.1-12.6,40.8-37.6,40.8-66.8ZM80.1,713.4c-14.5,0-26.2-11.7-26.2-26.2s11.7-26.2,26.2-26.2,26.2,11.7,26.2,26.2-11.7,26.2-26.2,26.2ZM726.1,554.1c-7.9.5-14.8,5.6-17.3,13.2-2.5,7.5-.3,15.8,5.7,21,8.1,7.1,13,16.7,13,27.8,0,9.7-3.7,18.3-9.8,24.9-6.1,6.6-14.6,10.9-24.1,11.8-6.5.6-12.5,4.5-15.5,10.3-3.1,5.8-3,12.8.2,18.6,3.2,5.7,4.9,11.6,4.9,17.9,0,18.4-13.4,33.4-31,36.4l-34.9,5c-25.9,2.9-39.3,4.8-74.7,4.9-16.7,0-38.2-.5-67.7-1.6-14.8-.5-35.3-3.7-57.9-8.3-33.8-6.9-72.5-16.9-107.1-25.2-17.4-4.2-33.7-7.9-48.2-10.7-14.6-2.8-27.1-4.6-38-4.6h-41.3v-245.8c4.5-1,9.5-2.3,15-4,8.7-2.7,18.3-6.3,27.6-11.3,9.3-5,18.6-11.5,26-20.7,9.2-11.5,27.2-27,50.1-45.5,23-18.6,50.9-40.5,80.5-66.7,35.5-31.4,63.7-73.1,84.3-111.8,10.3-19.4,18.7-38,25-54.4,6.3-16.5,10.4-30.4,12.4-41.7,2.4-14.4,8-24.3,14.2-30.4,6.2-6.1,13-8.6,19.3-8.6,5.4,0,10.8,1.7,16.5,6.2,5.6,4.5,11.3,12.2,15.6,24.2,5.6,16.1,7.8,31.5,7.8,46.2,0,35.1-12.5,65.7-20.2,86.6-1,3-4.2,8.7-8.4,15.3-6.4,10.1-15.2,22.4-22.6,36-7.4,13.6-14.1,28.8-14.2,46.4-.1,13.5,5,28.4,15.9,39.8,10.1,10.7,22.9,16,35.4,19.4,12.7,3.3,25.8,4.6,38,5.1h.8s40.8,0,40.8,0h64.9c20.4,0,37,16.6,37,37.1,0,12.7-6.4,23.8-16.1,30.5-6.2,4.3-9.4,11.8-8.2,19.3,1.3,7.5,6.7,13.5,14,15.6,7.8,2.2,14.7,6.9,19.5,13.1,4.8,6.2,7.6,13.8,7.6,22.4,0,19.6-15.4,35.6-34.9,36.7Z"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.cls-1 {
+  fill: var(--neversink-bg-color);
+  stroke-miterlimit: 10;
+}
+
+.cls-2 {
+  fill: var(--neversink-border-color);
+  stroke-width: 0px;
+}
+</style>

docs/.vitepress/config.js

@@ -62,6 +62,7 @@ export default defineConfig({
               { text: 'Kawaii', link: '/components/kawaii' },
               { text: 'ArrowDraw', link: '/components/arrowdraw' },
               { text: 'ArrowHeads', link: '/components/arrowheads' },
+              { text: 'Thumb', link: '/components/thumb' },
               { text: 'Line', link: '/components/line' },
             ],
           },

docs/.vitepress/theme/index.js

@@ -14,6 +14,7 @@ import SpeechBubble from '../../../components/SpeechBubble.vue'
 
 import ArrowDraw from '../../../components/ArrowDraw.vue'
 import ArrowHeads from '../../../components/ArrowHeads.vue'
+import Thumb from '../../../components/Thumb.vue'
 import Line from '../../../components/Line.vue'
 import BackPack from '../../../components/vue3-kawaii/components/backpack/BackPack.vue'
 import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
@@ -42,6 +43,7 @@ export default {
     app.component('SpeechBubble', SpeechBubble)
     app.component('ArrowDraw', ArrowDraw)
     app.component('ArrowHeads', ArrowHeads)
+    app.component('Thumb', Thumb)
     app.component('Line', Line)
     app.component('BackPack', BackPack)
     app.component('Browser', Browser)

docs/components.md

@@ -22,6 +22,8 @@ The current components are:
 
 - [ArrowHeads](/components/arrowheads) - draws a bunch of arrows pointing at a central place. Useful for drawing attention to a particular part of a slide.
 
+- [Thumb](/components/thumb) - draws a hand with thumb up or down. Useful for signaling agreement or disagreement.
+
 - [Line](/components/line) - draws a straight line (no arrowheads)
 
 Most component can just be included in-line in your markdown. However, in some cases it can make sense to position these components using the `v-drag` directive. For example, the `SpeechBubble` component can be positioned using the `v-drag` directive to place it in a specific location on the slide. This can be useful for creating custom layouts or animations. In that case, it makes sense to keep the component in the [default slot](/layouts#slots) of each layout.

docs/components/thumb.md

@@ -0,0 +1,37 @@
+# Thumb
+
+## Description
+
+Draws a set of illustration of a hand with a thumb. Useful icon but larger than using the slidev icondes.
+
+## `Thumb` component
+
+The Thumbs component has the following props:
+
+- `dir` (optional) the thumb could point up or down
+- `color` (optional) the color scheme of the thumb. the default is 'white'. The best options tend to be the light colors (e.g., `green-light`, `red-light`, `blue-light`)
+- `width` (optional) the initial width of the image. Default is 140px
+
+```md
+<Thumb color='green-light' width="300px" v-drag />
+```
+
+Renders as:
+
+<Thumb color='green-light' width="300px"/>
+
+```md
+<Thumb color="sky-light"  v-drag />
+```
+
+Renders as:
+
+<Thumb color="sky-light" />
+
+```md
+<Thumb color="red-light" dir='down' v-drag />
+```
+
+Renders as:
+
+<Thumb color="red-light" dir='down'/>