Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: improve playground #19

Merged
merged 3 commits into from
Jan 29, 2024
Merged

chore: improve playground #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5e234d
chore(playground): update `<title>` with theme name, improved styling
uncenter Jan 28, 2024
0ad1c95
impr: store all theme info
uncenter Jan 28, 2024
de4453c
Merge branch 'main' into pr/uncenter/19
antfu Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<title>Vitesse Lite</title>
<meta name="description" content="Opinionated Vite Starter Template" />
<title>TextMate Playground</title>
<meta name="description" content="TextMate Grammars & Themes Playground" />
</head>
<body class="font-sans dark:text-white dark:bg-hex-121212">
<div id="app"></div>
Expand Down
29 changes: 21 additions & 8 deletions playground/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { getHighlighterCore } from 'shiki/core'
import { themes } from '../../packages/tm-themes/index'
import { grammars } from '../../packages/tm-grammars/index'

useDark()
const isDark = useDark()

const theme = useStorage('tm-theme', 'vitesse-dark')
const grammar = useStorage('tm-grammar', 'javascript')
Expand All @@ -13,6 +13,9 @@ const error = ref<any>(null)
const input = ref('console.log("Hello World")')
const output = ref('')

const grammarObject = computed(() => grammars.find(g => g.name === grammar.value))
const themeObject = computed(() => themes.find(t => t.name === theme.value))

async function run() {
error.value = null
try {
Expand Down Expand Up @@ -76,6 +79,8 @@ function random() {

watch([theme, grammar], run, { immediate: true })

useTitle(() => `${grammarObject.value?.displayName || grammar.value} - ${themeObject.value?.displayName || theme.value} - TextMate Playground`)

if (import.meta.hot) {
import.meta.hot.accept(() => {
run()
Expand All @@ -84,8 +89,8 @@ if (import.meta.hot) {
</script>

<template>
<div h-100vh w-full grid="~ cols-[200px_200px_5fr] gap-4" px4>
<div h-full border="x base" of-auto flex="~ col">
<div h-100vh w-full grid="~ cols-[200px_200px_5fr] gap-4" p4>
<div h-full border="x base y rounded" of-auto flex="~ col">
<button
v-for="g of grammars"
:key="g.name"
Expand All @@ -97,7 +102,7 @@ if (import.meta.hot) {
</button>
</div>

<div h-full border="x base" of-auto flex="~ col">
<div h-full border="x base y rounded" of-auto flex="~ col">
<button
v-for="t of themes"
:key="t.name"
Expand All @@ -109,7 +114,7 @@ if (import.meta.hot) {
</button>
</div>

<div py4>
<div flex="~ col gap-4">
<div p4 border="~ base rounded" flex="~ gap-4" class="panel-info">
<div grid="~ cols-[max-content_1fr] gap-x-3" flex-auto>
<div text-right op50>
Expand Down Expand Up @@ -143,29 +148,37 @@ if (import.meta.hot) {
</code>
</button>
</div>
<div>
<div flex="~ gap-2 items-start">
<button border="~ base rounded" px4 py1 hover="bg-active" @click="random()">
Random
</button>
<button border="~ base rounded" px4 py1 hover="bg-active" @click="isDark = !isDark">
Dark
</button>
</div>
</div>

<div v-if="error" text-red bg-red:10 p6 rounded>
{{ error }}
</div>
<div my4 v-html="output" />
<div v-html="output" />
</div>
</div>
</template>

<style>
:root {
color-scheme: light;
}
:root.dark {
color-scheme: dark;
}
.shiki {
font-size: 14px;
line-height: 1.5;
padding: 10px;
--uno: border border-base rounded p4;
}

.panel-info button {
--uno: hover-text-primary hover-underline hover:op100;
}
Expand Down
Loading