moritzruth/moritzruth.de
1
0
Fork 0
Code Activity Actions

Set page title for blog posts

Browse source
This commit is contained in:
Moritz Ruth 2021-12-18 19:58:01 +01:00
parent 7ad56aa98b
commit c02516706f
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
3 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.eslintrc.json
View file

@ -1,4 +1,7 @@
{ {
"root": true, "root": true,
"extends": "awzzm-vue" "extends": "awzzm-vue",
"rules": {
"vue/no-reserved-component-names": "off"
}
} }

5
src/components/TopBarLayout.vue
View file

@ -51,10 +51,11 @@
title: { title: {
type: String, type: String,
required: true required: true
} },
noSetTitle: Boolean
}, },
setup(props) { setup(props) {
useHead({ if (!props.noSetTitle) useHead({
title: `${props.title} — Moritz Ruth` title: `${props.title} — Moritz Ruth`
}) })
} }

12
src/pages/blog/[slug].vue
View file

@ -1,6 +1,12 @@
<template> <template>
<NotFoundPage v-if="post === null" object-name="post" back-target="/blog"/> <NotFoundPage v-if="post === null" object-name="post" back-target="/blog"/>
<TopBarLayout v-else title="Blog" back-target="/blog"> <TopBarLayout v-else
title="Blog"
back-target="/blog"
no-set-title>
<Head>
<title>{{ post.title }} — Moritz Ruth</title>
</Head>
<article> <article>
<h1 class="font-bold text-3xl sm:text-3xl sm:text-center font-special"> <h1 class="font-bold text-3xl sm:text-3xl sm:text-center font-special">
{{ post.title }} {{ post.title }}
@ -29,6 +35,7 @@
<script lang="ts"> <script lang="ts">
import { useRoute } from "vue-router" import { useRoute } from "vue-router"
import { Head } from "@vueuse/head"
import TopBarLayout from "../../components/TopBarLayout.vue" import TopBarLayout from "../../components/TopBarLayout.vue"
import { getPostBySlug } from "../../posts" import { getPostBySlug } from "../../posts"
import Prose from "../../components/Prose.vue" import Prose from "../../components/Prose.vue"
@ -37,9 +44,10 @@
export default { export default {
name: "BlogPostPage", name: "BlogPostPage",
components: { NotFoundPage, XSpacer, Prose, TopBarLayout }, components: { NotFoundPage, XSpacer, Prose, TopBarLayout, Head },
async setup() { async setup() {
const route = useRoute() const route = useRoute()
const post = await getPostBySlug(route.params.slug as string) const post = await getPostBySlug(route.params.slug as string)
return { return {