wip: default theme

src/client/theme-default/Layout.vue

@@ -1,14 +1,86 @@
 <template>
-  <div class="theme-container">
+  <div class="theme">
-    <h1>{{ $site.title }}</h1>
+    <header>
-    <p>{{ $site.description }}</p>
+      <NavBar />
-    <Content/>
+    </header>
+    <aside>
+      <SideBar />
+    </aside>
+    <main>
+      <Page />
+    </main>
   </div>
-  <Debug/>
+  <Debug />
 </template>
 
+<script>
+import NavBar from './components/NavBar.vue'
+import SideBar from './components/Sidebar.vue'
+import Page from './components/Page.vue'
+
+export default {
+  components: {
+    NavBar,
+    SideBar,
+    Page
+  }
+}
+</script>
+
 <style>
-.theme-container {
+body {
-  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.theme {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --border-color: rgb(226, 232, 240);
+  --header-height: 4rem;
+  --sidebar-width: 18rem;
+  --text-color: #2c3e50;
+  --accent-color: #3eaf7c;
+  color: var(--text-color);
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  background-color: #fff;
+  border-bottom: 1px solid var(--border-color);
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+}
+
+aside {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--sidebar-width);
+  padding-top: calc(var(--header-height) + 1.5rem);
+  border-right: 1px solid var(--border-color);
+  background-color: #fff;
+  z-index: 3;
+  overflow-y: auto;
+}
+
+main {
+  margin-top: var(--header-height);
+  margin-left: var(--sidebar-width);
+}
+
+a {
+  text-decoration: none;
 }
 </style>

src/client/theme-default/components/NavBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <a
+    class="site-title"
+    :aria-label="$site.title + ', back to home'"
+    :href="$site.base"
+    >{{ $site.title }}</a
+  >
+  <ul class="nav-links">
+    <li><a href="/hello/index">hello</a></li>
+  </ul>
+</template>
+
+<style>
+.site-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+</style>

src/client/theme-default/components/Page.vue

@@ -0,0 +1,19 @@
+<template>
+  <Content class="content" />
+</template>
+
+<style>
+.content {
+  max-width: 46rem;
+  margin: 0px auto;
+  padding: 1rem 1.5rem;
+}
+
+.content a {
+  color: var(--accent-color);
+}
+
+.content a:hover {
+  text-decoration: underline;
+}
+</style>

src/client/theme-default/components/SideBar.vue

@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <li>sidebar</li>
+  </ul>
+</template>

src/node/markdownToVue.ts

@@ -51,8 +51,7 @@ export function createMarkdownToVueRenderFn(
       : data.hoistedTags || []
 
     const vueSrc =
-      additionalBlocks.join('\n') +
+      additionalBlocks.join('\n') + `\n<template><div>${html}</div></template>`
-      `\n<template><div class="vitepress-content">${html}</div></template>`
 
     debug(`[render] ${file} in ${Date.now() - start}ms.`)