@content-streamline/nextjs 0.0.1

package/README.md

@@ -0,0 +1,400 @@
+# @content-streamline/nextjs
+
+Next.js library for Content Streamline API with reusable, responsive components.
+
+## Features
+
+- 🚀 **Easy Setup** - Configure via environment variables
+- 📦 **Reusable Components** - Pre-built React components for posts list and detail
+- 💾 **Smart Caching** - Automatic file-based caching with refresh control
+- 🎨 **Customizable** - Responsive components with configurable props
+- 📱 **Mobile-Friendly** - Built-in responsive design
+- 🔧 **TypeScript** - Full TypeScript support
+
+## Installation
+
+```bash
+npm install @content-streamline/nextjs
+# or
+bun add @content-streamline/nextjs
+```
+
+**Note**: React and Next.js are peer dependencies. Make sure you have them installed in your Next.js project.
+
+## Quick Start
+
+### 1. Configure Environment Variables
+
+Create a `.env.local` file in your Next.js project:
+
+```env
+CONTENT_STREAMLINE_API_BASE_URL=https://your-api-domain.com
+CONTENT_STREAMLINE_API_ACCESS_TOKEN=your_access_token_here
+```
+
+Or use shorter names:
+```env
+API_BASE_URL=https://your-api-domain.com
+API_ACCESS_TOKEN=your_access_token_here
+```
+
+### 2. Import Styles
+
+In your `app/layout.tsx` or `pages/_app.tsx`:
+
+```tsx
+import '@content-streamline/nextjs/components/styles.css';
+```
+
+### 3. Use in Server Components (App Router)
+
+**Blog List Page** (`app/blog/page.tsx`):
+
+```tsx
+import { getAllPosts } from '@content-streamline/nextjs/server';
+import { PostsList } from '@content-streamline/nextjs/components';
+
+export const revalidate = 3600; // Revalidate every hour (ISR)
+
+export default async function BlogPage() {
+  const posts = await getAllPosts();
+  
+  return (
+    <div>
+      <h1>Blog</h1>
+      <PostsList posts={posts} baseUrl="/blog" />
+    </div>
+  );
+}
+```
+
+**Post Detail Page** (`app/blog/[id]/[slug]/page.tsx`):
+
+```tsx
+import { getPostBySlug } from '@content-streamline/nextjs/server';
+import { PostDetail } from '@content-streamline/nextjs/components';
+import { notFound } from 'next/navigation';
+
+export async function generateStaticParams() {
+  const { getAllPosts } = await import('@content-streamline/nextjs/server');
+  const posts = await getAllPosts();
+  
+  return posts.flatMap(post => 
+    post.post_translations
+      .filter(t => t.slug)
+      .map(translation => ({
+        id: post.id.toString(),
+        slug: translation.slug,
+      }))
+  );
+}
+
+export default async function PostPage({
+  params,
+}: {
+  params: { id: string; slug: string };
+}) {
+  const post = await getPostBySlug(params.slug);
+  
+  if (!post) {
+    notFound();
+  }
+  
+  return (
+    <PostDetail post={post} backUrl="/blog" />
+  );
+}
+```
+
+### 4. Use in Pages Router
+
+**Blog List Page** (`pages/blog/index.tsx`):
+
+```tsx
+import { getAllPosts } from '@content-streamline/nextjs/server';
+import { PostsList } from '@content-streamline/nextjs/components';
+import type { GetStaticProps } from 'next';
+
+export const getStaticProps: GetStaticProps = async () => {
+  const posts = await getAllPosts();
+  
+  return {
+    props: { posts },
+    revalidate: 3600, // Revalidate every hour
+  };
+};
+
+export default function BlogPage({ posts }: { posts: Post[] }) {
+  return (
+    <div>
+      <h1>Blog</h1>
+      <PostsList posts={posts} baseUrl="/blog" />
+    </div>
+  );
+}
+```
+
+**Post Detail Page** (`pages/blog/[id]/[slug].tsx`):
+
+```tsx
+import { getPostBySlug, getAllPosts } from '@content-streamline/nextjs/server';
+import { PostDetail } from '@content-streamline/nextjs/components';
+import type { GetStaticProps, GetStaticPaths } from 'next';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const posts = await getAllPosts();
+  
+  const paths = posts.flatMap(post => 
+    post.post_translations
+      .filter(t => t.slug)
+      .map(translation => ({
+        params: {
+          id: post.id.toString(),
+          slug: translation.slug,
+        },
+      }))
+  );
+  
+  return { paths, fallback: 'blocking' };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const post = await getPostBySlug(params!.slug as string);
+  
+  if (!post) {
+    return { notFound: true };
+  }
+  
+  return {
+    props: { post },
+    revalidate: 3600,
+  };
+};
+
+export default function PostPage({ post }: { post: PostDetailResponse }) {
+  return <PostDetail post={post} backUrl="/blog" />;
+}
+```
+
+## API Reference
+
+### Server Functions
+
+#### `getAllPosts(options?)`
+
+Get all posts with automatic caching.
+
+```tsx
+import { getAllPosts } from '@content-streamline/nextjs/server';
+
+const posts = await getAllPosts({
+  maxCacheAge: 60,      // Cache age in minutes (default: 60)
+  forceRefresh: false,  // Force API fetch (default: false)
+});
+```
+
+#### `getPost(id, options?)`
+
+Get a single post by ID.
+
+```tsx
+import { getPost } from '@content-streamline/nextjs/server';
+
+const post = await getPost(123, {
+  language: 'en',
+  contentFormat: 'markdown', // or 'html'
+  maxCacheAge: 60,
+  forceRefresh: false,
+});
+```
+
+#### `getPostBySlug(slug, options?)`
+
+Get a post by slug.
+
+```tsx
+import { getPostBySlug } from '@content-streamline/nextjs/server';
+
+const post = await getPostBySlug('my-post-slug', {
+  language: 'en',
+  contentFormat: 'markdown',
+  maxCacheAge: 60,
+  forceRefresh: false,
+});
+```
+
+### Components
+
+#### `<PostsList />`
+
+Display a list of posts.
+
+```tsx
+import { PostsList } from '@content-streamline/nextjs/components';
+
+<PostsList
+  posts={posts}
+  baseUrl="/blog"           // Base URL for post links
+  language="en"             // Language for translations
+  className="custom-class"  // Custom container class
+  cardClassName="custom"   // Custom card class
+  showDate={true}          // Show post date
+  showExcerpt={true}       // Show post excerpt
+  showImages={true}        // Show post images
+  renderTitle={(post, translation) => <CustomTitle />}  // Custom title renderer
+  renderExcerpt={(post, translation) => <CustomExcerpt />}  // Custom excerpt renderer
+/>
+```
+
+#### `<PostDetail />`
+
+Display a single post.
+
+```tsx
+import { PostDetail } from '@content-streamline/nextjs/components';
+
+<PostDetail
+  post={post}
+  backUrl="/blog"          // URL for back link
+  language="en"            // Language for translation
+  className="custom-class" // Custom container class
+  showBackLink={true}      // Show back link
+  showDate={true}          // Show post date
+  showType={true}         // Show post type badge
+  showImage={true}        // Show featured image
+  showGallery={true}      // Show gallery images
+  renderContent={(content) => <MarkdownRenderer content={content} />}  // Custom content renderer
+  renderTitle={(post, translation) => <CustomTitle />}  // Custom title renderer
+/>
+```
+
+## Customization
+
+### Styling
+
+Components use CSS classes with the `content-streamline-` prefix. You can override styles:
+
+```css
+/* Override post card styles */
+.content-streamline-post-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Override post title */
+.content-streamline-post-title a {
+  color: #your-color;
+}
+```
+
+### Custom Rendering
+
+Use render props for complete control:
+
+```tsx
+<PostsList
+  posts={posts}
+  renderTitle={(post, translation) => (
+    <h2 className="my-custom-title">
+      {translation.title}
+    </h2>
+  )}
+  renderExcerpt={(post, translation) => (
+    <p className="my-custom-excerpt">
+      {translation.meta_description}
+    </p>
+  )}
+/>
+```
+
+### Markdown Rendering
+
+For proper markdown rendering, use a library like `react-markdown`:
+
+```tsx
+import ReactMarkdown from 'react-markdown';
+import { PostDetail } from '@content-streamline/nextjs/components';
+
+<PostDetail
+  post={post}
+  renderContent={(content) => (
+    <ReactMarkdown>{content}</ReactMarkdown>
+  )}
+/>
+```
+
+## Caching
+
+The library automatically caches posts in `.next/content-streamline-cache/`. 
+
+- **Default cache age**: 60 minutes
+- **Cache location**: `.next/content-streamline-cache/`
+- **Automatic refresh**: When cache is older than `maxCacheAge`
+
+To force refresh:
+```tsx
+const posts = await getAllPosts({ forceRefresh: true });
+```
+
+## TypeScript
+
+Full TypeScript support is included:
+
+```tsx
+import type { Post, PostDetailResponse } from '@content-streamline/nextjs';
+
+function MyComponent({ post }: { post: PostDetailResponse }) {
+  // ...
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```tsx
+// app/blog/page.tsx
+import { getAllPosts } from '@content-streamline/nextjs/server';
+import { PostsList } from '@content-streamline/nextjs/components';
+
+export default async function Blog() {
+  const posts = await getAllPosts();
+  return <PostsList posts={posts} baseUrl="/blog" />;
+}
+```
+
+### With Custom Styling
+
+```tsx
+<PostsList
+  posts={posts}
+  baseUrl="/blog"
+  className="my-blog-list"
+  cardClassName="my-post-card"
+  showImages={false}
+/>
+```
+
+### With Markdown Rendering
+
+```tsx
+import ReactMarkdown from 'react-markdown';
+import { getPostBySlug } from '@content-streamline/nextjs/server';
+import { PostDetail } from '@content-streamline/nextjs/components';
+
+export default async function PostPage({ params }) {
+  const post = await getPostBySlug(params.slug);
+  
+  return (
+    <PostDetail
+      post={post}
+      renderContent={(content) => <ReactMarkdown>{content}</ReactMarkdown>}
+    />
+  );
+}
+```
+
+## License
+
+MIT
+

package/dist/api/client.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Content Streamline Public API Client
+ */
+import type { Post, PostDetailResponse, PostsResponse } from '../types';
+declare class ContentStreamlineAPI {
+    private baseUrl;
+    private accessToken;
+    constructor(baseUrl: string, accessToken: string);
+    private fetch;
+    /**
+     * List all posts with pagination
+     */
+    listPosts(page?: number): Promise<PostsResponse>;
+    /**
+     * Get all posts by fetching all pages
+     */
+    getAllPosts(): Promise<Post[]>;
+    /**
+     * Get a single post by ID
+     */
+    getPost(id: number, contentFormat?: 'markdown' | 'html'): Promise<PostDetailResponse>;
+}
+export declare function createAPIClient(baseUrl: string, accessToken: string): ContentStreamlineAPI;
+export {};
+//# sourceMappingURL=client.d.ts.map

package/dist/api/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/api/client.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EACV,IAAI,EACJ,kBAAkB,EAClB,aAAa,EACd,MAAM,UAAU,CAAC;AAElB,cAAM,oBAAoB;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAS;gBAEhB,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;YAKlC,KAAK;IAiCnB;;OAEG;IACG,SAAS,CAAC,IAAI,GAAE,MAAU,GAAG,OAAO,CAAC,aAAa,CAAC;IAIzD;;OAEG;IACG,WAAW,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC;IAgBpC;;OAEG;IACG,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,GAAE,UAAU,GAAG,MAAmB,GAAG,OAAO,CAAC,kBAAkB,CAAC;CAIxG;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,oBAAoB,CAE1F"}

package/dist/api/client.js

@@ -0,0 +1,69 @@
+/**
+ * Content Streamline Public API Client
+ */
+class ContentStreamlineAPI {
+    constructor(baseUrl, accessToken) {
+        this.baseUrl = baseUrl.replace(/\/$/, ''); // Remove trailing slash
+        this.accessToken = accessToken;
+    }
+    async fetch(endpoint, options = {}) {
+        const url = `${this.baseUrl}${endpoint}`;
+        const headers = {
+            'Authorization': `Bearer ${this.accessToken}`,
+            'Content-Type': 'application/json',
+            ...options.headers,
+        };
+        const response = await fetch(url, {
+            ...options,
+            headers,
+        });
+        if (!response.ok) {
+            if (response.status === 401) {
+                const errorText = await response.text();
+                if (errorText.includes('Missing access token')) {
+                    throw new Error('Missing access token');
+                }
+                throw new Error('Invalid access token');
+            }
+            if (response.status === 403) {
+                throw new Error('Access token has been revoked');
+            }
+            if (response.status === 404) {
+                throw new Error('Post not found');
+            }
+            throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+        }
+        return response.json();
+    }
+    /**
+     * List all posts with pagination
+     */
+    async listPosts(page = 1) {
+        return this.fetch(`/public/v1/posts?page=${page}`);
+    }
+    /**
+     * Get all posts by fetching all pages
+     */
+    async getAllPosts() {
+        const allPosts = [];
+        let currentPage = 1;
+        let hasMore = true;
+        while (hasMore) {
+            const response = await this.listPosts(currentPage);
+            allPosts.push(...response.data);
+            hasMore = response.pagination.next_page !== null;
+            currentPage = response.pagination.next_page || currentPage + 1;
+        }
+        return allPosts;
+    }
+    /**
+     * Get a single post by ID
+     */
+    async getPost(id, contentFormat = 'markdown') {
+        const format = contentFormat === 'html' ? 'html' : 'markdown';
+        return this.fetch(`/public/v1/posts/${id}?content_format=${format}`);
+    }
+}
+export function createAPIClient(baseUrl, accessToken) {
+    return new ContentStreamlineAPI(baseUrl, accessToken);
+}

package/dist/cache/file-cache.d.ts

@@ -0,0 +1,38 @@
+/**
+ * File-based cache for posts
+ * Works in Next.js server environment
+ */
+import type { Post, PostDetailResponse, CachedPostIndex } from '../types';
+/**
+ * Initialize cache directory
+ */
+export declare function initCache(): Promise<void>;
+/**
+ * Save a post to cache
+ */
+export declare function cachePost(post: Post | PostDetailResponse): Promise<void>;
+/**
+ * Get a cached post by ID and language
+ */
+export declare function getCachedPost(id: number, language?: string): Promise<PostDetailResponse | null>;
+/**
+ * Get all cached posts
+ */
+export declare function getAllCachedPosts(): Promise<Post[]>;
+/**
+ * Update the posts index
+ */
+export declare function updatePostsIndex(posts: Post[]): Promise<void>;
+/**
+ * Get the posts index
+ */
+export declare function getPostsIndex(): Promise<CachedPostIndex | null>;
+/**
+ * Check if cache needs refresh (older than specified minutes)
+ */
+export declare function shouldRefreshCache(maxAgeMinutes?: number): Promise<boolean>;
+/**
+ * Clear all cached posts
+ */
+export declare function clearCache(): Promise<void>;
+//# sourceMappingURL=file-cache.d.ts.map

package/dist/cache/file-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-cache.d.ts","sourceRoot":"","sources":["../../src/cache/file-cache.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAM1E;;GAEG;AACH,wBAAsB,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAO/C;AAED;;GAEG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAS9E;AAED;;GAEG;AACH,wBAAsB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAa,GAAG,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAS3G;AAED;;GAEG;AACH,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,CA0BzD;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAgBnE;AAED;;GAEG;AACH,wBAAsB,aAAa,IAAI,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CAOrE;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CAAC,aAAa,GAAE,MAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CASrF;AAED;;GAEG;AACH,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAYhD"}

package/dist/cache/file-cache.js

@@ -0,0 +1,129 @@
+/**
+ * File-based cache for posts
+ * Works in Next.js server environment
+ */
+import { writeFile, readFile, mkdir, readdir, unlink } from 'fs/promises';
+import { join } from 'path';
+const CACHE_DIR = join(process.cwd(), '.next', 'content-streamline-cache');
+const POSTS_INDEX_FILE = join(CACHE_DIR, 'posts-index.json');
+const POSTS_DIR = join(CACHE_DIR, 'posts');
+/**
+ * Initialize cache directory
+ */
+export async function initCache() {
+    try {
+        await mkdir(CACHE_DIR, { recursive: true });
+        await mkdir(POSTS_DIR, { recursive: true });
+    }
+    catch (error) {
+        // Directory might already exist, that's fine
+    }
+}
+/**
+ * Save a post to cache
+ */
+export async function cachePost(post) {
+    await initCache();
+    for (const translation of post.post_translations) {
+        const filename = `${post.id}-${translation.language}.json`;
+        const filepath = join(POSTS_DIR, filename);
+        await writeFile(filepath, JSON.stringify(post, null, 2), 'utf-8');
+    }
+}
+/**
+ * Get a cached post by ID and language
+ */
+export async function getCachedPost(id, language = 'en') {
+    try {
+        const filename = `${id}-${language}.json`;
+        const filepath = join(POSTS_DIR, filename);
+        const content = await readFile(filepath, 'utf-8');
+        return JSON.parse(content);
+    }
+    catch (error) {
+        return null;
+    }
+}
+/**
+ * Get all cached posts
+ */
+export async function getAllCachedPosts() {
+    try {
+        const files = await readdir(POSTS_DIR);
+        const posts = [];
+        const seenIds = new Set();
+        for (const file of files) {
+            if (!file.endsWith('.json'))
+                continue;
+            const filepath = join(POSTS_DIR, file);
+            const content = await readFile(filepath, 'utf-8');
+            const post = JSON.parse(content);
+            // Only add each post once (in case of multiple translations)
+            if (!seenIds.has(post.id)) {
+                posts.push(post);
+                seenIds.add(post.id);
+            }
+        }
+        return posts.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+    }
+    catch (error) {
+        return [];
+    }
+}
+/**
+ * Update the posts index
+ */
+export async function updatePostsIndex(posts) {
+    await initCache();
+    const index = {
+        posts: posts.flatMap(post => post.post_translations.map(translation => ({
+            id: post.id,
+            slug: translation.slug,
+            language: translation.language,
+            updated_at: post.created_at,
+        }))),
+        last_sync: new Date().toISOString(),
+    };
+    await writeFile(POSTS_INDEX_FILE, JSON.stringify(index, null, 2), 'utf-8');
+}
+/**
+ * Get the posts index
+ */
+export async function getPostsIndex() {
+    try {
+        const content = await readFile(POSTS_INDEX_FILE, 'utf-8');
+        return JSON.parse(content);
+    }
+    catch (error) {
+        return null;
+    }
+}
+/**
+ * Check if cache needs refresh (older than specified minutes)
+ */
+export async function shouldRefreshCache(maxAgeMinutes = 60) {
+    const index = await getPostsIndex();
+    if (!index)
+        return true;
+    const lastSync = new Date(index.last_sync);
+    const now = new Date();
+    const ageMinutes = (now.getTime() - lastSync.getTime()) / (1000 * 60);
+    return ageMinutes > maxAgeMinutes;
+}
+/**
+ * Clear all cached posts
+ */
+export async function clearCache() {
+    try {
+        const files = await readdir(POSTS_DIR);
+        for (const file of files) {
+            if (file.endsWith('.json')) {
+                await unlink(join(POSTS_DIR, file));
+            }
+        }
+        await unlink(POSTS_INDEX_FILE);
+    }
+    catch (error) {
+        // Ignore errors
+    }
+}