nuxtseo-layer-devtools 0.1.1 → 0.1.2

package/assets/css/global.css

@@ -234,6 +234,12 @@ h1, h2, h3, h4, h5, h6 {
   background: transparent !important;
 }
 
+.shiki,
+.shiki span {
+  color: var(--shiki-light) !important;
+  background-color: transparent !important;
+}
+
 .dark .shiki,
 .dark .shiki span {
   color: var(--shiki-dark) !important;

package/components/DevtoolsLayout.vue

@@ -211,7 +211,9 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
       <div class="devtools-main">
         <main class="mx-auto flex flex-col w-full max-w-7xl">
           <DevtoolsLoading v-if="loading" />
-          <slot v-else />
+          <div v-show="!loading">
+            <slot />
+          </div>
         </main>
       </div>
     </div>

package/composables/shiki.ts

@@ -3,7 +3,6 @@ import type { ComputedRef, MaybeRef, Ref } from 'vue'
 import { createHighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { computed, ref, toValue } from 'vue'
-import { colorMode } from './rpc'
 
 export const shiki: Ref<HighlighterCore | undefined> = ref()
 
@@ -40,10 +39,12 @@ export function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): Co
   return computed(() => {
     if (!shiki.value)
       return ''
-    const theme = colorMode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
     return shiki.value.codeToHtml(toValue(code) || '', {
       lang,
-      theme,
+      themes: {
+        light: 'vitesse-light',
+        dark: 'vitesse-dark',
+      },
     }) || ''
   })
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",