got blogs working better, no content shifts + more

pages/blog/[...slug].vue

@@ -1,9 +1,10 @@
 <template>
 	<Nav />
 	<main class="grid grid-cols-12 gap-5 justify-center">
-		<div class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
+		<div class="py-6 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 			<ContentDoc v-slot="{ doc }">
-				<img :src="doc.img" class="mb-2" />
+				<img :src="doc.image.src"
+					class="mb-2" />
 				<h1 class="text-3xl md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
 				<p class="mb-1 text-zinc-400">
 					{{ doc.description }}
@@ -12,7 +13,8 @@
 					{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
 				</p>
 				<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
-					<tagButton v-for="tag in doc.tags" :name="tag"
+					<tagButton v-for="tag in doc.tags"
+						:name="tag"
 						:iconName='tag' />
 				</div>
 				<ContentRenderer :value="doc" />
@@ -20,8 +22,9 @@
 		</div>
 	</main>
 	<footer class="grid grid-cols-12 gap-5 justify-center">
-			<div class="py-6 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
-				<NewsletterSignup />
-			</div>
-		</footer>
-</template>
+		<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
+			<NewsletterSignup class="mb-2" />
+			© 2022 Juls07 - GPL v3.0 License
+		</div>
+	</footer>
+</template>

pages/blog/index.vue

@@ -5,12 +5,11 @@
 			<div v-for="article in articles"
 				:key="article._path"
 				class="mb-5 px-1.5">
-				<p v-show="false">{{ article.date }}</p>
-				<div class="text-white rounded-lg border border-neutral-700 bg-zinc-800 shadow-md">
-					<img v-if="article.img"
-						:src="article.img"
+				<div class="text-white bg-zinc-800 max-h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
+					<img v-if="article.image.src"
+						:src="article.image.src"
 						class="w-full rounded-tl-lg rounded-tr-lg" />
-					<div class="p-3">
+					<div class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800 mb-1 pb-1 relative">
 						<h3>
 							<nuxt-link class="text-lg"
 								:to="article._path">
@@ -23,15 +22,17 @@
 						<p class="text-zinc-400 dark:text-zinc-400">
 							{{ article.description }}
 						</p>
-						<p style="max-height: 224px;"
-							class="overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800 mb-1 pb-1 relative text-zinc-200">
-							<ContentDoc :value="article" :path="article._path" v-slot="{ doc }">
+						<p
+							class="text-zinc-200 max-h-56">
+							<ContentDoc :value="article"
+								:path="article._path"
+								v-slot="{ doc }">
 								<div class="flex flex-wrap w-full gap-2 justify-start mb-2">
 									<tagButton v-for="tag in doc.tags"
 										:name="tag"
 										:iconName='tag' />
 								</div>
-								<ContentRenderer :value="doc" />
+								<ContentRenderer :value="doc" :excerpt="true" />
 							</ContentDoc>
 						</p>
 					</div>
@@ -41,7 +42,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
 	.where({ _draft: false })
 	.sort({ date: -1, $numeric: true, })
@@ -49,29 +50,10 @@ const { data: articles } = await useAsyncData('posts-list', () => queryContent('
 );
 </script>
 
-<script>
+<script lang="ts">
 export default {
 	head: {
-		title: "Juls07",
-		htmlAttrs: {
-			lang: "en",
-		},
-		meta: [
-			{ charset: "utf-8" },
-			{ name: "viewport", content: "width=device-width, initial-scale=1" },
-			{ name: "google", content: "notranslate" },
-			{
-				hid: "description",
-				name: "description",
-				content: "Juls07 is a game developer, web developer and pixel artist.",
-			},
-			{ property: "og:type", content: "website" },
-			{ property: "og:image", content: "/og.png" },
-			{ property: "og:title", content: "Juls07" },
-			{ property: "og:description", content: "Juls07's website" },
-			{ property: "og:url", content: "https://juls07.dev" },
-		],
-		link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
-	},
-};
+		title: 'Juls07'
+	}
+}
 </script>

pages/index.vue

@@ -6,7 +6,7 @@
 				class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]">
 				<div
 					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
-					<img src="~/assets/pictues/juls07.png"
+					<img alt="juls07 profile picture" src="~/assets/pictues/juls07.png"
 						class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
 					<div class="grid grid-rows-5 grid-cols-1 h-fit">
 						<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
@@ -21,7 +21,7 @@
 				<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
 				<hr class="border-2 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
 				<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-4">
-					Hi there, I'm juls07, I am 14 years old and I <span tabindex="1"
+					Hi there, I'm juls07, I am 14 years old and I <span tabindex="0"
 						class="love">love</span> web
 					development. I first dabbled in web development
 					when I was ten, and here we are today! I mainly use