Add titles and descriptions.
This commit is contained in:
parent
4f0124b662
commit
0754431a63
|
|
@ -5,6 +5,7 @@
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Andrew Lalis</title>
|
<title>Andrew Lalis</title>
|
||||||
|
<meta name="description" content="Andrew's homepage on the internet."/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import MainSite from '@/views/MainSite.vue'
|
||||||
import GardenDetails from '@/views/GardenDetails.vue'
|
import GardenDetails from '@/views/GardenDetails.vue'
|
||||||
import HikingView from '@/views/HikingView.vue'
|
import HikingView from '@/views/HikingView.vue'
|
||||||
import GardenHerbsView from '@/views/GardenHerbsView.vue'
|
import GardenHerbsView from '@/views/GardenHerbsView.vue'
|
||||||
|
import { nextTick } from 'vue'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
|
@ -29,23 +30,43 @@ const router = createRouter({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'contact',
|
path: 'contact',
|
||||||
component: ContactView
|
component: ContactView,
|
||||||
|
meta: {
|
||||||
|
title: "Andrew's Contact Info",
|
||||||
|
description: "Information for how to get in touch with Andrew."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'software',
|
path: 'software',
|
||||||
component: SoftwareView
|
component: SoftwareView,
|
||||||
|
meta: {
|
||||||
|
title: "Andrew's Software",
|
||||||
|
description: "A brief collection of software developed by Andrew."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'gardening',
|
path: 'gardening',
|
||||||
component: GardeningView
|
component: GardeningView,
|
||||||
|
meta: {
|
||||||
|
title: "Andrew's Gardening",
|
||||||
|
description: "Information about Andrew's gardening experiences."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'hiking',
|
path: 'hiking',
|
||||||
component: HikingView
|
component: HikingView,
|
||||||
|
meta: {
|
||||||
|
title: "Andrew's Hiking",
|
||||||
|
description: "A logbook of notable summits and hikes Andrew has completed."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'logbook',
|
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',
|
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
|
export default router
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue