From dcae3f330d194f9c927858466e28e059809970eb Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 25 May 2020 19:35:58 -0400
Subject: [PATCH] wip: default theme

---
 src/client/theme-default/Layout.vue           | 86 +++++++++++++++++--
 src/client/theme-default/components/Home.vue  |  0
 .../theme-default/components/NavBar.vue       | 19 ++++
 src/client/theme-default/components/Page.vue  | 19 ++++
 .../theme-default/components/SideBar.vue      |  5 ++
 src/node/markdownToVue.ts                     |  3 +-
 6 files changed, 123 insertions(+), 9 deletions(-)
 create mode 100644 src/client/theme-default/components/Home.vue
 create mode 100644 src/client/theme-default/components/NavBar.vue
 create mode 100644 src/client/theme-default/components/Page.vue
 create mode 100644 src/client/theme-default/components/SideBar.vue

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 2afccade..cc2a7d95 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -1,14 +1,86 @@
 <template>
-  <div class="theme-container">
-    <h1>{{ $site.title }}</h1>
-    <p>{{ $site.description }}</p>
-    <Content/>
+  <div class="theme">
+    <header>
+      <NavBar />
+    </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 {
-  font-family: Arial, Helvetica, sans-serif;
+body {
+  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>
diff --git a/src/client/theme-default/components/Home.vue b/src/client/theme-default/components/Home.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
new file mode 100644
index 00000000..eeaf4cb6
--- /dev/null
+++ b/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>
diff --git a/src/client/theme-default/components/Page.vue b/src/client/theme-default/components/Page.vue
new file mode 100644
index 00000000..8e388a2f
--- /dev/null
+++ b/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>
diff --git a/src/client/theme-default/components/SideBar.vue b/src/client/theme-default/components/SideBar.vue
new file mode 100644
index 00000000..4262f14d
--- /dev/null
+++ b/src/client/theme-default/components/SideBar.vue
@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <li>sidebar</li>
+  </ul>
+</template>
diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts
index 9c07cc9a..cb6c917c 100644
--- a/src/node/markdownToVue.ts
+++ b/src/node/markdownToVue.ts
@@ -51,8 +51,7 @@ export function createMarkdownToVueRenderFn(
       : data.hoistedTags || []
 
     const vueSrc =
-      additionalBlocks.join('\n') +
-      `\n<template><div class="vitepress-content">${html}</div></template>`
+      additionalBlocks.join('\n') + `\n<template><div>${html}</div></template>`
 
     debug(`[render] ${file} in ${Date.now() - start}ms.`)