project-portfolio 1.0.5 → 1.0.8

package/dist/ProjectCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../src/ProjectCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAmC,MAAM,SAAS,CAAA;AAE1F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5C,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAgB,EAChB,QAAsB,GACvB,EAAE,gBAAgB,2CAkPlB"}
+{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../src/ProjectCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAmC,MAAM,SAAS,CAAA;AAE1F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5C,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAgB,EAChB,QAAsB,GACvB,EAAE,gBAAgB,2CAyPlB"}

package/dist/ProjectCard.js

@@ -45,6 +45,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
     const href = `${basePath}/${project.slug}`;
     if (variant === "compact") {
         return (_jsxs("a", { href: href, style: {
+                all: "revert",
                 display: "flex",
                 alignItems: "center",
                 gap: "1rem",
@@ -54,6 +55,9 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                 borderRadius: "2px",
                 textDecoration: "none",
                 transition: "border-color 0.2s, box-shadow 0.2s",
+                fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+                boxSizing: "border-box",
+                color: "inherit",
             }, children: [_jsx("div", { style: {
                         position: "relative",
                         width: "80px",
@@ -65,6 +69,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                     }, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { width: "100%", height: "100%", objectFit: "cover" } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", minWidth: 0 }, children: [_jsx("p", { style: { fontWeight: 700, color: "#18181b", fontSize: "14px", margin: 0, lineHeight: 1.4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: project.title }), badgeValue && (_jsx("p", { style: { fontSize: "12px", color: "#71717a", margin: 0 }, children: badgeValue })), compactTags.length > 0 && (_jsx("p", { style: { fontSize: "12px", color: "#f18a00", margin: 0, lineHeight: 1.4 }, children: compactTags.join(" · ") }))] })] }));
     }
     return (_jsxs("article", { style: {
+            all: "revert",
             backgroundColor: "#fff",
             borderRadius: "2px",
             boxShadow: "0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.07)",
@@ -72,6 +77,8 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
             display: "flex",
             flexDirection: "column",
             transition: "box-shadow 0.3s",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            boxSizing: "border-box",
         }, children: [_jsxs("div", { style: { position: "relative", aspectRatio: "16/10", overflow: "hidden", flexShrink: 0 }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, loading: priority ? "eager" : "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#f4f4f5" } })), _jsx("div", { style: {
                             position: "absolute",
                             inset: 0,
@@ -106,7 +113,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     padding: "3px 10px",
-                                }, children: badgeValue })), _jsx("h3", { style: { color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0 }, children: project.title }), locationString && (_jsx("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "14px", margin: 0 }, children: locationString }))] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, padding: "1.5rem" }, children: [(project.blurb || project.description) && (_jsx("p", { style: { fontSize: "14px", color: "#3f3f46", lineHeight: 1.6, margin: "0 0 16px 0" }, children: project.blurb || project.description })), tagFields.map((field) => {
+                                }, children: badgeValue })), _jsx("h3", { style: { all: "revert", color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: project.title }), locationString && (_jsx("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "14px", margin: 0 }, children: locationString }))] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, padding: "1.5rem" }, children: [(project.blurb || project.description) && (_jsx("p", { style: { fontSize: "14px", color: "#3f3f46", lineHeight: 1.6, margin: "0 0 16px 0" }, children: project.blurb || project.description })), tagFields.map((field) => {
                         const vals = parseMultiValue(project.custom_field_values[field.key]);
                         if (vals.length === 0)
                             return null;
@@ -124,5 +131,5 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                                         };
                                         return url ? (_jsx("a", { href: url, style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`)) : (_jsx("span", { style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`));
                                     }) })] }, `${project.id}-${field.key}`));
-                    }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { style: { marginTop: "16px", borderTop: "1px solid #e4e4e7", paddingTop: "12px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "16px" }, children: [footerStat ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx("span", { style: { fontSize: "12px", color: "#a1a1aa" }, children: footerStat.label }), _jsx("span", { style: { color: "#18181b", fontWeight: 700, fontSize: "16px" }, children: footerStat.formatted })] })) : _jsx("div", {}), _jsx("a", { href: href, style: { color: "#f18a00", fontWeight: 600, fontSize: "14px", textDecoration: "none", flexShrink: 0 }, children: "Details \u2192" })] })] })] }));
+                    }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { style: { marginTop: "16px", borderTop: "1px solid #e4e4e7", paddingTop: "12px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "16px" }, children: [footerStat ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx("span", { style: { fontSize: "12px", color: "#a1a1aa" }, children: footerStat.label }), _jsx("span", { style: { color: "#18181b", fontWeight: 700, fontSize: "16px" }, children: footerStat.formatted })] })) : _jsx("div", {}), _jsx("a", { href: href, style: { all: "revert", color: "#f18a00", fontWeight: 600, fontSize: "14px", textDecoration: "none", flexShrink: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: "Details \u2192" })] })] })] }));
 }

package/dist/ProjectPortfolio.d.ts

@@ -5,29 +5,19 @@ export interface ProjectPortfolioProps {
     apiBase: string;
     /** Base path for project detail links. Defaults to "/projects" */
     basePath?: string;
+    /**
+     * Seconds to cache via Next.js Data Cache on production deployments.
+     * React.cache() always deduplicates within a single render in all environments.
+     * Defaults to 60.
+     */
+    revalidate?: number;
 }
 /**
- * ProjectPortfolio — self-contained async server component.
+ * ProjectPortfolio — pure self-fetching card grid.
  *
- * Drop it into any Next.js App Router page:
- *
- *   import { ProjectPortfolio } from "project-portfolio"
- *
- *   export default function Page() {
- *     return (
- *       <ProjectPortfolio
- *         clientSlug="my-client"
- *         apiBase="https://your-api.com"
- *       />
- *     )
- *   }
- *
- * Requirements: Next.js 13+ App Router, React 18+
- */
-/**
- * ProjectPortfolio — pure card grid, no chrome.
- *
- * Fetches client and project data directly from the API.
+ * Caching works in all environments:
+ * - Everywhere: React.cache() deduplicates fetches within a single render
+ * - Production: next.revalidate caches across requests for `revalidate` seconds
  *
  * Usage:
  *   import { ProjectPortfolio } from "chisel-project-portfolio"
@@ -36,8 +26,6 @@ export interface ProjectPortfolioProps {
  *     clientSlug="my-client"
  *     apiBase="https://your-api.com"
  *   />
- *
- * Requirements: Next.js 13+ App Router, React 18+
  */
-export declare function ProjectPortfolio({ clientSlug, apiBase, basePath, }: ProjectPortfolioProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProjectPortfolio({ clientSlug, apiBase, basePath, revalidate, }: ProjectPortfolioProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ProjectPortfolio.d.ts.map

package/dist/ProjectPortfolio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAyDD;;;;;;;;;;;;;;;;;GAiBG;AACH;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,GACvB,EAAE,qBAAqB,oDA8BvB"}
+{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAuED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,UAAe,GAChB,EAAE,qBAAqB,oDA8BvB"}

package/dist/ProjectPortfolio.js

@@ -1,10 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cache } from "react";
 import { ProjectCard } from "./ProjectCard";
-const fetchPortfolioData = async (apiBase, clientSlug) => {
+// Two-layer caching strategy:
+// 1. React.cache() — deduplicates within a single render in ALL environments
+//    (preview, local, production). If this component appears twice on one page,
+//    the API is only hit once.
+// 2. next: { revalidate } — Next.js Data Cache, caches across multiple requests
+//    on production deployments. Silently ignored in preview/local — no crash,
+//    just falls back to per-render dedup from React.cache().
+const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    // next.revalidate is used where supported (production); silently ignored elsewhere.
+    // Either way React.cache() above ensures no duplicate fetches within one render.
+    const fetchOpts = { next: { revalidate } };
     const [clientRes, projectsRes] = await Promise.all([
-        fetch(`${apiBase}/api/v1/clients/${clientSlug}`),
-        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects`),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}`, fetchOpts),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects`, fetchOpts),
     ]);
     const clientJson = clientRes.ok
         ? await clientRes.json()
@@ -26,29 +37,13 @@ const fetchPortfolioData = async (apiBase, clientSlug) => {
         projects: (_j = projectsJson.data) !== null && _j !== void 0 ? _j : [],
         schema,
     };
-};
+});
 /**
- * ProjectPortfolio — self-contained async server component.
+ * ProjectPortfolio — pure self-fetching card grid.
  *
- * Drop it into any Next.js App Router page:
- *
- *   import { ProjectPortfolio } from "project-portfolio"
- *
- *   export default function Page() {
- *     return (
- *       <ProjectPortfolio
- *         clientSlug="my-client"
- *         apiBase="https://your-api.com"
- *       />
- *     )
- *   }
- *
- * Requirements: Next.js 13+ App Router, React 18+
- */
-/**
- * ProjectPortfolio — pure card grid, no chrome.
- *
- * Fetches client and project data directly from the API.
+ * Caching works in all environments:
+ * - Everywhere: React.cache() deduplicates fetches within a single render
+ * - Production: next.revalidate caches across requests for `revalidate` seconds
  *
  * Usage:
  *   import { ProjectPortfolio } from "chisel-project-portfolio"
@@ -57,11 +52,9 @@ const fetchPortfolioData = async (apiBase, clientSlug) => {
  *     clientSlug="my-client"
  *     apiBase="https://your-api.com"
  *   />
- *
- * Requirements: Next.js 13+ App Router, React 18+
  */
-export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/projects", }) {
-    const { projects, schema } = await fetchPortfolioData(apiBase, clientSlug);
+export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/projects", revalidate = 60, }) {
+    const { projects, schema } = await fetchPortfolioData(apiBase, clientSlug, revalidate);
     if (projects.length === 0) {
         return (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a" }, children: "No projects found." }) }));
     }

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "project-portfolio",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "Self-contained project portfolio component for Next.js App Router. Drop in one component, pass a clientSlug and apiBase, done.",
-  "keywords": [
-    "nextjs",
-    "react",
-    "portfolio",
-    "projects"
-  ],
+  "keywords": ["nextjs", "react", "portfolio", "projects"],
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,9 +14,7 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build"
@@ -32,10 +25,8 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^5.0.0"
   }
 }