@decocms/apps-blog 8.0.0 → 8.1.0-next.0

package/src/sections/blocks/CardGroup.tsx

@@ -0,0 +1,60 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+type Card = { icon?: string; title: string; body: string };
+
+export type Props = {
+  /** JSON-encoded Card[] (max 3) */
+  cards: Card[] | string;
+};
+
+const GRID_CLASS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+};
+
+export default function CardGroup({ cards }: Props) {
+  let items: Card[] = [];
+
+  if (Array.isArray(cards)) {
+    items = cards;
+  } else if (typeof cards === "string") {
+    try {
+      const parsed = JSON.parse(cards);
+      if (Array.isArray(parsed)) items = parsed;
+    } catch {
+      /* ignore */
+    }
+  }
+
+  const clamped = items.slice(0, 3);
+  const gridCols = GRID_CLASS[clamped.length] ?? GRID_CLASS[3];
+
+  return (
+    <div className={`grid gap-4 my-10 ${gridCols}`}>
+      {clamped.map((card, i) => (
+        <div
+          key={i}
+          className="flex flex-col gap-3 p-6 sm:p-8 bg-alt border border-line rounded-brand transition-shadow hover:shadow-brand"
+        >
+          {card.icon && (
+            <div
+              className="flex items-center justify-center w-9 h-9 text-lg bg-base border border-line rounded-brand-sm flex-shrink-0 leading-none"
+              aria-hidden="true"
+            >
+              {card.icon}
+            </div>
+          )}
+          <strong
+            className="text-[1.0625rem] font-semibold leading-snug"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(card.title) }}
+          />
+          <p
+            className="text-sm leading-normal [text-wrap:pretty] m-0"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(card.body) }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/sections/blocks/Checklist.tsx

@@ -0,0 +1,58 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+export type Props = {
+  title?: string;
+  /** JSON-encoded string[] */
+  items: string;
+};
+
+export default function Checklist({ title, items }: Props) {
+  let list: string[] = [];
+  try {
+    const parsed = JSON.parse(items ?? "[]");
+    if (Array.isArray(parsed)) list = parsed;
+  } catch {
+    /* ignore */
+  }
+
+  return (
+    <div className="my-6">
+      {title && (
+        <h3 className="font-display text-[var(--text-xl)] font-normal tracking-snug mb-4">
+          {title}
+        </h3>
+      )}
+      <ul className="list-none p-0 m-0">
+        {list.map((item, i) => (
+          <li
+            key={i}
+            className="flex items-start gap-3 py-3.5 border-b border-line-subtle first:border-t first:border-line-subtle"
+          >
+            <span
+              className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-accent mt-[1px]"
+              aria-hidden="true"
+            >
+              <svg
+                aria-hidden="true"
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </span>
+            <span
+              className="text-[1.0625rem] leading-normal [&_a]:text-accent [&_strong]:font-semibold [&_strong]:text-base"
+              dangerouslySetInnerHTML={{ __html: sanitizeHtml(item) }}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/sections/blocks/Code.tsx

@@ -0,0 +1,29 @@
+export type Props = {
+  code: string;
+  language?: string;
+  filename?: string;
+};
+
+export default function Code({ code, language, filename }: Props) {
+  return (
+    <div className="my-6 bg-alt border border-line rounded-brand overflow-hidden text-sm">
+      {(filename || language) && (
+        <div className="flex items-center justify-between px-5 py-2.5 border-b border-line bg-inset">
+          {filename ? (
+            <span className="font-mono text-xs text-secondary">{filename}</span>
+          ) : (
+            <span />
+          )}
+          {language && (
+            <span className="text-xs font-semibold tracking-caps uppercase text-muted">
+              {language}
+            </span>
+          )}
+        </div>
+      )}
+      <pre className="p-5 overflow-x-auto m-0 bg-transparent border-0 leading-[1.75]">
+        <code className="font-mono text-sm bg-transparent p-0 whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/sections/blocks/Comparison.tsx

@@ -0,0 +1,77 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+type Col = { title: string; items: string[] };
+
+export type Props = {
+  /** JSON-encoded Col */
+  left: string;
+  /** JSON-encoded Col */
+  right: string;
+};
+
+export default function Comparison({ left, right }: Props) {
+  let leftCol: Col = { title: "Option A", items: [] };
+  let rightCol: Col = { title: "Option B", items: [] };
+  try {
+    const parsed = JSON.parse(left ?? "{}");
+    leftCol = {
+      title: typeof parsed?.title === "string" ? parsed.title : "Option A",
+      items: Array.isArray(parsed?.items) ? parsed.items : [],
+    };
+  } catch {
+    /* ignore */
+  }
+  try {
+    const parsed = JSON.parse(right ?? "{}");
+    rightCol = {
+      title: typeof parsed?.title === "string" ? parsed.title : "Option B",
+      items: Array.isArray(parsed?.items) ? parsed.items : [],
+    };
+  } catch {
+    /* ignore */
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-px bg-line border border-line rounded-brand my-8 overflow-hidden">
+      {/* Left column — pros */}
+      <div className="bg-base p-5 sm:p-6">
+        <div className="text-xs font-semibold tracking-caps uppercase pb-4 border-b-2 border-line mb-4">
+          {leftCol.title}
+        </div>
+        <ul className="list-none p-0 m-0 flex flex-col gap-3">
+          {leftCol.items.map((item, j) => (
+            <li key={j} className="flex items-start gap-2.5 text-sm leading-snug">
+              <span
+                className="flex-shrink-0 text-emerald-500 font-bold mt-px leading-none"
+                aria-hidden="true"
+              >
+                ✓
+              </span>
+              <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(item) }} />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Right column — cons */}
+      <div className="bg-alt p-5 sm:p-6">
+        <div className="text-xs font-semibold tracking-caps uppercase pb-4 border-b-2 border-line mb-4">
+          {rightCol.title}
+        </div>
+        <ul className="list-none p-0 m-0 flex flex-col gap-3">
+          {rightCol.items.map((item, j) => (
+            <li key={j} className="flex items-start gap-2.5 text-sm leading-snug">
+              <span
+                className="flex-shrink-0 text-tertiary font-bold mt-px leading-none"
+                aria-hidden="true"
+              >
+                ✕
+              </span>
+              <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(item) }} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/sections/blocks/Cta.tsx

@@ -0,0 +1,22 @@
+import { sanitizeHref } from "../../utils/sanitizeHtml";
+
+export type Props = {
+  text: string;
+  href?: string;
+};
+
+export default function Cta({ text, href }: Props) {
+  const safeHref = sanitizeHref(href);
+  const isExternal = /^https?:\/\//i.test(safeHref);
+  return (
+    <div className="my-8 text-center">
+      <a
+        href={safeHref}
+        {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+        className="inline-block py-[0.75em] px-[2em] rounded-full bg-accent text-inverted font-semibold text-sm tracking-[0.02em] no-underline transition-opacity hover:opacity-85"
+      >
+        {text}
+      </a>
+    </div>
+  );
+}

package/src/sections/blocks/Divider.tsx

@@ -0,0 +1,3 @@
+export default function Divider() {
+  return <hr className="border-none h-px bg-line my-12" />;
+}

package/src/sections/blocks/Heading.tsx

@@ -0,0 +1,28 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+export type Props = {
+  text: string;
+  level?: string;
+};
+
+const styles: Record<string, string> = {
+  h2: "font-display font-semibold text-2xl tracking-snug leading-tight mt-10 mb-4 break-words [text-wrap:balance] uppercase",
+  h3: "font-display font-semibold text-xl tracking-snug leading-snug mt-8 mb-3 break-words [text-wrap:balance] uppercase",
+  h4: "font-display font-semibold text-lg leading-snug mt-7 mb-2 break-words uppercase",
+};
+
+export default function Heading({ text, level }: Props) {
+  const tag =
+    level === "3" || level === "h3" ? "h3" : level === "4" || level === "h4" ? "h4" : "h2";
+
+  const cls = styles[tag] ?? styles.h2;
+
+  const safe = sanitizeHtml(text);
+  if (tag === "h3") {
+    return <h3 className={cls} dangerouslySetInnerHTML={{ __html: safe }} />;
+  }
+  if (tag === "h4") {
+    return <h4 className={cls} dangerouslySetInnerHTML={{ __html: safe }} />;
+  }
+  return <h2 className={cls} dangerouslySetInnerHTML={{ __html: safe }} />;
+}

package/src/sections/blocks/List.tsx

@@ -0,0 +1,39 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+export type Props = {
+  items: string;
+  style?: "ordered" | "unordered";
+};
+
+export default function List({ items, style }: Props) {
+  const entries = items.split("\n").filter(Boolean);
+  const ordered = style === "ordered";
+
+  const baseClass = "pl-6 my-4 text-[1.0625rem] leading-[1.75] space-y-2";
+
+  if (ordered) {
+    return (
+      <ol className={`list-decimal ${baseClass}`}>
+        {entries.map((item, i) => (
+          <li
+            key={i}
+            className="pl-1.5 marker:text-muted [&_a]:text-accent [&_strong]:font-semibold [&_strong]:text-base"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(item) }}
+          />
+        ))}
+      </ol>
+    );
+  }
+
+  return (
+    <ul className={`list-disc ${baseClass}`}>
+      {entries.map((item, i) => (
+        <li
+          key={i}
+          className="pl-1.5 marker:text-muted [&_a]:text-accent [&_strong]:font-semibold [&_strong]:text-base"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(item) }}
+        />
+      ))}
+    </ul>
+  );
+}

package/src/sections/blocks/Paragraph.tsx

@@ -0,0 +1,15 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+export type Props = {
+  html?: string;
+  text?: string;
+};
+
+export default function Paragraph({ html, text }: Props) {
+  return (
+    <p
+      className="text-[1.0625rem] leading-[1.75] break-words [text-wrap:pretty] [&_a]:text-accent [&_a]:underline [&_a]:underline-offset-[3px] [&_a]:decoration-[1px] hover:[&_a]:decoration-[2px] [&_strong]:font-semibold [&_strong]:text-base"
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(html ?? text ?? "") }}
+    />
+  );
+}

package/src/sections/blocks/Quote.tsx

@@ -0,0 +1,32 @@
+export type Props = {
+  quote?: string;
+  text?: string;
+  attribution?: string;
+  source?: string;
+};
+
+export default function Quote({ quote, text, attribution, source }: Props) {
+  return (
+    <blockquote className="relative px-10 py-10 sm:px-12 sm:py-12 bg-alt border-l-4 border-accent rounded-brand my-10 overflow-hidden">
+      {/* oversized decorative quotation mark */}
+      <span
+        className="pointer-events-none select-none absolute bottom-[-0.45em] right-10 font-display text-[20rem] sm:text-[28rem] leading-none text-accent opacity-[0.07]"
+        aria-hidden="true"
+      >
+        &ldquo;
+      </span>
+
+      <p className="relative font-display text-[var(--text-xl)] sm:text-[var(--text-2xl)] italic leading-snug m-0 [text-wrap:pretty]">
+        {quote ?? text}
+      </p>
+
+      {(attribution || source) && (
+        <footer className="relative mt-5 text-sm text-tertiary not-italic flex items-center gap-1.5">
+          <span className="block w-5 h-px bg-current opacity-50" aria-hidden="true" />
+          {attribution && <cite className="not-italic">{attribution}</cite>}
+          {source && <span>{source}</span>}
+        </footer>
+      )}
+    </blockquote>
+  );
+}

package/src/sections/blocks/Stat.tsx

@@ -0,0 +1,23 @@
+export type Props = {
+  value: string;
+  label?: string;
+  description?: string;
+};
+
+export default function Stat({ value, label, description }: Props) {
+  return (
+    <div className="flex flex-col items-center text-center py-12 px-8 border-y-2 border-primary/20 my-10">
+      <div className="font-display text-[var(--text-5xl)] leading-none text-accent tracking-display tabular-nums">
+        {value}
+      </div>
+      {label && (
+        <div className="text-xs font-semibold tracking-caps uppercase text-muted mt-4">{label}</div>
+      )}
+      {description && (
+        <p className="text-sm text-tertiary leading-normal max-w-[40ch] mt-3 [text-wrap:pretty] m-0">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/sections/blocks/StatGroup.tsx

@@ -0,0 +1,38 @@
+type StatItem = { value: string; label: string };
+
+export type Props = {
+  /** JSON-encoded StatItem[] (max 3) */
+  stats: string;
+};
+
+const GRID_CLASS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+};
+
+export default function StatGroup({ stats }: Props) {
+  let items: StatItem[] = [];
+  try {
+    const parsed = JSON.parse(stats ?? "[]");
+    if (Array.isArray(parsed)) items = parsed;
+  } catch {
+    /* ignore */
+  }
+
+  const clamped = items.slice(0, 3);
+  const gridCols = GRID_CLASS[clamped.length] ?? GRID_CLASS[3];
+
+  return (
+    <div className={`grid gap-4 my-10 ${gridCols}`}>
+      {clamped.map((stat, i) => (
+        <div key={i} className="p-7 sm:p-8 border-[1.5px] border-line rounded-brand">
+          <div className="font-display text-[var(--text-4xl)] font-bold leading-none text-accent tracking-display mb-3 tabular-nums">
+            {stat.value}
+          </div>
+          <div className="text-sm leading-normal [text-wrap:pretty]">{stat.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/sections/blocks/Steps.tsx

@@ -0,0 +1,64 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+type Step = { title: string; description?: string };
+
+export type Props = {
+  title?: string;
+  /** JSON-encoded Step[] */
+  steps: string;
+};
+
+export default function Steps({ title, steps }: Props) {
+  let list: Step[] = [];
+  try {
+    const parsed = JSON.parse(steps ?? "[]");
+    if (Array.isArray(parsed)) list = parsed;
+  } catch {
+    /* ignore */
+  }
+
+  return (
+    <div className="my-8">
+      {title && (
+        <h3 className="font-display text-xl font-semibold uppercase tracking-snug mb-6">{title}</h3>
+      )}
+      <ol className="list-none p-0 m-0 flex flex-col">
+        {list.map((step, i) => (
+          <li key={i} className="grid grid-cols-[48px_1fr] gap-5 pb-8 relative">
+            {/* connector line — -bottom-8 matches the pb-8 gap so the line bridges into the next step's number box */}
+            {i < list.length - 1 && (
+              <span
+                className="absolute left-6 -translate-x-1/2 top-12 -bottom-8 w-px bg-accent z-0"
+                aria-hidden="true"
+              />
+            )}
+
+            {/* number box */}
+            <div
+              className="relative z-[1] w-12 h-12 flex-shrink-0 flex items-center justify-center border-2 border-accent bg-base text-accent font-semibold text-lg leading-none"
+              aria-hidden="true"
+            >
+              {i + 1}
+            </div>
+
+            {/* content */}
+            <div className="min-w-0 pt-2.5">
+              <strong
+                className="font-semibold leading-snug block mb-1.5 [&_a]:text-inherit [&_a]:no-underline"
+                dangerouslySetInnerHTML={{ __html: sanitizeHtml(step.title) }}
+              />
+              {step.description && (
+                <p
+                  className="text-sm leading-normal m-0 [&_a]:text-accent [&_a]:underline"
+                  dangerouslySetInnerHTML={{
+                    __html: sanitizeHtml(step.description),
+                  }}
+                />
+              )}
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

package/src/sections/blocks/Table.tsx

@@ -0,0 +1,80 @@
+import { hardSanitize } from "../../utils/hardSanitize";
+
+export type Props = {
+  /** JSON-encoded string[] — optional header row */
+  headers?: string[] | string;
+  /** JSON-encoded string[][] — body rows × cells */
+  rows?: string[][] | string;
+};
+
+function parseHeaders(value: string[] | string | undefined): string[] {
+  if (Array.isArray(value)) return value.map((c) => String(c ?? ""));
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) return parsed.map((c) => String(c ?? ""));
+    } catch {
+      /* ignore */
+    }
+  }
+  return [];
+}
+
+function parseRows(value: string[][] | string | undefined): string[][] {
+  const toRow = (row: unknown): string[] =>
+    Array.isArray(row) ? row.map((c) => String(c ?? "")) : [];
+
+  if (Array.isArray(value)) return value.map(toRow);
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) return parsed.map(toRow);
+    } catch {
+      /* ignore */
+    }
+  }
+  return [];
+}
+
+export default function Table({ headers, rows }: Props) {
+  const head = parseHeaders(headers);
+  const body = parseRows(rows);
+
+  if (head.length === 0 && body.length === 0) return null;
+
+  const cellClass =
+    "px-4 py-3 text-sm leading-normal align-top [&_a]:text-accent [&_a]:underline [&_strong]:font-semibold [&_strong]:text-base";
+
+  return (
+    <div className="my-8 border border-line rounded-brand overflow-x-auto">
+      <table className="w-full border-collapse text-left">
+        {head.length > 0 && (
+          <thead>
+            <tr className="bg-alt">
+              {head.map((cell, i) => (
+                <th
+                  key={i}
+                  className="px-4 py-3 text-xs font-semibold tracking-caps uppercase border-b-2 border-line"
+                  dangerouslySetInnerHTML={{ __html: hardSanitize(cell) }}
+                />
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {body.map((row, r) => (
+            <tr key={r} className="border-b border-line-subtle last:border-b-0">
+              {row.map((cell, c) => (
+                <td
+                  key={c}
+                  className={cellClass}
+                  dangerouslySetInnerHTML={{ __html: hardSanitize(cell) }}
+                />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/sections/blocks/Video.tsx

@@ -0,0 +1,39 @@
+export type Props = {
+  url: string;
+  caption?: string;
+};
+
+function resolveEmbedSrc(raw: string): string | null {
+  const ytMatch = raw.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+
+  const vimeoMatch = raw.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+
+  // Reject anything that didn't match a trusted provider.
+  return null;
+}
+
+export default function Video({ url, caption }: Props) {
+  const src = resolveEmbedSrc(url ?? "");
+
+  if (!src) return null;
+
+  return (
+    <figure className="my-8">
+      <div className="relative aspect-video overflow-hidden bg-alt">
+        <iframe
+          src={src}
+          className="absolute inset-0 w-full h-full border-0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          loading="lazy"
+          title={caption ?? "Video"}
+        />
+      </div>
+      {caption && (
+        <figcaption className="text-sm text-tertiary text-center mt-3 italic">{caption}</figcaption>
+      )}
+    </figure>
+  );
+}