wpheadless-lib 1.1.2 → 1.1.3

package/dist/base/layout/RootLayoutBase.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import "../../app/globals.css";
+import type { LogoProps } from "../../components/layout/types";
 export declare const fontClassName = "";
 export declare const viewport: {
     width: string;
@@ -17,6 +18,8 @@ type RootLayoutBaseProps = {
     wpAppPassword: string;
     homeHref?: string;
     locale?: string;
+    headerLogo?: LogoProps;
+    footerLogo?: LogoProps;
 };
-export declare function RootLayoutBase({ children, menuHeaderId, menuFooterId, siteName, wpApiUrl, wpUsername, wpAppPassword, homeHref, locale, }: RootLayoutBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function RootLayoutBase({ children, menuHeaderId, menuFooterId, siteName, wpApiUrl, wpUsername, wpAppPassword, homeHref, locale, headerLogo, footerLogo, }: RootLayoutBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/base/layout/RootLayoutBase.js

@@ -10,6 +10,6 @@ export const viewport = {
     maximumScale: 5,
     themeColor: "#333333",
 };
-export function RootLayoutBase({ children, menuHeaderId, menuFooterId, siteName, wpApiUrl, wpUsername, wpAppPassword, homeHref, locale, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { menuId: menuHeaderId, wpApiUrl: wpApiUrl, wpUsername: wpUsername, wpAppPassword: wpAppPassword, siteName: siteName, homeHref: homeHref, locale: locale }), _jsx("main", { id: "main-content", style: { minHeight: "calc(100vh - 200px)" }, children: children }), _jsx(Footer, { menuId: menuFooterId, wpApiUrl: wpApiUrl, wpUsername: wpUsername, wpAppPassword: wpAppPassword, siteName: siteName, locale: locale })] }));
+export function RootLayoutBase({ children, menuHeaderId, menuFooterId, siteName, wpApiUrl, wpUsername, wpAppPassword, homeHref, locale, headerLogo, footerLogo, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { menuId: menuHeaderId, wpApiUrl: wpApiUrl, wpUsername: wpUsername, wpAppPassword: wpAppPassword, siteName: siteName, homeHref: homeHref, locale: locale, logo: headerLogo }), _jsx("main", { id: "main-content", style: { minHeight: "calc(100vh - 200px)" }, children: children }), _jsx(Footer, { menuId: menuFooterId, wpApiUrl: wpApiUrl, wpUsername: wpUsername, wpAppPassword: wpAppPassword, siteName: siteName, locale: locale, logo: footerLogo })] }));
 }

package/dist/components/layout/Footer/index.d.ts

@@ -1,3 +1,4 @@
+import type { LogoProps } from "../types";
 export declare const dynamic = "force-static";
 export declare const revalidate = 3600;
 type FooterProps = {
@@ -7,6 +8,7 @@ type FooterProps = {
     wpAppPassword: string;
     siteName: string;
     locale?: string;
+    logo?: LogoProps;
 };
-export default function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, }: FooterProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export default function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, logo, }: FooterProps): Promise<import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -5,7 +5,7 @@ import { convertWpUrl, getTranslator } from "../../../utils";
 import styles from "./index.module.css";
 export const dynamic = "force-static";
 export const revalidate = 3600;
-export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, }) {
+export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, locale, logo, }) {
     const auth = createAuth({
         method: "basic",
         credentials: {
@@ -19,6 +19,8 @@ export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPasswo
     });
     let menuItems = [];
     const t = getTranslator(locale);
+    const logoData = logo?.src ? logo : null;
+    const logoAlt = logoData?.alt || siteName;
     try {
         const parsedMenuId = parseInt(menuId);
         const itemsResponse = await menusApi.items.list({
@@ -32,5 +34,5 @@ export default async function Footer({ menuId, wpApiUrl, wpUsername, wpAppPasswo
     catch (e) {
         console.error("Error obteniendo menú footer:", e);
     }
-    return (_jsx("footer", { className: styles.footer, children: _jsx("div", { className: "container", children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.grid, children: [_jsxs("div", { children: [_jsx("h3", { className: styles.siteName, children: siteName }), _jsx("p", { className: `${styles.muted} text-muted`, children: t("footer.tagline") })] }), menuItems.length > 0 && (_jsxs("nav", { "aria-label": t("footer.navAria"), className: styles.nav, children: [_jsx("h4", { className: styles.navTitle, children: t("footer.navTitle") }), _jsx("ul", { className: styles.list, children: menuItems.map((item) => (_jsx("li", { children: _jsx(Link, { href: convertWpUrl(item.url, wpApiUrl), className: "footer-link", children: item.title.rendered }) }, item.id))) })] }))] }), _jsxs("div", { className: styles.bottomBar, children: [_jsxs("span", { children: ["\u00A9 ", new Date().getFullYear(), " ", siteName] }), _jsx("span", { children: t("footer.noCookies") })] })] }) }) }));
+    return (_jsx("footer", { className: styles.footer, children: _jsx("div", { className: "container", children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.grid, children: [_jsxs("div", { children: [_jsx("h3", { className: styles.siteName, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height })) : (siteName) }), _jsx("p", { className: `${styles.muted} text-muted`, children: t("footer.tagline") })] }), menuItems.length > 0 && (_jsxs("nav", { "aria-label": t("footer.navAria"), className: styles.nav, children: [_jsx("h4", { className: styles.navTitle, children: t("footer.navTitle") }), _jsx("ul", { className: styles.list, children: menuItems.map((item) => (_jsx("li", { children: _jsx(Link, { href: convertWpUrl(item.url, wpApiUrl), className: "footer-link", children: item.title.rendered }) }, item.id))) })] }))] }), _jsxs("div", { className: styles.bottomBar, children: [_jsxs("span", { children: ["\u00A9 ", new Date().getFullYear(), " ", siteName] }), _jsx("span", { children: t("footer.noCookies") })] })] }) }) }));
 }

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

@@ -16,12 +16,21 @@
 }
 
 .siteName {
+  display: inline-flex;
+  align-items: center;
   font-size: 1.25rem;
   font-weight: bold;
   margin-bottom: 1rem;
   color: var(--foreground);
 }
 
+.logoImage {
+  height: 44px;
+  width: auto;
+  display: block;
+  object-fit: contain;
+}
+
 .muted {
   font-size: 0.875rem;
 }

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

@@ -1,3 +1,4 @@
+import type { LogoProps } from "../types";
 type MenuLink = {
     id: number;
     href: string;
@@ -14,6 +15,7 @@ type HeaderClientProps = {
     siteName: string;
     homeHref: string;
     labels: HeaderLabels;
+    logo?: LogoProps;
 };
-export default function HeaderClient({ menuLinks, siteName, homeHref, labels, }: HeaderClientProps): import("react/jsx-runtime").JSX.Element;
+export default function HeaderClient({ menuLinks, siteName, homeHref, labels, logo, }: HeaderClientProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ 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, }) {
+export default function HeaderClient({ menuLinks, siteName, homeHref, labels, logo, }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isMobileView, setIsMobileView] = useState(false);
     useEffect(() => {
@@ -21,7 +21,9 @@ export default function HeaderClient({ menuLinks, siteName, homeHref, labels, })
     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"
+    const logoData = logo?.src ? logo : null;
+    const logoAlt = logoData?.alt || siteName;
+    return (_jsxs("div", { className: styles.inner, children: [_jsx(Link, { href: homeHref, className: styles.logo, children: logoData ? (_jsx("img", { src: logoData.src, alt: logoAlt, className: styles.logoImage, width: logoData.width, height: logoData.height })) : (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.d.ts

@@ -1,3 +1,4 @@
+import type { LogoProps } from "../types";
 export declare const dynamic = "force-static";
 export declare const revalidate = 3600;
 type HeaderProps = {
@@ -8,6 +9,7 @@ type HeaderProps = {
     siteName: string;
     homeHref?: string;
     locale?: string;
+    logo?: LogoProps;
 };
-export default function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref, locale, }: HeaderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export default function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref, locale, logo, }: HeaderProps): Promise<import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -5,7 +5,7 @@ import HeaderClient from "./HeaderClient";
 import styles from "./index.module.css";
 export const dynamic = "force-static";
 export const revalidate = 3600;
-export default async function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref = "/", locale, }) {
+export default async function Header({ menuId, wpApiUrl, wpUsername, wpAppPassword, siteName, homeHref = "/", locale, logo, }) {
     const t = getTranslator(locale);
     const auth = createAuth({
         method: "basic",
@@ -43,5 +43,5 @@ export default async function Header({ menuId, wpApiUrl, wpUsername, wpAppPasswo
         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 }) }) }));
+    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: "container", children: _jsx(HeaderClient, { menuLinks: menuLinks, siteName: siteName, homeHref: homeHref, labels: labels, logo: logo }) }) }));
 }

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

@@ -20,6 +20,9 @@
 }
 
 .logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 1.75rem;
   font-weight: 700;
   color: var(--primary);
@@ -28,6 +31,13 @@
   text-decoration: none;
 }
 
+.logoImage {
+  height: 40px;
+  width: auto;
+  display: block;
+  object-fit: contain;
+}
+
 .nav {
   flex: 1;
   display: flex;

package/dist/components/layout/types.d.ts

@@ -0,0 +1,6 @@
+export type LogoProps = {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+};

package/dist/components/layout/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -76,3 +76,21 @@
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-lg);
 }
+
+@media (max-width: 900px) {
+  .featuredWithImage {
+    grid-template-columns: 1fr;
+  }
+
+  .featuredImageLink {
+    min-height: 220px;
+  }
+
+  .featuredBody {
+    padding: var(--spacing-md);
+  }
+
+  .featuredTitle {
+    font-size: 1.5rem;
+  }
+}

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

@@ -5,6 +5,7 @@ type PostViewProps = {
     dateLocale?: string;
     categoryBasePath?: string;
     locale?: Locale;
+    authorDescription?: string | null;
 };
-export declare function PostView({ post, dateLocale, categoryBasePath, locale, }: PostViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function PostView({ post, dateLocale, categoryBasePath, locale, authorDescription, }: PostViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/views/PostView/index.js

@@ -9,9 +9,10 @@ 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, }) {
+export function PostView({ post, dateLocale = "en-US", categoryBasePath = "/", locale, authorDescription, }) {
     const t = getTranslator(locale);
     const author = getAuthor(post);
+    const authorBio = authorDescription ?? author?.description;
     const primaryCategory = getPrimaryCategory(post);
     const categoryUrl = buildCategoryUrl(categoryBasePath, primaryCategory?.slug);
     const featuredImage = getFeaturedImage(post, locale);
@@ -26,5 +27,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 }), _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 })] })] }))] }) }));
+    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 && (_jsx("aside", { className: `card ${styles.authorCard}`, children: _jsxs("address", { className: styles.authorAddress, children: [_jsx("strong", { className: styles.authorName, children: author.name }), authorBio && (_jsx("p", { className: styles.authorBio, children: authorBio }))] }) }))] }) }));
 }

package/dist/views/PostView/index.utils.js

@@ -1,8 +1,10 @@
-import { getFeaturedMedia, getTranslator, stripTags, } from "../../utils";
+import { ensureTrailingSlash, getFeaturedMedia, getTranslator, stripTags, } from "../../utils";
 import { formatPostDate } from "../../components/PostCard/index.utils";
 export const getCategories = (post) => (post._embedded?.["wp:term"]?.[0] || []).filter(Boolean);
 export const getPrimaryCategory = (post) => getCategories(post)[0];
-export const buildCategoryUrl = (basePath, slug) => (slug ? `${basePath}${slug}`.replace(/\/+/g, "/") : null);
+export const buildCategoryUrl = (basePath, slug) => slug
+    ? ensureTrailingSlash(`${basePath}${slug}`.replace(/\/+/g, "/"))
+    : null;
 export const getAuthor = (post) => post._embedded?.author?.[0];
 export const getFeaturedImage = (post, locale) => {
     const t = getTranslator(locale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wpheadless-lib",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "type": "module",
   "main": "dist/index.js",