vhaudiquet
fa4bd2e230
pipeline / build-and-push-images (push) Successful in 1m23s
A History Of My Homelab Small changes: - Underline in lists is fixed - New content components Code, Note - Fixed BlogImage font size - Fixed ImageText margins
103 lines
1.9 KiB
Vue
103 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const slug = route.params.slug
|
|
const { data } = await useAsyncData(() => queryCollection('blog').path("/blog/" + slug).first())
|
|
const title = (data.value == undefined ? 'Blog' : data.value!.title);
|
|
|
|
useSeoMeta({
|
|
title: data.value?.title,
|
|
description: data.value?.description
|
|
})
|
|
defineOgImageComponent('BlogPost', {
|
|
title: title,
|
|
description: data.value?.description
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<HeaderCompact :title="title" previous-link="/blog" />
|
|
|
|
<div class="flex xl:flex-row flex-col-reverse xl:mt-20 sm:mt-10 mt-5 xl:mb-20 mb-5 m-auto">
|
|
<ContentRenderer v-if="data" :value="data" class="max-w-4xl w-[90%] xl:mr-10 m-auto content" />
|
|
|
|
<div v-if="data?.body.toc != undefined" class="xl:sticky xl:top-16 xl:visible xl:block collapse hidden xl:mt-0 mt-5 xl:ml-10 xl:mb-auto ml-5 mb-10 m-auto max-w-60">
|
|
<ul>
|
|
<BlogTocLink v-for="link of data.body.toc.links" :link="link" />
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
.content h2 {
|
|
font-size: 30px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.content h3 {
|
|
font-size: 26px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.content h4 {
|
|
font-size: 23px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.content h5 {
|
|
font-size: 21px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.content p {
|
|
font-size: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.content ul {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
font-size: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
.content li {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.content a {
|
|
color: initial;
|
|
}
|
|
.content a:link {
|
|
color: initial;
|
|
}
|
|
.content a:visited {
|
|
color: initial;
|
|
}
|
|
.content a:hover {
|
|
color: initial;
|
|
}
|
|
.content a:active {
|
|
color: initial;
|
|
}
|
|
.content p a {
|
|
text-decoration: underline;
|
|
}
|
|
.content li a {
|
|
text-decoration: underline;
|
|
}
|
|
.content ul a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
li {
|
|
list-style: none;
|
|
}
|
|
</style> |