wpheadless-lib 1.0.0 → 1.0.2

package/dist/app/globals.css

@@ -223,12 +223,22 @@ a:hover {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   background: var(--primary);
-  color: white;
+  color: #ffffff;
   font-size: 0.75rem;
   font-weight: 600;
   border-radius: 9999px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  transition: var(--transition);
+}
+
+.badge:hover,
+.badge:focus-visible,
+a.badge,
+a.badge:hover,
+a.badge:focus-visible {
+  color: #ffffff !important;
+  background: var(--primary-hover);
 }
 
 /* Utilities */

package/dist/components/Breadcrumbs/index.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import styles from "./index.module.css";
+function truncateLabel(label, max = 30) {
+    const trimmed = label.trim();
+    return trimmed.length > max ? `${trimmed.slice(0, max)}...` : trimmed;
+}
 export function Breadcrumbs({ items }) {
     if (!items.length)
         return null;
     return (_jsx("nav", { "aria-label": "Breadcrumb", className: styles.nav, children: _jsx("ol", { className: styles.list, children: items.map((item, idx) => {
                 const isLast = idx === items.length - 1;
-                return (_jsxs("li", { className: styles.item, children: [item.href && !isLast ? (_jsx(Link, { href: item.href, className: styles.link, children: item.label })) : (_jsx("span", { className: styles.current, "aria-current": isLast ? "page" : undefined, children: item.label })), idx < items.length - 1 && (_jsx("span", { className: styles.separator, children: "/" }))] }, `${item.label}-${idx}`));
+                const display = truncateLabel(item.label, 30);
+                return (_jsxs("li", { className: styles.item, children: [item.href && !isLast ? (_jsx(Link, { href: item.href, className: styles.link, title: item.label, children: display })) : (_jsx("span", { className: styles.current, "aria-current": isLast ? "page" : undefined, title: item.label, children: display })), idx < items.length - 1 && (_jsx("span", { className: styles.separator, children: "/" }))] }, `${item.label}-${idx}`));
             }) }) }));
 }

package/dist/components/PostCard/index.js

@@ -4,6 +4,10 @@ import Link from "next/link";
 import { getFeaturedMedia } from "../../utils";
 import { buildCategoryUrl, buildPostUrl, formatPostDate, resolveCategorySlug, } from "./index.utils";
 import styles from "./index.module.css";
+function truncateText(text, max = 20) {
+    const normalized = text.trim();
+    return normalized.length > max ? `${normalized.slice(0, max)}...` : normalized;
+}
 export default function PostCard({ post, categorySlug, locale = "en", dateLocale = "en-US", }) {
     const featuredMedia = getFeaturedMedia(post);
     const imageUrl = featuredMedia?.source_url;
@@ -14,9 +18,9 @@ export default function PostCard({ post, categorySlug, locale = "en", dateLocale
         categorySlug: resolvedCategory,
         locale,
     });
-    return (_jsxs("article", { className: `${styles.card} card`, children: [categories.length > 0 && (_jsx("div", { className: styles.badges, children: categories.map((cat) => (_jsx(Link, { href: buildCategoryUrl(cat.slug, locale), className: `badge ${styles.badge}`, children: cat.name }, cat.id ?? cat.slug))) })), _jsxs(Link, { href: postUrl, className: styles.postLink, children: [imageUrl && (_jsx("div", { className: styles.imageWrapper, children: _jsx(Image, { src: imageUrl, alt: featuredMedia?.alt_text || post.title.rendered, fill: true, style: { objectFit: "cover" }, sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" }) })), _jsxs("div", { className: styles.body, children: [_jsx("h2", { dangerouslySetInnerHTML: {
+    return (_jsxs("article", { className: `${styles.card} card`, children: [categories.length > 0 && (_jsx("div", { className: styles.badges, children: categories.map((cat) => (_jsx(Link, { href: buildCategoryUrl(cat.slug, locale), className: `badge ${styles.badge}`, title: cat.name, children: truncateText(cat.name, 20) }, cat.id ?? cat.slug))) })), _jsxs(Link, { href: postUrl, className: styles.postLink, children: [imageUrl && (_jsx("div", { className: styles.imageWrapper, children: _jsx(Image, { src: imageUrl, alt: featuredMedia?.alt_text || post.title.rendered, fill: true, style: { objectFit: "cover" }, sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" }) })), _jsxs("div", { className: styles.body, children: [_jsx("h2", { className: styles.title, dangerouslySetInnerHTML: {
                                     __html: post.title.rendered,
-                                }, className: styles.title }), _jsx("div", { dangerouslySetInnerHTML: {
+                                } }), _jsx("div", { dangerouslySetInnerHTML: {
                                     __html: post.excerpt.rendered,
                                 }, className: styles.excerpt }), _jsx("time", { dateTime: post.date, className: styles.date, children: formatPostDate(post.date, dateLocale) })] })] })] }));
 }

package/dist/components/PostCard/index.module.css

@@ -3,17 +3,23 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 }
 
 .badges {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
-  padding: var(--spacing-sm) var(--spacing-md) 0;
+  z-index: 2;
 }
 
 .badge {
   text-decoration: none;
+  box-shadow: 0 6px 16px var(--shadow);
 }
 
 .postLink {
@@ -21,6 +27,8 @@
   color: inherit;
   display: block;
   height: 100%;
+  position: relative;
+  z-index: 1;
 }
 
 .imageWrapper {
@@ -33,7 +41,7 @@
   padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-xs);
   align-items: flex-start;
 }
 
@@ -42,6 +50,7 @@
   font-weight: 700;
   line-height: 1.3;
   color: var(--foreground);
+  margin-top: 0;
 }
 
 .excerpt {

package/dist/components/layout/Header/HeaderClient.d.ts

@@ -0,0 +1,19 @@
+type MenuLink = {
+    id: number;
+    href: string;
+    label: string;
+    target?: string;
+};
+type HeaderLabels = {
+    navAria: string;
+    openMenu: string;
+    closeMenu: string;
+};
+type HeaderClientProps = {
+    menuLinks: MenuLink[];
+    siteName: string;
+    homeHref: string;
+    labels: HeaderLabels;
+};
+export default function HeaderClient({ menuLinks, siteName, homeHref, labels, }: HeaderClientProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/Header/HeaderClient.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import styles from "./index.module.css";
+export default function HeaderClient({ menuLinks, siteName, homeHref, labels, }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isMobileView, setIsMobileView] = useState(false);
+    useEffect(() => {
+        const handleResize = () => {
+            const isMobile = window.innerWidth < 900;
+            setIsMobileView(isMobile);
+            if (!isMobile) {
+                setIsMenuOpen(false);
+            }
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const toggleMenu = () => setIsMenuOpen((prev) => !prev);
+    const handleLinkClick = () => setIsMenuOpen(false);
+    const menuLabel = isMenuOpen ? labels.closeMenu : labels.openMenu;
+    return (_jsxs("div", { className: styles.inner, children: [_jsx(Link, { href: homeHref, className: styles.logo, children: siteName }), menuLinks.length > 0 && (_jsxs("div", { className: styles.navWrapper, children: [_jsxs("button", { type: "button", className: styles.menuButton, "aria-expanded": isMenuOpen, "aria-controls": "primary-navigation", "aria-label": menuLabel, onClick: toggleMenu, children: [_jsxs("span", { className: styles.menuIcon, "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: styles.menuText, children: menuLabel })] }), _jsx("nav", { id: "primary-navigation", "aria-label": labels.navAria, className: `${styles.nav} ${isMenuOpen ? styles.navOpen : ""}`, "aria-hidden": !isMenuOpen && isMobileView, hidden: !isMenuOpen && isMobileView, children: _jsx("ul", { className: styles.list, children: menuLinks.map((item) => (_jsx("li", { children: _jsx(Link, { href: item.href, className: "header-link", onClick: handleLinkClick, target: item.target || undefined, rel: item.target === "_blank"
+                                        ? "noopener noreferrer"
+                                        : undefined, children: item.label }) }, item.id))) }) })] }))] }));
+}

package/dist/components/layout/Header/index.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createMenuEndpoints, createAuth } from "wpjsapi-lib";
 import { convertWpUrl, getTranslator } from "../../../utils";
+import HeaderClient from "./HeaderClient";
 import styles from "./index.module.css";
 export const dynamic = "force-static";
 export const revalidate = 3600;
@@ -32,5 +32,16 @@ export default async function Header({ menuId, wpApiUrl, wpUsername, wpAppPasswo
     catch (e) {
         console.error("Error obteniendo menú:", e);
     }
-    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: "container", children: _jsxs("div", { className: styles.inner, children: [_jsx(Link, { href: homeHref, className: styles.logo, children: siteName }), _jsx("div", { className: styles.navWrapper, children: menuItems.length > 0 && (_jsx("nav", { "aria-label": t("header.navAria"), className: styles.nav, children: _jsx("ul", { className: styles.list, children: menuItems.map((item) => (_jsx("li", { children: _jsx(Link, { href: convertWpUrl(item.url, wpApiUrl), className: "header-link", children: item.title.rendered }) }, item.id))) }) })) })] }) }) }));
+    const menuLinks = menuItems.map((item) => ({
+        id: item.id,
+        href: convertWpUrl(item.url, wpApiUrl),
+        label: item.title.rendered,
+        target: item.target || undefined,
+    }));
+    const labels = {
+        navAria: t("header.navAria"),
+        openMenu: t("header.openMenu"),
+        closeMenu: t("header.closeMenu"),
+    };
+    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: "container", children: _jsx(HeaderClient, { menuLinks: menuLinks, siteName: siteName, homeHref: homeHref, labels: labels }) }) }));
 }

package/dist/components/layout/Header/index.module.css

@@ -1,4 +1,5 @@
 .header {
+  --header-height: 78px;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -14,6 +15,8 @@
   justify-content: space-between;
   padding: 1.25rem 0;
   gap: 3rem;
+  position: relative;
+  min-height: var(--header-height);
 }
 
 .logo {
@@ -25,13 +28,6 @@
   text-decoration: none;
 }
 
-.navWrapper {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  flex: 1;
-}
-
 .nav {
   flex: 1;
   display: flex;
@@ -46,3 +42,127 @@
   margin: 0;
   padding: 0;
 }
+
+.navWrapper {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.menuButton {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  color: var(--foreground);
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+  position: relative;
+  z-index: 120;
+}
+
+.menuButton:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.menuIcon {
+  position: relative;
+  width: 20px;
+  height: 14px;
+  display: inline-block;
+}
+
+.menuIcon span {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+  border-radius: 999px;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.menuIcon span:nth-child(1) {
+  top: 0;
+}
+
+.menuIcon span:nth-child(2) {
+  top: 6px;
+}
+
+.menuIcon span:nth-child(3) {
+  top: 12px;
+}
+
+.menuButton[aria-expanded="true"] .menuIcon span:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+
+.menuButton[aria-expanded="true"] .menuIcon span:nth-child(2) {
+  opacity: 0;
+}
+
+.menuButton[aria-expanded="true"] .menuIcon span:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
+.menuText {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 900px) {
+  .inner {
+    gap: 1.25rem;
+  }
+
+  .nav {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: calc(100vh - var(--header-height));
+    padding: 1.5rem 1.25rem 2.5rem;
+    background: var(--card-bg);
+    display: block;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-8px);
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    z-index: 90;
+  }
+
+  .navOpen {
+    opacity: 1;
+    pointer-events: auto;
+    overflow: auto;
+    transform: translateY(0);
+  }
+
+  .list {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem 0 1.25rem;
+  }
+
+  .menuButton {
+    display: inline-flex;
+  }
+}

package/dist/utils/i18n.js

@@ -7,6 +7,8 @@ const defaultMessages = {
         },
         header: {
             navAria: "Main navigation",
+            openMenu: "Open menu",
+            closeMenu: "Close menu",
         },
         site: {
             title: "Site title",
@@ -61,6 +63,8 @@ const defaultMessages = {
         },
         header: {
             navAria: "Navegación principal",
+            openMenu: "Abrir menú",
+            closeMenu: "Cerrar menú",
         },
         site: {
             title: "Título del sitio",

package/dist/utils/seo.d.ts

@@ -54,6 +54,7 @@ type BreadcrumbItem = {
 export declare function buildBreadcrumbSchema(items: BreadcrumbItem[]): {
     "@context": string;
     "@type": string;
+    "@id": string;
     itemListElement: {
         item?: string;
         "@type": string;

package/dist/utils/seo.js

@@ -78,6 +78,7 @@ export function buildBreadcrumbSchema(items) {
     return {
         "@context": "https://schema.org",
         "@type": "BreadcrumbList",
+        "@id": `${items[items.length - 1].item}#breadcrumb`,
         itemListElement: items.map((it, idx) => ({
             "@type": "ListItem",
             position: idx + 1,

package/dist/views/CategoryListView/index.d.ts

@@ -5,8 +5,9 @@ type CategoryListViewProps = {
     posts: WPPost[];
     totalPages: number;
     baseUrl?: string;
+    homeHref?: string;
     locale?: Locale;
     dateLocale?: string;
 };
-export declare function CategoryListView({ category, posts, totalPages, baseUrl, locale, dateLocale, }: CategoryListViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryListView({ category, posts, totalPages, baseUrl, homeHref, locale, dateLocale, }: CategoryListViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/views/CategoryListView/index.js

@@ -5,13 +5,13 @@ import styles from "./index.module.css";
 import { getCountLabel, getEmptyLabel, getPaginatorBase } from "./index.utils";
 import { Breadcrumbs } from "../../components";
 import { getTranslator } from "../../utils";
-export function CategoryListView({ category, posts, totalPages, baseUrl, locale, dateLocale = "en-US", }) {
+export function CategoryListView({ category, posts, totalPages, baseUrl, homeHref = "/", locale, dateLocale = "en-US", }) {
     const paginatorBase = getPaginatorBase(category, baseUrl);
     const countLabel = getCountLabel(category, locale);
     const emptyLabel = getEmptyLabel(locale);
     const t = getTranslator(locale);
     return (_jsxs("div", { className: `container ${styles.container}`, children: [_jsxs("header", { className: styles.header, children: [_jsx(Breadcrumbs, { items: [
-                            { label: "Home", href: baseUrl || "/" },
+                            { label: "Home", href: homeHref },
                             { label: category.name },
                         ] }), _jsx("h1", { className: styles.title, children: category.name }), category.description && (_jsx("div", { className: styles.description, dangerouslySetInnerHTML: { __html: category.description } })), countLabel && _jsx("p", { className: styles.count, children: countLabel })] }), posts.length === 0 ? (_jsx("p", { className: styles.empty, children: emptyLabel })) : (_jsxs("section", { "aria-label": t("home.title"), className: styles.gridSection, children: [_jsx("div", { className: styles.grid, children: posts.map((post) => (_jsx(PostCard, { post: post, categorySlug: category.slug, locale: locale, dateLocale: dateLocale }, post.id))) }), _jsx(Paginator, { currentPage: 1, totalPages: totalPages, baseUrl: paginatorBase, locale: locale })] }))] }));
 }

package/dist/views/CategoryPaginationView/index.js

@@ -14,5 +14,5 @@ export function CategoryPaginationView({ category, posts, currentPage, totalPage
                             { label: "Home", href: paginatorBase || "/" },
                             { label: category.name },
                             { label: pageLabel },
-                        ] }), _jsx("h1", { className: styles.title, children: category.name }), category.description && (_jsx("p", { className: styles.description, dangerouslySetInnerHTML: { __html: category.description } })), _jsx("p", { className: styles.pageLabel, children: pageLabel })] }), posts.length === 0 ? (_jsx("p", { className: styles.empty, children: emptyLabel })) : (_jsxs("section", { "aria-label": t("category.pageLabel", { page: currentPage }), className: styles.gridSection, children: [_jsx("div", { className: styles.grid, children: posts.map((post) => (_jsx(PostCard, { post: post, categorySlug: category.slug, locale: locale, dateLocale: dateLocale }, post.id))) }), _jsx(Paginator, { currentPage: currentPage, totalPages: totalPages, baseUrl: paginatorBase, locale: locale })] }))] }));
+                        ] }), _jsx("h1", { className: styles.title, children: category.name }), _jsx("p", { className: styles.pageLabel, children: pageLabel })] }), posts.length === 0 ? (_jsx("p", { className: styles.empty, children: emptyLabel })) : (_jsxs("section", { "aria-label": t("category.pageLabel", { page: currentPage }), className: styles.gridSection, children: [_jsx("div", { className: styles.grid, children: posts.map((post) => (_jsx(PostCard, { post: post, categorySlug: category.slug, locale: locale, dateLocale: dateLocale }, post.id))) }), _jsx(Paginator, { currentPage: currentPage, totalPages: totalPages, baseUrl: paginatorBase, locale: locale })] }))] }));
 }

package/dist/views/HomeView/index.js

@@ -5,6 +5,10 @@ import Paginator from "../../components/Paginator";
 import PostCard from "../../components/PostCard";
 import styles from "./index.module.css";
 import { buildFeaturedViewModel, getHomeCopy } from "./index.utils";
+function truncateLabel(label, max = 20) {
+    const trimmed = label.trim();
+    return trimmed.length > max ? `${trimmed.slice(0, max)}...` : trimmed;
+}
 export function HomeView({ featuredPost, regularPosts, error, totalPages, baseUrl = "", locale, dateLocale = "en-US", }) {
     const copy = getHomeCopy(locale);
     const featuredModel = featuredPost
@@ -13,7 +17,7 @@ export function HomeView({ featuredPost, regularPosts, error, totalPages, baseUr
     return (_jsx("div", { className: `container ${styles.container}`, children: error ? (_jsxs("div", { className: styles.errorBox, children: [_jsxs("p", { children: [copy.errorTitle, ": ", error] }), _jsx("p", { className: styles.errorHint, children: copy.errorHint })] })) : !featuredModel && regularPosts.length === 0 ? (_jsx("p", { className: styles.empty, children: copy.empty })) : (_jsxs(_Fragment, { children: [featuredModel && (_jsxs("article", { className: `card ${styles.featured} ${featuredModel.image
                         ? styles.featuredWithImage
                         : styles.featuredNoImage}`, children: [featuredModel.image && (_jsx(Link, { href: featuredModel.postUrl, className: styles.featuredImageLink, children: _jsx(Image, { src: featuredModel.image.src, alt: featuredModel.image.alt, fill: true, className: styles.featuredImage, priority: true, sizes: "(max-width: 768px) 100vw, 50vw" }) })), _jsxs("div", { className: styles.featuredBody, children: [featuredModel.badgeLabel &&
-                                    (featuredModel.badgeUrl ? (_jsx(Link, { href: featuredModel.badgeUrl, className: `${styles.featuredBadge} badge`, children: featuredModel.badgeLabel })) : (_jsx("span", { className: `${styles.featuredBadge} badge`, children: featuredModel.badgeLabel }))), _jsx(Link, { href: featuredModel.postUrl, children: _jsx("h2", { dangerouslySetInnerHTML: {
+                                    (featuredModel.badgeUrl ? (_jsx(Link, { href: featuredModel.badgeUrl, className: `${styles.featuredBadge} badge`, title: featuredModel.badgeLabel, children: truncateLabel(featuredModel.badgeLabel) })) : (_jsx("span", { className: `${styles.featuredBadge} badge`, title: featuredModel.badgeLabel, children: truncateLabel(featuredModel.badgeLabel) }))), _jsx(Link, { href: featuredModel.postUrl, children: _jsx("h2", { dangerouslySetInnerHTML: {
                                             __html: featuredModel.titleHtml,
                                         }, className: styles.featuredTitle }) }), _jsx("div", { dangerouslySetInnerHTML: {
                                         __html: featuredModel.excerptHtml,

package/dist/views/HomeView/index.module.css

@@ -24,7 +24,6 @@
 .featured {
   margin-bottom: var(--spacing-lg);
   display: grid;
-  gap: var(--spacing-lg);
 }
 
 .featuredWithImage {
@@ -60,6 +59,7 @@
 .featuredTitle {
   margin-bottom: var(--spacing-sm);
   font-size: 2rem;
+  margin-top: 0;
 }
 
 .featuredExcerpt {

package/dist/views/PostView/index.js

@@ -5,6 +5,10 @@ import { getTranslator } from "../../utils";
 import { Breadcrumbs } from "../../components";
 import { buildCategoryUrl, formatPublishedDate, getAuthor, getFeaturedImage, getPrimaryCategory, } from "./index.utils";
 import { stripTags } from "../../utils";
+function truncateLabel(label, max = 20) {
+    const trimmed = label.trim();
+    return trimmed.length > max ? `${trimmed.slice(0, max)}...` : trimmed;
+}
 export function PostView({ post, dateLocale = "en-US", categoryBasePath = "/", locale, }) {
     const t = getTranslator(locale);
     const author = getAuthor(post);
@@ -22,5 +26,5 @@ export function PostView({ post, dateLocale = "en-US", categoryBasePath = "/", l
             { label: "Home", href: categoryBasePath },
             { label: stripTags(post.title.rendered) || post.title.rendered },
         ];
-    return (_jsx("div", { className: `container ${styles.container}`, children: _jsxs("article", { className: styles.article, children: [_jsx(Breadcrumbs, { items: breadcrumbs }), _jsxs("header", { className: styles.postHeader, children: [primaryCategory && (_jsx("div", { className: styles.badgeWrapper, children: categoryUrl ? (_jsx("a", { href: categoryUrl, className: "badge", children: primaryCategory.name })) : (_jsx("span", { className: "badge", children: primaryCategory.name })) })), _jsx("h1", { dangerouslySetInnerHTML: { __html: post.title.rendered }, className: styles.title }), _jsxs("div", { className: styles.meta, children: [author && (_jsx("span", { className: styles.authorLabel, children: t("post.authorPrefix", { name: author.name }) })), _jsx("span", { children: "\u2022" }), _jsx("time", { dateTime: post.date, children: publishedDate })] })] }), featuredImage && (_jsx("figure", { className: styles.figure, children: _jsx(Image, { src: featuredImage.src, alt: featuredImage.alt, width: featuredImage.width, height: featuredImage.height, className: styles.image, priority: true, sizes: "(max-width: 900px) 100vw, 900px" }) })), _jsx("div", { dangerouslySetInnerHTML: { __html: post.content.rendered }, className: `post-content ${styles.content}` }), author && author.description && (_jsxs("aside", { className: `card ${styles.authorCard}`, children: [_jsx("h2", { className: styles.authorTitle, children: t("post.aboutAuthor") }), _jsxs("address", { className: styles.authorAddress, children: [_jsx("strong", { className: styles.authorName, children: author.name }), _jsx("p", { className: styles.authorBio, children: author.description })] })] }))] }) }));
+    return (_jsx("div", { className: `container ${styles.container}`, children: _jsxs("article", { className: styles.article, children: [_jsx(Breadcrumbs, { items: breadcrumbs }), _jsx("header", { className: styles.postHeader, children: _jsx("h1", { dangerouslySetInnerHTML: { __html: post.title.rendered }, className: styles.title }) }), featuredImage && (_jsxs("figure", { className: styles.figure, children: [primaryCategory && (_jsx("div", { className: styles.badgeOverlay, children: categoryUrl ? (_jsx("a", { href: categoryUrl, className: "badge", title: primaryCategory.name, children: truncateLabel(primaryCategory.name, 20) })) : (_jsx("span", { className: "badge", title: primaryCategory.name, children: truncateLabel(primaryCategory.name, 20) })) })), _jsx(Image, { src: featuredImage.src, alt: featuredImage.alt, width: featuredImage.width, height: featuredImage.height, className: styles.image, priority: true, sizes: "(max-width: 900px) 100vw, 900px" })] })), _jsxs("div", { className: styles.meta, children: [author && (_jsx("span", { className: styles.authorLabel, children: t("post.authorPrefix", { name: author.name }) })), _jsx("span", { children: "\u2022" }), _jsx("time", { dateTime: post.date, children: publishedDate })] }), _jsx("div", { dangerouslySetInnerHTML: { __html: post.content.rendered }, className: `post-content ${styles.content}` }), author && author.description && (_jsxs("aside", { className: `card ${styles.authorCard}`, children: [_jsx("h2", { className: styles.authorTitle, children: t("post.aboutAuthor") }), _jsxs("address", { className: styles.authorAddress, children: [_jsx("strong", { className: styles.authorName, children: author.name }), _jsx("p", { className: styles.authorBio, children: author.description })] })] }))] }) }));
 }

package/dist/views/PostView/index.module.css

@@ -1,5 +1,5 @@
 .container {
-  padding-top: var(--spacing-xl);
+  padding-top: var(--spacing-sm);
   padding-bottom: var(--spacing-xl);
 }
 
@@ -8,25 +8,36 @@
   margin: 0 auto;
 }
 
-.badgeWrapper {
-  margin-bottom: var(--spacing-sm);
+.badgeOverlay {
+  position: absolute;
+  bottom: 25px;
+  left: 15px;
+  z-index: 2;
+  box-shadow: 0 6px 16px var(--shadow);
 }
 
 .title {
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 800;
   line-height: 1.2;
-  margin-bottom: var(--spacing-md);
   color: var(--foreground);
+  margin-bottom: var(--spacing-sm);
 }
 
 .meta {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-lg);
-  color: var(--foreground-light);
-  font-size: 0.9375rem;
+  margin: 0 0 var(--spacing-sm);
+  padding: 0.7rem 0.9rem;
+  background: rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--foreground);
+  font-size: 0.8rem;
+  width: fit-content;
+  max-width: 100%;
+  flex-wrap: wrap;
 }
 
 .authorLabel {
@@ -34,7 +45,8 @@
 }
 
 .figure {
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-xs);
+  position: relative;
 }
 
 .image {
@@ -51,8 +63,20 @@
 }
 
 .authorCard {
-  margin-top: var(--spacing-xl);
-  padding: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--spacing-md) var(--spacing-lg);
+  max-width: 720px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  box-shadow: 0 6px 18px var(--shadow);
+  transition: none;
+}
+
+.authorCard:hover {
+  box-shadow: 0 6px 18px var(--shadow);
+  transform: none;
 }
 
 .authorAddress {
@@ -60,7 +84,7 @@
 }
 
 .authorTitle {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   font-weight: 700;
   margin-top: 0;
   margin-bottom: var(--spacing-md);
@@ -70,11 +94,12 @@
 .authorName {
   display: block;
   margin-bottom: var(--spacing-xs);
-  font-size: 1.125rem;
+  font-size: 1rem;
   color: var(--foreground);
 }
 
 .authorBio {
   color: var(--foreground-light);
   line-height: 1.6;
+  font-size: 0.95rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wpheadless-lib",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "type": "module",
   "main": "dist/index.js",
@@ -25,7 +25,7 @@
     }
   },
   "dependencies": {
-    "wpjsapi-lib": "3.0.0"
+    "wpjsapi-lib": "3.1.1"
   },
   "devDependencies": {
     "@types/node": "^20",