GET /v1/blog — posts, pagination, single post

curl "https://back.sitecog.com/content/v1/blog?lang=en&limit=2" \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

const res = await fetch('https://back.sitecog.com/content/v1/blog?lang=en&limit=2', {
  headers: { 'x-crm-key': 'pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40' },
});

if (!res.ok) throw new Error(`Content API: ${res.status}`);
const blog = await res.json();

console.log(`${blog.total} posts on ${blog.pages} pages`);
blog.posts.forEach((post) => console.log(post.slug, post.title.en));

# first window
curl "https://back.sitecog.com/content/v1/blog?lang=en&limit=12" \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

# next window: offset = nextOffset from the previous response
curl "https://back.sitecog.com/content/v1/blog?lang=en&limit=12&offset=12" \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

const API = 'https://back.sitecog.com/content/v1';
const KEY = 'pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40';

let nextOffset = 0;

async function loadMore() {
  if (nextOffset === null) return; // the end, nothing left to load

  const res = await fetch(`${API}/blog?lang=en&limit=12&offset=${nextOffset}`, {
    headers: { 'x-crm-key': KEY },
  });
  const data = await res.json();

  renderPosts(data.posts);          // your function that appends cards
  nextOffset = data.nextOffset;     // null when there is nothing left
  loadMoreButton.hidden = !data.hasMore;
}

loadMoreButton.addEventListener('click', loadMore);
loadMore();

curl "https://back.sitecog.com/content/v1/blog?lang=en&page=3&perPage=10" \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

const page = Number(new URLSearchParams(location.search).get('page')) || 1;

const res = await fetch(`https://back.sitecog.com/content/v1/blog?lang=en&page=${page}&perPage=10`, {
  headers: { 'x-crm-key': 'pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40' },
});
const data = await res.json();

// links 1..pages, the current one highlighted
const links = Array.from({ length: data.pages }, (_, i) => ({
  href: `/blog?page=${i + 1}`,
  current: i + 1 === data.page,
}));

curl "https://back.sitecog.com/content/v1/blog/how-we-chose-hosting?lang=en,de" \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

const res = await fetch('https://back.sitecog.com/content/v1/blog/how-we-chose-hosting?lang=en,de', {
  headers: { 'x-crm-key': 'pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40' },
});

if (res.status === 404) {
  // no such post, or it is not published yet — show your 404 page
}
const { post } = await res.json();
console.log(post.title.de); // "Wie wir Hosting gewählt haben"

const t = (map, lang, fallback = 'en') =>
  map?.[lang] || map?.[fallback] || Object.values(map ?? {})[0] || '';

export function Post({ post, lang }) {
  return (
    <article>
      <h1>{t(post.title, lang)}</h1>
      {/* body is sanitized by Diil when the post is saved */}
      <div className="prose" dangerouslySetInnerHTML={{ __html: t(post.body, lang) }} />
    </article>
  );
}

<script setup>
import { computed } from 'vue';

const props = defineProps({ post: Object, lang: String });

const t = (map, lang, fallback = 'en') =>
  map?.[lang] || map?.[fallback] || Object.values(map ?? {})[0] || '';

const body = computed(() => t(props.post.body, props.lang));
</script>

<template>
  <article>
    <h1>{{ t(post.title, lang) }}</h1>
    <!-- body is sanitized by Diil when the post is saved -->
    <div class="prose" v-html="body" />
  </article>
</template>

// lib/blog.ts — everything blog-related in one place
const API = 'https://back.sitecog.com/content/v1';
const LANG = 'en';
const headers = { 'x-crm-key': process.env.CRM_KEY! };

export type LangMap = Record<string, string>;
export type Post = {
  slug: string;
  author: string | null;
  publishedAt: string | null;
  title: LangMap;
  image: LangMap;
  body?: LangMap;
};

export const t = (map: LangMap | undefined, lang = LANG, fallback = 'en') =>
  map?.[lang] || map?.[fallback] || Object.values(map ?? {})[0] || '';

export async function getPosts(page = 1, perPage = 12) {
  const res = await fetch(`${API}/blog?lang=${LANG}&page=${page}&perPage=${perPage}`, {
    headers,
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error(`Content API: ${res.status}`);
  return (await res.json()) as { total: number; page: number | null; pages: number; posts: Post[] };
}

export async function getPost(slug: string) {
  const res = await fetch(`${API}/blog/${slug}?lang=${LANG}`, {
    headers,
    next: { revalidate: 60 },
  });
  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`Content API: ${res.status}`);
  return ((await res.json()) as { post: Post }).post;
}

// limit tops out at 50, so walk the whole blog with nextOffset
export async function getAllSlugs() {
  const slugs: string[] = [];
  let offset: number | null = 0;
  while (offset !== null) {
    const res = await fetch(`${API}/blog?lang=${LANG}&limit=50&offset=${offset}`, { headers });
    if (!res.ok) throw new Error(`Content API: ${res.status}`);
    const data: { posts: Post[]; nextOffset: number | null } = await res.json();
    slugs.push(...data.posts.map((post) => post.slug));
    offset = data.nextOffset;
  }
  return slugs;
}

// app/blog/page.tsx — the index with numbered pages
import Link from 'next/link';
import { getPosts, t } from '@/lib/blog';

export default async function Blog({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const page = Number((await searchParams).page) || 1;
  const { posts, pages } = await getPosts(page);

  if (!posts.length) return <p>No posts yet. The authors are still brewing coffee.</p>;

  return (
    <main>
      {posts.map((post) => (
        <article key={post.slug}>
          {t(post.image) && <img src={t(post.image)} alt="" />}
          <h2><Link href={`/blog/${post.slug}`}>{t(post.title)}</Link></h2>
          {post.publishedAt && (
            <time dateTime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString('en')}</time>
          )}
        </article>
      ))}

      <nav>
        {Array.from({ length: pages }, (_, i) => (
          <Link key={i} href={`/blog?page=${i + 1}`} aria-current={i + 1 === page ? 'page' : undefined}>
            {i + 1}
          </Link>
        ))}
      </nav>
    </main>
  );
}

// app/blog/[slug]/page.tsx — one post, pre-rendered for every slug
import { notFound } from 'next/navigation';
import { getAllSlugs, getPost, t } from '@/lib/blog';

type Props = { params: Promise<{ slug: string }> };

export async function generateStaticParams() {
  const slugs = await getAllSlugs();
  return slugs.map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: Props) {
  // the same fetch as in the page — Next.js deduplicates it
  const post = await getPost((await params).slug);
  return { title: post ? t(post.title) : 'Post not found' };
}

export default async function PostPage({ params }: Props) {
  const post = await getPost((await params).slug);
  if (!post) notFound();

  return (
    <article>
      <h1>{t(post.title)}</h1>
      {post.author && <p>By {post.author}</p>}
      <div className="prose" dangerouslySetInnerHTML={{ __html: t(post.body) }} />
    </article>
  );
}