add support for playground link

Author: ikushum

packages/docs/src/components/app/Markup.vue

@@ -53,18 +53,18 @@
             <v-btn
               v-if="isHovering"
               :key="icon"
+              :icon="props.openInPlayground ? '$vuetify-play' : '$vuetify-bin'"
               class="text-disabled me-12 mt-2 app-markup-btn position-absolute right-0 top-0"
               density="comfortable"
-              icon="$vuetify-bin"
               size="small"
               v-bind="activatorProps"
               variant="text"
-              @click="bin"
+              @click="openCode"
             />
           </v-fade-transition>
         </template>
 
-        <span>{{ t('open-in-vuetify-bin') }}</span>
+        <span>{{ openInPlayground ? t('open-in-playground') : t('open-in-vuetify-bin') }}</span>
       </v-tooltip>
 
       <div class="pa-4 pe-12">
@@ -107,6 +107,11 @@
       type: Boolean,
       default: true,
     },
+    section: {
+      type: String,
+      default: 'template',
+    },
+    openInPlayground: Boolean,
   })
 
   // Transform inline links in typescript into actual links
@@ -137,7 +142,15 @@
   const className = computed(() => `language-${props.language}`)
   const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
 
-  async function bin () {
+  function openCode () {
+    if (props.openInPlayground) {
+      openPlayground()
+    } else {
+      openBin()
+    }
+  }
+
+  async function openBin () {
     const el = root.value?.$el.querySelector('code')
     const code = props.code || el?.innerText || ''
     const language = props.language || 'markdown'
@@ -148,6 +161,16 @@
     window.open(compressed, '_blank')
   }
 
+  async function openPlayground () {
+    const url = usePlayground([{
+      name: props.section,
+      language: props.language,
+      content: props.code,
+    }])
+
+    window.open(url, '_blank')
+  }
+
   async function copy () {
     const el = root.value?.$el.querySelector('code')
 

packages/docs/src/components/home/Entry.vue

@@ -93,7 +93,11 @@
 
         <v-col class="d-md-block d-none" cols="12" md="6">
           <v-sheet class="rounded-lg bg-surface elevation-10">
-            <AppMarkup :code="code" class="bg-black rounded-lg" />
+            <AppMarkup
+              :code="code"
+              class="bg-black rounded-lg pa-5"
+              open-in-playground
+            />
           </v-sheet>
         </v-col>
       </v-row>
@@ -106,17 +110,15 @@
 </template>
 
 <script setup>
-  const code = `
-      <template>
-        <v-app>
-          <v-container>
-            <v-btn color="primary">
-              Hello Vuetify!
-            </v-btn>
-          </v-container>
-        </v-app>
-      </template>
-    `
+  const code = `<template>
+  <v-app>
+    <v-container>
+      <v-btn color="primary">
+        Hello Vuetify!
+      </v-btn>
+    </v-container>
+  </v-app>
+</template>`
 
   const isCopying = shallowRef(false)
 

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

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