Writing article

app/components/AppFooter.vue

@@ -34,7 +34,7 @@ const socials = [
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
         <h1>Find me on:</h1>
-        <div class="flex gap-4 flex-wrap">
+        <div class="flex gap-2 flex-wrap">
           <HomeLink
             v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
             :key="social.label"

app/components/content/ProseA.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
+    default: undefined,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+    class="sofia font-medium duration-300 underline-offset-2 text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 hover:decoration-black dark:hover:decoration-white"
+  >
+    <slot />
+  </NuxtLink>
+</template>

app/components/content/ProseH2.vue

@@ -5,7 +5,7 @@
     <a
       v-if="id && generate"
       :href="`#${id}`"
-      class="font-semibold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
+      class="text-xl font-bold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
     >
       <slot />
     </a>

app/components/content/ProseH3.vue

@@ -1,5 +1,23 @@
 <template>
-  <h3 class="text-base text-neutral-700 dark:text-neutral-300">
-    <slot />
-  </h3>
+  <h2
+    :id="id"
+  >
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+      class="text-lg font-semibold text-neutral-800 dark:text-neutral-200"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
 </template>
+
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>

app/components/content/Quote.vue

@@ -11,7 +11,7 @@
         </div>
       </UTooltip>
     </div>
-    <p class="my-0">
+    <p class="not-prose">
       Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions,
       appreciations, questions or anything!
     </p>