@earlyseo/blog 1.0.1

package/README.md

@@ -0,0 +1,304 @@
+# @earlyseo/blog
+
+Drop-in blog integration for **React** & **Next.js** — powered by [EarlySEO](https://earlyseo.com).
+
+Articles are served from the EarlySEO CDN. No database, no webhooks, no storage config — just add your **site ID** and go.
+
+## Features
+
+- **CDN-first** — Articles served from EarlySEO's global CDN. Zero infrastructure to manage.
+- **Paginated** — Pre-built paginated JSON. No DB queries per visitor.
+- **Next.js App Router** — Drop-in server components for `/blog` and `/blog/[slug]`
+- **React hooks** — `useArticles()` and `useArticle(slug)` for custom UIs
+- **Full SEO** — Open Graph, Twitter cards, meta descriptions, canonical URLs
+- **Auto-styling** — CSS custom properties adapt to your site's theme
+- **100% customizable** — Render props, custom components, or headless hooks
+
+## Quick Start (Next.js)
+
+### Option A: Auto-generate pages (recommended)
+
+```bash
+npm install @earlyseo/blog
+npx earlyseo-blog
+```
+
+The CLI will detect your Next.js project, ask for your site ID, and generate:
+- `app/blog/page.tsx` — Paginated blog listing
+- `app/blog/[slug]/page.tsx` — Article detail with full SEO metadata
+- `.env.local` — `EARLYSEO_SITE_ID` added automatically
+
+That's it — run `npm run dev` and visit `/blog`.
+
+### Option B: Manual setup
+
+### 1. Install
+
+```bash
+npm install @earlyseo/blog
+```
+
+### 2. Set your site ID
+
+```env
+# .env.local
+EARLYSEO_SITE_ID=your-site-id
+```
+
+### 3. Add the blog listing page
+
+```tsx
+// app/blog/page.tsx
+import { createBlogListPage, createBlogListMetadata } from "@earlyseo/blog/next";
+
+export default createBlogListPage({
+  siteId: process.env.EARLYSEO_SITE_ID!,
+  title: "Our Blog",
+});
+
+export const generateMetadata = createBlogListMetadata({
+  title: "Our Blog",
+  description: "Read our latest articles about...",
+  siteName: "My Site",
+});
+```
+
+### 4. Add the article detail page
+
+```tsx
+// app/blog/[slug]/page.tsx
+import { createBlogPostPage, createBlogPostMetadata } from "@earlyseo/blog/next";
+
+const siteId = process.env.EARLYSEO_SITE_ID!;
+
+export default createBlogPostPage({ siteId });
+export const generateMetadata = createBlogPostMetadata({ siteId, siteName: "My Site" });
+```
+
+That's it! Articles published from EarlySEO automatically appear on your blog via CDN.
+
+---
+
+## How It Works
+
+When you publish an article in [EarlySEO](https://earlyseo.com), we write pre-built JSON files to our CDN:
+
+```
+media.earlyseo.com/site/{siteId}/manifest.json          → Total pages, version
+media.earlyseo.com/site/{siteId}/articles/page-1.json   → Paginated article list
+media.earlyseo.com/site/{siteId}/article/my-slug.json   → Full article content
+```
+
+Your site reads from these JSON files — **no database, no API calls, no webhook handlers**.
+
+Only the affected files are updated on each publish:
+- The individual article JSON
+- The paginated list pages
+- The manifest
+
+---
+
+## React Components
+
+### Using with any React framework (Vite, Remix, etc.)
+
+Wrap your app in `EarlySeoProvider` and use the components:
+
+```tsx
+import { EarlySeoProvider, BlogList, BlogPost, ArticleStyles } from "@earlyseo/blog/react";
+
+function App() {
+  return (
+    <EarlySeoProvider siteId="your-site-id" basePath="/blog">
+      <ArticleStyles />
+      <Routes>
+        <Route path="/blog" element={<BlogList />} />
+        <Route path="/blog/:slug" element={<BlogPostRoute />} />
+      </Routes>
+    </EarlySeoProvider>
+  );
+}
+
+function BlogPostRoute() {
+  const { slug } = useParams();
+  return <BlogPost slug={slug!} />;
+}
+```
+
+### Headless Hooks
+
+For full control over the UI, use the hooks directly:
+
+```tsx
+import { useArticles, useArticle } from "@earlyseo/blog/react";
+
+function CustomBlogList() {
+  const { articles, loading, page, totalPages, goToPage } = useArticles();
+
+  if (loading) return <Skeleton />;
+
+  return (
+    <div>
+      {articles.map((a) => (
+        <Link key={a.slug} to={`/blog/${a.slug}`}>
+          <h2>{a.title}</h2>
+          <p>{a.metaDescription}</p>
+        </Link>
+      ))}
+      <div>Page {page} of {totalPages}</div>
+    </div>
+  );
+}
+
+function CustomArticle({ slug }: { slug: string }) {
+  const { article, loading } = useArticle(slug);
+
+  if (loading) return <Skeleton />;
+  if (!article) return <NotFound />;
+
+  return (
+    <article>
+      <h1>{article.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: article.contentRawHtml }} />
+    </article>
+  );
+}
+```
+
+### Custom Card Rendering
+
+Override the default card in the blog list:
+
+```tsx
+<BlogList
+  renderCard={(article, basePath) => (
+    <a href={`${basePath}/${article.slug}`} className="my-custom-card">
+      <img src={article.imageUrl} alt={article.title} />
+      <h3>{article.title}</h3>
+    </a>
+  )}
+/>
+```
+
+---
+
+## CDN Client
+
+Use `EarlySeoClient` directly for full control:
+
+```ts
+import { EarlySeoClient } from "@earlyseo/blog";
+
+const client = new EarlySeoClient(
+  { siteId: "your-site-id" },
+  // Optional: Next.js ISR caching
+  { next: { revalidate: 60 } }
+);
+
+const manifest = await client.getManifest();     // Manifest | null
+const page1    = await client.getListPage(1);     // ArticleListPage | null
+const article  = await client.getArticle("slug"); // Article | null
+```
+
+---
+
+## Styling & Theming
+
+Articles come with a `.earlyseo-article` CSS wrapper that uses CSS custom properties for full theming control:
+
+```css
+:root {
+  --earlyseo-font-family: "Inter", sans-serif;
+  --earlyseo-text-color: #1a1a1a;
+  --earlyseo-heading-color: #111;
+  --earlyseo-link-color: #2563eb;
+  --earlyseo-border-color: #e5e7eb;
+  --earlyseo-code-bg: #f3f4f6;
+  --earlyseo-pre-bg: #f9fafb;
+  --earlyseo-th-bg: #f3f4f6;
+  --earlyseo-muted-color: #6b7280;
+  --earlyseo-tag-bg: #f3f4f6;
+  --earlyseo-blog-max-width: 72rem;
+  --earlyseo-post-max-width: 48rem;
+  --earlyseo-blog-padding: 2rem 1rem;
+}
+```
+
+Or use `htmlMode="raw"` to strip all EarlySEO styles and use your own:
+
+```tsx
+// Next.js
+export default createBlogPostPage({ siteId, htmlMode: "raw" });
+
+// React
+<BlogPost slug={slug} htmlMode="raw" />
+```
+
+---
+
+## API Reference
+
+### Types
+
+```ts
+interface Manifest {
+  schemaVersion: 1;
+  version: number;
+  totalArticles: number;
+  totalPages: number;
+  pageSize: number;
+  updatedAt: string;
+  featuredSlugs: string[];
+}
+
+interface ArticleListItem {
+  title: string;
+  slug: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  metaDescription: string;
+  createdAt: string;
+  tags: string[];
+}
+
+interface ArticleListPage {
+  page: number;
+  totalPages: number;
+  totalArticles: number;
+  version: number;
+  articles: ArticleListItem[];
+}
+
+interface Article {
+  id: string;
+  title: string;
+  slug: string;
+  contentHtml: string;      // Styled HTML (with .earlyseo-article wrapper)
+  contentRawHtml: string;   // Raw HTML (inherits your site theme)
+  contentCss: string;       // Standalone CSS for .earlyseo-article
+  metaDescription: string;
+  createdAt: string;
+  updatedAt: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  tags: string[];
+  summary?: string;
+  canonicalUrl?: string;
+  version: number;
+}
+```
+
+### Imports
+
+| Import Path | Contents |
+|-------------|----------|
+| `@earlyseo/blog` | `EarlySeoClient`, core types, CSS constants |
+| `@earlyseo/blog/react` | Provider, hooks, components |
+| `@earlyseo/blog/next` | Next.js page creators, metadata helpers |
+| `@earlyseo/blog/css` | `ARTICLE_CSS`, `BLOG_CSS` |
+
+---
+
+## License
+
+MIT

package/dist/client.d.ts

@@ -0,0 +1,22 @@
+import { type EarlySeoConfig, type Manifest, type ArticleListPage, type Article } from "./types";
+export declare class EarlySeoClient {
+    private baseUrl;
+    private siteId;
+    /** Additional fetch options (e.g. Next.js `{ next: { revalidate: 60 } }`) */
+    private fetchInit;
+    constructor(config: EarlySeoConfig, fetchInit?: RequestInit);
+    /** URL for the site manifest */
+    manifestUrl(): string;
+    /** URL for a paginated article list page (1-indexed) */
+    listPageUrl(page: number): string;
+    /** URL for a single article's full JSON */
+    articleUrl(slug: string): string;
+    /** Fetch the site manifest. Returns null on 404. */
+    getManifest(): Promise<Manifest | null>;
+    /** Fetch a paginated article list page (1-indexed). Returns null on 404. */
+    getListPage(page: number): Promise<ArticleListPage | null>;
+    /** Fetch a single article by slug. Returns null on 404. */
+    getArticle(slug: string): Promise<Article | null>;
+    private fetchJson;
+}
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAYA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,OAAO,EACb,MAAM,SAAS,CAAC;AAEjB,qBAAa,cAAc;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAS;IACvB,6EAA6E;IAC7E,OAAO,CAAC,SAAS,CAAc;gBAEnB,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,WAAW;IAQ3D,gCAAgC;IAChC,WAAW,IAAI,MAAM;IAIrB,wDAAwD;IACxD,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIjC,2CAA2C;IAC3C,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAOhC,oDAAoD;IAC9C,WAAW,IAAI,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;IAI7C,4EAA4E;IACtE,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAKhE,2DAA2D;IACrD,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YAMzC,SAAS;CAcxB"}

package/dist/client.js

@@ -0,0 +1,65 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// @earlyseo/blog — CDN Client
+// ─────────────────────────────────────────────────────────────────────────────
+// Thin read-only client that fetches pre-built JSON from the EarlySEO CDN.
+// All writes happen server-side in our worker — users never write.
+//
+// CDN layout:
+//   /site/{siteId}/manifest.json           → Manifest
+//   /site/{siteId}/articles/page-{n}.json  → ArticleListPage
+//   /site/{siteId}/article/{slug}.json     → Article
+// ─────────────────────────────────────────────────────────────────────────────
+import { DEFAULT_CDN_BASE_URL, } from "./types";
+export class EarlySeoClient {
+    constructor(config, fetchInit) {
+        this.siteId = config.siteId;
+        this.baseUrl = (config.cdnBaseUrl ?? DEFAULT_CDN_BASE_URL).replace(/\/+$/, "");
+        this.fetchInit = fetchInit ?? {};
+    }
+    // ─── URL builders (public so users can prefetch / build links) ─────────
+    /** URL for the site manifest */
+    manifestUrl() {
+        return `${this.baseUrl}/site/${this.siteId}/manifest.json`;
+    }
+    /** URL for a paginated article list page (1-indexed) */
+    listPageUrl(page) {
+        return `${this.baseUrl}/site/${this.siteId}/articles/page-${page}.json`;
+    }
+    /** URL for a single article's full JSON */
+    articleUrl(slug) {
+        const safe = slug.replace(/[^a-zA-Z0-9_-]/g, "-");
+        return `${this.baseUrl}/site/${this.siteId}/article/${safe}.json`;
+    }
+    // ─── Data fetchers ─────────────────────────────────────────────────────
+    /** Fetch the site manifest. Returns null on 404. */
+    async getManifest() {
+        return this.fetchJson(this.manifestUrl());
+    }
+    /** Fetch a paginated article list page (1-indexed). Returns null on 404. */
+    async getListPage(page) {
+        if (page < 1)
+            return null;
+        return this.fetchJson(this.listPageUrl(page));
+    }
+    /** Fetch a single article by slug. Returns null on 404. */
+    async getArticle(slug) {
+        return this.fetchJson(this.articleUrl(slug));
+    }
+    // ─── Internal ──────────────────────────────────────────────────────────
+    async fetchJson(url) {
+        const res = await fetch(url, {
+            ...this.fetchInit,
+            headers: {
+                Accept: "application/json",
+                ...(this.fetchInit.headers ?? {}),
+            },
+        });
+        if (res.status === 404)
+            return null;
+        if (!res.ok) {
+            throw new Error(`EarlySEO CDN error: ${res.status} ${res.statusText} for ${url}`);
+        }
+        return res.json();
+    }
+}
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,8BAA8B;AAC9B,gFAAgF;AAChF,2EAA2E;AAC3E,mEAAmE;AACnE,EAAE;AACF,cAAc;AACd,sDAAsD;AACtD,6DAA6D;AAC7D,qDAAqD;AACrD,gFAAgF;AAEhF,OAAO,EACL,oBAAoB,GAKrB,MAAM,SAAS,CAAC;AAEjB,MAAM,OAAO,cAAc;IAMzB,YAAY,MAAsB,EAAE,SAAuB;QACzD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,UAAU,IAAI,oBAAoB,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC/E,IAAI,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,0EAA0E;IAE1E,gCAAgC;IAChC,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,MAAM,gBAAgB,CAAC;IAC7D,CAAC;IAED,wDAAwD;IACxD,WAAW,CAAC,IAAY;QACtB,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,MAAM,kBAAkB,IAAI,OAAO,CAAC;IAC1E,CAAC;IAED,2CAA2C;IAC3C,UAAU,CAAC,IAAY;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;QAClD,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,MAAM,YAAY,IAAI,OAAO,CAAC;IACpE,CAAC;IAED,0EAA0E;IAE1E,oDAAoD;IACpD,KAAK,CAAC,WAAW;QACf,OAAO,IAAI,CAAC,SAAS,CAAW,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,4EAA4E;IAC5E,KAAK,CAAC,WAAW,CAAC,IAAY;QAC5B,IAAI,IAAI,GAAG,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAkB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,2DAA2D;IAC3D,KAAK,CAAC,UAAU,CAAC,IAAY;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAU,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACxD,CAAC;IAED,0EAA0E;IAElE,KAAK,CAAC,SAAS,CAAI,GAAW;QACpC,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE;YAC3B,GAAG,IAAI,CAAC,SAAS;YACjB,OAAO,EAAE;gBACP,MAAM,EAAE,kBAAkB;gBAC1B,GAAG,CAAE,IAAI,CAAC,SAAS,CAAC,OAAkC,IAAI,EAAE,CAAC;aAC9D;SACF,CAAC,CAAC;QACH,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG;YAAE,OAAO,IAAI,CAAC;QACpC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,uBAAuB,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,UAAU,QAAQ,GAAG,EAAE,CAAC,CAAC;QACpF,CAAC;QACD,OAAO,GAAG,CAAC,IAAI,EAAgB,CAAC;IAClC,CAAC;CACF"}

package/dist/css.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Companion CSS for the `.earlyseo-article` wrapper. All color defaults
+ * are semi-transparent so they adapt to both light and dark backgrounds.
+ * Every color is overridable via CSS custom properties.
+ *
+ * Usage:
+ *   import { ARTICLE_CSS } from '@earlyseo/blog/css';
+ *   // Inject via <style> tag or your CSS-in-JS solution
+ */
+export declare const ARTICLE_CSS: string;
+/**
+ * Minimal blog layout CSS — provides sensible defaults for the blog listing
+ * and article detail pages. All values are overridable via CSS custom properties.
+ */
+export declare const BLOG_CSS: string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,QAsChB,CAAC;AAET;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAiIb,CAAC"}

package/dist/css.js

@@ -0,0 +1,186 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// @earlyseo/blog — Article CSS
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Companion CSS for the `.earlyseo-article` wrapper. All color defaults
+ * are semi-transparent so they adapt to both light and dark backgrounds.
+ * Every color is overridable via CSS custom properties.
+ *
+ * Usage:
+ *   import { ARTICLE_CSS } from '@earlyseo/blog/css';
+ *   // Inject via <style> tag or your CSS-in-JS solution
+ */
+export const ARTICLE_CSS = `
+.earlyseo-article {
+  color: var(--earlyseo-text-color, inherit);
+  font-size: 16px;
+  line-height: 1.75;
+  word-wrap: break-word;
+  font-family: var(--earlyseo-font-family, inherit);
+}
+.earlyseo-article > :first-child { margin-top: 0; }
+.earlyseo-article > :last-child { margin-bottom: 0; }
+.earlyseo-article h1,.earlyseo-article h2,.earlyseo-article h3,.earlyseo-article h4,.earlyseo-article h5,.earlyseo-article h6 {
+  margin-top: 1.6em; margin-bottom: 0.6em; font-weight: 700; line-height: 1.3;
+  color: var(--earlyseo-heading-color, inherit);
+}
+.earlyseo-article h1 { font-size: 2rem; }
+.earlyseo-article h2 { font-size: 1.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2)); }
+.earlyseo-article h3 { font-size: 1.25rem; }
+.earlyseo-article h4 { font-size: 1.05rem; }
+.earlyseo-article p,.earlyseo-article ul,.earlyseo-article ol,.earlyseo-article dl,.earlyseo-article table,.earlyseo-article blockquote,.earlyseo-article pre,.earlyseo-article figure {
+  margin-top: 0; margin-bottom: 1rem;
+}
+.earlyseo-article a { color: var(--earlyseo-link-color, inherit); text-decoration: underline; text-underline-offset: 2px; }
+.earlyseo-article a:hover { text-decoration-thickness: 2px; }
+.earlyseo-article ul,.earlyseo-article ol { padding-left: 1.5rem; }
+.earlyseo-article li + li { margin-top: 0.3rem; }
+.earlyseo-article li > p { margin-bottom: 0.4rem; }
+.earlyseo-article blockquote { margin-left: 0; padding: 0.25rem 1rem; color: var(--earlyseo-muted-color, inherit); opacity: 0.75; border-left: 4px solid var(--earlyseo-border-color, rgba(128,128,128,0.2)); }
+.earlyseo-article blockquote > * { opacity: 1; }
+.earlyseo-article code { padding: 0.12rem 0.35rem; border-radius: 0.375rem; background: var(--earlyseo-code-bg, rgba(128,128,128,0.1)); font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+.earlyseo-article pre { overflow: auto; padding: 1rem; border-radius: 0.75rem; background: var(--earlyseo-pre-bg, rgba(128,128,128,0.06)); border: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2)); }
+.earlyseo-article pre code { background: transparent; padding: 0; border-radius: 0; font-size: 0.9em; line-height: 1.55; }
+.earlyseo-article table { display: table; width: 100%; overflow-x: auto; border-collapse: collapse; }
+.earlyseo-article th,.earlyseo-article td { padding: 0.55rem 0.75rem; border: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2)); text-align: left; }
+.earlyseo-article th { font-weight: 600; background: var(--earlyseo-th-bg, rgba(128,128,128,0.1)); }
+.earlyseo-article img { max-width: 100%; height: auto; border-radius: 0.75rem; }
+.earlyseo-article hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2)); }
+.earlyseo-article .task-list-item { list-style: none; }
+.earlyseo-article input[type="checkbox"] { margin-right: 0.45rem; }
+`.trim();
+/**
+ * Minimal blog layout CSS — provides sensible defaults for the blog listing
+ * and article detail pages. All values are overridable via CSS custom properties.
+ */
+export const BLOG_CSS = `
+.earlyseo-blog {
+  max-width: var(--earlyseo-blog-max-width, 72rem);
+  margin: 0 auto;
+  padding: var(--earlyseo-blog-padding, 2rem 1rem);
+  font-family: var(--earlyseo-font-family, inherit);
+  color: var(--earlyseo-text-color, inherit);
+}
+.earlyseo-blog-header {
+  margin-bottom: 2rem;
+}
+.earlyseo-blog-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem;
+}
+.earlyseo-blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
+  gap: 2rem;
+}
+.earlyseo-blog-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  border: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2));
+  transition: box-shadow 0.15s;
+}
+.earlyseo-blog-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+.earlyseo-blog-card a {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.earlyseo-blog-card-image {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+.earlyseo-blog-card-body {
+  padding: 1rem 1.25rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.earlyseo-blog-card-title {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+  line-height: 1.3;
+}
+.earlyseo-blog-card-desc {
+  font-size: 0.9rem;
+  opacity: 0.7;
+  margin: 0 0 0.75rem;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.earlyseo-blog-card-meta {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.8rem;
+  opacity: 0.5;
+}
+.earlyseo-blog-tag {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 9999px;
+  background: var(--earlyseo-tag-bg, rgba(128,128,128,0.1));
+  font-size: 0.75rem;
+}
+.earlyseo-blog-post {
+  max-width: var(--earlyseo-post-max-width, 48rem);
+  margin: 0 auto;
+  padding: var(--earlyseo-blog-padding, 2rem 1rem);
+}
+.earlyseo-blog-post-header {
+  margin-bottom: 2rem;
+}
+.earlyseo-blog-post-header h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem;
+  line-height: 1.2;
+}
+.earlyseo-blog-post-meta {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 0.85rem;
+  opacity: 0.6;
+}
+.earlyseo-blog-post-image {
+  width: 100%;
+  border-radius: 0.75rem;
+  margin-bottom: 2rem;
+}
+.earlyseo-blog-empty {
+  text-align: center;
+  padding: 4rem 1rem;
+  opacity: 0.5;
+}
+.earlyseo-blog-pagination {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 2rem;
+}
+.earlyseo-blog-pagination button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--earlyseo-border-color, rgba(128,128,128,0.2));
+  border-radius: 0.375rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.earlyseo-blog-pagination button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+`.trim();
+//# sourceMappingURL=css.js.map

package/dist/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,+BAA+B;AAC/B,gFAAgF;AAEhF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC1B,CAAC,IAAI,EAAE,CAAC;AAET;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIvB,CAAC,IAAI,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { EarlySeoClient } from "./client";
+export type { Manifest, ArticleListItem, ArticleListPage, Article, EarlySeoConfig, } from "./types";
+export { DEFAULT_CDN_BASE_URL } from "./types";
+export { ARTICLE_CSS, BLOG_CSS } from "./css";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,YAAY,EACV,QAAQ,EACR,eAAe,EACf,eAAe,EACf,OAAO,EACP,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// @earlyseo/blog — Main Entry Point
+// ─────────────────────────────────────────────────────────────────────────────
+// Core client, types, and CSS. For framework-specific imports use:
+//   @earlyseo/blog/react  — React hooks & components
+//   @earlyseo/blog/next   — Next.js pages & metadata helpers
+//   @earlyseo/blog/css    — Article & blog CSS constants
+// Client
+export { EarlySeoClient } from "./client";
+export { DEFAULT_CDN_BASE_URL } from "./types";
+// CSS
+export { ARTICLE_CSS, BLOG_CSS } from "./css";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,oCAAoC;AACpC,gFAAgF;AAChF,mEAAmE;AACnE,qDAAqD;AACrD,6DAA6D;AAC7D,yDAAyD;AAEzD,SAAS;AACT,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAW1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM;AACN,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC"}

package/dist/next/back-link.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+/**
+ * A "← Go back" link that navigates to the previous page via browser history,
+ * or falls back to `fallbackHref` (default: "/") if there is no history.
+ */
+export declare function BackLink({ fallbackHref, children, style, className, }: {
+    fallbackHref?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=back-link.d.ts.map

package/dist/next/back-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-link.d.ts","sourceRoot":"","sources":["../../src/next/back-link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,YAAkB,EAClB,QAAsB,EACtB,KAAK,EACL,SAAS,GACV,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAgBA"}

package/dist/next/back-link.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A "← Go back" link that navigates to the previous page via browser history,
+ * or falls back to `fallbackHref` (default: "/") if there is no history.
+ */
+export function BackLink({ fallbackHref = "/", children = "← Go back", style, className, }) {
+    return (_jsx("a", { href: fallbackHref, className: className, style: style, onClick: (e) => {
+            if (window.history.length > 1) {
+                e.preventDefault();
+                window.history.back();
+            }
+        }, children: children }));
+}
+//# sourceMappingURL=back-link.js.map

package/dist/next/back-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-link.js","sourceRoot":"","sources":["../../src/next/back-link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,YAAY,GAAG,GAAG,EAClB,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,SAAS,GAMV;IACC,OAAO,CACL,YACE,IAAI,EAAE,YAAY,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC"}