feat: add funding buttons to themes & languages list (#1052)

Co-authored-by: Anthony Fu <[email protected]>

Author: jtbandes

docs/.vitepress/components/FundingButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { FundingLink } from 'tm-grammars'
+import { Tooltip } from 'floating-vue'
+
+defineProps<{
+  funding: FundingLink[] | undefined
+  name: string
+}>()
+</script>
+
+<template>
+  <Tooltip
+    v-if="funding && funding.length > 0"
+    theme="twoslash"
+    class="group"
+    relative inline-block mya align-middle
+  >
+    <button
+      title="Funding"
+      hover="bg-gray/10"
+      p1 rounded
+    >
+      <div
+        i-carbon:favorite-filled
+        op25 group-hover:op100 group-focus-within:op100 group-hover:text-red-500
+        transition-opacity duration-250
+      />
+    </button>
+
+    <template #popper>
+      <div p2 class="vp-doc text-sm">
+        <strong block mb-2>Support {{ name }} development:</strong>
+        <div
+          v-for="link, i in funding"
+          :key="i"
+          text-nowrap
+        >
+          <template v-if="link.handle">
+            {{ link.name }}:
+          </template>
+          <a :href="link.url" target="_blank">{{ link.handle || link.name }}</a>
+        </div>
+      </div>
+    </template>
+  </Tooltip>
+</template>

docs/.vitepress/components/LanguagesList.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
 import { computed, ref, watch } from 'vue'
 import { usePlayground } from '../store/playground'
+import FundingButton from './FundingButton.vue'
 
 const play = usePlayground()
 const showModel = ref(false)
 
 function preview(id: string): void {
-  play.lang = id
+  play.lang = id as BundledLanguage
   showModel.value = true
 }
 
@@ -48,9 +50,11 @@ watch(showModel, () => {
         </tr>
       </thead>
       <tbody>
-        <tr v-for="l in langs" :key="l.id">
-          <td>{{ l.name }}</td>
-          <td><code>{{ l.id }}</code></td>
+        <tr v-for="l in langs" :key="l.name">
+          <td>
+            {{ l.displayName }} <FundingButton :name="`${l.displayName} grammar`" :funding="l.funding" />
+          </td>
+          <td><code>{{ l.name }}</code></td>
           <td>
             <code v-for="alias in l.aliases" :key="alias">{{ alias }}</code>
           </td>
@@ -59,7 +63,7 @@ watch(showModel, () => {
               <button
                 title="Preview Example"
                 ma text-lg
-                @click="preview(l.id)"
+                @click="preview(l.name)"
               >
                 <div i-carbon:code />
               </button>

docs/.vitepress/components/ShikiMiniPlayground.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, ref } from 'vue'
 import { usePlayground } from '../store/playground'
 
 const play = usePlayground()
-const currentThemeType = computed(() => play.allThemes.find(i => i.id === play.theme)?.type || 'inherit')
+const currentThemeType = computed(() => play.allThemes.find(i => i.name === play.theme)?.type || 'inherit')
 
 const textAreaRef = ref<HTMLDivElement>()
 const highlightContainerRef = ref<HTMLSpanElement>()
@@ -33,19 +33,19 @@ function onInput() {
     <div sticky z-12 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5" bg-inherit>
       <div i-carbon:chevron-down op50 />
       <select v-model="play.lang" font-mono :style="play.preStyle">
-        <option v-for="lang in play.allLanguages" :key="lang.id" :value="lang.id">
+        <option v-for="lang in play.allLanguages" :key="lang.name" :value="lang.name">
           {{ lang.name }}
         </option>
       </select>
       <div i-carbon:chevron-down op50 />
       <select v-model="play.theme" font-mono :style="play.preStyle">
-        <option v-for="theme in play.allThemes.filter(i => i.type === 'light')" :key="theme.id" :value="theme.id">
+        <option v-for="theme in play.allThemes.filter(i => i.type === 'light')" :key="theme.name" :value="theme.name">
           {{ theme.displayName }}
         </option>
         <option disabled>
           ──────────
         </option>
-        <option v-for="theme in play.allThemes.filter(i => i.type === 'dark')" :key="theme.id" :value="theme.id">
+        <option v-for="theme in play.allThemes.filter(i => i.type === 'dark')" :key="theme.name" :value="theme.name">
           {{ theme.displayName }}
         </option>
       </select>

docs/.vitepress/components/ThemesList.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { BundledTheme } from 'shiki'
 import { ref } from 'vue'
 import { usePlayground } from '../store/playground'
 
 const play = usePlayground()
 const showModel = ref(false)
 
 function preview(id: string) {
-  play.theme = id
+  play.theme = id as BundledTheme
   showModel.value = true
 }
 </script>
@@ -22,15 +23,17 @@ function preview(id: string) {
         </tr>
       </thead>
       <tbody>
-        <tr v-for="l in play.allThemes" :key="l.id">
-          <td>{{ l.displayName }}</td>
-          <td><code>{{ l.id }}</code></td>
+        <tr v-for="l in play.allThemes" :key="l.name">
+          <td>
+            {{ l.displayName }} <FundingButton :name="`${l.displayName} theme`" :funding="l.funding" />
+          </td>
+          <td><code>{{ l.name }}</code></td>
           <td>
             <div flex>
               <button
                 title="Preview Example"
                 ma text-lg
-                @click="preview(l.id)"
+                @click="preview(l.name)"
               >
                 <div i-carbon:code />
               </button>

docs/.vitepress/store/playground.ts

@@ -1,30 +1,19 @@
 /// <reference types="vite/client" />
 
-import type { BundledLanguageInfo, BundledThemeInfo } from '@shikijs/types'
+import type { BundledLanguage, BundledTheme } from 'shiki'
+import type { GrammarInfo } from 'tm-grammars'
+import type { ThemeInfo } from 'tm-themes'
 import { useLocalStorage } from '@vueuse/core'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref, shallowRef, watch } from 'vue'
 
 export const usePlayground = defineStore('playground', () => {
-  const lang = useLocalStorage('shiki-playground-lang', 'typescript')
-  const theme = useLocalStorage('shiki-playground-theme', 'vitesse-dark')
-  const allThemes = shallowRef<BundledThemeInfo[]>([
-    {
-      id: 'vitesse-dark',
-      displayName: 'Vitesse Dark',
-      type: 'dark',
-      import: undefined!,
-    },
-  ])
-  const allLanguages = shallowRef<BundledLanguageInfo[]>([
-    {
-      id: 'typescript',
-      name: 'TypeScript',
-      import: undefined!,
-    },
-  ])
-  const bundledLangsFull = shallowRef<BundledLanguageInfo[]>([])
-  const bundledLangsWeb = shallowRef<BundledLanguageInfo[]>([])
+  const lang = useLocalStorage<BundledLanguage>('shiki-playground-lang', 'typescript')
+  const theme = useLocalStorage<BundledTheme>('shiki-playground-theme', 'vitesse-dark')
+  const allThemes = shallowRef<ThemeInfo[]>([])
+  const allLanguages = shallowRef<GrammarInfo[]>([])
+  const bundledLangsFull = shallowRef<GrammarInfo[]>([])
+  const bundledLangsWeb = shallowRef<GrammarInfo[]>([])
 
   const input = useLocalStorage('shiki-playground-input', '')
   const output = ref('<pre></pre>')
@@ -33,16 +22,16 @@ export const usePlayground = defineStore('playground', () => {
 
   function randomize(): void {
     if (allLanguages.value.length && allThemes.value.length) {
-      lang.value = allLanguages.value[Math.floor(Math.random() * allLanguages.value.length)].id as any
-      theme.value = allThemes.value[Math.floor(Math.random() * allThemes.value.length)].id as any
+      lang.value = allLanguages.value[Math.floor(Math.random() * allLanguages.value.length)].name as BundledLanguage
+      theme.value = allThemes.value[Math.floor(Math.random() * allThemes.value.length)].name as BundledTheme
     }
   }
 
   ;(async () => {
     const { createHighlighter } = await import('shiki')
-    const { bundledLanguagesInfo: bundleFull } = await import('shiki/bundle/full')
-    const { bundledLanguagesInfo: bundleWeb } = await import('shiki/bundle/web')
-    const { bundledThemesInfo } = await import('shiki/themes')
+    const allGrammars = await import('tm-grammars')
+    const webGrammars = allGrammars.grammars.filter(grammar => grammar.categories?.includes('web'))
+    const { themes: bundledThemesInfo } = await import('tm-themes')
 
     const samplesCache = new Map<string, Promise<string | undefined>>()
 
@@ -59,9 +48,9 @@ export const usePlayground = defineStore('playground', () => {
     }
 
     allThemes.value = bundledThemesInfo
-    allLanguages.value = bundleFull
-    bundledLangsFull.value = bundleFull
-    bundledLangsWeb.value = bundleWeb
+    allLanguages.value = allGrammars.grammars
+    bundledLangsFull.value = allGrammars.grammars
+    bundledLangsWeb.value = webGrammars
 
     if (typeof window !== 'undefined') {
       const highlighter = await createHighlighter({
@@ -74,8 +63,8 @@ export const usePlayground = defineStore('playground', () => {
       watch([lang, theme], async (n, o) => {
         isLoading.value = true
         await Promise.all([
-          highlighter.loadTheme(theme.value as any),
-          highlighter.loadLanguage(lang.value as any),
+          highlighter.loadTheme(theme.value),
+          highlighter.loadLanguage(lang.value),
         ])
         // Fetch sample if language changed
         if ((o[0] || !input.value) && n[0] !== o[0]) {

docs/components.d.ts

@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Badges: typeof import('./.vitepress/components/Badges.vue')['default']
+    FundingButton: typeof import('./.vitepress/components/FundingButton.vue')['default']
     HomeDemo: typeof import('./.vitepress/components/HomeDemo.vue')['default']
     LanguagesList: typeof import('./.vitepress/components/LanguagesList.vue')['default']
     ShikiMiniPlayground: typeof import('./.vitepress/components/ShikiMiniPlayground.vue')['default']

docs/package.json

@@ -16,6 +16,8 @@
     "@vueuse/core": "catalog:docs",
     "floating-vue": "catalog:docs",
     "pinia": "catalog:cli",
+    "tm-grammars": "catalog:inlined",
+    "tm-themes": "catalog:inlined",
     "unocss": "catalog:docs",
     "unplugin-vue-components": "catalog:docs",
     "vitepress": "catalog:docs",