Add titles and descriptions.
This commit is contained in:
parent
4f0124b662
commit
0754431a63
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Andrew Lalis</title>
|
||||
<meta name="description" content="Andrew's homepage on the internet."/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue