Docs/ssr guide (#1825)

* Update webpack config for vue-book dev server. * Added SSR guide page.
epicmaxco · Jun 22, 2022 · b5524ce · b5524ce
1 parent 0142e81
commit b5524ce
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 4 deletions.
diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts
@@ -55,6 +55,10 @@ export const navigationRoutes: NavigationRoute[] = [
           badge: 'new',
         },
       },
+      {
+        name: 'ssr-guide',
+        displayName: 'menu.ssrGuide',
+      },
       // GENERATOR_ADD - gettingStarted
     ],
   },

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
@@ -1370,6 +1370,7 @@
     "treeShaking": "Tree Shaking",
     "counter": "Counter",
     "nuxt": "Nuxt",
+    "ssrGuide": "SSR",
     "spacer": "Spacer"
   },
   "all": {
@@ -4062,6 +4063,29 @@
       "moreAboutConfig": "More about configuration"
     }
   },
+  "ssrGuide": {
+    "title": "SSR",
+    "description": "Vuestic is fully compatible with server-side rendering.",
+    "cssVariables": {
+      "title": "CSS variables",
+      "description": "Vuestic UI uses `CSS variables` in components. For SSR you need to define them in html head element. You can use following code to generate CSS Variables based on your [ColorConfig](/services/colors-config):"
+    },
+    "solutions": {
+      "title": "Examples",
+      "description": "Here are two examples how you can add CSS variables to html head",
+
+      "nuxt": "Look at Nuxt3 guide",
+
+      "viteSsrPlugin": { 
+        "title": "Vite SSR Plugin",
+        "description": "Learn more about [Vite SSR Plugin](https://vite-plugin-ssr.com/vue-tour)"
+      },
+      "vitesse": { 
+        "title": "Vitesse",
+        "description": "Learn more about [Vitesse](https://github.com/antfu/vitesse) and [useHead](https://github.com/vueuse/head#server-side-rendering)"
+      }
+    }
+  },
   "spacer": {
     "title": "Spacer component",
     "summaryText": "`va-spacer` is an equivalent for the `flex-grow` property. It allows you to get more space between flex components.",
@@ -4072,4 +4096,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
@@ -1293,6 +1293,7 @@
     "treeShaking": "Tree Shaking",
     "counter": "Counter",
     "nuxt": "Nuxt",
+    "ssrGuide": "Ssr Guide",
     "spacer": "Spacer"
   },
   "all": {
@@ -3917,14 +3918,16 @@
       "moreAboutConfig": "Подробнее про конфигурирование"
     }
   },
+  "ssrGuide": {
+    "title": "SSR Guide"
+  },
   "spacer": {
     "title": "Spacer component",
-    "summaryText": "`va-spacer` аналог для свойства `flex-grow`. Он позволяет добавить пустое пространсто между компонентами.",
     "examples": {
       "default": {
         "title": "Базовое использование",
         "text": "`va-spacer` добавляет div с классом `.va-spacer`."
       }
     }
   }
-}
+}
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/css-variables.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/css-variables.ts
@@ -0,0 +1,3 @@
+export default `
+app.config.globalProperties.$vaColorConfig.renderCSSVarialbes()
+`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/index.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/index.ts
@@ -0,0 +1,3 @@
+export { default as cssVariables } from './css-variables'
+export { default as viteSsrPlugin } from './vite-ssr-plugin'
+export { default as vitesse } from './vitesse'
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vite-ssr-plugin.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vite-ssr-plugin.ts
@@ -0,0 +1,22 @@
+export default `// ...
+import { createVuestic } from 'vuestic-ui'
+import 'vuestic-ui/css'
+
+export async function render(pageContext) {
+  // ...
+  app.use(createVuestic())
+
+  const appHtml = await renderToString(app)
+  const cssVarialbes = app.config.globalProperties.$vaColorConfig.renderCSSVarialbes()
+
+  return escapeInject\`<!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vuestic App</title>
+        <style>\${cssVarialbes}</style>
+      </head>
+      <body>
+        <div id="app">\${dangerouslySkipEscape(appHtml)}</div>
+      </body>
+    </html>\`
+}`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vitesse.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vitesse.ts
@@ -0,0 +1,24 @@
+export default `// ...
+import { createVuestic } from 'vuestic-ui'
+import { ref } from 'vue'
+import 'vuestic-ui/css'
+
+const routes = setupLayouts(generatedRoutes)
+
+export const createApp = ViteSSG(
+  App,
+  { routes, base: import.meta.env.BASE_URL },
+  (ctx) => {
+    Object.values(import.meta.globEager('./modules/*.ts')).forEach(i => i.install?.(ctx))
+    ctx.app.use(createVuestic())
+
+    const head = app.config.globalProperties.$head
+    const colorConfig = app.config.globalProperties.$vaColorConfig
+    head.addHeadObjs(ref({
+      htmlAttrs: {
+        style: colorConfig.renderCSSVarialbes(),
+      },
+    }))
+  },
+)
+`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/page-config.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/page-config.ts
@@ -0,0 +1,28 @@
+import { ApiDocsBlock } from '@/types/configTypes'
+import { PageGenerationHelper } from '@/helpers/DocsHelper'
+import * as code from './code-examples'
+
+const block = new PageGenerationHelper(__dirname)
+
+const config: ApiDocsBlock[] = [
+  block.title('ssrGuide.title'),
+  block.paragraph('ssrGuide.description'),
+
+  block.subtitle('ssrGuide.cssVariables.title'),
+  block.paragraph('ssrGuide.cssVariables.description'),
+  block.code(code.cssVariables),
+
+  block.subtitle('ssrGuide.solutions.title'),
+  block.paragraph('ssrGuide.solutions.description'),
+
+  block.link('ssrGuide.solutions.nuxt', '/en/getting-started/nuxt'),
+
+  block.headline('ssrGuide.solutions.viteSsrPlugin.title'),
+  block.paragraph('ssrGuide.solutions.viteSsrPlugin.description'),
+  block.code(code.viteSsrPlugin),
+  block.headline('ssrGuide.solutions.vitesse.title'),
+  block.paragraph('ssrGuide.solutions.vitesse.description'),
+  block.code(code.vitesse),
+]
+
+export default config
diff --git a/packages/docs/src/page-configs/ui-elements/file-upload/api-options.ts b/packages/docs/src/page-configs/ui-elements/file-upload/api-options.ts
@@ -9,4 +9,4 @@ export default defineManualApi({
       types: '`(files: VaFile[]) => void`',
     },
   },
-})
+})
diff --git a/packages/docs/src/pages/getting-started/ssr-guide.vue b/packages/docs/src/pages/getting-started/ssr-guide.vue
@@ -0,0 +1,20 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import ssrGuideConfig from '../../page-configs/getting-started/ssr-guide/page-config'
+
+@Options({
+  components: {
+    DocsContent,
+  },
+})
+export default class SsrGuide extends Vue {
+  get configComputed () {
+    return ssrGuideConfig
+  }
+}
+</script>