@brumaombra/ui-vintage 0.6.6 → 0.6.8

package/dist/blog.js

@@ -0,0 +1,938 @@
+import { resolveComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, toDisplayString, createTextVNode, Fragment, renderList, computed, ref, normalizeClass, onMounted, onUnmounted, TransitionGroup, withDirectives, vShow, normalizeStyle } from "vue";
+import { useI18n } from "vue-i18n";
+import { _ as _sfc_main$h } from "./LoadMoreButton.vue_vue_type_script_setup_true_lang-Be0obsa3.js";
+import { N as Nn, a as dn, m as mn, Z as ZB, t as t9, M as MSr, n as nK, o as oyr, i as Nsr, j as Au } from "./index.min-CUZWqaEQ.js";
+import { H as HugeiconsIcon } from "./HugeiconsIcon.vue-By2RXWWz.js";
+import { _ as _sfc_main$f } from "./Badge.vue_vue_type_script_setup_true_lang-DH_klSVA.js";
+import { Button as _sfc_main$g } from "./button.js";
+import { _ as _sfc_main$d } from "./Card.vue_vue_type_script_setup_true_lang-CZhFtxSD.js";
+import { _ as _sfc_main$e } from "./CardContent.vue_vue_type_script_setup_true_lang-BxI0-dse.js";
+import { f as formatDateLongItalyTimezone } from "./utils-DbYZ4xaD.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1$a = {
+  key: 0,
+  class: "relative w-full h-48 overflow-hidden"
+};
+const _hoisted_2$7 = { class: "p-6 flex flex-col flex-grow" };
+const _hoisted_3$6 = {
+  key: 0,
+  class: "mb-3"
+};
+const _hoisted_4$5 = { class: "text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-2 line-clamp-2" };
+const _hoisted_5$3 = { 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" };
+const _hoisted_6$3 = { class: "mt-auto" };
+const _sfc_main$c = {
+  __name: "PostCard",
+  props: {
+    image: { type: String, default: "" },
+    category: { type: String, default: "" },
+    title: { type: String, default: "" },
+    description: { type: String, default: "" }
+  },
+  setup(__props) {
+    const { t } = useI18n();
+    const props = __props;
+    return (_ctx, _cache) => {
+      const _component_NuxtImg = resolveComponent("NuxtImg");
+      return openBlock(), createBlock(unref(_sfc_main$d), { 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" }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$e), { class: "h-full gap-0 !p-0" }, {
+            default: withCtx(() => [
+              props.image ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+                createVNode(_component_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"
+                }, null, 8, ["src", "alt"])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2$7, [
+                props.category ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+                  createVNode(unref(_sfc_main$f), {
+                    color: "gray",
+                    text: props.category
+                  }, null, 8, ["text"])
+                ])) : createCommentVNode("", true),
+                createElementVNode("h2", _hoisted_4$5, toDisplayString(props.title), 1),
+                createElementVNode("p", _hoisted_5$3, toDisplayString(props.description), 1),
+                createElementVNode("div", _hoisted_6$3, [
+                  createVNode(unref(_sfc_main$g), {
+                    variant: "primary",
+                    class: "w-full sm:w-auto"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(HugeiconsIcon), {
+                        icon: unref(Nn),
+                        class: "size-4"
+                      }, null, 8, ["icon"]),
+                      createTextVNode(" " + toDisplayString(unref(t)("uiVintage.blog.readMore")), 1)
+                    ]),
+                    _: 1
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const _hoisted_1$9 = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" };
+const _sfc_main$b = {
+  __name: "PostsList",
+  props: {
+    posts: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      const _component_NuxtLinkLocale = resolveComponent("NuxtLinkLocale");
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.posts, (post, index) => {
+          return openBlock(), createBlock(_component_NuxtLinkLocale, {
+            key: post.path,
+            to: post.path,
+            class: "block h-full",
+            "data-aos": "fade-up",
+            "data-aos-delay": index % 3 * 200
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$c, {
+                class: "h-full",
+                image: post.image,
+                category: post.categoryText,
+                title: post.title,
+                description: post.description
+              }, null, 8, ["image", "category", "title", "description"])
+            ]),
+            _: 2
+          }, 1032, ["to", "data-aos-delay"]);
+        }), 128))
+      ]);
+    };
+  }
+};
+const _sfc_main$a = {
+  __name: "AllPostsSection",
+  props: {
+    posts: { type: Array, default: () => [] },
+    currentPage: { type: Number, default: 1 },
+    postsPerPage: { type: Number, default: 9 },
+    totalPosts: { type: Number, default: 0 },
+    hasMorePosts: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false }
+  },
+  emits: ["load-more"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useI18n();
+    const props = __props;
+    const emits = __emit;
+    const handleLoadMorePosts = () => {
+      if (!props.isLoading) {
+        emits("load-more");
+      }
+    };
+    const visiblePostsCount = computed(() => Math.min(props.posts.length, props.totalPosts));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(_sfc_main$b, {
+          posts: props.posts
+        }, null, 8, ["posts"]),
+        props.hasMorePosts ? (openBlock(), createBlock(unref(_sfc_main$h), {
+          key: 0,
+          busy: props.isLoading,
+          text: unref(t)("uiVintage.blog.loadMoreWithNumbers", { current: visiblePostsCount.value, total: props.totalPosts }),
+          onLoadMore: handleLoadMorePosts,
+          class: "mt-8",
+          "data-aos": "fade-up"
+        }, null, 8, ["busy", "text"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const _hoisted_1$8 = { class: "text-xl md:text-2xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-5" };
+const _sfc_main$9 = {
+  __name: "BlogSectionTitle",
+  props: {
+    title: { type: String, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("h2", _hoisted_1$8, toDisplayString(props.title), 1);
+    };
+  }
+};
+const _hoisted_1$7 = {
+  key: 0,
+  class: "mt-12 lg:mt-16"
+};
+const _hoisted_2$6 = { class: "text-base md:text-lg text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-8" };
+const _hoisted_3$5 = { class: "space-y-4" };
+const _hoisted_4$4 = { class: "flex items-center justify-between p-5 gap-4" };
+const _hoisted_5$2 = { class: "text-sm md:!text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] text-left" };
+const _hoisted_6$2 = { class: "px-5 pb-5 text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed" };
+const _sfc_main$8 = {
+  __name: "BlogFAQSection",
+  props: {
+    faqs: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useI18n();
+    const expandedItems = ref({});
+    const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
+    const toggleItem = (index) => {
+      expandedItems.value[index] = !expandedItems.value[index];
+    };
+    const isExpanded = (index) => {
+      return expandedItems.value[index] || false;
+    };
+    if (hasValidFAQs.value) {
+      expandedItems.value[0] = true;
+    }
+    return (_ctx, _cache) => {
+      return hasValidFAQs.value ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+        createVNode(_sfc_main$9, {
+          title: unref(t)("uiVintage.blog.faq.title")
+        }, null, 8, ["title"]),
+        createElementVNode("p", _hoisted_2$6, toDisplayString(unref(t)("uiVintage.blog.faq.description")), 1),
+        createElementVNode("div", _hoisted_3$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.faqs, (faq, index) => {
+            return openBlock(), createBlock(unref(_sfc_main$d), {
+              key: index,
+              class: "!p-0 cursor-pointer",
+              onClick: ($event) => toggleItem(index)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$e), { class: "!p-0 gap-0" }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_4$4, [
+                      createElementVNode("h3", _hoisted_5$2, toDisplayString(faq.question), 1),
+                      createElementVNode("div", {
+                        class: normalizeClass(["flex-shrink-0 w-8 h-8 flex items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] transition-transform duration-300", { "rotate-180": isExpanded(index) }])
+                      }, [
+                        createVNode(unref(HugeiconsIcon), {
+                          icon: unref(dn),
+                          class: "size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]"
+                        }, null, 8, ["icon"])
+                      ], 2)
+                    ]),
+                    createElementVNode("div", {
+                      class: normalizeClass(["overflow-hidden transition-all duration-300 ease-in-out", isExpanded(index) ? "max-h-96 opacity-100" : "max-h-0 opacity-0"])
+                    }, [
+                      createElementVNode("p", _hoisted_6$2, toDisplayString(faq.answer), 1)
+                    ], 2)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["onClick"]);
+          }), 128))
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+};
+const _hoisted_1$6 = { class: "flex flex-col sm:flex-row sm:items-center sm:justify-between" };
+const _hoisted_2$5 = { class: "flex items-center mb-4 sm:mb-0" };
+const _hoisted_3$4 = { class: "flex items-center" };
+const _hoisted_4$3 = { class: "text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" };
+const _hoisted_5$1 = { class: "font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]" };
+const _hoisted_6$1 = { class: "flex flex-col sm:items-end text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" };
+const _hoisted_7$1 = {
+  key: 0,
+  class: "mb-1"
+};
+const _hoisted_8$1 = { class: "font-semibold" };
+const _hoisted_9$1 = ["datetime"];
+const _hoisted_10$1 = {
+  key: 1,
+  class: "text-xs"
+};
+const _hoisted_11$1 = { class: "font-semibold" };
+const _hoisted_12 = ["datetime"];
+const _sfc_main$7 = {
+  __name: "BlogInfoSection",
+  props: {
+    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 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t, locale } = useI18n();
+    const formattedPublishedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
+    const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.dateModified, locale.value));
+    return (_ctx, _cache) => {
+      const _component_NuxtImg = resolveComponent("NuxtImg");
+      const _component_NuxtLink = resolveComponent("NuxtLink");
+      return openBlock(), createBlock(unref(_sfc_main$d), { "data-aos": "fade-up" }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$e), null, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1$6, [
+                createElementVNode("div", _hoisted_2$5, [
+                  createElementVNode("div", _hoisted_3$4, [
+                    createVNode(_component_NuxtLink, {
+                      to: props.authorUrl,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      class: "rounded me-3 transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_NuxtImg, {
+                          src: props.authorImageUrl,
+                          alt: props.author,
+                          height: "50",
+                          width: "50",
+                          format: "avif",
+                          quality: "40",
+                          sizes: { 480: "50px", 1280: "50px" },
+                          loading: "lazy",
+                          decoding: "async",
+                          class: "object-cover rounded"
+                        }, null, 8, ["src", "alt"])
+                      ]),
+                      _: 1
+                    }, 8, ["to"]),
+                    createElementVNode("div", null, [
+                      createElementVNode("p", _hoisted_4$3, toDisplayString(unref(t)("uiVintage.blog.author")), 1),
+                      createElementVNode("p", _hoisted_5$1, [
+                        createVNode(_component_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"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(props.author), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["to"])
+                      ])
+                    ])
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_6$1, [
+                  props.datePublished ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+                    createElementVNode("span", _hoisted_8$1, toDisplayString(unref(t)("uiVintage.blog.publishedDate")) + ":", 1),
+                    createElementVNode("time", {
+                      datetime: props.datePublished,
+                      class: "ml-1"
+                    }, toDisplayString(formattedPublishedDate.value), 9, _hoisted_9$1)
+                  ])) : createCommentVNode("", true),
+                  props.dateModified ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+                    createElementVNode("span", _hoisted_11$1, toDisplayString(unref(t)("uiVintage.blog.lastUpdatedDate")) + ":", 1),
+                    createElementVNode("time", {
+                      datetime: props.dateModified,
+                      class: "ml-1"
+                    }, toDisplayString(formattedModifiedDate.value), 9, _hoisted_12)
+                  ])) : createCommentVNode("", true)
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const _hoisted_1$5 = { class: "flex flex-col space-y-6 md:!space-y-8" };
+const _hoisted_2$4 = {
+  key: 0,
+  class: "flex flex-wrap gap-3 mb-6 md:mb-8"
+};
+const _hoisted_3$3 = { class: "text-3xl md:text-6xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-tight" };
+const _hoisted_4$2 = { class: "text-sm md:text-xl text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed" };
+const _sfc_main$6 = {
+  __name: "BlogHeaderSection",
+  props: {
+    badges: {
+      type: Array,
+      default: () => []
+    },
+    title: { type: String, required: true },
+    description: { type: String, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        props.badges.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.badges, (badge) => {
+            return openBlock(), createBlock(unref(_sfc_main$f), {
+              key: `${badge.color}-${badge.text}`,
+              color: badge.color,
+              text: badge.text
+            }, null, 8, ["color", "text"]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("h1", _hoisted_3$3, toDisplayString(props.title), 1),
+        createElementVNode("p", _hoisted_4$2, toDisplayString(props.description), 1)
+      ]);
+    };
+  }
+};
+const _hoisted_1$4 = {
+  key: 0,
+  class: "relative w-full h-36 overflow-hidden"
+};
+const _hoisted_2$3 = { class: "p-4 flex items-center justify-between" };
+const _hoisted_3$2 = { class: "text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] truncate mr-3" };
+const _sfc_main$5 = {
+  __name: "CategoryCard",
+  props: {
+    name: { type: String, required: true },
+    image: { type: String, default: "" },
+    count: { type: Number, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      const _component_NuxtImg = resolveComponent("NuxtImg");
+      return openBlock(), createBlock(unref(_sfc_main$d), { 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" }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$e), { class: "gap-0 !p-0" }, {
+            default: withCtx(() => [
+              props.image ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+                createVNode(_component_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"
+                }, null, 8, ["src", "alt"])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2$3, [
+                createElementVNode("span", _hoisted_3$2, toDisplayString(props.name), 1),
+                createVNode(unref(_sfc_main$f), {
+                  color: "gray",
+                  text: String(props.count)
+                }, null, 8, ["text"])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const _hoisted_1$3 = { class: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6" };
+const _sfc_main$4 = {
+  __name: "CategoriesList",
+  props: {
+    categories: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      const _component_NuxtLinkLocale = resolveComponent("NuxtLinkLocale");
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.categories, (category, i) => {
+          return openBlock(), createBlock(_component_NuxtLinkLocale, {
+            key: category.slug,
+            to: `/blog/categories/${category.slug}`,
+            class: "block h-full",
+            "data-aos": "fade-up",
+            "data-aos-delay": i % 4 * 200
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$5, {
+                name: category.name,
+                image: category.image,
+                count: category.count
+              }, null, 8, ["name", "image", "count"])
+            ]),
+            _: 2
+          }, 1032, ["to", "data-aos-delay"]);
+        }), 128))
+      ]);
+    };
+  }
+};
+const _sfc_main$3 = {
+  __name: "CategoriesSection",
+  props: {
+    categories: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(_sfc_main$4, {
+          categories: props.categories
+        }, null, 8, ["categories"])
+      ]);
+    };
+  }
+};
+const _hoisted_1$2 = { class: "relative overflow-hidden rounded" };
+const _hoisted_2$2 = ["id", "data-direction"];
+const _hoisted_3$1 = { class: "relative w-full h-56 md:h-80 overflow-hidden" };
+const _hoisted_4$1 = { class: "p-6 md:p-8" };
+const _hoisted_5 = { 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" };
+const _hoisted_6 = { class: "text-xs md:!text-base text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-6 line-clamp-2 leading-relaxed" };
+const _hoisted_7 = { class: "flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between" };
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = ["onClick", "aria-label", "aria-current", "aria-controls"];
+const _hoisted_10 = ["aria-label"];
+const _hoisted_11 = ["aria-label"];
+const _sfc_main$2 = {
+  __name: "HeaderCarousel",
+  props: {
+    featuredPosts: { type: Array, default: () => [] }
+  },
+  setup(__props) {
+    const { t } = useI18n();
+    const props = __props;
+    const currentSlide = ref(0);
+    const slideCount = computed(() => props.featuredPosts.length || 0);
+    const intervalId = ref(null);
+    const direction = ref("forward");
+    const startAutoPlay = () => {
+      intervalId.value = setInterval(nextSlide, 5e3);
+    };
+    const stopAutoPlay = () => {
+      if (intervalId.value) clearInterval(intervalId.value);
+    };
+    const nextSlide = () => {
+      direction.value = "forward";
+      currentSlide.value = (currentSlide.value + 1) % slideCount.value;
+    };
+    const prevSlide = () => {
+      direction.value = "backward";
+      currentSlide.value = (currentSlide.value - 1 + slideCount.value) % slideCount.value;
+    };
+    const goToSlide = (index) => {
+      if (index > currentSlide.value) {
+        direction.value = "forward";
+      } else {
+        direction.value = "backward";
+      }
+      currentSlide.value = index;
+    };
+    onMounted(() => {
+      startAutoPlay();
+    });
+    onUnmounted(() => {
+      stopAutoPlay();
+    });
+    return (_ctx, _cache) => {
+      const _component_NuxtImg = resolveComponent("NuxtImg");
+      const _component_NuxtLinkLocale = resolveComponent("NuxtLinkLocale");
+      return props.featuredPosts.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "relative",
+        onMouseenter: stopAutoPlay,
+        onMouseleave: startAutoPlay
+      }, [
+        createElementVNode("div", _hoisted_1$2, [
+          createVNode(TransitionGroup, { name: "slide" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props.featuredPosts, (post, index) => {
+                return withDirectives((openBlock(), createElementBlock("div", {
+                  id: `carousel-slide-${index}`,
+                  key: post.path || post.title || index,
+                  class: "w-full",
+                  "data-direction": direction.value
+                }, [
+                  createVNode(unref(_sfc_main$d), { class: "!p-0 overflow-hidden cursor-pointer" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(_sfc_main$e), { class: "gap-0 !p-0" }, {
+                        default: withCtx(() => [
+                          createVNode(_component_NuxtLinkLocale, {
+                            to: post.path
+                          }, {
+                            default: withCtx(() => [
+                              createElementVNode("div", _hoisted_3$1, [
+                                createVNode(_component_NuxtImg, {
+                                  src: post.image,
+                                  alt: post.title,
+                                  width: "560",
+                                  height: "315",
+                                  format: "avif",
+                                  quality: "35",
+                                  sizes: { 480: "480px", 1536: "1086px" },
+                                  loading: index === 0 ? "eager" : "lazy",
+                                  fetchpriority: index === 0 ? "high" : "auto",
+                                  preload: index === 0,
+                                  class: "w-full h-full object-cover transition-transform duration-500 hover:scale-105"
+                                }, null, 8, ["src", "alt", "loading", "fetchpriority", "preload"])
+                              ])
+                            ]),
+                            _: 2
+                          }, 1032, ["to"]),
+                          createElementVNode("div", _hoisted_4$1, [
+                            post.categoryText ? (openBlock(), createBlock(_component_NuxtLinkLocale, {
+                              key: 0,
+                              to: `/blog/categories/${post.categorySlug}`,
+                              class: "inline-block mb-3"
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(unref(_sfc_main$f), {
+                                  color: "gray",
+                                  text: post.categoryText
+                                }, null, 8, ["text"])
+                              ]),
+                              _: 2
+                            }, 1032, ["to"])) : createCommentVNode("", true),
+                            createVNode(_component_NuxtLinkLocale, {
+                              to: post.path
+                            }, {
+                              default: withCtx(() => [
+                                createElementVNode("h3", _hoisted_5, toDisplayString(post.title), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["to"]),
+                            createElementVNode("p", _hoisted_6, toDisplayString(post.description), 1),
+                            createElementVNode("div", _hoisted_7, [
+                              createVNode(_component_NuxtLinkLocale, {
+                                to: post.path
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(_sfc_main$g), {
+                                    variant: "primary",
+                                    class: "w-full sm:w-auto"
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(unref(HugeiconsIcon), {
+                                        icon: unref(Nn),
+                                        class: "size-4"
+                                      }, null, 8, ["icon"]),
+                                      createTextVNode(" " + toDisplayString(unref(t)("uiVintage.blog.goToPost")), 1)
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 2
+                              }, 1032, ["to"]),
+                              props.featuredPosts.length > 1 ? (openBlock(), createElementBlock("div", {
+                                key: 0,
+                                class: "flex w-full justify-center gap-3 sm:w-auto",
+                                role: "tablist",
+                                "aria-label": unref(t)("uiVintage.blog.carouselNavigation")
+                              }, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(props.featuredPosts, (_, idx) => {
+                                  return openBlock(), createElementBlock("button", {
+                                    key: idx,
+                                    onClick: ($event) => goToSlide(idx),
+                                    class: normalizeClass(["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.value === idx ? "!w-8 sm:!w-7 !bg-[var(--text-primary-light)] dark:!bg-[var(--text-primary-dark)]" : ""]),
+                                    "aria-label": unref(t)("uiVintage.blog.goToSlide", { index: idx + 1 }),
+                                    "aria-current": currentSlide.value === idx,
+                                    role: "tab",
+                                    "aria-controls": `carousel-slide-${idx}`
+                                  }, null, 10, _hoisted_9);
+                                }), 128))
+                              ], 8, _hoisted_8)) : createCommentVNode("", true)
+                            ])
+                          ])
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 8, _hoisted_2$2)), [
+                  [vShow, currentSlide.value === index]
+                ]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        props.featuredPosts.length > 1 ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          onClick: prevSlide,
+          "aria-label": unref(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"
+        }, [
+          createVNode(unref(HugeiconsIcon), {
+            icon: unref(mn),
+            class: "size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]"
+          }, null, 8, ["icon"])
+        ], 8, _hoisted_10)) : createCommentVNode("", true),
+        props.featuredPosts.length > 1 ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          onClick: nextSlide,
+          "aria-label": unref(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"
+        }, [
+          createVNode(unref(HugeiconsIcon), {
+            icon: unref(Nn),
+            class: "size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]"
+          }, null, 8, ["icon"])
+        ], 8, _hoisted_11)) : createCommentVNode("", true)
+      ], 32)) : createCommentVNode("", true);
+    };
+  }
+};
+const HeaderCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-dac6f921"]]);
+const _hoisted_1$1 = { class: "fixed right-[calc(50%-600px)] top-[140px] z-10 hidden xl:!block" };
+const _hoisted_2$1 = { class: "fixed bottom-4 left-1/2 z-10 -translate-x-1/2 xl:hidden" };
+const _sfc_main$1 = {
+  __name: "SocialShareSidebar",
+  props: {
+    title: { type: String, required: true },
+    url: { type: String, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useI18n();
+    const socialPlatforms = computed(() => {
+      const encodedUrl = encodeURIComponent(props.url);
+      const encodedTitle = encodeURIComponent(props.title);
+      return [{
+        name: "facebook",
+        url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+        icon: ZB,
+        color: "bg-blue-700 hover:bg-blue-800",
+        label: t("uiVintage.blog.share.facebook")
+      }, {
+        name: "twitter",
+        url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
+        icon: t9,
+        color: "bg-black hover:bg-gray-800",
+        label: t("uiVintage.blog.share.x")
+      }, {
+        name: "whatsapp",
+        url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
+        icon: MSr,
+        color: "bg-green-500 hover:bg-green-600",
+        label: t("uiVintage.blog.share.whatsapp")
+      }, {
+        name: "linkedin",
+        url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+        icon: nK,
+        color: "bg-blue-700 hover:bg-blue-800",
+        label: t("uiVintage.blog.share.linkedin")
+      }, {
+        name: "telegram",
+        url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+        icon: oyr,
+        color: "bg-blue-400 hover:bg-blue-500",
+        label: t("uiVintage.blog.share.telegram")
+      }];
+    });
+    return (_ctx, _cache) => {
+      const _component_NuxtLink = resolveComponent("NuxtLink");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1$1, [
+          createVNode(unref(_sfc_main$d), { class: "!p-5 flex flex-col space-y-4 items-center" }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$e), { class: "!p-0 gap-4 items-center" }, {
+                default: withCtx(() => [
+                  createVNode(unref(HugeiconsIcon), {
+                    icon: unref(Nsr),
+                    class: "size-5 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-2"
+                  }, null, 8, ["icon"]),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(socialPlatforms.value, (platform) => {
+                    return openBlock(), createBlock(_component_NuxtLink, {
+                      key: platform.name,
+                      to: platform.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "aria-label": platform.label,
+                      class: normalizeClass(["w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105", platform.color])
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(HugeiconsIcon), {
+                          icon: platform.icon,
+                          class: "size-4"
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 2
+                    }, 1032, ["to", "aria-label", "class"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_2$1, [
+          createVNode(unref(_sfc_main$d), { class: "!p-3 w-fit" }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$e), { class: "!flex-row !p-0 items-center justify-center gap-3" }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(socialPlatforms.value, (platform) => {
+                    return openBlock(), createBlock(_component_NuxtLink, {
+                      key: platform.name,
+                      to: platform.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "aria-label": platform.label,
+                      class: normalizeClass(["w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105", platform.color])
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(HugeiconsIcon), {
+                          icon: platform.icon,
+                          class: "size-4"
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 2
+                    }, 1032, ["to", "aria-label", "class"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ])
+      ], 64);
+    };
+  }
+};
+const _hoisted_1 = { class: "flex items-center gap-3 min-w-0" };
+const _hoisted_2 = { class: "flex items-center justify-center w-8 h-8 md:!w-10 md:!h-10 bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] rounded-none flex-shrink-0" };
+const _hoisted_3 = { class: "text-sm md:!text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]" };
+const _hoisted_4 = ["onClick"];
+const _sfc_main = {
+  __name: "TableOfContents",
+  props: {
+    content: { type: Object, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useI18n();
+    const isExpanded = ref(false);
+    const contentBodyRef = ref(null);
+    const headings = computed(() => {
+      var _a, _b, _c, _d, _e;
+      const tocLinks = ((_c = (_b = (_a = props.content) == null ? void 0 : _a.body) == null ? void 0 : _b.toc) == null ? void 0 : _c.links) || ((_e = (_d = props.content) == null ? void 0 : _d.toc) == null ? void 0 : _e.links) || [];
+      const flattenLinks = (links) => {
+        return links.flatMap((link) => {
+          var _a2;
+          const currentHeading = {
+            id: link.id,
+            text: link.text,
+            level: link.depth
+          };
+          const children = ((_a2 = link.children) == null ? void 0 : _a2.length) ? flattenLinks(link.children) : [];
+          return [currentHeading, ...children];
+        });
+      };
+      return flattenLinks(tocLinks).filter((heading) => heading.id && heading.text && heading.level >= 2 && heading.level <= 3);
+    });
+    const scrollToHeading = (id) => {
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "nearest"
+        });
+      }
+    };
+    const toggleExpanded = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+    const contentHeight = computed(() => {
+      var _a;
+      return ((_a = contentBodyRef.value) == null ? void 0 : _a.scrollHeight) ?? 0;
+    });
+    const getHeadingButtonClasses = (heading) => {
+      const baseClasses = "block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-[var(--bg-selected-light)] dark:hover:bg-[var(--bg-selected-dark)] cursor-pointer";
+      let levelClasses = "";
+      if (heading.level === 2) {
+        levelClasses = "text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] font-semibold text-xs md:text-sm";
+      } else {
+        levelClasses = "text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] !pl-6 text-xs md:text-sm";
+      }
+      return [baseClasses, levelClasses];
+    };
+    return (_ctx, _cache) => {
+      return headings.value.length > 0 ? (openBlock(), createBlock(unref(_sfc_main$d), {
+        key: 0,
+        class: "!p-0 overflow-hidden"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$e), { class: "!p-0 gap-0" }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                onClick: toggleExpanded,
+                class: "flex items-center justify-between w-full p-5 gap-4 text-left cursor-pointer"
+              }, [
+                createElementVNode("div", _hoisted_1, [
+                  createElementVNode("div", _hoisted_2, [
+                    createVNode(unref(HugeiconsIcon), {
+                      icon: unref(Au),
+                      class: "size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]"
+                    }, null, 8, ["icon"])
+                  ]),
+                  createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("uiVintage.blog.tableOfContents")), 1)
+                ]),
+                createElementVNode("div", {
+                  class: normalizeClass(["flex-shrink-0 w-8 h-8 flex items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] transition-transform duration-300", { "rotate-180": isExpanded.value }])
+                }, [
+                  createVNode(unref(HugeiconsIcon), {
+                    icon: unref(dn),
+                    class: "size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]"
+                  }, null, 8, ["icon"])
+                ], 2)
+              ]),
+              createElementVNode("div", {
+                class: normalizeClass(["overflow-hidden transition-[height,opacity] duration-300 ease-in-out", isExpanded.value ? "opacity-100" : "opacity-0"]),
+                style: normalizeStyle({ height: isExpanded.value ? `${contentHeight.value}px` : "0px" })
+              }, [
+                createElementVNode("nav", {
+                  ref_key: "contentBodyRef",
+                  ref: contentBodyRef,
+                  class: "px-5 pb-5 space-y-1"
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(headings.value, (heading) => {
+                    return openBlock(), createElementBlock("button", {
+                      key: heading.id,
+                      onClick: ($event) => scrollToHeading(heading.id),
+                      class: normalizeClass(getHeadingButtonClasses(heading))
+                    }, toDisplayString(heading.text), 11, _hoisted_4);
+                  }), 128))
+                ], 512)
+              ], 6)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+};
+export {
+  _sfc_main$a as AllPostsSection,
+  _sfc_main$8 as BlogFAQSection,
+  _sfc_main$6 as BlogHeaderSection,
+  _sfc_main$7 as BlogInfoSection,
+  _sfc_main$9 as BlogSectionTitle,
+  _sfc_main$4 as CategoriesList,
+  _sfc_main$3 as CategoriesSection,
+  _sfc_main$5 as CategoryCard,
+  HeaderCarousel,
+  _sfc_main$c as PostCard,
+  _sfc_main$b as PostsList,
+  _sfc_main$1 as SocialShareSidebar,
+  _sfc_main as TableOfContents
+};