build code snippets for the Vue playground
This commit is contained in:
Robin Malfait
@@ -33,6 +33,7 @@
|
||||
"babel-jest": "^26.3.0",
|
||||
"husky": "^4.3.0",
|
||||
"jest": "^26.4.2",
|
||||
"prismjs": "^1.21.0",
|
||||
"tsdx": "^0.13.3",
|
||||
"tslib": "^2.0.1",
|
||||
"typescript": "^3.9.7"
|
||||
|
||||
@@ -14,18 +14,34 @@
|
||||
<main class="flex-1 overflow-auto bg-gray-50">
|
||||
<router-view />
|
||||
<KeyCaster />
|
||||
|
||||
<!-- TODO: Position this in the correct spot -->
|
||||
<div
|
||||
v-if="sourceCode"
|
||||
class="container fixed bottom-0 left-0 right-0 my-12 overflow-scroll rounded-md max-h-96"
|
||||
v-html="sourceCode"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, watchEffect } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import KeyCaster from './KeyCaster.vue'
|
||||
import './.generated/preload.js'
|
||||
import source from './.generated/source.json'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
KeyCaster,
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const sourceCode = computed(() => source[route.path])
|
||||
|
||||
return { sourceCode }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const prettier = require('prettier')
|
||||
const Prism = require('prismjs')
|
||||
require('prismjs/plugins/custom-class/prism-custom-class')
|
||||
|
||||
const routes = require('./examples/src/routes')
|
||||
|
||||
function flatten(routes, resolver) {
|
||||
@@ -28,6 +33,59 @@ fs.writeFileSync(
|
||||
'utf8'
|
||||
)
|
||||
|
||||
// ---
|
||||
|
||||
function pipe(...fns) {
|
||||
return fns.reduceRight((f, g) => (...args) => f(g(...args)), fns.pop())
|
||||
}
|
||||
|
||||
Prism.plugins.customClass.map({
|
||||
tag: 'text-code-red',
|
||||
'attr-name': 'text-code-yellow',
|
||||
'attr-value': 'text-code-green',
|
||||
deleted: 'text-code-red',
|
||||
inserted: 'text-code-green',
|
||||
punctuation: 'text-code-white',
|
||||
keyword: 'text-code-purple',
|
||||
string: 'text-code-green',
|
||||
function: 'text-code-blue',
|
||||
boolean: 'text-code-red',
|
||||
comment: 'text-gray-400 italic',
|
||||
})
|
||||
|
||||
const sourcePipeline = pipe(
|
||||
path => fs.readFileSync(path, 'utf8'),
|
||||
contents => prettier.format(contents, { parser: 'vue', printWidth: 100 }),
|
||||
contents => Prism.highlight(contents, Prism.languages.markup),
|
||||
contents =>
|
||||
[
|
||||
'<pre class="language-vue rounded-md bg-gray-800 py-3 px-4 overflow-x-auto">',
|
||||
'<code class="language-vue text-gray-200">',
|
||||
contents,
|
||||
'</code>',
|
||||
'</pre>',
|
||||
].join('')
|
||||
)
|
||||
|
||||
const skipRoutes = ['/']
|
||||
const source = Object.assign(
|
||||
{},
|
||||
...flatten(routes, route => ({
|
||||
urlPath: route.path,
|
||||
sourcePath: route.component,
|
||||
}))
|
||||
.filter(({ urlPath }) => !skipRoutes.includes(urlPath))
|
||||
.map(({ urlPath, sourcePath }) => ({
|
||||
[urlPath]: sourcePipeline(path.resolve(__dirname, 'examples', 'src', sourcePath), 'utf8'),
|
||||
}))
|
||||
)
|
||||
fs.writeFileSync(
|
||||
path.resolve(__dirname, './examples/src/.generated/source.json'),
|
||||
JSON.stringify(source, null, 2),
|
||||
'utf8'
|
||||
)
|
||||
// ---
|
||||
|
||||
const TailwindUIPlugin = ({
|
||||
root, // project root directory, absolute path
|
||||
app, // Koa app instance
|
||||
|
||||
@@ -10,6 +10,16 @@ module.exports = {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
code: {
|
||||
green: '#b5f4a5',
|
||||
yellow: '#ffe484',
|
||||
purple: '#d9a9ff',
|
||||
red: '#ff8383',
|
||||
blue: '#93ddfd',
|
||||
white: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
|
||||
@@ -3506,6 +3506,15 @@ cli-width@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
|
||||
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
|
||||
|
||||
clipboard@^2.0.0:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
|
||||
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
tiny-emitter "^2.0.0"
|
||||
|
||||
cliui@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
|
||||
@@ -4146,6 +4155,11 @@ delayed-stream@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
|
||||
|
||||
delegate@^3.1.2:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
|
||||
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@@ -5406,6 +5420,13 @@ globrex@^0.1.1:
|
||||
resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
|
||||
integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
|
||||
|
||||
good-listener@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
|
||||
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
|
||||
dependencies:
|
||||
delegate "^3.1.2"
|
||||
|
||||
graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
|
||||
@@ -8828,6 +8849,13 @@ pretty@^2.0.0:
|
||||
extend-shallow "^2.0.1"
|
||||
js-beautify "^1.6.12"
|
||||
|
||||
prismjs@^1.21.0:
|
||||
version "1.21.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
|
||||
integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
|
||||
optionalDependencies:
|
||||
clipboard "^2.0.0"
|
||||
|
||||
process-nextick-args@~2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
|
||||
@@ -9652,6 +9680,11 @@ schema-utils@^2.6.1, schema-utils@^2.6.6:
|
||||
ajv "^6.12.4"
|
||||
ajv-keywords "^3.5.2"
|
||||
|
||||
select@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
|
||||
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
|
||||
|
||||
selfsigned@^1.10.7:
|
||||
version "1.10.8"
|
||||
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
|
||||
@@ -10450,6 +10483,11 @@ timers-browserify@^2.0.4:
|
||||
dependencies:
|
||||
setimmediate "^1.0.4"
|
||||
|
||||
tiny-emitter@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
|
||||
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
|
||||
|
||||
tiny-glob@^0.2.6:
|
||||
version "0.2.6"
|
||||
resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.6.tgz#9e056e169d9788fe8a734dfa1ff02e9b92ed7eda"
|
||||
|
||||
Reference in New Issue
Block a user