feat: ArrowDraw, a handdrawn arrow svg

This is a handdrawn arrow in svg.  It can be colored.  This add a new metho to layoutHelper.ts which can look up the hex code for certain tailwind like colors like red-400.

Author: gureckis

components/ArrowDraw.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue'
+import { resolveColor } from '../layoutHelper'
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000',
+  },
+  width: {
+    type: String,
+    default: '140px', // Default width in pixels
+  },
+})
+
+const colorFill = computed(() => resolveColor(props.color))
+</script>
+
+<template>
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 196 73"
+    style="enable-background: new 0 0 196 73"
+    xml:space="preserve"
+    :width="width"
+  >
+    <path
+      class="st0"
+      d="M171.2,37.2c-12.8,0-25.6-0.9-38.3,0.2c-38.7,3.1-77.3,5.6-116.1,4.8c-2.5,0-5.1,0.4-7.5-0.1
+	c-1.7-0.4-3.2-1.9-4.8-2.9c1.6-1.3,3.1-3.6,4.8-3.7c7-0.4,14-0.2,21-0.2c14.6,0,29.2,0.4,43.9,0c13.1-0.4,26.2-1.5,39.3-2.4
+	c18.2-1.3,36.4-2.7,54.6-4c0.4,0,0.8-0.3,1.8-0.6c-5.6-5.8-12.3-8-19.5-9.4c-1.3-0.3-2.6-0.5-3.8-0.9c-3.5-1.1-5.7-3.4-4.5-7.1
+	c1.2-3.7,4.6-3.7,7.5-2.5c7.4,2.9,14.8,5.9,22,9.2c4.4,2,8.6,4.4,12.7,6.9c4.6,2.8,5.1,6.7,0.9,10.1c-7.1,5.6-14.5,10.8-21.6,16.4
+	c-5.2,4.1-9.9,8.7-15,12.8c-1.6,1.3-3.8,1.7-5.7,2.5c0-2.4-1-5.7,0.2-7c4.3-4.6,9.1-8.7,14-12.6C161.8,43.1,166.8,40.1,171.2,37.2z"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.st0 {
+  fill: v-bind(colorFill);
+}
+</style>

docs/.vitepress/config.js

@@ -60,6 +60,7 @@ export default defineConfig({
               { text: 'CreditScroll', link: '/components/creditscroll' },
               { text: 'QRCode', link: '/components/qrcode' },
               { text: 'Kawaii', link: '/components/kawaii' },
+              { text: 'ArrowDraw', link: '/components/arrowdraw' },
               { text: 'ArrowHeads', link: '/components/arrowheads' },
             ],
           },

docs/.vitepress/theme/index.js

@@ -12,6 +12,7 @@ import StickyNote from '../../../components/StickyNote.vue'
 import QrcodeVue from 'qrcode.vue'
 import SpeechBubble from '../../../components/SpeechBubble.vue'
 
+import ArrowDraw from '../../../components/ArrowDraw.vue'
 import BackPack from '../../../components/vue3-kawaii/components/backpack/BackPack.vue'
 import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
 import Cat from '../../../components/vue3-kawaii/components/cat/Cat.vue'
@@ -37,6 +38,7 @@ export default {
     app.component('StickyNote', StickyNote)
     app.component('QRCode', QrcodeVue)
     app.component('SpeechBubble', SpeechBubble)
+    app.component('ArrowDraw', ArrowDraw)
     app.component('BackPack', BackPack)
     app.component('Browser', Browser)
     app.component('Cat', Cat)

docs/components.md

@@ -18,6 +18,8 @@ The current components are:
 
 - [Email](/components/email) - formats email addresses
 
+- [ArrowDraw](/components/arrowdraw) - draws a hand-drawn looking arrow
+
 - [ArrowHeads](/components/arrowheads) - draws a bunch of arrows pointing at a central place. Useful for drawing attention to a particular part of a slide.
 
 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.

layoutHelper.ts

@@ -1,4 +1,41 @@
 import type { CSSProperties } from 'vue'
+import { colors } from '@unocss/preset-mini'
+
+export function resolveColor(colorName: string, defaultColor: string = '#000000'): string {
+  // If the input is already a hex code, return it
+  if (/^#([0-9A-F]{3}){1,2}$/i.test(colorName)) {
+    return colorName
+  }
+
+  // Split the color name into base and shade
+  const [baseColor, shade] = colorName.toLowerCase().split('-')
+
+  // Function to find the color in the colors object
+  function findColor(obj: any, base: string, shade?: string): string | null {
+    if (base in obj) {
+      if (shade && typeof obj[base] === 'object' && shade in obj[base]) {
+        return obj[base][shade]
+      } else if (!shade && typeof obj[base] === 'string') {
+        return obj[base]
+      }
+    }
+
+    for (const value of Object.values(obj)) {
+      if (typeof value === 'object' && value !== null) {
+        const result = findColor(value, base, shade)
+        if (result) return result
+      }
+    }
+
+    return null
+  }
+
+  // Search for the color in the UnoCSS colors object
+  const hexCode = findColor(colors, baseColor, shade)
+
+  // If a valid color is found, return its hex code; otherwise, return the default color
+  return hexCode || defaultColor
+}
 
 /**
  * Resolve urls from frontmatter and append with the base url