Merge pull request #35 from trenz-gmbh/features/dynamic_title

Added dynamic title based on route
trenz-gmbh · Aug 11, 2022 · 8de8fd3 · 8de8fd3
2 parents 810eebb + 0646162
commit 8de8fd3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 31 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
 VUE_APP_API_BASE=https://localhost:7262/api/
 VUE_APP_PRIMARY_COLOR='#8af'
-VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
+VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
+VUE_APP_NAME='My Wiki'
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -3,40 +3,52 @@ import ContentView from "@/views/ContentView.vue";
 import NotFoundView from "@/views/NotFoundView.vue";
 
 const routes: Array<RouteRecordRaw> = [
-    {
-        path: '/',
-        name: 'home',
-        component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue'),
-        meta: {
-            title: 'Home',
-        }
-    },
-    {
-        path: '/wiki/:location([^?#]*)',
-        name: 'content',
-        component: ContentView,
-        props: true,
-    },
-    {
-        path: '/search',
-        name: 'search',
-        component: () => import(/* webpackChunkName: "search" */ '../views/SearchView.vue'),
-        meta: {
-            title: 'Search',
-        }
-    },
-    {
-        path: '/:path(.*)*',
-        component: NotFoundView,
-        meta: {
-            title: '',
-        }
+  {
+    path: '/',
+    name: 'home',
+    component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue'),
+    meta: {
+      title: 'Home',
     }
+  },
+  {
+    path: '/wiki/:location([^?#]*)',
+    name: 'content',
+    component: ContentView,
+    props: true,
+  },
+  {
+    path: '/search',
+    name: 'search',
+    component: () => import(/* webpackChunkName: "search" */ '../views/SearchView.vue'),
+    meta: {
+      title: 'Search',
+    }
+  },
+  {
+    path: '/:path(.*)*',
+    component: NotFoundView,
+    meta: {
+      title: 'Not Found',
+    }
+  }
 ]
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
-    routes
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title + ' \u2022 ' + process.env.VUE_APP_NAME;
+  } else if (to.params.location) {
+    document.title = (to.params.location as string).split('/').pop() + ' \u2022 ' + process.env.VUE_APP_NAME;
+  } else {
+    document.title = process.env.VUE_APP_NAME;
+  }
+
+  next()
+});
+
 export default router