vhaudiquet
99a943eb36
pipeline / build-and-push-images (push) Successful in 3m12s
NuxtJS, Vue, real web app Nuxt content: blog Better mobile/responsive design and practices Better practices overall
97 lines
1.8 KiB
Vue
97 lines
1.8 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:visible collapse xl:mt-0 mt-5 xl:ml-10 ml-5 mb-10 m-auto max-w-60 xl:sticky xl:top-16">
|
|
<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;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
li {
|
|
list-style: none;
|
|
}
|
|
</style> |