build code snippets for the Vue playground

RobinMalfait · RobinMalfait · commit 55c9adaa8a3c · 2020-09-21T16:29:12.000+02:00
diff --git a/package.json b/package.json
@@ -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"
diff --git a/packages/@headlessui-vue/examples/src/App.vue b/packages/@headlessui-vue/examples/src/App.vue
@@ -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>
diff --git a/packages/@headlessui-vue/vite.config.js b/packages/@headlessui-vue/vite.config.js
@@ -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
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -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: {},
diff --git a/yarn.lock b/yarn.lock
@@ -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"
