Skip to content

Commit e36eb4d

Browse files
authored
feat: add funding links to playground (#1054)
1 parent 09921f1 commit e36eb4d

File tree

1 file changed

+31
-23
lines changed

1 file changed

+31
-23
lines changed

docs/.vitepress/components/ShikiMiniPlayground.vue

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script setup lang="ts">
22
import { computed, nextTick, ref } from 'vue'
33
import { usePlayground } from '../store/playground'
4+
import FundingButton from './FundingButton.vue'
45
56
const play = usePlayground()
6-
const currentThemeType = computed(() => play.allThemes.find(i => i.name === play.theme)?.type || 'inherit')
7+
const currentLang = computed(() => play.allLanguages.find(i => i.name === play.lang))
8+
const currentTheme = computed(() => play.allThemes.find(i => i.name === play.theme))
79
810
const textAreaRef = ref<HTMLDivElement>()
911
const highlightContainerRef = ref<HTMLSpanElement>()
@@ -28,27 +30,35 @@ function onInput() {
2830
<template>
2931
<div
3032
class="language-ts vp-adaptive-theme transition-none! mini-playground" shadow
31-
:style="[play.preStyle, { colorScheme: currentThemeType }]"
33+
:style="[play.preStyle, { colorScheme: currentTheme?.type || 'inherit' }]"
3234
>
33-
<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>
34-
<div i-carbon:chevron-down op50 />
35-
<select v-model="play.lang" font-mono :style="play.preStyle">
36-
<option v-for="lang in play.allLanguages" :key="lang.name" :value="lang.name">
37-
{{ lang.name }}
38-
</option>
39-
</select>
40-
<div i-carbon:chevron-down op50 />
41-
<select v-model="play.theme" font-mono :style="play.preStyle">
42-
<option v-for="theme in play.allThemes.filter(i => i.type === 'light')" :key="theme.name" :value="theme.name">
43-
{{ theme.displayName }}
44-
</option>
45-
<option disabled>
46-
──────────
47-
</option>
48-
<option v-for="theme in play.allThemes.filter(i => i.type === 'dark')" :key="theme.name" :value="theme.name">
49-
{{ theme.displayName }}
50-
</option>
51-
</select>
35+
<div sticky z-12 p2 px3 pl5 flex="~ gap-4 items-center" left-0 top-0 right-0 border="b-solid gray/5" bg-inherit>
36+
<label relative flex="~ gap-1 items-center" justify-start class="min-w-[8em]">
37+
<div i-carbon:chevron-down op50 />
38+
<span font-mono text-xs>{{ currentLang?.name }}</span>
39+
<select v-model="play.lang" font-mono :style="play.preStyle" absolute inset-0 min-w-0 op0>
40+
<option v-for="lang in play.allLanguages" :key="lang.name" :value="lang.name">
41+
{{ lang.name }}
42+
</option>
43+
</select>
44+
<FundingButton :name="`${currentLang?.displayName} grammar`" :funding="currentLang?.funding" />
45+
</label>
46+
<label relative flex="~ gap-1 items-center" justify-start class="min-w-[8em]">
47+
<div i-carbon:chevron-down op50 />
48+
<span font-mono text-xs>{{ currentTheme?.displayName }}</span>
49+
<select v-model="play.theme" font-mono :style="play.preStyle" absolute inset-0 min-w-0 op0>
50+
<option v-for="theme in play.allThemes.filter(i => i.type === 'light')" :key="theme.name" :value="theme.name">
51+
{{ theme.displayName }}
52+
</option>
53+
<option disabled>
54+
──────────
55+
</option>
56+
<option v-for="theme in play.allThemes.filter(i => i.type === 'dark')" :key="theme.name" :value="theme.name">
57+
{{ theme.displayName }}
58+
</option>
59+
</select>
60+
<FundingButton :name="`${currentTheme?.displayName} theme`" :funding="currentTheme?.funding" />
61+
</label>
5262
<div flex-auto />
5363
<div
5464
i-svg-spinners-3-dots-fade
@@ -83,9 +93,7 @@ function onInput() {
8393
.mini-playground select {
8494
background: transparent;
8595
color: inherit;
86-
min-width: 8em;
8796
padding: 0px !important;
88-
position: relative;
8997
}
9098
.mini-playground select:focus {
9199
outline: none;

0 commit comments

Comments
 (0)