diff --git a/app/index.html b/app/index.html
index f2988da..9a33442 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,6 +5,7 @@
Andrew Lalis
+
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 61270f2..3b3ec59 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -9,6 +9,7 @@ import MainSite from '@/views/MainSite.vue'
import GardenDetails from '@/views/GardenDetails.vue'
import HikingView from '@/views/HikingView.vue'
import GardenHerbsView from '@/views/GardenHerbsView.vue'
+import { nextTick } from 'vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -29,23 +30,43 @@ const router = createRouter({
},
{
path: 'contact',
- component: ContactView
+ component: ContactView,
+ meta: {
+ title: "Andrew's Contact Info",
+ description: "Information for how to get in touch with Andrew."
+ }
},
{
path: 'software',
- component: SoftwareView
+ component: SoftwareView,
+ meta: {
+ title: "Andrew's Software",
+ description: "A brief collection of software developed by Andrew."
+ }
},
{
path: 'gardening',
- component: GardeningView
+ component: GardeningView,
+ meta: {
+ title: "Andrew's Gardening",
+ description: "Information about Andrew's gardening experiences."
+ }
},
{
path: 'hiking',
- component: HikingView
+ component: HikingView,
+ meta: {
+ title: "Andrew's Hiking",
+ description: "A logbook of notable summits and hikes Andrew has completed."
+ }
},
{
path: 'logbook',
- component: LogBookView
+ component: LogBookView,
+ meta: {
+ title: "Andrew's Logbook",
+ description: "Interactive messageboard where people can leave a public note on Andrew's website."
+ }
}
]
},
@@ -55,9 +76,35 @@ const router = createRouter({
},
{
path: '/gardening/herbs',
- component: GardenHerbsView
+ component: GardenHerbsView,
+ meta: {
+ title: "Andrew's Herb Garden",
+ description: "Information about Andrew's herb garden."
+ }
}
]
})
+// Custom logic after navigation to change top-level document properties based
+// on the selected route's metadata.
+router.afterEach((to) => {
+ nextTick(() => {
+ // Set document title if available.
+ if (to.meta.title && typeof(to.meta.title) === 'string') {
+ document.title = to.meta.title
+ } else {
+ document.title = 'Andrew Lalis'
+ }
+ // Set document description meta tag if available.
+ const metaTag = document.querySelector("meta[name='description']") as HTMLMetaElement
+ if (metaTag) {
+ if (to.meta.description && typeof(to.meta.description) === 'string') {
+ metaTag.content = to.meta.description
+ } else {
+ metaTag.content = "Andrew's homepage on the internet."
+ }
+ }
+ })
+})
+
export default router