feat(docs): add Figma link support to examples

Add support for displaying Figma design links in example
components. Examples can now include an example-meta block
with a figma URL that will be displayed as an action button
in the example toolbar.

- Add exampleMeta computed property to parse meta data
- Add figma icon alias to vuetify plugin
- Add view-in-figma i18n translation
- Add example-meta block support in vite config
- Add example-meta to v-btn readonly example

Author: juanjcardona13

packages/docs/src/components/examples/Example.vue

@@ -196,6 +196,19 @@
     set: val => _theme.value = val,
   })
 
+  const exampleMeta = computed<Record<string, any>>(() => {
+    const meta = (component.value as any)?.exampleMeta
+
+    if (!meta) return {}
+
+    try {
+      return JSON.parse(meta)
+    } catch (e) {
+      console.error('Invalid example meta for', props.file, e)
+      return {}
+    }
+  })
+
   const playgroundLink = computed(() => {
     if (!isLoaded.value || isError.value) return null
 
@@ -209,6 +222,10 @@
     )
   })
 
+  const figmaLink = computed(() => {
+    return exampleMeta.value.figma ?? null
+  })
+
   const actions = computed(() => [
     {
       icon: theme.value === 'dark' ? 'mdi-white-balance-sunny' : 'mdi-weather-night',
@@ -222,6 +239,13 @@
       target: '_blank',
       hide: xs.value,
     },
+    {
+      icon: '$figma',
+      path: 'view-in-figma',
+      href: figmaLink.value,
+      target: '_blank',
+      hide: xs.value || !figmaLink.value,
+    },
     {
       icon: 'mdi-github',
       path: 'view-in-github',

packages/docs/src/examples/v-btn/misc-readonly.vue

@@ -70,3 +70,9 @@
 
   const isSubscriber = shallowRef(false)
 </script>
+
+<example-meta lang="json">
+  {
+    "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=1489-93848&t=igC9QPO7ZOgBrTij-4"
+  }
+</example-meta>

packages/docs/src/i18n/messages/en.json

@@ -138,6 +138,7 @@
   "discord": "Discord",
   "done": "All done",
   "edit-in-playground": "Edit in Vuetify Playground",
+  "view-in-figma": "View in Figma",
   "edit-this-page": "Edit this page on",
   "edit": "Edit",
   "enable-banners": "Enable banners",

packages/docs/src/plugins/vuetify.ts

@@ -114,7 +114,16 @@ export function installVuetify (app: App) {
           },
         },
       },
-      aliases,
+      aliases: {
+        ...aliases,
+        figma: [
+          ['M11.667 2H8.333a3.333 3.333 0 1 0 0 6.667h3.334z', 0.8],
+          ['M11.667 8.667H8.333a3.333 3.333 0 0 0 0 6.666h3.334z', 0.6],
+          ['M18.333 12a3.333 3.333 0 1 1-6.667 0a3.333 3.333 0 0 1 6.667 0', 1],
+          ['M8.333 15.334h3.334v3.333a3.333 3.333 0 1 1-3.334-3.334', 0.4],
+          ['M11.666 2h3.333a3.333 3.333 0 1 1 0 6.667h-3.333z', 1],
+        ],
+      },
     },
     theme: {
       themes: {

packages/docs/vite.config.mts

@@ -293,6 +293,7 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
         transform (code, id) {
           const type = id.includes('vue&type=playground-resources') ? 'playgroundResources'
             : id.includes('vue&type=playground-setup') ? 'playgroundSetup'
+            : id.includes('vue&type=example-meta') ? 'exampleMeta'
             : null
           if (!type) return