Add unhead package. Add meta for spa and ssr

wbbaker · Apr 21, 2023 · 757976f · 757976f
1 parent 9bb9bbc
commit 757976f
Show file tree

Hide file tree

Showing 11 changed files with 189 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -6,15 +6,17 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title><%- project_name %></title>
+    <!--head-tags-->
     <!--preload-links-->
     <!--app-state-->
   </head>
   <body>
+    <!--body-tags-open-->
     <div id="app"></div>
     <script
       type="module"
       src="/src/entry-client.js"
     ></script>
+    <!--body-tags-->
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,10 +17,12 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "@nuxt/devalue": "^2.0.0",
+    "@unhead/ssr": "^1.1.26",
     "axios": "^1.3.6",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",
     "pinia": "^2.0.35",
+    "unhead": "^1.1.26",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },

diff --git a/server.js b/server.js
@@ -75,11 +75,17 @@ export async function createServer(
         render = (await import('./dist/server/entry-server.js')).render
       }
 
-      const [appHtml, appState, preloadLinks] = await render(url, manifest)
+      const [appHtml, appState, preloadLinks, tagMeta] = await render(
+        url,
+        manifest
+      )
 
       const html = template
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-state-->`, appState)
+        .replace(`<!--head-tags-->`, tagMeta.headTags)
+        .replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
+        .replace(`<!--body-tags-->`, tagMeta.bodyTags)
         .replace(makeAppContainer(), makeAppContainer(appHtml))
 
       res.status(200).set({ 'Content-Type': 'text/html' }).end(html)

diff --git a/src/App.vue b/src/App.vue
@@ -6,5 +6,14 @@
 
 <script setup>
 import ApplicationLayout from '@/layout/Application.vue'
+import { useHead, createHead } from 'unhead'
+import { getMetaFromConfig } from '@/utils'
 
+const head = createHead()
+const meta = getMetaFromConfig(__APP_ENV__)
+
+useHead({
+  title: __APP_ENV__.project_name,
+  meta
+})
 </script>
diff --git a/src/entry-server.js b/src/entry-server.js
@@ -2,6 +2,8 @@ import { basename } from 'node:path'
 import { renderToString } from 'vue/server-renderer'
 import { createApp } from './main'
 import { registerGlobalComponents } from '@/components/globalComponents'
+import { getActiveHead } from 'unhead'
+import { renderSSRHead } from '@unhead/ssr'
 import devalue from '@nuxt/devalue'
 
 export async function render(url, manifest) {
@@ -18,7 +20,7 @@ export async function render(url, manifest) {
   // components that have been instantiated during this render call.
   const ctx = {}
   const html = await renderToString(app, ctx)
-
+  const headPayload = await renderSSRHead(getActiveHead())
   const renderState = `
   <script>
     window.initialState = ${devalue(store.state.value)}
@@ -28,7 +30,7 @@ export async function render(url, manifest) {
   // which we can then use to determine what files need to be preloaded for this
   // request.
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, renderState, preloadLinks]
+  return [html, renderState, preloadLinks, headPayload]
 }
 
 function renderPreloadLinks(modules, manifest) {

diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
@@ -66,6 +66,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { useOtuStore } from '../store/store'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
+import { useHead, createHead } from 'unhead'
+
 //import useChildrenRoutes from '../composables/useChildrenRoutes'
 
 const route = useRoute()
@@ -84,24 +86,31 @@ const taxon = computed(() => store.taxon)
 const isReady = computed(() => otu.value?.id && taxon.value?.id)
 
 onServerPrefetch(async () => {
-  await store.loadInit(route.params.id)
+  await loadInitialData()
 })
 
 watch(
   () => route.fullPath,
   async () => {
-    store.$reset()
-    store.loadInit(route.params.id)
+    loadInitialData()
   }
 )
 
 onMounted(() => {
   if (!otu.value || otu.value.id !== Number(route.params.id)) {
-    store.$reset()
-    store.loadInit(route.params.id)
+    loadInitialData()
   }
 })
 
+async function loadInitialData() {
+  store.$reset()
+  await store.loadInit(route.params.id)
+
+  useHead({
+    title: `${__APP_ENV__.project_name} - ${taxon.value.full_name}`
+  })
+}
+
 function loadOtu({ id }) {
   router.push({
     name: 'otus-id-overview',

diff --git a/src/plugins/htmlPlugin.js b/src/plugins/htmlPlugin.js
diff --git a/src/utils/getMeta.js b/src/utils/getMeta.js
@@ -0,0 +1,13 @@
+export function getMetaFromConfig(configObj) {
+  const metaObj = Object.entries(configObj).filter(([key, value]) =>
+    key.startsWith('meta_')
+  )
+
+  return metaObj.map(([key, value]) => {
+    const metaKey = key.slice(5)
+
+    return {
+      [metaKey]: value
+    }
+  })
+}
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -0,0 +1,4 @@
+export * from './color'
+export * from './getMeta'
+export * from './request'
+export * from './strings'
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import { loadConfiguration } from './src/utils/loadConfiguration.js'
 import path from 'path'
-import htmlPlugin from './src/plugins/htmlPlugin.js'
 import Vue from '@vitejs/plugin-vue'
 import Markdown from 'vite-plugin-md'
 import Pages from 'vite-plugin-pages'
@@ -41,8 +40,7 @@ export default () => {
             return route
           }
         }
-      }),
-      htmlPlugin(configuration)
+      })
     ]
   })
 }