Moved to Nuxt

NuxtJS, Vue, real web app

Nuxt content: blog

Better mobile/responsive design and practices

Better practices overall

app/pages/blog/[slug].vue

@@ -0,0 +1,97 @@
+<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>