@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/blog/BlogContentRenderer.vue

@@ -1,78 +1,78 @@
 <script setup lang="ts">
 // Props
 const props = defineProps<{
-    value: Record<string, unknown>;
+	value: Record<string, unknown>;
 }>();
 </script>
 
 <template>
-    <div class="blog-content">
-        <ContentRenderer :value="props.value" />
-    </div>
+	<div class="blog-content">
+		<ContentRenderer :value="props.value" />
+	</div>
 </template>
 
 <style scoped>
 .blog-content {
-    color: var(--foreground);
+	color: var(--foreground);
 }
 
 /* Headings */
 .blog-content :deep(h1:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
-    color: var(--foreground);
-    letter-spacing: -0.01em;
-    scroll-margin-top: 6rem;
+	color: var(--foreground);
+	letter-spacing: -0.01em;
+	scroll-margin-top: 6rem;
 }
 
 .blog-content :deep(h1:not(.not-prose):not(.not-prose *)) {
-    font-size: 1.75rem;
-    font-weight: 700;
-    margin-bottom: 2rem;
+	font-size: 1.75rem;
+	font-weight: 700;
+	margin-bottom: 2rem;
 }
 
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
-    margin-top: 3rem;
-    margin-bottom: 1.25rem;
+	margin-top: 3rem;
+	margin-bottom: 1.25rem;
 }
 
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
-    margin-top: 2.25rem;
-    margin-bottom: 1rem;
+	margin-top: 2.25rem;
+	margin-bottom: 1rem;
 }
 
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    font-size: 1.5rem;
-    font-weight: 700;
-    line-height: 2rem;
+	font-size: 1.5rem;
+	font-weight: 700;
+	line-height: 2rem;
 }
 
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    font-size: 1.15rem;
-    font-weight: 700;
-    line-height: 1.75rem;
+	font-size: 1.15rem;
+	font-weight: 700;
+	line-height: 1.75rem;
 }
 
 /* Heading anchors: a "#" fades in on hover */
 .blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *) > a) {
-    position: relative;
-    color: inherit;
-    text-decoration: none;
+	position: relative;
+	color: inherit;
+	text-decoration: none;
 }
 
 .blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *) > a::before) {
-    content: '#';
-    position: absolute;
-    left: -1.1em;
-    color: var(--primary);
-    opacity: 0;
-    translate: 4px 0;
-    transition: opacity 0.2s var(--ease-out-expo), translate 0.3s var(--ease-spring);
+	content: '#';
+	position: absolute;
+	left: -1.1em;
+	color: var(--primary);
+	opacity: 0;
+	translate: 4px 0;
+	transition: opacity 0.2s var(--ease-out-expo), translate 0.3s var(--ease-spring);
 }
 
 .blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *):hover > a::before) {
-    opacity: 1;
-    translate: 0 0;
+	opacity: 1;
+	translate: 0 0;
 }
 
 /* Body text */
@@ -81,147 +81,147 @@ const props = defineProps<{
 .blog-content :deep(blockquote:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(td:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(th:not(.not-prose):not(.not-prose *)) {
-    color: var(--foreground);
+	color: var(--foreground);
 }
 
 .blog-content :deep(p:not(.not-prose):not(.not-prose *)) {
-    font-size: 15px;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    line-height: 1.85;
+	font-size: 15px;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	line-height: 1.85;
 }
 
 /* Lede: the opening paragraph reads a little larger */
 .blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-    font-size: 17px;
-    line-height: 1.8;
-    color: var(--muted-foreground);
+	font-size: 17px;
+	line-height: 1.8;
+	color: var(--muted-foreground);
 }
 
 .blog-content :deep(:is(p, blockquote, li):not(.not-prose):not(.not-prose *) strong) {
-    font-weight: 700;
-    color: var(--foreground);
+	font-weight: 700;
+	color: var(--foreground);
 }
 
 /* Links: a primary underline that thickens on hover */
 .blog-content :deep(:is(p, li, blockquote):not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    color: var(--foreground);
-    font-weight: 700;
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent);
-    text-decoration-thickness: 2px;
-    text-underline-offset: 4px;
-    transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
+	color: var(--foreground);
+	font-weight: 700;
+	text-decoration: underline;
+	text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent);
+	text-decoration-thickness: 2px;
+	text-underline-offset: 4px;
+	transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
 }
 
 .blog-content :deep(:is(p, li, blockquote):not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *):hover) {
-    color: var(--primary);
-    text-decoration-color: var(--primary);
-    text-decoration-thickness: 3px;
+	color: var(--primary);
+	text-decoration-color: var(--primary);
+	text-decoration-thickness: 3px;
 }
 
 /* Lists */
 .blog-content :deep(:is(ul, ol):not(.not-prose):not(.not-prose *)) {
-    margin: 1.25rem 0;
-    padding-left: 1.4rem;
+	margin: 1.25rem 0;
+	padding-left: 1.4rem;
 }
 
 .blog-content :deep(ul:not(.not-prose):not(.not-prose *)) {
-    list-style: square;
+	list-style: square;
 }
 
 .blog-content :deep(ol:not(.not-prose):not(.not-prose *)) {
-    list-style: decimal;
+	list-style: decimal;
 }
 
 .blog-content :deep(li:not(.not-prose):not(.not-prose *)) {
-    font-size: 15px;
-    line-height: 1.8;
-    margin: 0.4rem 0;
-    padding-left: 0.25rem;
+	font-size: 15px;
+	line-height: 1.8;
+	margin: 0.4rem 0;
+	padding-left: 0.25rem;
 }
 
 .blog-content :deep(li:not(.not-prose):not(.not-prose *)::marker) {
-    color: var(--primary);
-    font-weight: 700;
+	color: var(--primary);
+	font-weight: 700;
 }
 
 /* Blockquotes */
 .blog-content :deep(blockquote:not(.not-prose):not(.not-prose *)) {
-    position: relative;
-    margin: 2rem 0;
-    padding: 1rem 1.25rem 1rem 1.5rem;
-    border: 1px solid var(--border);
-    border-left: 3px solid var(--primary);
-    border-radius: var(--radius-sm);
-    background-color: var(--surface);
-    font-size: 15px;
-    font-style: italic;
-    line-height: 1.8;
+	position: relative;
+	margin: 2rem 0;
+	padding: 1rem 1.25rem 1rem 1.5rem;
+	border: 1px solid var(--border);
+	border-left: 3px solid var(--primary);
+	border-radius: var(--radius-sm);
+	background-color: var(--surface);
+	font-size: 15px;
+	font-style: italic;
+	line-height: 1.8;
 }
 
 .blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) p) {
-    margin: 0;
+	margin: 0;
 }
 
 /* Inline code */
 .blog-content :deep(:is(p, li, blockquote, td, th):not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
-    color: var(--foreground);
-    background-color: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 0.25rem;
-    display: inline-block;
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1rem;
-    padding: 0.125rem 0.5rem;
-    white-space: nowrap;
+	color: var(--foreground);
+	background-color: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 0.25rem;
+	display: inline-block;
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1rem;
+	padding: 0.125rem 0.5rem;
+	white-space: nowrap;
 }
 
 .blog-content :deep(pre:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
-    color: var(--foreground);
-    background-color: var(--accent);
+	color: var(--foreground);
+	background-color: var(--accent);
 }
 
 /* Images */
 .blog-content :deep(img:not(.not-prose):not(.not-prose *)) {
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--uv-shadow-sm);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--uv-shadow-sm);
 }
 
 /* Plain markdown tables */
 .blog-content :deep(table:not(.not-prose):not(.not-prose *)) {
-    width: 100%;
-    margin: 2rem 0;
-    border-collapse: collapse;
-    font-size: 14px;
+	width: 100%;
+	margin: 2rem 0;
+	border-collapse: collapse;
+	font-size: 14px;
 }
 
 .blog-content :deep(:is(th, td):not(.not-prose):not(.not-prose *)) {
-    border-bottom: 1px solid var(--border);
-    padding: 0.65rem 0.75rem;
-    text-align: left;
+	border-bottom: 1px solid var(--border);
+	padding: 0.65rem 0.75rem;
+	text-align: left;
 }
 
 .blog-content :deep(th:not(.not-prose):not(.not-prose *)) {
-    background-color: var(--surface);
-    font-weight: 700;
+	background-color: var(--surface);
+	font-weight: 700;
 }
 
 @media (max-width: 640px) {
-    .blog-content :deep(:is(p, li):not(.not-prose):not(.not-prose *)) {
-        font-size: 14px;
-        line-height: 1.8;
-    }
-
-    .blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-        font-size: 15px;
-    }
-
-    .blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
-        margin-top: 2.25rem;
-        margin-bottom: 1rem;
-    }
+	.blog-content :deep(:is(p, li):not(.not-prose):not(.not-prose *)) {
+		font-size: 14px;
+		line-height: 1.8;
+	}
+
+	.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
+		font-size: 15px;
+	}
+
+	.blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
+		margin-top: 2.25rem;
+		margin-bottom: 1rem;
+	}
 }
 </style>

package/src/components/blog/BlogFAQSection.vue

@@ -7,12 +7,12 @@ import BlogSectionTitle from './BlogSectionTitle.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    faqs?: Array<{
-        question: string;
-        answer: string;
-    }>;
+	faqs?: Array<{
+		question: string;
+		answer: string;
+	}>;
 }>(), {
-    faqs: () => []
+	faqs: () => []
 });
 
 const { t } = useI18n();
@@ -20,19 +20,19 @@ const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
 </script>
 
 <template>
-    <div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
-        <!-- Title and description -->
-        <BlogSectionTitle :title="t('uiVintage.blog.faq.title')" :description="t('uiVintage.blog.faq.description')" />
+	<div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
+		<!-- Title and description -->
+		<BlogSectionTitle :title="t('uiVintage.blog.faq.title')" :description="t('uiVintage.blog.faq.description')" />
 
-        <!-- FAQ items -->
-        <div class="space-y-3">
-            <div v-for="(faq, index) in props.faqs" :key="index" data-aos="blur-up" :data-aos-delay="index * 70">
-                <Accordion :title="faq.question" :icon="HelpCircleIcon" :initially-expanded="index === 0">
-                    <p class="text-xs leading-relaxed text-muted-foreground md:text-sm">
-                        {{ faq.answer }}
-                    </p>
-                </Accordion>
-            </div>
-        </div>
-    </div>
+		<!-- FAQ items -->
+		<div class="space-y-3">
+			<div v-for="(faq, index) in props.faqs" :key="index" data-aos="blur-up" :data-aos-delay="index * 70">
+				<Accordion :title="faq.question" :icon="HelpCircleIcon" :initially-expanded="index === 0">
+					<p class="text-xs leading-relaxed text-muted-foreground md:text-sm">
+						{{ faq.answer }}
+					</p>
+				</Accordion>
+			</div>
+		</div>
+	</div>
 </template>

package/src/components/blog/BlogHeaderSection.vue

@@ -11,51 +11,51 @@ import { StatStrip } from '../stat-strip';
 
 // Props
 const props = withDefaults(defineProps<{
-    badges?: Array<{
-        color: ToneColor;
-        text: string;
-    }>;
-    announcement?: {
-        text: string;
-        to: string;
-        label?: string;
-    } | null;
-    title: string;
-    highlight?: string;
-    description: string;
-    stats?: Array<{
-        label: string;
-        value: string | number;
-        icon?: HugeiconsIconDefinition;
-    }>;
-    align?: 'left' | 'center' | 'right';
+	badges?: Array<{
+		color: ToneColor;
+		text: string;
+	}>;
+	announcement?: {
+		text: string;
+		to: string;
+		label?: string;
+	} | null;
+	title: string;
+	highlight?: string;
+	description: string;
+	stats?: Array<{
+		label: string;
+		value: string | number;
+		icon?: HugeiconsIconDefinition;
+	}>;
+	align?: 'left' | 'center' | 'right';
 }>(), {
-    badges: () => [],
-    announcement: null,
-    highlight: '',
-    stats: () => [],
-    align: 'center'
+	badges: () => [],
+	announcement: null,
+	highlight: '',
+	stats: () => [],
+	align: 'center'
 });
 
 const { t } = useI18n();
 
 // Alignment of the whole header: the column, its text, and the rows of badges and stats
 const alignClasses = {
-    left: { header: 'items-start text-left', row: 'justify-start' },
-    center: { header: 'items-center text-center', row: 'justify-center' },
-    right: { header: 'items-end text-right', row: 'justify-end' }
+	left: { header: 'items-start text-left', row: 'justify-start' },
+	center: { header: 'items-center text-center', row: 'justify-center' },
+	right: { header: 'items-end text-right', row: 'justify-end' }
 } as const;
 const alignClass = computed(() => alignClasses[props.align] ?? alignClasses.center);
 
 // Split the title around the highlighted part (when it appears in the title)
 const titleParts = computed(() => {
-    const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
-    if (index === -1) return { before: props.title, highlight: '', after: '' };
-    return {
-        before: props.title.slice(0, index),
-        highlight: props.highlight,
-        after: props.title.slice(index + props.highlight.length)
-    };
+	const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
+	if (index === -1) return { before: props.title, highlight: '', after: '' };
+	return {
+		before: props.title.slice(0, index),
+		highlight: props.highlight,
+		after: props.title.slice(index + props.highlight.length)
+	};
 });
 
 // Words that rise in one by one (the highlight rises in as a single block between them)
@@ -64,8 +64,8 @@ const beforeWords = computed(() => splitWords(titleParts.value.before));
 const afterWords = computed(() => splitWords(titleParts.value.after));
 // Space after a word before the highlight: always between words, and before the highlight only when the title has one there
 const wordGap = (index: number) => {
-    if (index < beforeWords.value.length - 1) return ' ';
-    return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
+	if (index < beforeWords.value.length - 1) return ' ';
+	return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
 };
 const wordDelay = (index: number) => `${120 + Math.min(index, 12) * 55}ms`;
 const highlightDelay = computed(() => wordDelay(beforeWords.value.length));
@@ -79,52 +79,52 @@ const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`
 </script>
 
 <template>
-    <header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
-        <!-- Announcement (links to something new, such as the latest post) -->
-        <NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
-            <span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
-                <span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
-                    <span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
-                    <span class="relative inline-flex size-1.5 rounded-full bg-current" />
-                </span>
-                <span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
-                <span class="truncate opacity-80">{{ props.announcement.text }}</span>
-                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
-            </span>
-        </NuxtLink>
+	<header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
+		<!-- Announcement (links to something new, such as the latest post) -->
+		<NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+			<span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
+				<span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
+					<span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
+					<span class="relative inline-flex size-1.5 rounded-full bg-current" />
+				</span>
+				<span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
+				<span class="truncate opacity-80">{{ props.announcement.text }}</span>
+				<HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
+			</span>
+		</NuxtLink>
 
-        <!-- Badges -->
-        <div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
-            <Badge v-for="(badge, index) in props.badges"
-                :key="`${badge.color}-${badge.text}`"
-                :color="badge.color"
-                :text="badge.text"
-                :pulse="index === 0 && !props.announcement"
-                class="animate-uv-fade-up"
-                :style="{ animationDelay: `${index * 70}ms` }" />
-        </div>
+		<!-- Badges -->
+		<div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
+			<Badge v-for="(badge, index) in props.badges"
+				:key="`${badge.color}-${badge.text}`"
+				:color="badge.color"
+				:text="badge.text"
+				:pulse="index === 0 && !props.announcement"
+				class="animate-uv-fade-up"
+				:style="{ animationDelay: `${index * 70}ms` }" />
+		</div>
 
-        <!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
-        <h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
-            <template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
-                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
-            </template>
-            <!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
-            <span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
-                    <path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
-                </svg>
-            </span>
-            <template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
-                {{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
-            </template>
-        </h1>
+		<!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
+		<h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+			<template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
+				<span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
+			</template>
+			<!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
+			<span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
+					<path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
+				</svg>
+			</span>
+			<template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
+				{{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
+			</template>
+		</h1>
 
-        <!-- Description -->
-        <p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
-            {{ props.description }}
-        </p>
+		<!-- Description -->
+		<p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
+			{{ props.description }}
+		</p>
 
-        <!-- Stats strip -->
-        <StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
-    </header>
-</template>
+		<!-- Stats strip -->
+		<StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
+	</header>
+</template>