From 4a2dfe758a21727a6896d7e25a83f78824bd6e67 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Thu, 14 Nov 2024 00:15:54 +0100
Subject: [PATCH] docs: work on docs theme

---
 doc/assets/prism.js              |   3 +-
 doc/components/code-block.vue    |   1 -
 doc/components/object-editor.vue |   3 +-
 doc/components/vjsf-example.vue  | 326 +++++++++++++++----------------
 doc/layouts/default.vue          |   2 +-
 doc/package.json                 |   3 +-
 doc/pages/editor.vue             |   7 +-
 doc/plugins/vuetify.ts           |   8 +-
 package-lock.json                |   6 +
 9 files changed, 184 insertions(+), 175 deletions(-)

diff --git a/doc/assets/prism.js b/doc/assets/prism.js
index c3ec7a99..43950190 100644
--- a/doc/assets/prism.js
+++ b/doc/assets/prism.js
@@ -1,7 +1,8 @@
 // this is mostly a redirection import prism from the same source so that we don't have code splitting
 // between prism itself and the languages
 
-import 'prismjs/themes/prism.css'
+// import 'prismjs/themes/prism.css'
+import 'prism-themes/themes/prism-xonokai.css'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-bash'
diff --git a/doc/components/code-block.vue b/doc/components/code-block.vue
index 432d0ac0..c7a6659f 100644
--- a/doc/components/code-block.vue
+++ b/doc/components/code-block.vue
@@ -30,7 +30,6 @@ const html = computed(() => {
 
 <style>
 .code-block {
-  background-color: white;
   padding: 8px;
   border-radius: 4px;
 }
diff --git a/doc/components/object-editor.vue b/doc/components/object-editor.vue
index 4e064e7e..f9572fcb 100644
--- a/doc/components/object-editor.vue
+++ b/doc/components/object-editor.vue
@@ -8,7 +8,6 @@
       density="compact"
       variant="elevated"
       elevation="1"
-      theme="light"
       style="position:absolute;top:0;right:0;z-index:200;height:24px;"
     >
       <v-btn
@@ -36,7 +35,7 @@
     <prism-editor
       v-model="code"
       class="vjsf-code-editor py-2"
-      style="min-height:200px"
+      :style="`min-height:200px; background-color: ${$vuetify.theme.current.colors.background}`"
       :highlight="highlighter"
       line-numbers
       :readonly="readonly"
diff --git a/doc/components/vjsf-example.vue b/doc/components/vjsf-example.vue
index 7aa75e27..1c284ec3 100644
--- a/doc/components/vjsf-example.vue
+++ b/doc/components/vjsf-example.vue
@@ -2,8 +2,7 @@
 <template>
   <v-sheet
     class="my-6"
-    border
-    rounded
+    border="sm"
     color="transparent"
   >
     <v-toolbar
@@ -13,8 +12,7 @@
       <v-btn
         v-for="tabItem in tabs"
         :key="tabItem.value"
-        class="text-none font-weight-bold"
-        size="small"
+        class="text-none font-weight-bold ml-2"
         :variant="tab === tabItem.value ? 'flat' : 'text'"
         :active="tab === tabItem.value"
         :color="tab === tabItem.value ? 'primary' : ''"
@@ -45,190 +43,190 @@
       />
     </v-toolbar>
 
-    <v-theme-provider
-      :theme="theme"
-      with-background
-    >
-      <v-divider />
+    <v-divider />
 
-      <v-window
-        v-if="tab"
-        v-model="tab"
-        style="height: 600px;overflow-y: auto;"
+    <v-window
+      v-if="tab"
+      v-model="tab"
+      style="height: 600px;overflow-y: auto;"
+    >
+      <v-window-item
+        value="schemaV2"
+        class="ma-3"
       >
-        <v-window-item
-          value="schemaV2"
-          class="ma-3"
-        >
-          <code-block>
-            <pre>{{ JSON.stringify(example.schema, null, 2) }}</pre>
-          </code-block>
-        </v-window-item>
+        <code-block>
+          <pre>{{ JSON.stringify(example.schema, null, 2) }}</pre>
+        </code-block>
+      </v-window-item>
 
-        <v-window-item
-          value="schema"
-          class="ma-3"
-        >
-          <code-block>
-            <pre>{{ JSON.stringify(schema, null, 2) }}</pre>
-          </code-block>
-        </v-window-item>
+      <v-window-item
+        value="schema"
+        class="ma-3"
+      >
+        <code-block>
+          <pre>{{ JSON.stringify(schema, null, 2) }}</pre>
+        </code-block>
+      </v-window-item>
 
-        <v-window-item
-          value="model"
-          class="ma-3 fill-height"
-        >
-          <code-block v-if="data !== null && data !== undefined">
-            <pre>{{ JSON.stringify(data, null, 2) }}</pre>
-          </code-block>
-        </v-window-item>
+      <v-window-item
+        value="model"
+        class="ma-3 fill-height"
+      >
+        <code-block v-if="data !== null && data !== undefined">
+          <pre>{{ JSON.stringify(data, null, 2) }}</pre>
+        </code-block>
+      </v-window-item>
 
-        <v-window-item
-          value="slots"
-          class="ma-3"
+      <v-window-item
+        value="slots"
+        class="ma-3"
+      >
+        <code-block
+          v-for="key of example.codeSlots"
+          :key="key"
         >
-          <code-block
-            v-for="key of example.codeSlots"
-            :key="key"
-          >
-            <pre>{{ slotCodes[key] }}</pre>
-          </code-block>
-        </v-window-item>
+          <pre>{{ slotCodes[key] }}</pre>
+        </code-block>
+      </v-window-item>
 
-        <v-window-item
-          value="defaultProps"
-          class="ma-3"
-        >
-          <code-block>
-            <pre>{{ JSON.stringify(example.defaultProps, null, 2) }}</pre>
-          </code-block>
-        </v-window-item>
+      <v-window-item
+        value="defaultProps"
+        class="ma-3"
+      >
+        <code-block>
+          <pre>{{ JSON.stringify(example.defaultProps, null, 2) }}</pre>
+        </code-block>
+      </v-window-item>
 
-        <v-window-item
-          value="options"
-          class="ma-3"
-          style="height: 600px"
-        >
-          <v-row style="height:600px;">
-            <v-col>
-              <v-defaults-provider :defaults="{global: {density: 'compact', color: 'primary', hideDetails: true}}">
-                <v-switch
-                  v-model="options.readOnly"
-                  label="readOnly"
-                />
+      <v-window-item
+        value="options"
+        class="ma-3"
+        style="height: 600px"
+      >
+        <v-row style="height:600px;">
+          <v-col>
+            <v-defaults-provider :defaults="{global: {density: 'compact', color: 'primary', hideDetails: true}}">
+              <v-switch
+                v-model="options.readOnly"
+                label="readOnly"
+              />
 
-                <v-switch
-                  v-model="options.summary"
-                  label="summary"
-                />
+              <v-switch
+                v-model="options.summary"
+                label="summary"
+              />
 
-                <v-switch
-                  v-model="options.autofocus"
-                  label="autofocus"
-                />
+              <v-switch
+                v-model="options.autofocus"
+                label="autofocus"
+              />
 
-                <v-select
-                  v-model="options.density"
-                  style="max-width:300px;"
-                  :items="['default', 'comfortable', 'compact']"
-                />
+              <v-select
+                v-model="options.density"
+                style="max-width:300px;"
+                :items="['default', 'comfortable', 'compact']"
+              />
 
-                <v-switch
-                  v-model="options.indent"
-                  label="indent"
-                />
+              <v-switch
+                v-model="options.indent"
+                label="indent"
+              />
 
-                <v-select
-                  v-model="options.titleDepth"
-                  label="titleDepth"
-                  style="max-width:300px;"
-                  :items="[1, 2, 3, 4, 5, 6]"
-                />
+              <v-select
+                v-model="options.titleDepth"
+                label="titleDepth"
+                style="max-width:300px;"
+                :items="[1, 2, 3, 4, 5, 6]"
+              />
 
-                <v-select
-                  v-model="options.validateOn"
-                  label="validateOn"
-                  style="max-width:300px;"
-                  :items="['input', 'blur', 'submit']"
-                />
+              <v-select
+                v-model="options.validateOn"
+                label="validateOn"
+                style="max-width:300px;"
+                :items="['input', 'blur', 'submit']"
+              />
 
-                <v-select
-                  v-model="options.initialValidation"
-                  label="initialValidation"
-                  style="max-width:300px;"
-                  :items="['never', 'withData', 'always']"
-                />
+              <v-select
+                v-model="options.initialValidation"
+                label="initialValidation"
+                style="max-width:300px;"
+                :items="['never', 'withData', 'always']"
+              />
 
-                <v-select
-                  v-model="options.updateOn"
-                  label="updateOn"
-                  style="max-width:300px;"
-                  :items="['input', 'blur']"
-                />
+              <v-select
+                v-model="options.updateOn"
+                label="updateOn"
+                style="max-width:300px;"
+                :items="['input', 'blur']"
+              />
 
-                <v-select
-                  v-model="options.defaultOn"
-                  label="defaultOn"
-                  style="max-width:300px;"
-                  :items="['never', 'missing', 'empty']"
-                />
+              <v-select
+                v-model="options.defaultOn"
+                label="defaultOn"
+                style="max-width:300px;"
+                :items="['never', 'missing', 'empty']"
+              />
 
-                <v-select
-                  v-model="options.removeAdditional"
-                  label="removeAdditional"
-                  style="max-width:300px;"
-                  :items="['unknown', 'error', 'none']"
-                />
+              <v-select
+                v-model="options.removeAdditional"
+                label="removeAdditional"
+                style="max-width:300px;"
+                :items="['unknown', 'error', 'none']"
+              />
 
-                <v-select
-                  v-model="options.readOnlyPropertiesMode"
-                  label="readOnlyPropertiesMode"
-                  style="max-width:300px;"
-                  :items="['remove', 'hide', 'show']"
-                />
+              <v-select
+                v-model="options.readOnlyPropertiesMode"
+                label="readOnlyPropertiesMode"
+                style="max-width:300px;"
+                :items="['remove', 'hide', 'show']"
+              />
 
-                <v-select
-                  v-model="options.locale"
-                  label="locale"
-                  style="max-width:300px;"
-                  :items="['en', 'fr', 'nl']"
-                />
+              <v-select
+                v-model="options.locale"
+                label="locale"
+                style="max-width:300px;"
+                :items="['en', 'fr', 'nl']"
+              />
 
-                <v-slider
-                  v-model="wrapperWidth"
-                  :min="0"
-                  :max="100"
-                  :step="1"
-                  label="container width"
-                  style="max-width:600px;"
-                >
-                  <template #append>
-                    {{ wrapperWidth }} %
-                  </template>
-                </v-slider>
-              </v-defaults-provider>
-              <div
-                v-if="display"
-                class="text-caption ml-2"
+              <v-slider
+                v-model="wrapperWidth"
+                :min="0"
+                :max="100"
+                :step="1"
+                label="container width"
+                style="max-width:600px;"
               >
-                width={{ display.width }}px, display={{ display.name }}
-              </div>
-            </v-col>
-            <v-divider vertical />
-            <v-col style="height:600px;overflow-y: auto;">
-              <div class="text-subtitle">
-                Options filled with default values:
-              </div>
-              <code-block>
-                <pre>{{ JSON.stringify(filledOptions, null, 2) }}</pre>
-              </code-block>
-            </v-col>
-          </v-row>
-        </v-window-item>
-      </v-window>
+                <template #append>
+                  {{ wrapperWidth }} %
+                </template>
+              </v-slider>
+            </v-defaults-provider>
+            <div
+              v-if="display"
+              class="text-caption ml-2"
+            >
+              width={{ display.width }}px, display={{ display.name }}
+            </div>
+          </v-col>
+          <v-divider vertical />
+          <v-col style="height:600px;overflow-y: auto;">
+            <div class="text-subtitle">
+              Options filled with default values:
+            </div>
+            <code-block>
+              <pre>{{ JSON.stringify(filledOptions, null, 2) }}</pre>
+            </code-block>
+          </v-col>
+        </v-row>
+      </v-window-item>
+    </v-window>
 
-      <v-divider />
+    <v-divider />
 
+    <v-theme-provider
+      :theme="theme"
+      with-background
+    >
       <v-container fluid>
         <div :style="`width: ${wrapperWidth}%`">
           <v-form
diff --git a/doc/layouts/default.vue b/doc/layouts/default.vue
index 71027ce5..ef3c8fcf 100644
--- a/doc/layouts/default.vue
+++ b/doc/layouts/default.vue
@@ -91,7 +91,7 @@
     <!--<v-app-bar app :color="$vuetify.display.smAndDown ? 'white' : 'transparent'" dense flat>-->
     <v-app-bar
       app
-      :color="theme.global.name.value === 'dark' ? '#121212' : '#FFFFFF'"
+      color="surface"
       scroll-behavior="elevate"
     >
       <v-app-bar-nav-icon
diff --git a/doc/package.json b/doc/package.json
index b3569c76..193f844d 100644
--- a/doc/package.json
+++ b/doc/package.json
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@koumoul/vjsf": "3.0.0-beta.51",
-    "@koumoul/vjsf-markdown": "0.3.1",
     "@koumoul/vjsf-compiler": "0.2.0",
+    "@koumoul/vjsf-markdown": "0.3.1",
     "@mdi/font": "^7.2.96",
     "ajv-formats": "^2.1.1",
     "ajv-i18n": "^4.2.0",
@@ -22,6 +22,7 @@
     "ejs": "^3.1.9",
     "marked": "^14.1.3",
     "nuxt": "^3.13.2",
+    "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "vite-plugin-vuetify": "^2.0.3",
     "vue-prism-editor": "^2.0.0-alpha.2",
diff --git a/doc/pages/editor.vue b/doc/pages/editor.vue
index 5b4454ff..250c6fbf 100644
--- a/doc/pages/editor.vue
+++ b/doc/pages/editor.vue
@@ -21,8 +21,7 @@
             <v-btn
               v-for="tabItem in codeTabs"
               :key="tabItem.value"
-              class="text-none font-weight-bold"
-              size="small"
+              class="text-none font-weight-bold ml-2"
               :variant="codeTab === tabItem.value ? 'flat' : 'text'"
               :active="codeTab === tabItem.value"
               :color="codeTab === tabItem.value ? 'primary' : ''"
@@ -48,6 +47,8 @@
             </v-btn>-->
           </v-toolbar>
 
+          <v-divider />
+
           <v-window v-model="codeTab">
             <v-window-item value="schema">
               <object-editor
@@ -128,7 +129,7 @@
 <script setup>
 import { ref, reactive, computed, watch, onMounted, onUnmounted, markRaw } from 'vue'
 import { watchDebounced, useWindowSize } from '@vueuse/core'
-import { VContainer, VRow, VCol, VSpacer, VForm, VBtn, VAlert, VWindow, VWindowItem, VToolbar, VIcon } from 'vuetify/components'
+import { VContainer, VRow, VCol, VSpacer, VForm, VBtn, VAlert, VWindow, VWindowItem, VToolbar, VIcon, VDivider } from 'vuetify/components'
 import yaml from 'yaml'
 import { Vjsf, defaultOptions } from '@koumoul/vjsf'
 import VjsfMarkdown from '@koumoul/vjsf-markdown'
diff --git a/doc/plugins/vuetify.ts b/doc/plugins/vuetify.ts
index db0aa7a8..3819cf5f 100644
--- a/doc/plugins/vuetify.ts
+++ b/doc/plugins/vuetify.ts
@@ -24,8 +24,12 @@ export default defineNuxtPlugin((nuxtApp) => {
         dark: {
           dark: true,
           colors: {
-            surface: '#000000',
-            primary: colors.cyan.lighten5
+            background: '#212121',
+            // surface: '#000000',
+            primary: colors.cyan.accent2
+          },
+          variables: {
+            'border-opacity': 0.5
           }
         }
       }
diff --git a/package-lock.json b/package-lock.json
index 11df386a..26e70b5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
         "ejs": "^3.1.9",
         "marked": "^14.1.3",
         "nuxt": "^3.13.2",
+        "prism-themes": "^1.9.0",
         "prismjs": "^1.29.0",
         "vite-plugin-vuetify": "^2.0.3",
         "vue-prism-editor": "^2.0.0-alpha.2",
@@ -10544,6 +10545,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/prism-themes": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.9.0.tgz",
+      "integrity": "sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw=="
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "license": "MIT",