New blog article: history-homelab

A History Of My Homelab

Small changes:
- Underline in lists is fixed
- New content components Code, Note
- Fixed BlogImage font size
- Fixed ImageText margins

app/components/blog/Code.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+</script>
+
+<template>
+<div class="ml-auto mr-auto mt-2 mb-2 p-2 rounded-xl bg-slate-100 w-[100%] overflow-x-scroll slot">
+    <slot />
+</div>
+<div class="ml-auto mr-auto mt-2 w-fit max-w-[80%] slot-desc">
+    <slot name="description" />
+</div>
+</template>
+
+<style lang="css" scoped>
+.slot > * {
+  font-size: 18px;
+}
+.slot-desc > * {
+  font-size: 16px;
+}
+</style>

app/components/blog/Image.vue

@@ -6,7 +6,13 @@ const props = defineProps<{
 
 <template>
 <img class="object-contain sm:max-w-[85%] max-w-[95%] m-auto" :src="props.image" />
-<div class="ml-auto mr-auto w-fit">
+<div class="ml-auto mr-auto mt-2 w-fit max-w-[80%] slot">
     <slot />
 </div>
 </template>
+
+<style lang="css" scoped>
+.slot > * {
+  font-size: 16px;
+}
+</style>

app/components/blog/ImageText.vue

@@ -10,7 +10,7 @@ if(props.imageRight == true || props.imageRight == "true") imagePosition = "sm:f
 
 <template>
 <div :class="imagePosition" class="flex mt-5 mb-4 flex-col">
-    <img class="object-contain sm:max-w-[40%] sm:max-h-[350px] max-h-[300px] max-w-[80%] m-auto" :src="props.image" />
+    <img class="object-contain sm:max-w-[40%] sm:max-h-[350px] max-h-[300px] max-w-[80%] sm:ml-4 sm:mr-20 m-auto" :src="props.image" />
     <p class="self-center ml-5 sm:mt-2 mt-4">
         <slot />
     </p>

app/components/blog/Note.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+<div class="ml-auto mr-auto w-fit max-w-[90%] slot">
+    <slot />
+</div>
+</template>
+
+<style lang="css" scoped>
+.slot > * {
+  font-size: 18px;
+}
+</style>

app/pages/blog/[slug].vue

@@ -87,6 +87,12 @@ defineOgImageComponent('BlogPost', {
 .content p a {
     text-decoration: underline;
 }
+.content li a {
+    text-decoration: underline;
+}
+.content ul a {
+    text-decoration: underline;
+}
 
 ul {
   list-style: none;

app/pages/blog/index.vue

@@ -20,7 +20,7 @@ function formatDateString(dateString: string) : string {
 <template>
   <HeaderCompact title="Blog" previous-link="/" class="mb-20" />
 
-  <div class="m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
+  <div class="mb-8 mt-8 m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
       <h1 class="text-2xl" v-if="article">{{ article.title }}</h1>
       
       <h3 class="text-xl" v-if="article">