wpheadless-lib 1.0.0

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

@@ -0,0 +1,78 @@
+.container {
+  padding-top: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+}
+
+.errorBox {
+  color: #ef4444;
+  padding: var(--spacing-lg);
+  text-align: center;
+  background: var(--background-alt);
+  border-radius: 8px;
+}
+
+.errorHint {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.empty {
+  text-align: center;
+  color: var(--foreground-light);
+}
+
+.featured {
+  margin-bottom: var(--spacing-lg);
+  display: grid;
+  gap: var(--spacing-lg);
+}
+
+.featuredWithImage {
+  grid-template-columns: 1fr 1fr;
+}
+
+.featuredNoImage {
+  grid-template-columns: 1fr;
+}
+
+.featuredImageLink {
+  position: relative;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.featuredImage {
+  object-fit: cover;
+}
+
+.featuredBody {
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.featuredBadge {
+  width: fit-content;
+  margin-bottom: var(--spacing-sm);
+}
+
+.featuredTitle {
+  margin-bottom: var(--spacing-sm);
+  font-size: 2rem;
+}
+
+.featuredExcerpt {
+  margin-bottom: var(--spacing-sm);
+}
+
+.featuredDate {
+  font-size: 0.875rem;
+}
+
+.postsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}

package/dist/views/HomeView/index.utils.d.ts

@@ -0,0 +1,23 @@
+import type { WPPost } from "wpjsapi-lib";
+import { type Locale } from "../../utils";
+export type HomeCopy = {
+    title: string;
+    empty: string;
+    errorTitle: string;
+    errorHint: string;
+};
+export declare const getHomeCopy: (locale?: Locale) => HomeCopy;
+export type FeaturedViewModel = {
+    postUrl: string;
+    titleHtml: string;
+    excerptHtml: string;
+    dateTime: string;
+    dateLabel: string;
+    badgeLabel?: string;
+    badgeUrl?: string | null;
+    image?: {
+        src: string;
+        alt: string;
+    } | undefined;
+};
+export declare const buildFeaturedViewModel: (post: WPPost, locale?: Locale, dateLocale?: string) => FeaturedViewModel;

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

@@ -0,0 +1,44 @@
+import { getFeaturedMedia, getTranslator, stripTags, } from "../../utils";
+import { buildCategoryUrl, buildPostUrl, formatPostDate, } from "../../components/PostCard/index.utils";
+export const getHomeCopy = (locale) => {
+    const t = getTranslator(locale);
+    return {
+        title: t("home.title"),
+        empty: t("home.empty"),
+        errorTitle: t("home.error"),
+        errorHint: t("home.errorHint"),
+    };
+};
+export const buildFeaturedViewModel = (post, locale, dateLocale = "en-US") => {
+    const t = getTranslator(locale);
+    const featuredMedia = getFeaturedMedia(post);
+    const imageUrl = featuredMedia?.source_url;
+    const categories = (post._embedded?.["wp:term"]?.[0] || []).filter(Boolean);
+    const primaryCategory = categories[0];
+    const postUrl = buildPostUrl({
+        post,
+        categorySlug: primaryCategory?.slug,
+        locale,
+    });
+    const badgeUrl = primaryCategory
+        ? buildCategoryUrl(primaryCategory.slug, locale)
+        : null;
+    return {
+        postUrl,
+        titleHtml: post.title.rendered,
+        excerptHtml: post.excerpt.rendered,
+        dateTime: post.date,
+        dateLabel: formatPostDate(post.date, dateLocale),
+        badgeLabel: primaryCategory?.name,
+        badgeUrl,
+        image: imageUrl
+            ? {
+                src: imageUrl,
+                alt: featuredMedia?.alt_text ||
+                    t("post.featuredAlt", {
+                        title: stripTags(post.title.rendered) || post.title.rendered || "",
+                    }),
+            }
+            : undefined,
+    };
+};

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

@@ -0,0 +1,8 @@
+import { type WPPage } from "wpjsapi-lib";
+type LegalPageViewProps = {
+    page: WPPage;
+    dateLocale?: string;
+    homeHref: string;
+};
+export declare function LegalPageView({ page, homeHref }: LegalPageViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/views/LegalPageView/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import styles from "./index.module.css";
+import { getLegalContent, getLegalImage } from "./index.utils";
+import { Breadcrumbs } from "../../components";
+import { stripTags } from "../../utils";
+export function LegalPageView({ page, homeHref }) {
+    const featuredImage = getLegalImage(page);
+    const { titleHtml, contentHtml } = getLegalContent(page);
+    const titleText = stripTags(titleHtml) || titleHtml;
+    return (_jsxs("article", { className: styles.article, children: [_jsx(Breadcrumbs, { items: [{ label: "Home", href: homeHref }, { label: titleText }] }), featuredImage && (_jsx("div", { className: styles.imageWrapper, children: _jsx(Image, { src: featuredImage.src, alt: featuredImage.alt, width: featuredImage.width, height: featuredImage.height, className: styles.image, priority: true }) })), _jsx("h1", { dangerouslySetInnerHTML: { __html: titleHtml }, className: styles.title }), _jsx("div", { dangerouslySetInnerHTML: { __html: contentHtml }, className: `post-content ${styles.content}` })] }));
+}

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

@@ -0,0 +1,39 @@
+.article {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.imageWrapper {
+  margin-bottom: 2rem;
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.title {
+  margin-bottom: 1rem;
+}
+
+.meta {
+  font-size: 0.875rem;
+  color: #666;
+  margin-bottom: 2rem;
+}
+
+.author {
+  margin-top: 1rem;
+}
+
+.authorBio {
+  margin-top: 0.5rem;
+  font-style: italic;
+}
+
+.content {
+  line-height: 1.8;
+  font-size: 1.125rem;
+}

package/dist/views/LegalPageView/index.utils.d.ts

@@ -0,0 +1,11 @@
+import type { WPPage } from "wpjsapi-lib";
+export declare const getLegalImage: (page: WPPage) => {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+};
+export declare const getLegalContent: (page: WPPage) => {
+    titleHtml: string;
+    contentHtml: string;
+};

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

@@ -0,0 +1,16 @@
+import { getFeaturedMedia, stripTags } from "../../utils";
+export const getLegalImage = (page) => {
+    const media = getFeaturedMedia(page);
+    if (!media?.source_url)
+        return null;
+    return {
+        src: media.source_url,
+        alt: media.alt_text || stripTags(page.title.rendered) || page.title.rendered,
+        width: media.media_details?.width || 800,
+        height: media.media_details?.height || 400,
+    };
+};
+export const getLegalContent = (page) => ({
+    titleHtml: page.title.rendered,
+    contentHtml: page.content.rendered,
+});

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

@@ -0,0 +1,10 @@
+import { type WPPost } from "wpjsapi-lib";
+import { type Locale } from "../../utils";
+type PostViewProps = {
+    post: WPPost;
+    dateLocale?: string;
+    categoryBasePath?: string;
+    locale?: Locale;
+};
+export declare function PostView({ post, dateLocale, categoryBasePath, locale, }: PostViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/views/PostView/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import styles from "./index.module.css";
+import { getTranslator } from "../../utils";
+import { Breadcrumbs } from "../../components";
+import { buildCategoryUrl, formatPublishedDate, getAuthor, getFeaturedImage, getPrimaryCategory, } from "./index.utils";
+import { stripTags } from "../../utils";
+export function PostView({ post, dateLocale = "en-US", categoryBasePath = "/", locale, }) {
+    const t = getTranslator(locale);
+    const author = getAuthor(post);
+    const primaryCategory = getPrimaryCategory(post);
+    const categoryUrl = buildCategoryUrl(categoryBasePath, primaryCategory?.slug);
+    const featuredImage = getFeaturedImage(post, locale);
+    const publishedDate = formatPublishedDate(post.date, dateLocale);
+    const breadcrumbs = primaryCategory && categoryUrl
+        ? [
+            { label: "Home", href: categoryBasePath },
+            { label: primaryCategory.name, href: categoryUrl },
+            { label: stripTags(post.title.rendered) || post.title.rendered },
+        ]
+        : [
+            { 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 })] })] }))] }) }));
+}

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

@@ -0,0 +1,80 @@
+.container {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+
+.article {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.badgeWrapper {
+  margin-bottom: var(--spacing-sm);
+}
+
+.title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 800;
+  line-height: 1.2;
+  margin-bottom: var(--spacing-md);
+  color: var(--foreground);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
+  color: var(--foreground-light);
+  font-size: 0.9375rem;
+}
+
+.authorLabel {
+  font-weight: 600;
+}
+
+.figure {
+  margin-bottom: var(--spacing-lg);
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px var(--shadow);
+}
+
+.content {
+  font-size: 1.125rem;
+  line-height: 1.8;
+  color: var(--foreground);
+}
+
+.authorCard {
+  margin-top: var(--spacing-xl);
+  padding: var(--spacing-lg);
+}
+
+.authorAddress {
+  font-style: normal;
+}
+
+.authorTitle {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  color: var(--foreground);
+}
+
+.authorName {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  font-size: 1.125rem;
+  color: var(--foreground);
+}
+
+.authorBio {
+  color: var(--foreground-light);
+  line-height: 1.6;
+}

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

@@ -0,0 +1,2 @@
+import type { WPPost } from "wpjsapi-lib";
+export type EmbeddedAuthor = NonNullable<NonNullable<WPPost["_embedded"]>["author"]>[number];

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

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

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

@@ -0,0 +1,15 @@
+import type { WPPost } from "wpjsapi-lib";
+import { type Locale } from "../../utils";
+import type { EmbeddedAuthor } from "./index.types";
+import type { EmbeddedCategory } from "../../api";
+export declare const getCategories: (post: WPPost) => EmbeddedCategory[];
+export declare const getPrimaryCategory: (post: WPPost) => EmbeddedCategory | undefined;
+export declare const buildCategoryUrl: (basePath: string, slug?: string) => string | null;
+export declare const getAuthor: (post: WPPost) => EmbeddedAuthor | undefined;
+export declare const getFeaturedImage: (post: WPPost, locale?: Locale) => {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+};
+export declare const formatPublishedDate: (date: string, dateLocale?: string) => string;

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

@@ -0,0 +1,22 @@
+import { 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 getAuthor = (post) => post._embedded?.author?.[0];
+export const getFeaturedImage = (post, locale) => {
+    const t = getTranslator(locale);
+    const featuredMedia = getFeaturedMedia(post);
+    if (!featuredMedia?.source_url)
+        return null;
+    return {
+        src: featuredMedia.source_url,
+        alt: featuredMedia.alt_text ||
+            t("post.articleAlt", {
+                title: stripTags(post.title.rendered) || post.title.rendered || "",
+            }),
+        width: featuredMedia.media_details?.width || 900,
+        height: featuredMedia.media_details?.height || 500,
+    };
+};
+export const formatPublishedDate = (date, dateLocale) => formatPostDate(date, dateLocale);

package/dist/views/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./HomeView";
+export * from "./HomePaginationView";
+export * from "./CategoryListView";
+export * from "./CategoryPaginationView";
+export * from "./PostView";
+export * from "./LegalPageView";

package/dist/views/index.js

@@ -0,0 +1,6 @@
+export * from "./HomeView";
+export * from "./HomePaginationView";
+export * from "./CategoryListView";
+export * from "./CategoryPaginationView";
+export * from "./PostView";
+export * from "./LegalPageView";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "wpheadless-lib",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json && pnpm run copy:assets",
+    "copy:assets": "node ./scripts/copy-assets.mjs",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "wpjsapi-lib": "3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "^16.0.3",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "next": "16.0.3",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}