@valaxyjs/devtools 0.0.1 → 0.18.0-beta.2

package/dist/client/assets/{index-UJyf60Kd.css → index-ZDzLlgt_.css}

@@ -384,4 +384,8 @@ Make elements with the HTML hidden attribute stay hidden by default.
 
 [hidden] {
   display: none;
-} *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.grid{display:grid;}.h-screen{height:100vh;}.w-screen{width:100vw;} 
+} *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.i-ri-book-line,[i-ri-book-line=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M3 18.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A3.5 3.5 0 0 1 3 18.5M19 20v-3H6.5a1.5 1.5 0 0 0 0 3zM5 15.337A3.486 3.486 0 0 1 6.5 15H19V4H6a1 1 0 0 0-1 1z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.2em;height:1.2em;}.i-vscode-icons\:file-type-vscode,[i-vscode-icons\:file-type-vscode=""]{background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%230065a9' d='m29.01 5.03l-5.766-2.776a1.742 1.742 0 0 0-1.989.338L2.38 19.8a1.166 1.166 0 0 0-.08 1.647c.025.027.05.053.077.077l1.541 1.4a1.165 1.165 0 0 0 1.489.066L28.142 5.75A1.158 1.158 0 0 1 30 6.672v-.067a1.748 1.748 0 0 0-.99-1.575'/%3E%3Cpath fill='%23007acc' d='m29.01 26.97l-5.766 2.777a1.745 1.745 0 0 1-1.989-.338L2.38 12.2a1.166 1.166 0 0 1-.08-1.647c.025-.027.05-.053.077-.077l1.541-1.4A1.165 1.165 0 0 1 5.41 9.01l22.732 17.24A1.158 1.158 0 0 0 30 25.328v.072a1.749 1.749 0 0 1-.99 1.57'/%3E%3Cpath fill='%231f9cf0' d='M23.244 29.747a1.745 1.745 0 0 1-1.989-.338A1.025 1.025 0 0 0 23 28.684V3.316a1.024 1.024 0 0 0-1.749-.724a1.744 1.744 0 0 1 1.989-.339l5.765 2.772A1.748 1.748 0 0 1 30 6.6v18.8a1.748 1.748 0 0 1-.991 1.576Z'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:1.2em;height:1.2em;}.ml-2{margin-left:0.5rem;}.h-8{height:2rem;}.h-full{height:100%;}.w-8{width:2rem;}.w-full{width:100%;}.flex,[flex=""],[flex~="\~"]{display:flex;}.inline-flex{display:inline-flex;}.flex-grow{flex-grow:1;}[flex~="col"]{flex-direction:column;}.cursor-pointer{cursor:pointer;}.list-decimal{list-style-type:decimal;}.items-center{align-items:center;}.justify-end{justify-content:flex-end;}.justify-center{justify-content:center;}[overflow~="auto"]{overflow:auto;}.border-b{border-bottom-width:1px;}.bg-gray-100{--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));}.py,[py~="\34 "]{padding-top:1rem;padding-bottom:1rem;}.pl{padding-left:1rem;}.pr,[pr~="\34 "]{padding-right:1rem;}[pl~="\31 2"]{padding-left:3rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.dark [text~="dark\:gray-200"]{--un-text-opacity:1;color:rgb(229 231 235 / var(--un-text-opacity));}.text-blue-500{--un-text-opacity:1;color:rgb(59 130 246 / var(--un-text-opacity));}[text~="gray-700"]{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity));}.hover\:text-blue-500:hover{--un-text-opacity:1;color:rgb(59 130 246 / var(--un-text-opacity));}.underline{text-decoration-line:underline;}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} html,
+body {
+  height: 100%;
+}
+.splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging *{user-select:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:#00000026;transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:#00000040}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}

package/dist/client/assets/tags-pRAQg_EK.js

@@ -0,0 +1,11 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock } from './index-8_TdlA6f.js';
+
+/* unplugin-vue-components disabled */const _sfc_main = {};
+
+function _sfc_render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("div", null, " Tags "))
+}
+const tags = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
+/* Injected with object hook! */
+
+export { tags as default };

package/dist/client/index.html

@@ -6,12 +6,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Valaxy Devtools</title>
-  <script type="module" crossorigin src="./assets/index-vPMPXhW9.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-UJyf60Kd.css">
+  <script type="module" crossorigin src="./assets/index-8_TdlA6f.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-ZDzLlgt_.css">
 </head>
 
 <body data-vite-inspect-mode="DEV">
-  <div id="app"></div>
+  <div id="app" class="h-full"></div>
   <script>
     (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

package/dist/index.cjs

@@ -16,7 +16,7 @@ const DEVTOOLS_CLIENT_FOLDER = node_path.resolve(DIR_DIST, "../dist/client");
 const DIR_CLIENT = DEVTOOLS_CLIENT_FOLDER;
 
 const NAME = "valaxy:devtools";
-function ValaxyDevtools(options) {
+function ValaxyDevtools(options = {}) {
   let config;
   function configureServer(server) {
     const _print = server.printUrls;

package/dist/index.d.cts

@@ -4,6 +4,6 @@ interface ValaxyDevtoolsOptions {
     base?: string;
 }
 
-declare function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin;
+declare function ValaxyDevtools(options?: ValaxyDevtoolsOptions): Plugin;
 
 export { ValaxyDevtools as default };

package/dist/index.d.mts

@@ -4,6 +4,6 @@ interface ValaxyDevtoolsOptions {
     base?: string;
 }
 
-declare function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin;
+declare function ValaxyDevtools(options?: ValaxyDevtoolsOptions): Plugin;
 
 export { ValaxyDevtools as default };

package/dist/index.d.ts

@@ -4,6 +4,6 @@ interface ValaxyDevtoolsOptions {
     base?: string;
 }
 
-declare function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin;
+declare function ValaxyDevtools(options?: ValaxyDevtoolsOptions): Plugin;
 
 export { ValaxyDevtools as default };

package/dist/index.mjs

@@ -8,7 +8,7 @@ const DEVTOOLS_CLIENT_FOLDER = resolve(DIR_DIST, "../dist/client");
 const DIR_CLIENT = DEVTOOLS_CLIENT_FOLDER;
 
 const NAME = "valaxy:devtools";
-function ValaxyDevtools(options) {
+function ValaxyDevtools(options = {}) {
   let config;
   function configureServer(server) {
     const _print = server.printUrls;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valaxyjs/devtools",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.18.0-beta.2",
   "repository": {
     "url": "https://github.com/YunYouJun/valaxy"
   },
@@ -22,9 +22,13 @@
     "sirv": "^2.0.4"
   },
   "devDependencies": {
+    "@iconify-json/ri": "^1.1.19",
+    "@types/splitpanes": "^2.2.6",
+    "splitpanes": "^3.1.5",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "vite": "^5.0.12"
+    "unplugin-vue-router": "^0.7.0",
+    "vite": "^5.1.1"
   },
   "scripts": {
     "build": "rimraf dist && run-s build:*",
@@ -32,6 +36,7 @@
     "build:node": "unbuild",
     "dev": "npm run stub && npm run dev:client",
     "dev:client": "vite build src/client --watch",
+    "dev:src": "vite dev src/client",
     "stub": "unbuild --stub",
     "release": "bumpp && npm publish"
   }

package/src/client/App.vue

@@ -1,20 +1,3 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { isStaticMode } from './utils'
-
-onMounted(() => {
-  if (isStaticMode)
-    document.title = 'Vite Inspect (Production)'
-})
-</script>
-
 <template>
-  <main grid="~ rows-[min-content_1fr]" size="h-screen w-screen" text="gray-700 dark:gray-200">
-    <Suspense>
-      <RouterView />
-      <template #fallback>
-        Loading...
-      </template>
-    </Suspense>
-  </main>
+  <RouterView />
 </template>

package/src/client/components/PageFrontmatter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps<{
+  frontmatter?: object
+}>()
+</script>
+
+<template>
+  <div>
+    <ul v-if="frontmatter">
+      <li v-for="(value, key) in frontmatter" :key="key">
+        <strong>{{ key }}</strong>: {{ value }}
+      </li>
+    </ul>
+  </div>
+</template>

package/src/client/components/VDPostList.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import type { Router } from 'vue-router/auto'
+import { getGlobalValaxyProperty, getWindowProperty, openInEditor } from '../utils'
+import { frontmatter } from '../composables/app'
+
+const activePath = ref('')
+
+const __VUE_DEVTOOLS_ROUTER__ = getWindowProperty('__VUE_DEVTOOLS_ROUTER__') as Router
+__VUE_DEVTOOLS_ROUTER__.beforeEach((to, _from, next) => {
+  activePath.value = to.path
+  frontmatter.value = getWindowProperty('$frontmatter')
+  next()
+})
+
+const postList = ref()
+
+onMounted(() => {
+  postList.value = getGlobalValaxyProperty('postList').value
+})
+
+function onClickPost(post: any) {
+  __VUE_DEVTOOLS_ROUTER__.push(post.path)
+}
+
+function launchEditor() {
+  openInEditor({
+    file: getWindowProperty('$pageData').path,
+  })
+}
+</script>
+
+<template>
+  <ul class="h-full" overflow="auto" pl="12" pr="4" py="4">
+    {{ activePath }}
+    <li v-for="post in postList" :key="post.path" class="list-decimal">
+      <div flex>
+        <span
+          class="inline-flex flex-grow cursor-pointer underline hover:text-blue-500"
+          :class="{ 'text-blue-500': activePath === post.path }"
+          @click="onClickPost(post)"
+        >
+          {{ post.title }}
+        </span>
+        <button class="ml-2 text-xs" @click="launchEditor()">
+          <div i-vscode-icons:file-type-vscode />
+        </button>
+      </div>
+    </li>
+  </ul>
+</template>

package/src/client/components.d.ts

@@ -7,7 +7,9 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PageFrontmatter: typeof import('./components/PageFrontmatter.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VDPostList: typeof import('./components/VDPostList.vue')['default']
   }
 }

package/src/client/composables/app.ts

@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const frontmatter = ref<object>({})

package/src/client/index.html

@@ -9,7 +9,7 @@
 </head>
 
 <body data-vite-inspect-mode="DEV">
-  <div id="app"></div>
+  <div id="app" class="h-full"></div>
   <script>
     (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

package/src/client/main.ts

@@ -1,16 +1,19 @@
 // register vue composition api globally
 import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { routes } from 'vue-router/auto/routes'
+import { createRouter, createWebHashHistory } from 'vue-router/auto'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
+import './styles/index.css'
+import 'splitpanes/dist/splitpanes.css'
+
 const app = createApp(App)
+
 const router = createRouter({
   history: createWebHashHistory(),
-  routes,
 })
+
 app.use(router)
 app.mount('#app')

package/src/client/pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    About
+  </div>
+</template>

package/src/client/pages/categories.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Categories
+  </div>
+</template>

package/src/client/pages/index.vue

@@ -1,5 +1,38 @@
+<script lang="ts" setup>
+import { Pane, Splitpanes } from 'splitpanes'
+import { onMounted } from 'vue'
+import { getWindowProperty, isStaticMode } from '../utils'
+
+import type { BlogWindow } from '../types'
+import { frontmatter } from '../composables/app'
+
+onMounted(() => {
+  if (isStaticMode)
+    document.title = 'Valaxy DevTools (Production)'
+
+  const $frontmatter = getWindowProperty('$frontmatter') as BlogWindow['$frontmatter']
+  if ($frontmatter)
+    frontmatter.value = $frontmatter
+})
+</script>
+
 <template>
-  <div>
-    Index
-  </div>
+  <main class="h-full" flex="~ col" text="gray-700 dark:gray-200">
+    <div class="w-full border-b shadow flex justify-end">
+      <a href="https://valaxy.site" target="_blank" class="bg-gray-100 inline-flex justify-center items-center w-8 h-8">
+        <div i-ri-book-line />
+      </a>
+    </div>
+
+    <div style="height: calc(100% - 32px)" overflow="auto">
+      <Splitpanes class="h-full">
+        <Pane>
+          <VDPostList />
+        </Pane>
+        <Pane>
+          <PageFrontmatter :frontmatter="frontmatter" />
+        </Pane>
+      </Splitpanes>
+    </div>
+  </main>
 </template>

package/src/client/pages/tags.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Tags
+  </div>
+</template>

package/src/client/styles/index.css

@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}

package/src/client/typed-routes.d.ts

@@ -39,6 +39,10 @@ import type {
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/categories': RouteRecordInfo<'/categories', '/categories', Record<never, never>, Record<never, never>>,
+    '/tags': RouteRecordInfo<'/tags', '/tags', Record<never, never>, Record<never, never>>,
   }
 }
 

package/src/client/types/index.ts

@@ -0,0 +1,3 @@
+export interface BlogWindow {
+  $frontmatter: any
+}

package/src/client/utils/api.ts

@@ -0,0 +1,18 @@
+// import from @vue/devtools-api not work
+import { getAppWindow } from './get'
+
+const target = getAppWindow()
+
+export interface OpenInEditorOptions {
+  file?: string
+  line?: number
+  column?: number
+}
+
+export function openInEditor(options: OpenInEditorOptions = {}) {
+  const { file, line = 0, column = 0 } = options
+  if (file) {
+    const baseUrl = window.location.origin
+    target?.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column)
+  }
+}

package/src/client/utils/get.ts

@@ -0,0 +1,19 @@
+export function getAppWindow() {
+  return window.parent.parent as unknown as {
+    __VUE_INSPECTOR__: {
+      openInEditor: (baseUrl: string, file: string, line: number, column: number) => void
+    }
+  }
+}
+
+/**
+ * window.parent.parent is the window object of the main app
+ */
+export function getWindowProperty(property: string) {
+  return (window.parent.parent as any)[property]
+}
+
+export function getGlobalValaxyProperty(property: string) {
+  const $valaxy = (window.parent.parent as any).$valaxy
+  return $valaxy[property]
+}

package/src/client/utils/index.ts

@@ -1 +1,4 @@
+export * from './api'
+export * from './get'
+
 export const isStaticMode = document.body.getAttribute('data-valaxy-devtools-mode') === 'BUILD'

package/src/client/vite.config.ts

@@ -1,9 +1,10 @@
 import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import Router from 'unplugin-vue-router/vite'
-import Components from 'unplugin-vue-components/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+import VueComponents from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
+import { unoConfig } from '../../../../uno.config'
 
 export default defineConfig({
   base: './',
@@ -48,22 +49,18 @@ export default defineConfig({
       },
     },
 
-    Vue({
-      script: {
-        defineModel: true,
-      },
-    }),
-
-    Router({
-      routesFolder: ['pages'],
+    VueRouter({
+      routesFolder: join(__dirname, 'pages'),
       dts: join(__dirname, 'typed-routes.d.ts'),
     }),
-
-    Components({
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    VueComponents({
       dirs: ['components'],
       dts: join(__dirname, 'components.d.ts'),
     }),
-    Unocss(),
+    Unocss(unoConfig),
   ],
 
   optimizeDeps: {

package/src/node/index.ts

@@ -6,7 +6,7 @@ import type { ValaxyDevtoolsOptions } from './types'
 
 const NAME = 'valaxy:devtools'
 
-export default function ValaxyDevtools(options: ValaxyDevtoolsOptions): Plugin {
+export default function ValaxyDevtools(options: ValaxyDevtoolsOptions = {}): Plugin {
   let config: ResolvedConfig
 
   function configureServer(server: ViteDevServer) {

package/uno.config.ts

@@ -1,3 +0,0 @@
-import unoConfig from '../../uno.config'
-
-export default unoConfig