Add titles and descriptions.

This commit is contained in:
Andrew Lalis 2026-01-10 17:25:52 -05:00
parent 4f0124b662
commit 0754431a63
2 changed files with 54 additions and 6 deletions

View File

@ -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>

View File

@ -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