@cedros/data-react 0.1.0

package/dist/site-templates/content-styles.css

@@ -0,0 +1,410 @@
+.cedros-site__controls {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 0.7rem;
+  align-items: end;
+}
+
+.cedros-site__control {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  color: var(--cds-muted);
+}
+
+.cedros-site__control input,
+.cedros-site__control select {
+  width: 100%;
+  border: 1px solid var(--cds-border);
+  border-radius: calc(var(--cds-radius) - 2px);
+  background: color-mix(in srgb, var(--cds-bg) 90%, var(--cds-muted-bg) 10%);
+  color: var(--cds-fg);
+  height: 2.25rem;
+  padding: 0 0.6rem;
+}
+
+.cedros-site__control-actions {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.cedros-site__control-actions button {
+  cursor: pointer;
+}
+
+.cedros-site__content-grid {
+  margin-top: 1rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.cedros-site__content-grid--docs {
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.cedros-site__entry-card {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.cedros-site__entry-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.cedros-site__entry-title {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.cedros-site__entry-title a {
+  text-decoration: none;
+}
+
+.cedros-site__entry-title a:hover {
+  text-decoration: underline;
+}
+
+.cedros-site__entry-meta {
+  margin: 0;
+  font-size: 0.78rem;
+  color: var(--cds-muted);
+}
+
+.cedros-site__tag-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.cedros-site__pagination {
+  margin-top: 0.8rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.cedros-site__breadcrumbs {
+  margin-top: 0.2rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.78rem;
+  color: var(--cds-muted);
+}
+
+.cedros-site__breadcrumbs a {
+  color: var(--cds-muted);
+  text-decoration: none;
+}
+
+.cedros-site__breadcrumbs a:hover {
+  color: var(--cds-fg);
+  text-decoration: underline;
+}
+
+.cedros-site__docs-page {
+  margin-top: 0.85rem;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.cedros-site__docs-page--article {
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 260px);
+}
+
+.cedros-site__docs-main {
+  min-width: 0;
+}
+
+.cedros-site__docs-sidebar {
+  position: sticky;
+  top: 0.95rem;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.cedros-site__docs-sidebar-title {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.cedros-site__docs-search {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.cedros-site__docs-root-link {
+  font-size: 0.8rem;
+  text-decoration: none;
+  color: var(--cds-muted);
+}
+
+.cedros-site__docs-root-link:hover {
+  color: var(--cds-fg);
+  text-decoration: underline;
+}
+
+.cedros-site__docs-section {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.cedros-site__docs-section-title {
+  margin: 0;
+  font-size: 0.72rem;
+  color: var(--cds-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.cedros-site__docs-section-links {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.cedros-site__docs-item {
+  border: 1px solid transparent;
+  border-radius: calc(var(--cds-radius) - 2px);
+  padding: 0.35rem 0.48rem;
+  text-decoration: none;
+  color: var(--cds-muted);
+  font-size: 0.79rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+}
+
+.cedros-site__docs-item:hover {
+  color: var(--cds-fg);
+  background: var(--cds-muted-bg);
+  border-color: var(--cds-border);
+}
+
+.cedros-site__docs-item--active {
+  color: var(--cds-fg);
+  border-color: color-mix(in srgb, var(--cds-link) 50%, var(--cds-border) 50%);
+  background: color-mix(in srgb, var(--cds-link) 9%, var(--cds-muted-bg) 91%);
+}
+
+.cedros-site__docs-item--depth-1 {
+  padding-left: 0.9rem;
+}
+
+.cedros-site__docs-item--depth-2 {
+  padding-left: 1.3rem;
+}
+
+.cedros-site__docs-item-badge {
+  border: 1px solid var(--cds-border);
+  border-radius: 999px;
+  padding: 0.05rem 0.38rem;
+  font-size: 0.67rem;
+  color: var(--cds-muted);
+}
+
+.cedros-site__article-layout {
+  margin-top: 0.85rem;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
+  align-items: start;
+}
+
+.cedros-site__article {
+  min-width: 0;
+}
+
+.cedros-site__article-header {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.cedros-site__prose {
+  margin-top: 1rem;
+  display: grid;
+  gap: 0.85rem;
+  line-height: 1.65;
+}
+
+.cedros-site__prose :where(h2, h3, h4) {
+  margin: 1rem 0 0;
+  line-height: 1.25;
+}
+
+.cedros-site__prose p {
+  margin: 0;
+}
+
+.cedros-site__prose pre {
+  margin: 0;
+  padding: 0.9rem;
+  border-radius: calc(var(--cds-radius) - 2px);
+  border: 1px solid var(--cds-border);
+  overflow-x: auto;
+  background: color-mix(in srgb, var(--cds-muted-bg) 85%, var(--cds-bg) 15%);
+  font-size: 0.82rem;
+}
+
+.cedros-site__prose code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.cedros-site__prose :not(pre) > code {
+  border: 1px solid var(--cds-border);
+  border-radius: 0.3rem;
+  background: color-mix(in srgb, var(--cds-muted-bg) 85%, var(--cds-bg) 15%);
+  padding: 0.1rem 0.3rem;
+}
+
+.cedros-site__prose blockquote {
+  margin: 0;
+  padding: 0.6rem 0.8rem;
+  border-left: 3px solid var(--cds-border);
+  color: var(--cds-muted);
+  background: color-mix(in srgb, var(--cds-muted-bg) 72%, var(--cds-bg) 28%);
+  border-radius: calc(var(--cds-radius) - 2px);
+}
+
+.cedros-site__prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--cds-radius) - 2px);
+}
+
+.cedros-site__content-warning {
+  margin: 0;
+  color: var(--cds-muted);
+  border: 1px dashed var(--cds-border);
+  border-radius: calc(var(--cds-radius) - 2px);
+  padding: 0.65rem 0.8rem;
+  background: color-mix(in srgb, var(--cds-muted-bg) 78%, var(--cds-bg) 22%);
+}
+
+.cedros-site__toc {
+  position: sticky;
+  top: 1rem;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.cedros-site__toc-title {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.cedros-site__toc-links {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.cedros-site__toc-link {
+  color: var(--cds-muted);
+  text-decoration: none;
+  font-size: 0.8rem;
+}
+
+.cedros-site__toc-link--depth-3 {
+  padding-left: 0.65rem;
+}
+
+.cedros-site__toc-link--depth-4 {
+  padding-left: 1.3rem;
+}
+
+.cedros-site__toc-link:hover {
+  color: var(--cds-fg);
+}
+
+.cedros-site__doc-footer {
+  margin-top: 1rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid var(--cds-border);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.cedros-site__empty-state {
+  margin-top: 1rem;
+}
+
+.cedros-site__pill--active {
+  background: var(--cds-link);
+  color: var(--cds-bg);
+  border-color: var(--cds-link);
+}
+
+.cedros-site__filter-dimensions {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.cedros-site__filter-group {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.cedros-site__filter-group-label {
+  font-size: 0.72rem;
+  color: var(--cds-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.cedros-site__bookmark {
+  background: none;
+  border: 1px solid var(--cds-border);
+  border-radius: calc(var(--cds-radius) - 2px);
+  padding: 0.25rem 0.4rem;
+  cursor: pointer;
+  color: var(--cds-muted);
+  display: inline-flex;
+  align-items: center;
+}
+
+.cedros-site__bookmark:hover,
+.cedros-site__bookmark[aria-pressed="true"] {
+  color: var(--cds-link);
+  border-color: var(--cds-link);
+}
+
+.cedros-site__search-input {
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .cedros-site__docs-page,
+  .cedros-site__docs-page--article {
+    grid-template-columns: 1fr;
+  }
+
+  .cedros-site__docs-sidebar {
+    position: static;
+  }
+
+  .cedros-site__article-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .cedros-site__toc {
+    position: static;
+  }
+}
+
+@media (max-width: 700px) {
+  .cedros-site__control-actions {
+    flex-wrap: wrap;
+  }
+}
+
+@import "./docs-styles.css";
+@import "./monetization-styles.css";

package/dist/site-templates/contentIndex.d.ts

@@ -0,0 +1,65 @@
+export interface PaginationResult<T> {
+    items: T[];
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+}
+export interface BlogIndexEntry {
+    slug: string;
+    title: string;
+    excerpt?: string;
+    category?: string;
+    tags?: string[];
+    publishedAt?: string;
+}
+export interface BlogIndexQuery {
+    query?: string;
+    category?: string;
+    tag?: string;
+    sort?: "newest" | "oldest" | "title-asc" | "title-desc";
+    page?: number;
+    pageSize?: number;
+    dimensions?: FilterDimensionValues;
+}
+export interface FilterDimension {
+    /** Payload field name, e.g. "category", "knowledgeLevel" */
+    key: string;
+    /** Display label, e.g. "Category", "Level" */
+    label: string;
+    /** Available values, e.g. ["Beginner", "Advanced"] */
+    values: string[];
+}
+export interface FilterDimensionValues {
+    [dimensionKey: string]: string;
+}
+export interface DocsIndexEntry {
+    slug: string;
+    title: string;
+    description?: string;
+    category?: string;
+    tags?: string[];
+    lastUpdated?: string;
+}
+export interface DocsIndexQuery {
+    query?: string;
+    category?: string;
+    tag?: string;
+    sort?: "updated-desc" | "updated-asc" | "title-asc" | "title-desc";
+    page?: number;
+    pageSize?: number;
+}
+export declare function buildContentListHref(basePath: string, query: Record<string, string | number | undefined>): string;
+export declare function prepareBlogIndex<T extends BlogIndexEntry>(entries: T[], query: BlogIndexQuery): PaginationResult<T>;
+export declare function prepareDocsIndex<T extends DocsIndexEntry>(entries: T[], query: DocsIndexQuery): PaginationResult<T>;
+export declare function collectFilterValues(entries: Array<{
+    category?: string;
+    tags?: string[];
+}>): {
+    categories: string[];
+    tags: string[];
+};
+/** Extract unique sorted values for each dimension key from entry payloads. */
+export declare function collectDimensionValues(entries: object[], dimensionKeys: string[]): Record<string, string[]>;
+/** Check if an entry matches all active dimension filters. */
+export declare function matchesFilterDimensions(entry: object, activeFilters: FilterDimensionValues): boolean;

package/dist/site-templates/contentIndex.js

@@ -0,0 +1,181 @@
+export function buildContentListHref(basePath, query) {
+    const params = new URLSearchParams();
+    Object.entries(query).forEach(([key, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        const normalized = `${value}`.trim();
+        if (!normalized) {
+            return;
+        }
+        params.set(key, normalized);
+    });
+    const queryString = params.toString();
+    return queryString ? `${basePath}?${queryString}` : basePath;
+}
+export function prepareBlogIndex(entries, query) {
+    let filtered = entries.filter((entry) => matchesBlogQuery(entry, query));
+    if (query.dimensions) {
+        const dims = query.dimensions;
+        filtered = filtered.filter((entry) => matchesFilterDimensions(entry, dims));
+    }
+    const sorted = [...filtered].sort((left, right) => compareBlogEntries(left, right, query.sort ?? "newest"));
+    return paginate(sorted, query.page, query.pageSize ?? 8);
+}
+export function prepareDocsIndex(entries, query) {
+    const filtered = entries.filter((entry) => matchesDocsQuery(entry, query));
+    const sorted = [...filtered].sort((left, right) => compareDocsEntries(left, right, query.sort ?? "title-asc"));
+    return paginate(sorted, query.page, query.pageSize ?? 10);
+}
+export function collectFilterValues(entries) {
+    const categories = new Set();
+    const tags = new Set();
+    entries.forEach((entry) => {
+        if (entry.category) {
+            categories.add(entry.category);
+        }
+        entry.tags?.forEach((tag) => tags.add(tag));
+    });
+    return {
+        categories: [...categories].sort((a, b) => a.localeCompare(b)),
+        tags: [...tags].sort((a, b) => a.localeCompare(b))
+    };
+}
+/** Extract unique sorted values for each dimension key from entry payloads. */
+export function collectDimensionValues(entries, dimensionKeys) {
+    const result = {};
+    for (const key of dimensionKeys) {
+        result[key] = new Set();
+    }
+    for (const entry of entries) {
+        const record = entry;
+        for (const key of dimensionKeys) {
+            if (!(key in record))
+                continue;
+            const value = record[key];
+            if (typeof value === "string" && value) {
+                result[key].add(value);
+            }
+            else if (Array.isArray(value)) {
+                for (const item of value) {
+                    if (typeof item === "string" && item) {
+                        result[key].add(item);
+                    }
+                }
+            }
+        }
+    }
+    const out = {};
+    for (const key of dimensionKeys) {
+        out[key] = [...result[key]].sort((a, b) => a.localeCompare(b));
+    }
+    return out;
+}
+/** Check if an entry matches all active dimension filters. */
+export function matchesFilterDimensions(entry, activeFilters) {
+    const record = entry;
+    for (const [key, value] of Object.entries(activeFilters)) {
+        if (!value)
+            continue;
+        if (!(key in record))
+            return false;
+        const field = record[key];
+        if (typeof field === "string") {
+            if (field !== value)
+                return false;
+        }
+        else if (Array.isArray(field)) {
+            if (!field.includes(value))
+                return false;
+        }
+        else {
+            return false;
+        }
+    }
+    return true;
+}
+function matchesBlogQuery(entry, query) {
+    if (query.category && entry.category !== query.category) {
+        return false;
+    }
+    if (query.tag && !entry.tags?.includes(query.tag)) {
+        return false;
+    }
+    if (!query.query) {
+        return true;
+    }
+    const normalizedQuery = query.query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return true;
+    }
+    const haystack = [entry.title, entry.excerpt, entry.category, ...(entry.tags ?? [])].join(" ").toLowerCase();
+    return haystack.includes(normalizedQuery);
+}
+function matchesDocsQuery(entry, query) {
+    if (query.category && entry.category !== query.category) {
+        return false;
+    }
+    if (query.tag && !entry.tags?.includes(query.tag)) {
+        return false;
+    }
+    if (!query.query) {
+        return true;
+    }
+    const normalizedQuery = query.query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return true;
+    }
+    const haystack = [entry.title, entry.description, entry.category, ...(entry.tags ?? [])].join(" ").toLowerCase();
+    return haystack.includes(normalizedQuery);
+}
+function compareBlogEntries(left, right, sort) {
+    if (sort === "oldest") {
+        return compareDate(left.publishedAt, right.publishedAt) || left.title.localeCompare(right.title);
+    }
+    if (sort === "title-asc") {
+        return left.title.localeCompare(right.title);
+    }
+    if (sort === "title-desc") {
+        return right.title.localeCompare(left.title);
+    }
+    return compareDate(right.publishedAt, left.publishedAt) || left.title.localeCompare(right.title);
+}
+function compareDocsEntries(left, right, sort) {
+    if (sort === "updated-desc") {
+        return compareDate(right.lastUpdated, left.lastUpdated) || left.title.localeCompare(right.title);
+    }
+    if (sort === "updated-asc") {
+        return compareDate(left.lastUpdated, right.lastUpdated) || left.title.localeCompare(right.title);
+    }
+    if (sort === "title-desc") {
+        return right.title.localeCompare(left.title);
+    }
+    return left.title.localeCompare(right.title);
+}
+function compareDate(left, right) {
+    return toTimestamp(left) - toTimestamp(right);
+}
+function toTimestamp(value) {
+    const parsed = Date.parse(value ?? "");
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+function paginate(items, pageInput, pageSizeInput) {
+    const pageSize = sanitizePositiveInt(pageSizeInput, 10);
+    const totalItems = items.length;
+    const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+    const page = Math.min(sanitizePositiveInt(pageInput, 1), totalPages);
+    const start = (page - 1) * pageSize;
+    return {
+        items: items.slice(start, start + pageSize),
+        page,
+        pageSize,
+        totalItems,
+        totalPages
+    };
+}
+function sanitizePositiveInt(value, fallback) {
+    if (value === undefined || !Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(1, Math.floor(value));
+}

package/dist/site-templates/contentUi.d.ts

@@ -0,0 +1,14 @@
+export interface PaginationProps {
+    basePath: string;
+    page: number;
+    totalPages: number;
+    query: Record<string, string | number | undefined>;
+}
+export declare function ContentPagination({ basePath, page, totalPages, query }: PaginationProps): React.JSX.Element | null;
+export declare function Breadcrumbs({ trail, className }: {
+    trail: Array<{
+        label: string;
+        href: string;
+    }>;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/site-templates/contentUi.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildContentListHref } from "./contentIndex.js";
+export function ContentPagination({ basePath, page, totalPages, query }) {
+    if (totalPages <= 1) {
+        return null;
+    }
+    const visiblePages = buildVisiblePages(page, totalPages);
+    return (_jsxs("nav", { className: "cedros-site__pagination", "aria-label": "Pagination", children: [_jsx("a", { href: buildContentListHref(basePath, { ...query, page: Math.max(1, page - 1) }), className: `cedros-site__nav-link${page === 1 ? " cedros-site__nav-link--disabled" : ""}`, "aria-disabled": page === 1 ? "true" : undefined, children: "Previous" }), visiblePages.map((entryPage) => (_jsx("a", { href: buildContentListHref(basePath, { ...query, page: entryPage }), className: `cedros-site__nav-link${entryPage === page ? " cedros-site__nav-link--active" : ""}`, "aria-current": entryPage === page ? "page" : undefined, children: entryPage }, entryPage))), _jsx("a", { href: buildContentListHref(basePath, { ...query, page: Math.min(totalPages, page + 1) }), className: `cedros-site__nav-link${page === totalPages ? " cedros-site__nav-link--disabled" : ""}`, "aria-disabled": page === totalPages ? "true" : undefined, children: "Next" })] }));
+}
+export function Breadcrumbs({ trail, className = "cedros-site__breadcrumbs" }) {
+    if (trail.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { className: className, "aria-label": "Breadcrumb", children: trail.map((entry) => (_jsx("a", { href: entry.href, children: entry.label }, entry.href))) }));
+}
+function buildVisiblePages(page, totalPages) {
+    const start = Math.max(1, page - 2);
+    const end = Math.min(totalPages, page + 2);
+    const pages = [];
+    for (let current = start; current <= end; current += 1) {
+        pages.push(current);
+    }
+    return pages;
+}