docs: add open in Vuetify Bin functionality

Author: johnleider

packages/docs/auto-imports.d.ts

@@ -19,6 +19,7 @@ declare global {
   const camelCase: typeof import('lodash-es')['camelCase']
   const camelize: typeof import('vue')['camelize']
   const cleanCache: typeof import('./src/utils/pwa')['cleanCache']
+  const compressAndEncode: typeof import('./src/composables/bin')['compressAndEncode']
   const computed: typeof import('vue')['computed']
   const configureMarkdown: typeof import('./src/utils/markdown-it')['configureMarkdown']
   const copyElementContent: typeof import('./src/utils/helpers')['copyElementContent']
@@ -28,6 +29,7 @@ declare global {
   const createOne: typeof import('@vuetify/one')['createOne']
   const createPinia: typeof import('pinia')['createPinia']
   const customRef: typeof import('vue')['customRef']
+  const decodeAndDecompress: typeof import('./src/composables/bin')['decodeAndDecompress']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
@@ -117,6 +119,7 @@ declare global {
   const useAppStore: typeof import('./src/stores/app')['useAppStore']
   const useAttrs: typeof import('vue')['useAttrs']
   const useAuthStore: typeof import('@vuetify/one')['useAuthStore']
+  const useBin: typeof import('./src/composables/bin')['useBin']
   const useCommitsStore: typeof import('./src/stores/commits')['useCommitsStore']
   const useCosmic: typeof import('./src/composables/cosmic')['useCosmic']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -206,6 +209,7 @@ declare module 'vue' {
     readonly camelCase: UnwrapRef<typeof import('lodash-es')['camelCase']>
     readonly camelize: UnwrapRef<typeof import('vue')['camelize']>
     readonly cleanCache: UnwrapRef<typeof import('./src/utils/pwa')['cleanCache']>
+    readonly compressAndEncode: UnwrapRef<typeof import('./src/composables/bin')['compressAndEncode']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly configureMarkdown: UnwrapRef<typeof import('./src/utils/markdown-it')['configureMarkdown']>
     readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
@@ -214,6 +218,7 @@ declare module 'vue' {
     readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly decodeAndDecompress: UnwrapRef<typeof import('./src/composables/bin')['decodeAndDecompress']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
@@ -298,6 +303,7 @@ declare module 'vue' {
     readonly useAppStore: UnwrapRef<typeof import('./src/stores/app')['useAppStore']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useAuthStore: UnwrapRef<typeof import('@vuetify/one')['useAuthStore']>
+    readonly useBin: UnwrapRef<typeof import('./src/composables/bin')['useBin']>
     readonly useCommitsStore: UnwrapRef<typeof import('./src/stores/commits')['useCommitsStore']>
     readonly useCosmic: UnwrapRef<typeof import('./src/composables/cosmic')['useCosmic']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>

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

@@ -34,8 +34,9 @@
               v-if="isHovering"
               :key="icon"
               :icon="icon"
-              class="text-disabled me-3 mt-1 app-markup-btn position-absolute right-0 top-0"
+              class="text-disabled me-3 mt-2 app-markup-btn position-absolute right-0 top-0"
               density="comfortable"
+              size="small"
               v-bind="activatorProps"
               variant="text"
               @click="copy"
@@ -46,6 +47,26 @@
         <span>{{ t('copy-source') }}</span>
       </v-tooltip>
 
+      <v-tooltip location="start">
+        <template #activator="{ props: activatorProps }">
+          <v-fade-transition>
+            <v-btn
+              v-if="isHovering"
+              :key="icon"
+              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"
+            />
+          </v-fade-transition>
+        </template>
+
+        <span>{{ t('open-in-vuetify-bin') }}</span>
+      </v-tooltip>
+
       <div class="pa-4 pe-12">
         <slot>
           <pre v-if="inline" :class="className">
@@ -116,6 +137,17 @@
   const className = computed(() => `language-${props.language}`)
   const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
 
+  async function bin () {
+    const el = root.value?.$el.querySelector('code')
+    const code = props.code || el?.innerText || ''
+    const language = props.language || 'markdown'
+    const title = props.resource
+
+    const compressed = useBin(code, language, title)
+
+    window.open(compressed, '_blank')
+  }
+
   async function copy () {
     const el = root.value?.$el.querySelector('code')
 

packages/docs/src/composables/bin.ts

@@ -0,0 +1,48 @@
+// Utilities
+import { unzlibSync, zlibSync } from 'fflate'
+
+export function compressAndEncode (str: string) {
+  // Convert the string to a Uint8Array
+  const u8 = new TextEncoder().encode(str)
+
+  // Compress the Uint8Array using zlib
+  const compressed = zlibSync(u8)
+
+  // Convert the compressed data to a binary string
+  const binary = String.fromCodePoint(...compressed)
+
+  // Base64 encode the binary string
+  const encoded = btoa(binary)
+
+  // Make it URL-safe by replacing '+' with '-', '/' with '_', and removing '='
+  return encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+export function decodeAndDecompress (encoded: string) {
+  // Make the encoded string URL-safe again by reversing previous replacements
+  const urlSafeEncoded = encoded.replace(/-/g, '+').replace(/_/g, '/')
+
+  // Decode the Base64 encoded string to binary
+  const binary = atob(urlSafeEncoded)
+
+  // Convert the binary string to a Uint8Array
+  const compressed = new Uint8Array([...binary].map(c => c.codePointAt(0)!))
+
+  // Decompress the Uint8Array using zlib
+  const decompressed = unzlibSync(compressed)
+
+  // Convert the decompressed data back to a string
+  return new TextDecoder().decode(decompressed)
+}
+
+export function useBin (code: string, language: string, _title?: string) {
+  const hash = compressAndEncode(code)
+  const map: { [key: string]: string } = {
+    bash: 'markdown',
+    js: 'javascript',
+    ts: 'typescript',
+  }
+
+  const title = _title ? `&title=${_title}` : ''
+  return `https://bin.vuetifyjs.com?code=${hash}&lang=${map[language] ?? language}${title}`
+}

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

@@ -241,6 +241,7 @@
   "notifications": "Notifications",
   "not-found": "Not Found",
   "open-github-release": "Open GitHub release",
+  "open-in-vuetify-bin": "Open in Vuetify Bin",
   "open-issues": "Open issues",
   "options": "Options",
   "overlays": "Overlays",

packages/docs/src/utils/markdown-it-rules.ts

@@ -9,8 +9,9 @@ function addCodeRules (md: MarkdownIt) {
   md.renderer.rules.fence = function (tokens, idx, options, env, self) {
     const handler = fence || self.renderToken
     const token = tokens[idx]
+    const lang = extractLang(token.info || '')
 
-    return `<AppMarkup resource="${token?.attrs?.[0][1] ?? ''}" class="mb-4">${handler(tokens, idx, options, env, self)}</AppMarkup>`
+    return `<AppMarkup resource="${token?.attrs?.[0][1] ?? ''}" language="${lang}" class="mb-4">${handler(tokens, idx, options, env, self)}</AppMarkup>`
   }
   md.renderer.rules.code_inline = function (tokens, idx) {
     const token = tokens[idx]