@content-streamline/nextjs 0.0.3 → 0.0.5

package/dist/components/LatestPosts.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Post } from '../types/index.js';
+export interface LatestPostsProps {
+    posts: Post[];
+    /**
+     * Number of posts to display (default: 3)
+     */
+    count?: number;
+    /**
+     * Base URL for post links (e.g., '/blog' or '/posts')
+     * Post URL will be: {baseUrl}/{postId}/{slug}
+     */
+    baseUrl?: string;
+    /**
+     * Platform filter for posts (default: 'blog')
+     * Valid values: 'x', 'linkedin', 'blog', 'facebook', 'instagram', 'other'
+     */
+    platform?: string;
+    /**
+     * Language to use for post translations (default: 'en')
+     */
+    language?: string;
+    /**
+     * Custom className for the container
+     */
+    className?: string;
+    /**
+     * Custom className for post cards
+     */
+    cardClassName?: string;
+    /**
+     * Show post date (default: true)
+     */
+    showDate?: boolean;
+    /**
+     * Show post excerpt/description (default: true)
+     */
+    showExcerpt?: boolean;
+    /**
+     * Show post images (default: true)
+     */
+    showImages?: boolean;
+    /**
+     * Custom render function for post title
+     */
+    renderTitle?: (post: Post, translation: Post['post_translations'][0]) => React.ReactNode;
+    /**
+     * Custom render function for post excerpt
+     */
+    renderExcerpt?: (post: Post, translation: Post['post_translations'][0]) => React.ReactNode;
+}
+export declare function LatestPosts({ posts, count, baseUrl, platform, language, className, cardClassName, showDate, showExcerpt, showImages, renderTitle, renderExcerpt, }: LatestPostsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LatestPosts.d.ts.map

package/dist/components/LatestPosts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LatestPosts.d.ts","sourceRoot":"","sources":["../../src/components/LatestPosts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzF;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5F;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAS,EACT,OAAkB,EAClB,QAAiB,EACjB,QAAe,EACf,SAAc,EACd,aAAkB,EAClB,QAAe,EACf,WAAkB,EAClB,UAAiB,EACjB,WAAW,EACX,aAAa,GACd,EAAE,gBAAgB,2CAuFlB"}

package/dist/components/LatestPosts.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LatestPosts({ posts, count = 3, baseUrl = '/posts', platform = 'blog', language = 'en', className = '', cardClassName = '', showDate = true, showExcerpt = true, showImages = true, renderTitle, renderExcerpt, }) {
+    // Filter posts by platform if specified
+    const filteredPosts = platform
+        ? posts.filter(post => post.platform.toLowerCase() === platform.toLowerCase())
+        : posts;
+    // Take only the first N posts
+    const latestPosts = filteredPosts.slice(0, count);
+    if (latestPosts.length === 0) {
+        return (_jsx("div", { className: `content-streamline-empty ${className}`, children: _jsx("p", { children: "No posts found." }) }));
+    }
+    return (_jsx("div", { className: `content-streamline-latest-posts ${className}`, children: latestPosts.map((post, index) => {
+            const translation = post.post_translations.find((t) => t.language === language) ||
+                post.post_translations[0];
+            if (!translation || !translation.slug)
+                return null;
+            const featuredImage = post.images.find((img) => img.ordering === 0) || post.images[0];
+            const date = new Date(post.created_at);
+            const isFirst = index === 0;
+            return (_jsxs("article", { className: `content-streamline-latest-card ${isFirst ? 'content-streamline-latest-card--featured' : ''} ${cardClassName}`, children: [showImages && featuredImage && (_jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, className: "content-streamline-latest-image-link", children: _jsx("div", { className: "content-streamline-latest-image", children: _jsx("img", { src: featuredImage.url, alt: featuredImage.alt || translation.title, loading: isFirst ? 'eager' : 'lazy' }) }) })), _jsxs("div", { className: "content-streamline-latest-content", children: [showDate && (_jsx("time", { className: "content-streamline-latest-date", dateTime: post.created_at, children: date.toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric',
+                                }) })), _jsx("h2", { className: "content-streamline-latest-title", children: _jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, children: renderTitle ? renderTitle(post, translation) : translation.title }) }), showExcerpt && translation.meta_description && (_jsx("p", { className: "content-streamline-latest-excerpt", children: renderExcerpt
+                                    ? renderExcerpt(post, translation)
+                                    : translation.meta_description })), _jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, className: "content-streamline-latest-link", children: "Read more \u2192" })] })] }, post.id));
+        }) }));
+}

package/dist/components/PostsList.d.ts

@@ -14,6 +14,11 @@ export interface PostsListProps {
      * For best performance, also pass platform to getAllPosts() when fetching.
      */
     platform?: string;
+    /**
+     * Number of posts to skip from the beginning (default: 0)
+     * Useful when using LatestPosts component to display the first N posts separately.
+     */
+    skipFirst?: number;
     /**
      * Language to use for post translations (default: 'en')
      */
@@ -23,9 +28,9 @@ export interface PostsListProps {
      */
     className?: string;
     /**
-     * Custom className for post cards
+     * Custom className for post items
      */
-    cardClassName?: string;
+    itemClassName?: string;
     /**
      * Show post date (default: true)
      */
@@ -47,5 +52,5 @@ export interface PostsListProps {
      */
     renderExcerpt?: (post: Post, translation: Post['post_translations'][0]) => React.ReactNode;
 }
-export declare function PostsList({ posts, baseUrl, platform, language, className, cardClassName, showDate, showExcerpt, showImages, renderTitle, renderExcerpt, }: PostsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function PostsList({ posts, baseUrl, platform, skipFirst, language, className, itemClassName, showDate, showExcerpt, showImages, renderTitle, renderExcerpt, }: PostsListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PostsList.d.ts.map

package/dist/components/PostsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostsList.d.ts","sourceRoot":"","sources":["../../src/components/PostsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzF;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5F;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAkB,EAClB,QAAiB,EACjB,QAAe,EACf,SAAc,EACd,aAAkB,EAClB,QAAe,EACf,WAAkB,EAClB,UAAiB,EACjB,WAAW,EACX,aAAa,GACd,EAAE,cAAc,2CAmFhB"}
+{"version":3,"file":"PostsList.d.ts","sourceRoot":"","sources":["../../src/components/PostsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzF;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5F;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAkB,EAClB,QAAiB,EACjB,SAAa,EACb,QAAe,EACf,SAAc,EACd,aAAkB,EAClB,QAAe,EACf,WAAkB,EAClB,UAAiB,EACjB,WAAW,EACX,aAAa,GACd,EAAE,cAAc,2CAgFhB"}

package/dist/components/PostsList.js

@@ -1,26 +1,28 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function PostsList({ posts, baseUrl = '/posts', platform = 'blog', language = 'en', className = '', cardClassName = '', showDate = true, showExcerpt = true, showImages = true, renderTitle, renderExcerpt, }) {
+export function PostsList({ posts, baseUrl = '/posts', platform = 'blog', skipFirst = 0, language = 'en', className = '', itemClassName = '', showDate = true, showExcerpt = true, showImages = true, renderTitle, renderExcerpt, }) {
     // Filter posts by platform if specified
     const filteredPosts = platform
         ? posts.filter(post => post.platform.toLowerCase() === platform.toLowerCase())
         : posts;
-    if (filteredPosts.length === 0) {
+    // Skip first N posts
+    const displayPosts = skipFirst > 0 ? filteredPosts.slice(skipFirst) : filteredPosts;
+    if (displayPosts.length === 0) {
         return (_jsx("div", { className: `content-streamline-empty ${className}`, children: _jsx("p", { children: "No posts found." }) }));
     }
-    return (_jsx("div", { className: `content-streamline-posts-list ${className}`, children: filteredPosts.map((post) => {
+    return (_jsx("div", { className: `content-streamline-list ${className}`, children: displayPosts.map((post) => {
             const translation = post.post_translations.find((t) => t.language === language) ||
                 post.post_translations[0];
             if (!translation || !translation.slug)
                 return null;
             const featuredImage = post.images.find((img) => img.ordering === 0) || post.images[0];
             const date = new Date(post.created_at);
-            return (_jsxs("article", { className: `content-streamline-post-card ${cardClassName}`, children: [showImages && featuredImage && (_jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, className: "content-streamline-post-image-link", children: _jsx("div", { className: "content-streamline-post-image", children: _jsx("img", { src: featuredImage.url, alt: featuredImage.alt || translation.title, loading: "lazy" }) }) })), _jsxs("div", { className: "content-streamline-post-content", children: [showDate && (_jsx("time", { className: "content-streamline-post-date", dateTime: post.created_at, children: date.toLocaleDateString('en-US', {
+            return (_jsxs("article", { className: `content-streamline-list-item ${itemClassName}`, children: [showImages && featuredImage && (_jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, className: "content-streamline-list-image-link", children: _jsx("div", { className: "content-streamline-list-image", children: _jsx("img", { src: featuredImage.url, alt: featuredImage.alt || translation.title, loading: "lazy" }) }) })), _jsxs("div", { className: "content-streamline-list-content", children: [showDate && (_jsx("time", { className: "content-streamline-list-date", dateTime: post.created_at, children: date.toLocaleDateString('en-US', {
                                     year: 'numeric',
-                                    month: 'long',
+                                    month: 'short',
                                     day: 'numeric',
-                                }) })), _jsx("h2", { className: "content-streamline-post-title", children: _jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, children: renderTitle ? renderTitle(post, translation) : translation.title }) }), showExcerpt && translation.meta_description && (_jsx("p", { className: "content-streamline-post-excerpt", children: renderExcerpt
+                                }) })), _jsx("h3", { className: "content-streamline-list-title", children: _jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, children: renderTitle ? renderTitle(post, translation) : translation.title }) }), showExcerpt && translation.meta_description && (_jsx("p", { className: "content-streamline-list-excerpt", children: renderExcerpt
                                     ? renderExcerpt(post, translation)
-                                    : translation.meta_description })), _jsx("a", { href: `${baseUrl}/${post.id}/${translation.slug}`, className: "content-streamline-post-link", children: "Read more" })] })] }, post.id));
+                                    : translation.meta_description }))] })] }, post.id));
         }) }));
 }

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@
  */
 export { PostsList } from './PostsList.js';
 export { PostDetail } from './PostDetail.js';
+export { LatestPosts } from './LatestPosts.js';
 export type { PostsListProps } from './PostsList.js';
 export type { PostDetailProps } from './PostDetail.js';
+export type { LatestPostsProps } from './LatestPosts.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -3,5 +3,6 @@
  */
 export { PostsList } from './PostsList.js';
 export { PostDetail } from './PostDetail.js';
+export { LatestPosts } from './LatestPosts.js';
 // Styles are available at '@content-streamline/nextjs/components/styles.css'
 // Users should import them in their app: import '@content-streamline/nextjs/components/styles.css'

package/dist/components/styles.css

@@ -3,107 +3,266 @@
  * You can override these with your own CSS
  */
 
-/* Posts List */
-.content-streamline-posts-list {
+/* ==========================================================================
+   Latest Posts (Featured/Hero Section)
+   ========================================================================== */
+
+.content-streamline-latest-posts {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
   margin: 2rem 0;
 }
 
-.content-streamline-post-card {
+/* First card spans full width on larger screens */
+.content-streamline-latest-posts:has(.content-streamline-latest-card--featured) {
+  grid-template-columns: 1fr;
+}
+
+.content-streamline-latest-posts:has(.content-streamline-latest-card--featured) .content-streamline-latest-card--featured {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 2rem;
+}
+
+.content-streamline-latest-posts:has(.content-streamline-latest-card--featured) .content-streamline-latest-card:not(.content-streamline-latest-card--featured) {
+  display: none;
+}
+
+/* When there are multiple cards, show grid */
+.content-streamline-latest-posts:has(.content-streamline-latest-card:nth-child(2)) {
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.content-streamline-latest-posts:has(.content-streamline-latest-card:nth-child(2)) .content-streamline-latest-card--featured {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 2.5rem;
+}
+
+.content-streamline-latest-posts:has(.content-streamline-latest-card:nth-child(2)) .content-streamline-latest-card:not(.content-streamline-latest-card--featured) {
+  display: flex;
+  flex-direction: column;
+}
+
+.content-streamline-latest-card {
   background: #ffffff;
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
   border: 1px solid #e5e7eb;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  transition: transform 0.2s, box-shadow 0.2s;
-  display: flex;
-  flex-direction: column;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.content-streamline-post-card:hover {
+.content-streamline-latest-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
 }
 
-.content-streamline-post-image-link {
+.content-streamline-latest-image-link {
   display: block;
   text-decoration: none;
-  width: 100%;
+  overflow: hidden;
 }
 
-.content-streamline-post-image {
+.content-streamline-latest-card--featured .content-streamline-latest-image-link {
+  border-radius: 16px 0 0 16px;
+}
+
+.content-streamline-latest-image {
   width: 100%;
   aspect-ratio: 16 / 10;
   overflow: hidden;
-  background: #f3f4f6;
+  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+}
+
+.content-streamline-latest-card--featured .content-streamline-latest-image {
+  aspect-ratio: 16 / 11;
+  height: 100%;
 }
 
-.content-streamline-post-image img {
+.content-streamline-latest-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s;
+  transition: transform 0.4s ease;
 }
 
-.content-streamline-post-card:hover .content-streamline-post-image img {
+.content-streamline-latest-card:hover .content-streamline-latest-image img {
   transform: scale(1.05);
 }
 
-.content-streamline-post-content {
+.content-streamline-latest-content {
   padding: 1.5rem;
-  flex: 1;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
-.content-streamline-post-date {
-  font-size: 0.875rem;
+.content-streamline-latest-card--featured .content-streamline-latest-content {
+  padding: 2rem 2rem 2rem 0;
+}
+
+.content-streamline-latest-date {
+  font-size: 0.8125rem;
   color: #6b7280;
   margin-bottom: 0.75rem;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
+  font-weight: 500;
 }
 
-.content-streamline-post-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0 0 1rem 0;
-  line-height: 1.3;
+.content-streamline-latest-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem 0;
+  line-height: 1.35;
 }
 
-.content-streamline-post-title a {
+.content-streamline-latest-card--featured .content-streamline-latest-title {
+  font-size: 1.75rem;
+  margin-bottom: 1rem;
+}
+
+.content-streamline-latest-title a {
   color: #111827;
   text-decoration: none;
-  transition: color 0.2s;
+  transition: color 0.2s ease;
 }
 
-.content-streamline-post-title a:hover {
+.content-streamline-latest-title a:hover {
   color: #3b82f6;
 }
 
-.content-streamline-post-excerpt {
+.content-streamline-latest-excerpt {
   color: #6b7280;
   line-height: 1.6;
   margin: 0 0 1rem 0;
-  flex: 1;
+  font-size: 0.9375rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.content-streamline-latest-card--featured .content-streamline-latest-excerpt {
+  font-size: 1rem;
+  -webkit-line-clamp: 4;
 }
 
-.content-streamline-post-link {
+.content-streamline-latest-link {
   color: #3b82f6;
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  transition: color 0.2s ease;
   margin-top: auto;
-  transition: color 0.2s;
 }
 
-.content-streamline-post-link:hover {
+.content-streamline-latest-link:hover {
   color: #2563eb;
-  text-decoration: underline;
 }
 
-/* Post Detail */
+/* ==========================================================================
+   Posts List (Vertical List with Image on Left)
+   ========================================================================== */
+
+.content-streamline-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin: 2rem 0;
+}
+
+.content-streamline-list-item {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 1.25rem;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.content-streamline-list-item:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.content-streamline-list-image-link {
+  display: block;
+  text-decoration: none;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.content-streamline-list-image {
+  width: 100%;
+  aspect-ratio: 16 / 11;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+  border-radius: 8px;
+}
+
+.content-streamline-list-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.content-streamline-list-item:hover .content-streamline-list-image img {
+  transform: scale(1.05);
+}
+
+.content-streamline-list-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.25rem 0;
+}
+
+.content-streamline-list-date {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-bottom: 0.375rem;
+  font-weight: 500;
+}
+
+.content-streamline-list-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  line-height: 1.4;
+}
+
+.content-streamline-list-title a {
+  color: #111827;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.content-streamline-list-title a:hover {
+  color: #3b82f6;
+}
+
+.content-streamline-list-excerpt {
+  color: #6b7280;
+  line-height: 1.5;
+  margin: 0;
+  font-size: 0.875rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   Post Detail
+   ========================================================================== */
+
 .content-streamline-post-detail {
   max-width: 800px;
   margin: 0 auto;
@@ -298,6 +457,10 @@
   text-align: center;
 }
 
+/* ==========================================================================
+   Empty States
+   ========================================================================== */
+
 .content-streamline-empty,
 .content-streamline-post-not-found {
   text-align: center;
@@ -305,13 +468,59 @@
   color: #6b7280;
 }
 
-/* Responsive */
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media (max-width: 1024px) {
+  .content-streamline-latest-posts:has(.content-streamline-latest-card:nth-child(2)) .content-streamline-latest-card--featured {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+}
+
 @media (max-width: 768px) {
-  .content-streamline-posts-list {
+  /* Latest Posts */
+  .content-streamline-latest-posts {
     grid-template-columns: 1fr;
-    gap: 1.5rem;
+    gap: 1.25rem;
+  }
+
+  .content-streamline-latest-posts:has(.content-streamline-latest-card--featured) .content-streamline-latest-card--featured,
+  .content-streamline-latest-posts:has(.content-streamline-latest-card:nth-child(2)) .content-streamline-latest-card--featured {
+    grid-template-columns: 1fr;
+    gap: 0;
   }
 
+  .content-streamline-latest-card--featured .content-streamline-latest-image-link {
+    border-radius: 16px 16px 0 0;
+  }
+
+  .content-streamline-latest-card--featured .content-streamline-latest-content {
+    padding: 1.5rem;
+  }
+
+  .content-streamline-latest-card--featured .content-streamline-latest-title {
+    font-size: 1.375rem;
+  }
+
+  /* Posts List */
+  .content-streamline-list-item {
+    grid-template-columns: 120px 1fr;
+    gap: 1rem;
+    padding: 0.75rem;
+  }
+
+  .content-streamline-list-title {
+    font-size: 0.9375rem;
+  }
+
+  .content-streamline-list-excerpt {
+    font-size: 0.8125rem;
+    -webkit-line-clamp: 2;
+  }
+
+  /* Post Detail */
   .content-streamline-post-detail {
     padding: 1.5rem 1rem;
   }
@@ -329,3 +538,14 @@
   }
 }
 
+@media (max-width: 480px) {
+  /* Posts List - stack vertically on very small screens */
+  .content-streamline-list-item {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .content-streamline-list-image {
+    aspect-ratio: 16 / 9;
+  }
+}

package/dist/index.d.ts

@@ -2,8 +2,9 @@
  * Content Streamline Next.js Library
  * Main entry point
  */
-export type { Post, PostDetailResponse, PostTranslation, PostImage, PostsResponse, Pagination, } from './types/index.js';
+export type { Post, PostDetailResponse, PostTranslation, PostImage, PostsResponse, Pagination, CacheMetadata, } from './types/index.js';
 export { getAllPosts, getPost, getPostBySlug, } from './server/index.js';
-export { PostsList, PostDetail, } from './components/index.js';
-export type { PostsListProps, PostDetailProps, } from './components/index.js';
+export { clearCache, isAPIConfigured, } from './cache/file-cache.js';
+export { PostsList, PostDetail, LatestPosts, } from './components/index.js';
+export type { PostsListProps, PostDetailProps, LatestPostsProps, } from './components/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EACV,IAAI,EACJ,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,GACX,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,WAAW,EACX,OAAO,EACP,aAAa,GACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,SAAS,EACT,UAAU,GACX,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,cAAc,EACd,eAAe,GAChB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EACV,IAAI,EACJ,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,GACd,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,WAAW,EACX,OAAO,EACP,aAAa,GACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,UAAU,EACV,eAAe,GAChB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,GACjB,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -4,5 +4,7 @@
  */
 // Export server functions
 export { getAllPosts, getPost, getPostBySlug, } from './server/index.js';
+// Export cache utilities
+export { clearCache, isAPIConfigured, } from './cache/file-cache.js';
 // Export components
-export { PostsList, PostDetail, } from './components/index.js';
+export { PostsList, PostDetail, LatestPosts, } from './components/index.js';

package/dist/server/index.d.ts

@@ -6,6 +6,10 @@ import type { Post, PostDetailResponse } from '../types/index.js';
 /**
  * Get all posts (with automatic cache refresh)
  * Use this in Server Components or API Routes
+ *
+ * Note: Only successful API responses are cached. Failed API calls
+ * (network errors, auth failures, etc.) will NOT be cached, allowing
+ * subsequent calls to retry the API.
  */
 export declare function getAllPosts(options?: {
     maxCacheAge?: number;
@@ -15,6 +19,9 @@ export declare function getAllPosts(options?: {
 /**
  * Get a single post by ID
  * Use this in Server Components or API Routes
+ *
+ * Note: Only successful API responses are cached. Failed API calls
+ * will NOT be cached, allowing subsequent calls to retry the API.
  */
 export declare function getPost(id: number, options?: {
     language?: string;

package/dist/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAkBlE;;;GAGG;AACH,wBAAsB,WAAW,CAAC,OAAO,CAAC,EAAE;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CA2ClB;AAED;;;GAGG;AACH,wBAAsB,OAAO,CAC3B,EAAE,EAAE,MAAM,EACV,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAiCpC;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CA2BpC;AAGD,YAAY,EACV,IAAI,EACJ,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA+BlE;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAAC,OAAO,CAAC,EAAE;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CA2ElB;AAED;;;;;;GAMG;AACH,wBAAsB,OAAO,CAC3B,EAAE,EAAE,MAAM,EACV,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAoDpC;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CA2BpC;AAGD,YAAY,EACV,IAAI,EACJ,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,GACX,MAAM,mBAAmB,CAAC"}