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

Add meta tags for blog posts

Browse source
This commit is contained in:
Moritz Ruth 2021-12-18 20:26:18 +01:00
parent f286d09f63
commit 05f60382fb
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
8 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -9,7 +9,6 @@
<link rel="stylesheet" href="/node_modules/@fontsource/syne/700.css"> <link rel="stylesheet" href="/node_modules/@fontsource/syne/700.css">
<link rel="stylesheet" href="/node_modules/@fontsource/plus-jakarta-sans/700.css"> <link rel="stylesheet" href="/node_modules/@fontsource/plus-jakarta-sans/700.css">
<meta name="description" content="freelance software developer, graphic design enthusiast and hobby photographer"> <meta name="description" content="freelance software developer, graphic design enthusiast and hobby photographer">
<meta name="keywords" content="web, dev, development, coding, moritz, ruth, development, design, kotlin, android">
<link rel="shortcut icon" type="image/png" href="/icon.png"> <link rel="shortcut icon" type="image/png" href="/icon.png">
</head> </head>
<body> <body>

2
public/robots.txt
View file

@ -1,2 +1,2 @@
User-agent: * User-agent: *
Disallow: /impressum Disallow: /legal-notice

8
src/App.vue
View file

@ -64,11 +64,19 @@
import { computed, ref } from "vue" import { computed, ref } from "vue"
import { useIntervalFn, useWindowSize, whenever } from "@vueuse/core" import { useIntervalFn, useWindowSize, whenever } from "@vueuse/core"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
import { useHead } from "@vueuse/head"
import { pageComponentLoading } from "./store" import { pageComponentLoading } from "./store"
import { getKeywordsTagWithBase } from "./data"
export default { export default {
name: "App", name: "App",
setup() { setup() {
useHead({
meta: [
getKeywordsTagWithBase([])
]
})
const loadingStartedTime = ref<null | number>(null) const loadingStartedTime = ref<null | number>(null)
const isLoadingScreenActive = ref(false) const isLoadingScreenActive = ref(false)
const START_TRANSITION_DURATION = 200 const START_TRANSITION_DURATION = 200

8
src/photos.ts → src/data.ts
View file

@ -22,3 +22,11 @@ export const photos: Photo[] = [
description: "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)." description: "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)."
} }
] ]
const META_KEYWORDS = ["web", "dev", "development", "coding", "moritz", "ruth", "development", "design", "kotlin", "android", "photography", "matrix"]
export const getKeywordsWithBase = (keywords: string[]) => [...new Set([...META_KEYWORDS, ...keywords])]
export const getKeywordsTagWithBase = (keywords: string[]) => ({
name: "keywords",
content: getKeywordsWithBase(keywords).join(", ")
})

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

@ -3,9 +3,11 @@
<TopBarLayout v-else <TopBarLayout v-else
title="Blog" title="Blog"
back-target="/blog" back-target="/blog"
no-set-title> no-set-title
>
<Head> <Head>
<title>{{ post.title }} — Moritz Ruth</title> <title>{{ post.title }} — Moritz Ruth</title>
<meta name="keywords" :content="getKeywordsWithBase(post.tags).join(', ')">
</Head> </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">
@ -41,6 +43,7 @@
import Prose from "../../components/Prose.vue" import Prose from "../../components/Prose.vue"
import XSpacer from "../../components/XSpacer.vue" import XSpacer from "../../components/XSpacer.vue"
import NotFoundPage from "../../components/NotFoundPage.vue" import NotFoundPage from "../../components/NotFoundPage.vue"
import { getKeywordsWithBase } from "../../data"
export default { export default {
name: "BlogPostPage", name: "BlogPostPage",
@ -53,7 +56,8 @@
return { return {
post, post,
// Yep, that's awful code // Yep, that's awful code
html: post?.body_html?.replaceAll("h2>", "h3>")?.replaceAll("h1>", "h2>") html: post?.body_html?.replaceAll("h2>", "h3>")?.replaceAll("h1>", "h2>"),
getKeywordsWithBase
} }
} }
} }

2
src/pages/photography.vue
View file

@ -33,7 +33,7 @@
<script lang="ts"> <script lang="ts">
import TopBarLayout from "../components/TopBarLayout.vue" import TopBarLayout from "../components/TopBarLayout.vue"
import { photos } from "../photos" import { photos } from "../data"
import SuspendingImage from "../components/SuspendingImage.vue" import SuspendingImage from "../components/SuspendingImage.vue"
export default { export default {

2
src/posts.ts
View file

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import { $fetch } from "ohmyfetch" import { $fetch } from "ohmyfetch"
const USERNAME = "moritzruth" const USERNAME = "moritzruth"
@ -9,6 +10,7 @@ export interface Post {
description: string description: string
published_at: string published_at: string
reading_time_minutes: number reading_time_minutes: number
tags: string[]
} }
export interface FullPost extends Post { export interface FullPost extends Post {

4
tsconfig.json
View file

@ -2,13 +2,15 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"module": "ESNext", "module": "ESNext",
"lib": ["DOM", "ESNext", "es2020"], "target": "ES2021",
"lib": ["DOM", "ESNext"],
"strict": true, "strict": true,
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"strictNullChecks": true, "strictNullChecks": true,
"downlevelIteration": true,
"forceConsistentCasingInFileNames": true "forceConsistentCasingInFileNames": true
} }
} }