add support for playground in markup

Author: ikushum

packages/docs/auto-imports.d.ts

@@ -172,6 +172,9 @@ declare global {
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
+  export type { CodeSection } from './src/composables/playground'
+  import('./src/composables/playground')
+  // @ts-ignore
   export type { Category } from './src/stores/app'
   import('./src/stores/app')
   // @ts-ignore

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

@@ -53,18 +53,18 @@
             <v-btn
               v-if="isHovering"
               :key="icon"
+              :icon="needsPlaygroundLink ? '$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>{{ needsPlaygroundLink ? t('open-in-playground') : t('open-in-vuetify-bin') }}</span>
       </v-tooltip>
 
       <div class="pa-4 pe-12">
@@ -97,7 +97,10 @@
 
   const props = defineProps({
     resource: String,
-    code: null,
+    code: {
+      type: [String, Array] as PropType<string | CodeSection[]>,
+      default: '',
+    },
     inline: Boolean,
     language: {
       type: String,
@@ -130,16 +133,35 @@
   const root = ref<ComponentPublicInstance>()
 
   const highlighted = shallowRef('')
-  watchEffect(async () => {
-    highlighted.value = props.code && props.language && Prism.highlight(await props.code, Prism.languages[props.language], props.language)
-  })
 
   const className = computed(() => `language-${props.language}`)
   const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
 
-  async function bin () {
+  const needsPlaygroundLink = computed(() => Array.isArray(props.code))
+
+  const displayedCode = computed(() => {
+    if (typeof props.code === 'string') {
+      return props.code
+    }
+
+    return props.code.map((section: CodeSection) => section.content).join('\n\n')
+  })
+
+  watchEffect(async () => {
+    highlighted.value = displayedCode.value && props.language && Prism.highlight(await displayedCode.value, Prism.languages[props.language], props.language)
+  })
+
+  function openCode () {
+    if (needsPlaygroundLink.value) {
+      openPlayground()
+    } else {
+      openBin()
+    }
+  }
+
+  async function openBin () {
     const el = root.value?.$el.querySelector('code')
-    const code = props.code || el?.innerText || ''
+    const code = displayedCode.value || el?.innerText || ''
     const language = props.language || 'markdown'
     const title = props.resource
 
@@ -148,10 +170,18 @@
     window.open(compressed, '_blank')
   }
 
+  async function openPlayground () {
+    if (typeof props.code === 'string') return
+
+    const url = usePlayground(props.code)
+
+    window.open(url, '_blank')
+  }
+
   async function copy () {
     const el = root.value?.$el.querySelector('code')
 
-    navigator.clipboard.writeText(props.code || el?.innerText || '')
+    navigator.clipboard.writeText(displayedCode.value || el?.innerText || '')
 
     clicked.value = true
 

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,23 @@
 </template>
 
 <script setup>
-  const code = `
-      <template>
-        <v-app>
-          <v-container>
-            <v-btn color="primary">
-              Hello Vuetify!
-            </v-btn>
-          </v-container>
-        </v-app>
-      </template>
-    `
+  const codeContent = `<template>
+  <v-app>
+    <v-container>
+      <v-btn color="primary">
+        Hello Vuetify!
+      </v-btn>
+    </v-container>
+  </v-app>
+</template>`
+
+  const code = [
+    {
+      name: 'template',
+      content: codeContent,
+      language: 'html',
+    },
+  ]
 
   const isCopying = shallowRef(false)
 

packages/docs/src/composables/playground.ts

@@ -3,6 +3,12 @@ import { strFromU8, strToU8, zlibSync } from 'fflate'
 import { version as vuetifyVersion } from 'vuetify'
 import { version as vueVersion } from 'vue'
 
+export type CodeSection = {
+  name: string
+  content: string
+  language: string
+}
+
 // This is copied directly from playground
 function utoa (data: string): string {
   const buffer = strToU8(data)
@@ -12,7 +18,7 @@ function utoa (data: string): string {
 }
 
 export function usePlayground (
-  sections: ({ name: string, content: string, language: string})[] = [],
+  sections: CodeSection[] = [],
   css: string[] = [],
   imports: Record<string, string> = {},
   setup?: string,

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",