@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/blog/BlogHeaderSection.vue

@@ -1,19 +1,22 @@
-<script setup>
+<script setup lang="ts">
+import type { ToneColor } from '../../lib/color-tokens';
 import { Badge } from '../ui/badge';
 
 // Props
-const props = defineProps({
-    badges: {
-        type: Array,
-        default: () => []
-    },
-    title: { type: String, required: true },
-    description: { type: String, required: true }
+const props = withDefaults(defineProps<{
+    badges?: Array<{
+        color: ToneColor;
+        text: string;
+    }>;
+    title: string;
+    description: string;
+}>(), {
+    badges: () => []
 });
 </script>
 
 <template>
-    <div class="flex flex-col space-y-6 md:!space-y-8">
+    <div class="flex flex-col space-y-6 md:space-y-8!">
         <!-- Badges -->
         <div v-if="props.badges.length > 0" class="flex flex-wrap gap-3 mb-6 md:mb-8">
             <Badge v-for="badge in props.badges"
@@ -23,12 +26,12 @@ const props = defineProps({
         </div>
 
         <!-- Title -->
-        <h1 class="text-3xl md:text-6xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-tight">
+        <h1 class="text-3xl md:text-6xl font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) leading-tight">
             {{ props.title }}
         </h1>
 
         <!-- Description -->
-        <p class="text-sm md:text-xl text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed">
+        <p class="text-sm md:text-xl text-(--text-secondary-light) dark:text-(--text-secondary-dark) leading-relaxed">
             {{ props.description }}
         </p>
     </div>

package/src/components/blog/BlogInfoSection.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -6,12 +6,14 @@ import { Card, CardContent } from '../ui/card';
 import { formatDateLongItalyTimezone } from '../../lib/utils';
 
 // Props
-const props = defineProps({
-    author: { type: String, required: true },
-    authorUrl: { type: String, required: true },
-    authorImageUrl: { type: String, required: true },
-    datePublished: { type: String, required: true },
-    dateModified: { type: String, default: null }
+const props = withDefaults(defineProps<{
+    author: string;
+    authorUrl: string;
+    authorImageUrl: string;
+    datePublished: string;
+    dateModified?: string | null;
+}>(), {
+    dateModified: null
 });
 
 const { t, locale } = useI18n();
@@ -36,9 +38,9 @@ const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.d
 
                         <!-- Author name -->
                         <div>
-                            <p class="text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">{{ t('uiVintage.blog.author') }}</p>
-                            <p class="font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
-                                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-secondary-light)] dark:hover:text-[var(--text-secondary-dark)] transition-colors">
+                            <p class="text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ t('uiVintage.blog.author') }}</p>
+                            <p class="font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+                                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="hover:text-(--text-secondary-light) dark:hover:text-(--text-secondary-dark) transition-colors">
                                     {{ props.author }}
                                 </NuxtLink>
                             </p>
@@ -47,7 +49,7 @@ const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.d
                 </div>
 
                 <!-- Date information -->
-                <div class="flex flex-col sm:items-end text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                <div class="flex flex-col sm:items-end text-xs md:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                     <!-- Published date -->
                     <div v-if="props.datePublished" class="mb-1">
                         <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}:</span>

package/src/components/blog/BlogProgressBar.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class'];
+    ariaLabel?: string;
+}>(), {
+    ariaLabel: 'Reading progress'
+});
+
+const progress = ref(0);
+let animationFrame = 0;
+
+// Update progress based on scroll position
+const updateProgress = () => {
+    const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+    progress.value = documentHeight > 0 ? Math.min(100, Math.max(0, (window.scrollY / documentHeight) * 100)) : 100;
+};
+
+// Handle scroll event with requestAnimationFrame for performance
+const handleScroll = () => {
+    cancelAnimationFrame(animationFrame);
+    animationFrame = requestAnimationFrame(updateProgress);
+};
+
+// On component mounted
+onMounted(() => {
+    updateProgress();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', updateProgress);
+});
+
+// On component unmounted
+onUnmounted(() => {
+    cancelAnimationFrame(animationFrame);
+    window.removeEventListener('scroll', handleScroll);
+    window.removeEventListener('resize', updateProgress);
+});
+</script>
+
+<template>
+    <div :class="cn('relative h-1 w-full border-t border-(--border-light) bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--bg-selected-dark) landing-navbar-progress', props.class)"
+        role="progressbar"
+        :aria-label="props.ariaLabel"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="Math.round(progress)">
+        <div class="h-full origin-left bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
+    </div>
+</template>
+
+<style scoped>
+.landing-navbar-progress {
+    animation: landing-navbar-progress-fade linear both;
+    animation-range: 0 160px;
+    animation-timeline: scroll(root);
+}
+
+@keyframes landing-navbar-progress-fade {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@supports not (animation-timeline: scroll()) {
+    .landing-navbar-progress {
+        opacity: 1;
+    }
+}
+</style>

package/src/components/blog/BlogSectionTitle.vue

@@ -1,12 +1,12 @@
-<script setup>
+<script setup lang="ts">
 // Props
-const props = defineProps({
-    title: { type: String, required: true }
-});
+const props = defineProps<{
+    title: string;
+}>();
 </script>
 
 <template>
-    <h2 class="text-xl md:text-2xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-5">
+    <h2 class="text-xl md:text-2xl font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) mb-5">
         {{ props.title }}
     </h2>
 </template>

package/src/components/blog/CategoriesList.vue

@@ -1,9 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import CategoryCard from './CategoryCard.vue';
 
 // Props
-const props = defineProps({
-    categories: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    categories?: Array<{
+        path: string;
+        slug?: string;
+        name: string;
+        image?: string;
+        count: number;
+    }>;
+}>(), {
+    categories: () => []
 });
 </script>
 

package/src/components/blog/CategoriesSection.vue

@@ -1,9 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import CategoriesList from './CategoriesList.vue';
 
 // Props
-const props = defineProps({
-    categories: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    categories?: Array<{
+        path: string;
+        slug?: string;
+        name: string;
+        image?: string;
+        count: number;
+    }>;
+}>(), {
+    categories: () => []
 });
 </script>
 

package/src/components/blog/CategoryCard.vue

@@ -1,19 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { Badge } from '../ui/badge';
 import { Card, CardContent } from '../ui/card';
 
 // Props
-const props = defineProps({
-    name: { type: String, required: true },
-    image: { type: String, default: '' },
-    count: { type: Number, required: true }
+const props = withDefaults(defineProps<{
+    name: string;
+    image?: string;
+    count: number;
+}>(), {
+    image: ''
 });
 </script>
 
 <template>
-    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="gap-0 !p-0">
+    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="gap-0 p-0!">
             <!-- Background Image -->
             <div v-if="props.image" class="relative w-full h-36 overflow-hidden">
                 <NuxtImg :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
@@ -22,7 +24,7 @@ const props = defineProps({
             <!-- Content -->
             <div class="p-4 flex items-center justify-between">
                 <!-- Name -->
-                <span class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] truncate mr-3">
+                <span class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) truncate mr-3">
                     {{ props.name }}
                 </span>
 

package/src/components/blog/HeaderCarousel.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -11,15 +11,24 @@ import { Card, CardContent } from '../ui/card';
 const { t } = useI18n();
 
 // Props
-const props = defineProps({
-    featuredPosts: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    featuredPosts?: Array<{
+        path: string;
+        title: string;
+        description?: string;
+        image?: string;
+        categoryText?: string;
+        categoryPath?: string;
+    }>;
+}>(), {
+    featuredPosts: () => []
 });
 
 // Carousel state
 const currentSlide = ref(0);
 const slideCount = computed(() => props.featuredPosts.length || 0);
-const intervalId = ref(null);
-const direction = ref('forward');
+const intervalId = ref<ReturnType<typeof setInterval> | null>(null);
+const direction = ref<'forward' | 'backward'>('forward');
 
 // Start auto-play functionality
 const startAutoPlay = () => {
@@ -44,7 +53,7 @@ const prevSlide = () => {
 };
 
 // Go to specific slide
-const goToSlide = index => {
+const goToSlide = (index: number) => {
     // Determine direction
     if (index > currentSlide.value) {
         direction.value = 'forward';
@@ -73,8 +82,8 @@ onUnmounted(() => {
         <div class="relative overflow-hidden rounded">
             <TransitionGroup name="slide">
                 <div v-for="(post, index) in props.featuredPosts" :id="`carousel-slide-${index}`" :key="post.path || post.title || index" v-show="currentSlide === index" class="w-full" :data-direction="direction">
-                    <Card class="!p-0 overflow-hidden cursor-pointer">
-                        <CardContent class="gap-0 !p-0">
+                    <Card class="p-0! overflow-hidden cursor-pointer">
+                        <CardContent class="gap-0 p-0!">
                             <!-- Slide image -->
                             <NuxtLink :to="post.path">
                                 <div class="relative w-full h-56 md:h-80 overflow-hidden">
@@ -91,13 +100,13 @@ onUnmounted(() => {
 
                                 <!-- Title -->
                                 <NuxtLink :to="post.path">
-                                    <h3 class="text-base md:text-3xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
+                                    <h3 class="text-base md:text-3xl font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
                                         {{ post.title }}
                                     </h3>
                                 </NuxtLink>
 
                                 <!-- Description -->
-                                <p class="text-xs md:!text-base text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-6 line-clamp-2 leading-relaxed">
+                                <p class="text-xs md:text-base! text-(--text-secondary-light) dark:text-(--text-secondary-dark) mb-6 line-clamp-2 leading-relaxed">
                                     {{ post.description }}
                                 </p>
 
@@ -116,7 +125,7 @@ onUnmounted(() => {
                                         <button v-for="(_, idx) in props.featuredPosts"
                                             :key="idx"
                                             @click="goToSlide(idx)"
-                                            :class="['h-5 w-5 sm:!h-4 sm:!w-4 shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-[var(--border-light)] dark:bg-[var(--border-dark)]', currentSlide === idx ? '!w-8 sm:!w-7 !bg-[var(--text-primary-light)] dark:!bg-[var(--text-primary-dark)]' : '']"
+                                            :class="['h-5 w-5 sm:h-4! sm:w-4! shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-(--border-light) dark:bg-(--border-dark)', currentSlide === idx ? 'w-8! sm:w-7! bg-(--text-primary-light)! dark:bg-(--text-primary-dark)!' : '']"
                                             :aria-label="t('uiVintage.blog.goToSlide', { index: idx + 1 })"
                                             :aria-current="currentSlide === idx"
                                             role="tab"
@@ -135,16 +144,16 @@ onUnmounted(() => {
         <button v-if="props.featuredPosts.length > 1"
             @click="prevSlide"
             :aria-label="t('uiVintage.blog.previousSlide')"
-            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-(--border-light) dark:border-(--border-dark) bg-(--bg-card-light) dark:bg-(--bg-card-dark) px-3 py-3 rounded-[3px] transition-colors duration-200 hover:border-(--border-hover-light) dark:hover:border-(--border-hover-dark) cursor-pointer">
+            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
         </button>
 
         <!-- Next slide -->
         <button v-if="props.featuredPosts.length > 1"
             @click="nextSlide"
             :aria-label="t('uiVintage.blog.nextSlide')"
-            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-(--border-light) dark:border-(--border-dark) bg-(--bg-card-light) dark:bg-(--bg-card-dark) px-3 py-3 rounded-[3px] transition-colors duration-200 hover:border-(--border-hover-light) dark:hover:border-(--border-hover-dark) cursor-pointer">
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
         </button>
     </div>
 </template>

package/src/components/blog/PostCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { useI18n } from 'vue-i18n';
 import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
@@ -10,36 +10,41 @@ import { Card, CardContent } from '../ui/card';
 const { t } = useI18n();
 
 // Props
-const props = defineProps({
-    image: { type: String, default: '' },
-    category: { type: String, default: '' },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    image?: string;
+    category?: string;
+    title?: string;
+    description?: string;
+}>(), {
+    image: '',
+    category: '',
+    title: '',
+    description: ''
 });
 </script>
 
 <template>
-    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="h-full gap-0 !p-0">
+    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="h-full gap-0 p-0!">
             <!-- Featured image -->
             <div v-if="props.image" class="relative w-full h-48 overflow-hidden">
                 <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
             </div>
 
             <!-- Content -->
-            <div class="p-6 flex flex-col flex-grow">
+            <div class="p-6 flex flex-col grow">
                 <!-- Category Badge -->
                 <div v-if="props.category" class="mb-3">
                     <Badge color="gray" :text="props.category" />
                 </div>
 
                 <!-- Post Title -->
-                <h2 class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-2 line-clamp-2">
+                <h2 class="text-base font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) mb-2 line-clamp-2">
                     {{ props.title }}
                 </h2>
 
                 <!-- Post Description -->
-                <p class="text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed mb-4 line-clamp-3 flex-grow">
+                <p class="text-xs md:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) leading-relaxed mb-4 line-clamp-3 grow">
                     {{ props.description }}
                 </p>
 

package/src/components/blog/PostsList.vue

@@ -1,9 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import PostCard from './PostCard.vue';
 
 // Props
-const props = defineProps({
-    posts: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    posts?: Array<{
+        path: string;
+        title: string;
+        description?: string;
+        image?: string;
+        categoryText?: string;
+        categoryPath?: string;
+    }>;
+}>(), {
+    posts: () => []
 });
 </script>
 

package/src/components/blog/SocialShareSidebar.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Facebook01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, WhatsappIcon } from '@hugeicons/core-free-icons';
@@ -6,10 +6,10 @@ import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    url: { type: String, required: true }
-});
+const props = defineProps<{
+    title: string;
+    url: string;
+}>();
 
 const { t } = useI18n();
 
@@ -53,42 +53,44 @@ const socialPlatforms = computed(() => {
 </script>
 
 <template>
-    <!-- Desktop sidebar on the right -->
-    <div class="fixed right-[calc(50%-600px)] top-[140px] z-10 hidden xl:block">
-        <Card class="!p-5 flex flex-col space-y-4 items-center">
-            <CardContent class="!p-0 gap-4 items-center">
-                <!-- Share icon -->
-                <HugeiconsIcon :icon="Share08Icon" class="size-5 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-2" />
+    <Teleport to="body">
+        <!-- Desktop sidebar on the right -->
+        <div class="fixed right-[calc(50%-600px)] top-35 z-20 hidden xl:block">
+            <Card class="p-5! flex flex-col space-y-4 items-center">
+                <CardContent class="p-0! gap-4 items-center">
+                    <!-- Share icon -->
+                    <HugeiconsIcon :icon="Share08Icon" class="size-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark) mb-2" />
 
-                <!-- Social share links (desktop) -->
-                <template v-for="platform in socialPlatforms" :key="platform.name">
-                    <NuxtLink :to="platform.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        :aria-label="platform.label"
-                        :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
-                        <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                    </NuxtLink>
-                </template>
-            </CardContent>
-        </Card>
-    </div>
+                    <!-- Social share links (desktop) -->
+                    <template v-for="platform in socialPlatforms" :key="platform.name">
+                        <NuxtLink :to="platform.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :aria-label="platform.label"
+                            :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
+                            <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                        </NuxtLink>
+                    </template>
+                </CardContent>
+            </Card>
+        </div>
 
-    <!-- Mobile view (floating bar at bottom) -->
-    <div class="fixed bottom-4 left-1/2 z-10 -translate-x-1/2 xl:hidden">
-        <Card class="!p-3 w-fit">
-            <CardContent class="!flex-row !p-0 items-center justify-center gap-3">
-                <!-- Social share links (mobile) -->
-                <template v-for="platform in socialPlatforms" :key="platform.name">
-                    <NuxtLink :to="platform.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        :aria-label="platform.label"
-                        :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
-                        <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                    </NuxtLink>
-                </template>
-            </CardContent>
-        </Card>
-    </div>
+        <!-- Mobile view (floating bar at bottom) -->
+        <div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 xl:hidden">
+            <Card class="p-3! w-fit">
+                <CardContent class="flex-row! p-0! items-center justify-center gap-3">
+                    <!-- Social share links (mobile) -->
+                    <template v-for="platform in socialPlatforms" :key="platform.name">
+                        <NuxtLink :to="platform.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :aria-label="platform.label"
+                            :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
+                            <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                        </NuxtLink>
+                    </template>
+                </CardContent>
+            </Card>
+        </div>
+    </Teleport>
 </template>

package/src/components/blog/TableOfContents.vue

@@ -1,13 +1,29 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Bookmark01Icon } from '@hugeicons/core-free-icons';
 import { Accordion } from '../ui/accordion';
 
+interface BlogTocLink {
+    id?: string;
+    text?: string;
+    depth?: number;
+    children?: BlogTocLink[];
+}
+
 // Props
-const props = defineProps({
-    content: { type: Object, required: true }
-});
+const props = defineProps<{
+    content: {
+        body?: {
+            toc?: {
+                links?: BlogTocLink[];
+            };
+        };
+        toc?: {
+            links?: BlogTocLink[];
+        };
+    };
+}>();
 
 const { t } = useI18n();
 
@@ -16,13 +32,13 @@ const headings = computed(() => {
     const tocLinks = props.content?.body?.toc?.links || props.content?.toc?.links || [];
 
     // Recursive function to flatten the nested links
-    const flattenLinks = links => {
+    const flattenLinks = (links: BlogTocLink[]): Array<{ id: string; text: string; level: number }> => {
         return links.flatMap(link => {
             // Extract the current heading
             const currentHeading = {
-                id: link.id,
-                text: link.text,
-                level: link.depth
+                id: link.id ?? '',
+                text: link.text ?? '',
+                level: link.depth ?? 0
             };
 
             // Recursively flatten the children links
@@ -36,7 +52,7 @@ const headings = computed(() => {
 });
 
 // Smooth scroll to heading
-const scrollToHeading = id => {
+const scrollToHeading = (id: string) => {
     const element = document.getElementById(id);
     if (element) {
         element.scrollIntoView({
@@ -48,16 +64,16 @@ const scrollToHeading = id => {
 };
 
 // Get classes for heading button
-const getHeadingButtonClasses = heading => {
+const getHeadingButtonClasses = (level: number) => {
     // Base classes for all titles
     const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-(--bg-selected-light) dark:hover:bg-(--bg-selected-dark) cursor-pointer';
 
     // Add classes based on heading level
     let levelClasses = '';
-    if (heading.level === 2) {
+    if (level === 2) {
         levelClasses = 'text-(--text-primary-light) dark:text-(--text-primary-dark) font-semibold text-xs md:text-sm';
     } else {
-        levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) !pl-6 text-xs md:text-sm';
+        levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) pl-6! text-xs md:text-sm';
     }
 
     // Return combined classes
@@ -68,7 +84,7 @@ const getHeadingButtonClasses = heading => {
 <template>
     <Accordion v-if="headings.length > 0" :title="t('uiVintage.blog.tableOfContents')" :icon="Bookmark01Icon">
         <nav class="space-y-1">
-            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading)">
+            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading.level)">
                 {{ heading.text }}
             </button>
         </nav>