export Debug and Content components

lib/app/components/Debug.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="debug" :class="{ open }" @click="open = !open">
+    <pre>debug</pre>
+    <pre>$site {{ $site }}</pre>
+    <pre>$page {{ $page }}</pre>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const open = ref(false)
+    return {
+      open
+    }
+  }
+}
+</script>
+
+<style>
+.debug {
+  position: fixed;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 25px;
+  padding: 5px;
+  overflow: hidden;
+  color: #eeeeee;
+  margin-top: -15px;
+  transition: all .15s ease;
+  background-color: rgba(0,0,0,0.85);
+}
+
+.debug.open {
+  width: 500px;
+  height: 100%;
+  margin-top: 0;
+  padding: 5px 20px;
+  overflow: scroll;
+}
+
+.debug pre {
+  font-family: Hack, monospace;
+  font-size: 13px;
+}
+</style>

lib/app/exports.js

@@ -3,3 +3,7 @@
 export { useSiteData } from './composables/siteData'
 export { usePageData } from './composables/pageData'
 export { useRouter, useRoute } from './router'
+
+export { Content } from './components/Content'
+import Debug from './components/Debug.vue'
+export { Debug }

lib/app/index.js

@@ -1,9 +1,9 @@
 import { createApp as createClientApp, createSSRApp, ref, readonly } from 'vue'
-import { Content } from './components/Content'
 import { createRouter, RouterSymbol } from './router'
 import { useUpdateHead } from './composables/head'
 import { siteDataRef } from './composables/siteData'
 import { pageDataSymbol } from './composables/pageData'
+import { Content } from './components/Content'
 import Theme from '/@theme/index'
 import { hot } from '@hmr'
 

lib/theme-default/Layout.vue

@@ -4,23 +4,15 @@
     <p>{{ $site.description }}</p>
     <Content/>
   </div>
-  <div class="debug">
-    <pre>$site {{ $site }}</pre>
-    <pre>$page {{ $page }}</pre>
-    <pre>useSiteData() {{ site }}</pre>
-    <pre>usePageData() {{ page }}</pre>
-  </div>
+  <Debug/>
 </template>
 
 <script>
-import { useSiteData, usePageData } from 'vitepress'
+import { Debug } from 'vitepress'
 
 export default {
-  setup() {
-    return {
-      site: useSiteData(),
-      page: usePageData()
-    }
+  components: {
+    Debug: __DEV__ ? Debug : () => null
   }
 }
 </script>
@@ -29,14 +21,4 @@ export default {
 .theme-container {
   font-family: Arial, Helvetica, sans-serif;
 }
-
-.debug {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 400px;
-  color: #fff;
-  background-color: rgba(0,0,0,0.85);
-  padding: 10px 20px;
-}
 </style>