wip demo components

docs/.vitepress/theme/components/Demo.vue

@@ -4,7 +4,9 @@ import WrenchScrewdriverIcon from './WrenchScrewdriverIcon.vue'
 
 const props = defineProps({
   link: String,
+  label: String,
 })
+const label = computed(() => props.label || 'Experience the demo')
 </script>
 
 <template>
@@ -13,6 +15,6 @@ const props = defineProps({
     v-if="link"
     class="text-sm inline-flex items-center rounded !no-underline px-2 py-1 leading-none border dark:border-white border-gray-900 hover:bg-gray-900 !text-gray-900 dark:!text-white hover:!text-white dark:hover:bg-white dark:hover:!text-gray-900"
   >
-    <WrenchScrewdriverIcon class="h-4 inline mr-1 dark:stroke-white hover:dark:stroke-white" /> Experience the demo
+    <WrenchScrewdriverIcon class="h-4 inline mr-1 dark:stroke-white hover:dark:stroke-white" /> {{label}}
   </a>
 </template>

readme.md

@@ -31,3 +31,13 @@ Some possible values if they are known (`true`, `false`, `" "` `"on"`, `"off"`,
 After the options, if the field has a lot of options and permutations and you'd like to show more, we can add an `## Examples` block.
 
 Next are all the other things about the field. Maybe it requires some explanation
+
+## Other components
+
+### `Demo`
+
+`label` is optional.
+
+```html
+<Demo link="https://avodemo.com" label="See the demo" />
+```