Block types and their content format

{
  "id": 95,
  "marker": "hero_title",
  "name": "Hero title",
  "type": "text",
  "multilang": true,
  "updatedAt": "2026-09-20T16:33:23.000Z",
  "content": { "en": "Earbuds that mute the city", "de": "Kopfhörer, die die Stadt leise machen" }
}

{ "en": "Earbuds that mute the city", "de": "Kopfhörer, die die Stadt leise machen" }

<h1>{t(block.content, lang, defaultLang)}</h1>

{
  "en": "<p>Free delivery on orders over <strong>$50</strong>.</p><ul><li>1–3 days</li><li>Tracking included</li></ul>",
  "de": "<p>Kostenloser Versand ab <strong>50 $</strong>.</p>"
}

<div
  className="prose"
  dangerouslySetInnerHTML={{ __html: t(block.content, lang, defaultLang) }}
/>

{ "file": "https://cdn.example.com/storage/your-site/hero.jpg" }

{
  "multilang": true,
  "en": "https://cdn.example.com/storage/your-site/banner-en.jpg",
  "de": ""
}

const src = pickMedia(block.content, lang, defaultLang);

{src && <img src={src} alt={t(altBlock.content, lang, defaultLang)} />}

{ "file": "https://cdn.example.com/storage/your-site/promo.mp4" }

const src = pickMedia(block.content, lang, defaultLang);

{src && <video src={src} autoPlay muted loop playsInline />}

{
  "url": "https://example.com/pricing",
  "target": "_blank",
  "title": { "en": "See pricing", "de": "Preise ansehen" }
}

const { url, target, title } = block.content;

<a
  href={url}
  target={target}
  rel={target === '_blank' ? 'noopener noreferrer' : undefined}
>
  {t(title, lang, defaultLang)}
</a>

149

{block.content !== null && (
  <span className="price">{new Intl.NumberFormat(lang).format(block.content)}</span>
)}

"#3D3D5C"

<section style={{ background: block.content ?? '#ffffff' }}>…</section>

"2026-10-01"

{block.content && (
  <time dateTime={block.content}>
    {new Date(block.content).toLocaleDateString(lang, { timeZone: 'UTC' })}
  </time>
)}

{ "from": "2026-10-01", "to": "2026-10-07" }

const range = block.content;
const fmt = (d: string) => new Date(d).toLocaleDateString(lang, { timeZone: 'UTC' });

{range?.from && <p>{fmt(range.from)} – {range.to ? fmt(range.to) : '…'}</p>}

true

{(block.content ?? false) && <SaleBanner />}

"faq_section": {
  "type": "object",
  "content": {
    "title": { "en": "FAQ" },
    "items": [
      { "question": { "en": "How long is delivery?" }, "answer": { "en": "1–3 days." } },
      { "question": { "en": "Can I return it?" }, "answer": { "en": "Within 30 days." } }
    ]
  }
}

import { t, type Block, type LangMap, type ObjectValue, type RenderContext } from '@/lib/diil';

export function Faq(block: Block, { lang, fallback }: RenderContext) {
  if (block.type !== 'object') return null;
  const items = (block.content.items ?? []) as ObjectValue[];

  return (
    <section>
      <h2>{t(block.content.title as LangMap, lang, fallback)}</h2>
      {items.map((item, i) => (
        <details key={i}>
          <summary>{t(item.question as LangMap, lang, fallback)}</summary>
          <p>{t(item.answer as LangMap, lang, fallback)}</p>
        </details>
      ))}
    </section>
  );
}

[
  {
    "title": { "en": "Noise cancelling" },
    "text": { "en": "Up to 40 dB quieter." },
    "icon": { "file": "https://cdn.example.com/storage/your-site/anc.svg" }
  },
  {
    "title": { "en": "42 hours" },
    "text": { "en": "With the charging case." },
    "icon": { "file": "https://cdn.example.com/storage/your-site/battery.svg" }
  }
]

<ul className="features">
  {block.content.map((item, i) => (
    <li key={i}>
      <img src={pickMedia(item.icon as Media, lang, defaultLang)} alt="" />
      <h3>{t(item.title as LangMap, lang, defaultLang)}</h3>
      <p>{t(item.text as LangMap, lang, defaultLang)}</p>
    </li>
  ))}
</ul>

import type { ReactNode } from 'react';

/** One string per language code: { en: 'Hello', de: 'Hallo' } */
export type LangMap = Record<string, string>;

/** One file for every language */
export type SingleMedia = { file: string; multilang?: never };

/** A file per language; '' means "not uploaded yet" */
export type MultilangMedia = { multilang: true; [lang: string]: string | boolean };

export type Media = SingleMedia | MultilangMedia;

export type LinkValue = { url: string; target: '_self' | '_blank'; title: LangMap };

/** Comes back as entered in the CRM: log a real response before relying on it */
export type DateRange = { from?: string; to?: string };

/** A field inside an object block or an array item */
export type FieldValue =
  | string | number | boolean | null
  | LangMap | Media | LinkValue | DateRange
  | ObjectValue | ObjectValue[];

export type ObjectValue = { [field: string]: FieldValue };

type BlockOf<T extends string, C> = {
  id: number;
  marker: string;
  name: string;
  type: T;
  multilang: boolean;
  updatedAt: string;
  content: C;
};

export type Block =
  | BlockOf<'text', LangMap>
  | BlockOf<'html', LangMap>
  | BlockOf<'image', Media>
  | BlockOf<'video', Media>
  | BlockOf<'link', LinkValue>
  | BlockOf<'number', number | null>
  | BlockOf<'color', string | null>
  | BlockOf<'date', string | null>
  | BlockOf<'date_range', DateRange | null>
  | BlockOf<'boolean', boolean | null>
  | BlockOf<'object', ObjectValue>
  | BlockOf<'array', ObjectValue[]>;

export type RenderContext = {
  lang: string;
  /** The site default: the first language from /v1/langs */
  fallback?: string;
  /** Your components for object and array blocks, keyed by block marker */
  components?: Record<string, (block: Block, ctx: RenderContext) => ReactNode>;
};

/** Requested language → fallback language → first non-empty translation → '' */
export function t(map: LangMap | null | undefined, lang: string, fallback?: string): string {
  if (!map) return '';
  const own = map[lang];
  if (own) return own;
  const backup = fallback ? map[fallback] : '';
  if (backup) return backup;
  return Object.values(map).find((value) => value !== '') ?? '';
}

/** URL of an image or video for the language, or '' */
export function pickMedia(media: Media | null | undefined, lang: string, fallback?: string): string {
  if (!media) return '';
  if (!media.multilang) return media.file || '';

  const files: LangMap = {};
  for (const [key, value] of Object.entries(media)) {
    if (key !== 'multilang' && typeof value === 'string') files[key] = value;
  }
  return t(files, lang, fallback);
}

const isRecord = (value: unknown): value is Record<string, unknown> =>
  typeof value === 'object' && value !== null && !Array.isArray(value);

/** Shape sniffing for fields inside objects: the response has no schema */
export const isLink = (value: unknown): value is LinkValue =>
  isRecord(value) && typeof value.url === 'string' && isRecord(value.title);

export const isMedia = (value: unknown): value is Media =>
  isRecord(value) && (typeof value.file === 'string' || value.multilang === true);

function formatDate(value: string, lang: string): string {
  const date = new Date(value);
  // '2026-10-01' is parsed as UTC midnight, so format in UTC too,
  // otherwise visitors west of Greenwich see the previous day
  return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString(lang, { timeZone: 'UTC' });
}

export function renderBlock(block: Block, ctx: RenderContext): ReactNode {
  const { lang, fallback } = ctx;

  switch (block.type) {
    case 'text':
      return t(block.content, lang, fallback) || null;

    case 'html': {
      const html = t(block.content, lang, fallback);
      return html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : null;
    }

    case 'image': {
      const src = pickMedia(block.content, lang, fallback);
      // alt text is content too: keep it in a text block next to the image
      return src ? <img src={src} alt="" /> : null;
    }

    case 'video': {
      const src = pickMedia(block.content, lang, fallback);
      return src ? <video src={src} controls playsInline /> : null;
    }

    case 'link': {
      const { url, target, title } = block.content;
      if (!url) return null;
      return (
        <a href={url} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
          {t(title, lang, fallback) || url}
        </a>
      );
    }

    case 'number':
      return block.content === null ? null : new Intl.NumberFormat(lang).format(block.content);

    case 'date':
      return block.content ? formatDate(block.content, lang) : null;

    case 'date_range': {
      const range = block.content;
      if (!range?.from) return null;
      const from = formatDate(range.from, lang);
      return range.to ? from + ' – ' + formatDate(range.to, lang) : from;
    }

    case 'color':
    case 'boolean':
      // Settings, not text: read block.content in your styles and conditions
      return null;

    case 'object':
    case 'array': {
      const render = ctx.components?.[block.marker];
      return render ? render(block, ctx) : null;
    }

    default: {
      // Compile time: every type is handled. Run time: a new type renders nothing
      const unknownBlock: never = block;
      void unknownBlock;
      return null;
    }
  }
}

import { renderBlock, type Block, type RenderContext } from '@/lib/diil';
import { Faq } from '@/components/Faq';

export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const res = await fetch('https://back.sitecog.com/content/v1/pages/home', {
    headers: { 'x-crm-key': process.env.CRM_KEY! },
    next: { revalidate: 60 },
  });
  const page = await res.json();

  const hero: Record<string, Block> = page.content.hero.content;
  const faq: Record<string, Block> = page.content.faq.content;
  const ctx: RenderContext = {
    lang,
    fallback: 'en', // the site default: the first language from /v1/langs
    components: { faq_section: Faq },
  };

  return (
    <main>
      <h1>{renderBlock(hero.hero_title, ctx)}</h1>
      {renderBlock(hero.hero_image, ctx)}
      {renderBlock(faq.faq_section, ctx)}
    </main>
  );
}