From 4c3ce021023c14884419d30f688b124017ce45a5 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 2 Jun 2021 16:17:13 +0800
Subject: [PATCH] docs(ssr)

---
 demo/SiteHeader.vue                               |  4 ++--
 demo/pages/Layout.vue                             | 10 +++++++---
 demo/pages/docs/ssr/enUS/index.md                 |  5 +++++
 demo/pages/docs/ssr/zhCN/index.md                 |  5 +++++
 demo/pages/docs/supported-platforms/enUS/index.md |  4 ----
 demo/pages/docs/supported-platforms/zhCN/index.md |  4 ----
 demo/pages/home/Footer.vue                        |  1 +
 demo/pages/home/index.vue                         |  2 +-
 demo/routes/routes.js                             |  8 ++++++++
 demo/store/menu-options.js                        |  5 +++++
 demo/styles/demo.css                              |  1 +
 11 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 demo/pages/docs/ssr/enUS/index.md
 create mode 100644 demo/pages/docs/ssr/zhCN/index.md

diff --git a/demo/SiteHeader.vue b/demo/SiteHeader.vue
index e58409d82..639f66788 100644
--- a/demo/SiteHeader.vue
+++ b/demo/SiteHeader.vue
@@ -495,7 +495,7 @@ export default {
 <style scoped>
 .nav {
   display: grid;
-  grid-template-rows: 63px;
+  grid-template-rows: calc(var(--header-height) - 1px);
   align-items: center;
   padding: 0 var(--side-padding);
 }
@@ -533,6 +533,6 @@ export default {
 
 <style>
 .nav-menu .n-menu-item {
-  height: 63px !important;
+  height: calc(var(--header-height) - 1px) !important;
 }
 </style>
diff --git a/demo/pages/Layout.vue b/demo/pages/Layout.vue
index 582d87132..96550aeb5 100644
--- a/demo/pages/Layout.vue
+++ b/demo/pages/Layout.vue
@@ -3,7 +3,7 @@
     id="doc-layout"
     :has-sider="showSider"
     :position="isXs ? undefined : 'absolute'"
-    :style="isXs ? undefined : 'top: 64px'"
+    :style="isXs ? undefined : 'top: var(--header-height)'"
   >
     <n-layout-sider
       :native-scrollbar="false"
@@ -11,7 +11,7 @@
       collapse-mode="transform"
       bordered
       show-trigger="bar"
-      trigger-style="top: calc(50% - 64px);"
+      trigger-style="top: calc(50% - var(--header-height));"
       v-if="showSider"
     >
       <n-menu
@@ -20,7 +20,11 @@
         @update:value="handleMenuUpdateValue"
       />
     </n-layout-sider>
-    <n-layout ref="layoutInstRef" :native-scrollbar="false">
+    <n-layout
+      ref="layoutInstRef"
+      :native-scrollbar="false"
+      content-style="min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column;"
+    >
       <router-view />
       <site-footer />
     </n-layout>
diff --git a/demo/pages/docs/ssr/enUS/index.md b/demo/pages/docs/ssr/enUS/index.md
new file mode 100644
index 000000000..146ddf1a9
--- /dev/null
+++ b/demo/pages/docs/ssr/enUS/index.md
@@ -0,0 +1,5 @@
+# Server-Sider Rendering
+
+SSR is still an experimental feature.
+
+For details please see Github Repo.
diff --git a/demo/pages/docs/ssr/zhCN/index.md b/demo/pages/docs/ssr/zhCN/index.md
new file mode 100644
index 000000000..081db2774
--- /dev/null
+++ b/demo/pages/docs/ssr/zhCN/index.md
@@ -0,0 +1,5 @@
+# 服务端渲染 Server-Sider Rendering
+
+SSR 目前仍是实验性功能。
+
+具体方式请参考 Github Repo。
diff --git a/demo/pages/docs/supported-platforms/enUS/index.md b/demo/pages/docs/supported-platforms/enUS/index.md
index caf2a9e17..3b4282351 100644
--- a/demo/pages/docs/supported-platforms/enUS/index.md
+++ b/demo/pages/docs/supported-platforms/enUS/index.md
@@ -17,7 +17,3 @@ Only Vue 3 (>3.0.5) is supported.
 ## TypeScript
 
 Require version > 4.1.
-
-## SSR
-
-I haven't try SSR yet and not a expert of SSR. You help will always be appreciated!
diff --git a/demo/pages/docs/supported-platforms/zhCN/index.md b/demo/pages/docs/supported-platforms/zhCN/index.md
index a66d3af02..c6424f7a8 100644
--- a/demo/pages/docs/supported-platforms/zhCN/index.md
+++ b/demo/pages/docs/supported-platforms/zhCN/index.md
@@ -17,7 +17,3 @@
 ## TypeScript
 
 需要版本 > 4.1。
-
-## SSR
-
-我并没有尝试过 SSR，实际上对 SSR 也不够了解。欢迎大家任何的相关帮助。
diff --git a/demo/pages/home/Footer.vue b/demo/pages/home/Footer.vue
index fb7cdecef..102dc2325 100644
--- a/demo/pages/home/Footer.vue
+++ b/demo/pages/home/Footer.vue
@@ -72,6 +72,7 @@ export default {
 <style scoped>
 .footer {
   --x-padding: 56px;
+  margin-top: auto;
 }
 
 .footer.footer--centered .footer-links {
diff --git a/demo/pages/home/index.vue b/demo/pages/home/index.vue
index 322f336ca..a2d3159dc 100644
--- a/demo/pages/home/index.vue
+++ b/demo/pages/home/index.vue
@@ -2,7 +2,7 @@
   <n-layout
     :native-scrollbar="false"
     :position="isXs ? 'static' : 'absolute'"
-    :style="isXs ? undefined : 'top: 64px'"
+    :style="isXs ? undefined : 'top: var(--header-height);'"
   >
     <div class="banner" style="overflow: hidden">
       <right-image class="right-image" v-if="!isS" />
diff --git a/demo/routes/routes.js b/demo/routes/routes.js
index 6deaa26e4..5be63a99a 100644
--- a/demo/routes/routes.js
+++ b/demo/routes/routes.js
@@ -39,6 +39,10 @@ export const enDocRoutes = [
   {
     path: 'jsx',
     component: () => import('../pages/docs/jsx/enUS/index.md')
+  },
+  {
+    path: 'ssr',
+    component: () => import('../pages/docs/ssr/enUS/index.md')
   }
 ]
 
@@ -83,6 +87,10 @@ export const zhDocRoutes = [
   {
     path: 'jsx',
     component: () => import('../pages/docs/jsx/zhCN/index.md')
+  },
+  {
+    path: 'ssr',
+    component: () => import('../pages/docs/ssr/zhCN/index.md')
   }
 ]
 
diff --git a/demo/store/menu-options.js b/demo/store/menu-options.js
index 225b4d173..aa7d1de2c 100644
--- a/demo/store/menu-options.js
+++ b/demo/store/menu-options.js
@@ -94,6 +94,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
           zh: 'JSX & TSX',
           path: '/jsx'
         },
+        {
+          en: 'Server-Sider Rendering',
+          zh: '服务端渲染 SSR',
+          path: '/ssr'
+        },
         {
           en: 'Customize Theme',
           zh: '调整主题',
diff --git a/demo/styles/demo.css b/demo/styles/demo.css
index e576b3909..be68801db 100644
--- a/demo/styles/demo.css
+++ b/demo/styles/demo.css
@@ -2,6 +2,7 @@
 
 body {
   overflow: hidden;
+  --header-height: 64px;
 }
 
 @media only screen and (max-width: 639px) {