Showing posts on your site

// app/api/contentrails/route.ts
import { createHmac, timingSafeEqual } from "node:crypto";
import { deletePost, savePost } from "@/lib/posts"; // your own storage

export async function POST(req: Request) {
  // Verify against the raw body: re-serialising parsed JSON changes the bytes.
  const raw = await req.text();
  const timestamp = req.headers.get("x-contentrails-timestamp") ?? "";
  const signature = req.headers.get("x-contentrails-signature") ?? "";
  const expected = createHmac("sha256", process.env.CONTENTRAILS_SECRET!).update(`${timestamp}.${raw}`).digest("hex");
  const fresh = Math.abs(Date.now() / 1000 - Number(timestamp)) < 300;
  if (!fresh || signature.length !== expected.length || !timingSafeEqual(Buffer.from(signature), Buffer.from(expected))) {
    return new Response("Bad signature", { status: 401 });
  }

  const post = JSON.parse(raw);
  if (post.event === "post.unpublished" || post.event === "post.deleted") {
    await deletePost(post.postId);
  } else {
    // Keyed by postId: "post.updated" sends the same id, so this replaces the old version.
    await savePost({
      id: post.postId,
      title: post.title,
      excerpt: post.excerpt,
      html: post.html,
      cardsScript: post.cardsScript,
      translations: post.translations,
      jsonLd: post.jsonLd,
    });
  }
  return Response.json({ ok: true });
}

// app/blog/[slug]/page.tsx
import Script from "next/script";
import { notFound } from "next/navigation";
import { getPost } from "@/lib/posts";

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const post = await getPost((await params).slug);
  if (!post) notFound();
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
      {post.cardsScript && <Script src={post.cardsScript} strategy="afterInteractive" />}
    </article>
  );
}

import { useEffect } from "react";

// Loads the cards script once. It also picks up posts rendered later,
// so client-side navigation between posts needs nothing extra.
function useCardsScript(src: string | null) {
  useEffect(() => {
    if (!src || document.querySelector(`script[src="${src}"]`)) return;
    const script = document.createElement("script");
    script.src = src;
    script.defer = true;
    document.head.appendChild(script);
  }, [src]);
}

export function Post({ post }: { post: { title: string; html: string; cardsScript: string | null } }) {
  useCardsScript(post.cardsScript);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

<!-- Custom HTML block: paste the value of "html" -->
<div class="cr-post" lang="en" data-cr-version="1"><style>…</style>…</div>

<!-- Only when "cardsScript" isn't null -->
<script src="https://contentrails.ai/cards/v1.js" defer></script>

<?php
/* wp-content/mu-plugins/contentrails.php
   Publish URL: https://your-site.com/wp-json/contentrails/v1/posts
   In wp-config.php: define('CONTENTRAILS_SECRET', 'your signing secret'); */

add_action('rest_api_init', function () {
  register_rest_route('contentrails/v1', '/posts', [
    'methods' => 'POST',
    'permission_callback' => '__return_true', // the signature check below is the auth
    'callback' => function (WP_REST_Request $req) {
      $raw = $req->get_body();
      $ts = (string) $req->get_header('x-contentrails-timestamp');
      $sig = (string) $req->get_header('x-contentrails-signature');
      $expected = hash_hmac('sha256', $ts . '.' . $raw, CONTENTRAILS_SECRET);
      if (!hash_equals($expected, $sig) || abs(time() - (int) $ts) > 300) {
        return new WP_Error('bad_signature', 'Bad signature', ['status' => 401]);
      }

      $p = json_decode($raw, true);
      $found = get_posts(['post_status' => 'any', 'meta_key' => 'contentrails_id', 'meta_value' => $p['postId'], 'numberposts' => 1, 'fields' => 'ids']);
      $id = $found[0] ?? 0;

      if ($p['event'] === 'post.deleted') {
        if ($id) wp_delete_post($id, true);
        return ['ok' => true];
      }
      if ($p['event'] === 'post.unpublished') {
        if ($id) wp_update_post(['ID' => $id, 'post_status' => 'draft']);
        return ['ok' => true];
      }

      kses_remove_filters(); // KSES would strip <style>, <input> and <details>
      $id = wp_insert_post(wp_slash([
        'ID' => $id,
        'post_author' => 1, // the user these posts appear under
        'post_title' => $p['title'],
        'post_excerpt' => $p['excerpt'],
        // A Custom HTML block: the editor keeps it as-is and wpautop leaves it alone.
        'post_content' => "<!-- wp:html -->\n" . $p['html'] . "\n<!-- /wp:html -->",
        'post_status' => 'publish',
        'meta_input' => ['contentrails_id' => $p['postId'], 'contentrails_cards_script' => $p['cardsScript'] ?? ''],
      ]), true);
      kses_init_filters();
      return is_wp_error($id) ? $id : ['ok' => true, 'id' => $id];
    },
  ]);
});

// Load the cards script on the posts that need it.
add_action('wp_enqueue_scripts', function () {
  $src = is_singular() ? get_post_meta(get_the_ID(), 'contentrails_cards_script', true) : '';
  if ($src) wp_enqueue_script('contentrails-cards', $src, [], null, ['strategy' => 'defer']);
});

<!-- Site settings → Custom code → Footer code
     (or the Collection template page's own "Before </body> tag") -->
<script src="https://contentrails.ai/cards/v1.js" defer></script>

import GhostAdminAPI from "@tryghost/admin-api";

const ghost = new GhostAdminAPI({ url: "https://your-site.com", key: process.env.GHOST_ADMIN_KEY, version: "v5.0" });

// Inside your webhook receiver, after checking the signature:
await ghost.posts.add(
  {
    title: post.title,
    custom_excerpt: post.excerpt,
    // The kg-card comments keep the html as one HTML card instead of converting it.
    html: `<!--kg-card-begin: html-->${post.html}<!--kg-card-end: html-->`,
    codeinjection_foot: post.cardsScript ? `<script src="${post.cardsScript}" defer></script>` : null,
    status: "published",
  },
  { source: "html" },
);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How much storage do a blog's images need?</title>
</head>
<body>
  <article>
    <h1>How much storage do a blog's images need?</h1>
    <!-- The value of "html", pasted as-is -->
    <div class="cr-post" lang="en" data-cr-version="1"><style>…</style>…</div>
  </article>

  <!-- Only when "cardsScript" isn't null -->
  <script src="https://contentrails.ai/cards/v1.js" defer></script>
</body>
</html>

<!-- Astro -->
<Fragment set:html={post.html} />

<!-- Hugo (html stored in the page's front matter) -->
{{ .Params.html | safeHTML }}

<!-- Eleventy / Nunjucks -->
{{ post.html | safe }}

import DOMPurify from "dompurify";

// FORCE_BODY keeps the leading <style>; inputs, labels, <details> and data-* survive the defaults.
const clean = DOMPurify.sanitize(post.html, { FORCE_BODY: true });

Content-Security-Policy:
  script-src 'self' https://contentrails.ai;
  style-src 'self' 'unsafe-inline';

// Without 'unsafe-inline' in style-src, give the post's <style> your page's nonce:
const html = post.html.replace("<style>", `<style nonce="${nonce}">`);