Kanorio Elements

npm install @kanorio/sdk @kanorio/elements
npx @kanorio/cli types --site https://s-xxx.kanorio.com --out src/kanorio.d.ts
npx @kanorio/cli doctor --site https://s-xxx.kanorio.com

<link rel="stylesheet" href="https://cdn.kanorio.com/elements/v1/elements.css">
<script type="module" src="https://cdn.kanorio.com/elements/v1/kanorio-elements.js"></script>

<kanorio-analytics site-url="https://s-xxx.kanorio.com"></kanorio-analytics>
<kanorio-login site-url="https://s-xxx.kanorio.com" site-name="Demo"></kanorio-login>
<kanorio-curriculum site-url="https://s-xxx.kanorio.com" product="react-course"></kanorio-curriculum>
<kanorio-unit site-url="https://s-xxx.kanorio.com" deliverable="react-course"></kanorio-unit>

import { KanorioProvider, KanorioAnalytics, KanorioLogin, KanorioUnit } from "@kanorio/elements";
import { createDeliveryClient, createRevalidateHandler, seoRewrites } from "@kanorio/sdk";
import "@kanorio/elements/elements.css";

// 1. next.config.ts: rewrite /sitemap.xml, /robots.txt, /llms.txt, /feed.xml -> Kanorio Delivery API
// rewrites: async () => seoRewrites({ siteUrl: process.env.KANORIO_SITE_URL!, framework: "next" })

// 2. app/api/revalidate/route.ts: verify the X-Kanorio-Signature (t=…,v1=…) webhook header & call revalidateTag(cacheTags)
// export const POST = createRevalidateHandler({ signingSecret: process.env.KANORIO_WEBHOOK_SECRET!, revalidateTag });

// 3. Pure REST fallback (no SDK required):
// curl https://s-xxx.kanorio.com/api/v1/collections/blog/items?expand=authors,categories
// curl https://s-xxx.kanorio.com/api/v1/seo/jsonld?path=/about

// 4. <KanorioAnalytics /> reports every client-side navigation (pushState / replaceState / popstate) automatically.
//    Add your storefront origin to Settings → Developer → Allowed origins, or the browser will block the beacon.
<KanorioProvider siteUrl="https://s-xxx.kanorio.com" locale="en" theme="auto">
  <KanorioAnalytics />
  <KanorioLogin siteName="Demo" />
  <KanorioUnit deliverable="react-course" onProgress={(e) => console.log(e)} />
</KanorioProvider>

// 1. Next.js Draft Mode & Astro preview route handler (@kanorio/sdk/preview)
// app/api/draft/route.ts — verifies knr_pv_ token format & signature against Delivery API,
// blocks open redirects, sets HttpOnly "kanorio_preview" cookie, and 307 redirects.
import { draftMode } from "next/headers";
import { createPreviewRouteHandler, tokenFromCookieHeader, previewHeaders } from "@kanorio/sdk/preview";

export const GET = createPreviewRouteHandler({
  siteUrl: process.env.NEXT_PUBLIC_KANORIO_SITE_URL,
  enableDraftMode: async () => (await draftMode()).enable(),
});

// In a Server Component when reading drafts:
// const token = tokenFromCookieHeader( requestHeaders.get("cookie") ) ?? process.env.KANORIO_PREVIEW_TOKEN;
// fetch(url, { headers: previewHeaders(token!), cache: "no-store" });

// 2. Custom headless form UI helpers (@kanorio/sdk/forms)
import { createFormsHelpers } from "@kanorio/sdk/forms";

const formsApi = createFormsHelpers({ siteUrl: "https://s-xxx.kanorio.com" });
const schema = await formsApi.get("form_contact");
const challenge = await formsApi.challenge("form_contact");
// Optional private file upload ticket: await formsApi.requestUpload("form_contact", { fieldId, fileName, mimeType, fileSize });
const result = await formsApi.submit("form_contact", {
  answers: { name: "Alex", email: "alex@example.com" },
  protection: challenge,
  consent: "checked",
});

// 3. Edge crawler firewall, 301/302 redirects & bot-hit telemetry (@kanorio/sdk/edge)
// proxy.ts (Next.js 16; on Next.js 15 name it middleware.ts and export `middleware`)
// Syncs crawlerRules.blockedTokens and /api/v1/redirects every 60s. Redirects match exact paths only.
import type { NextFetchEvent, NextRequest } from "next/server";
import { createKanorioMiddleware } from "@kanorio/sdk/edge";

const kanorioEdge = createKanorioMiddleware({
  siteUrl: process.env.NEXT_PUBLIC_KANORIO_SITE_URL!,
});

export function proxy(request: NextRequest, event: NextFetchEvent) {
  return kanorioEdge.handleRequest(request, event);
}

// Skip build assets so crawler fetches of JS/CSS are not reported as bot hits
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

# Types & External Storefront Health (no PAT required for public types)
npx @kanorio/cli types --site https://s-xxx.kanorio.com --out src/kanorio.d.ts
npx @kanorio/cli doctor --site <siteId> [--switching]

# Auth & Sites
npx @kanorio/cli login --token knr_pat_...
npx @kanorio/cli sites list | sites get <siteId>
npx @kanorio/cli sites create --name "Sunny Bakery" --locale en [--brief brief.json]
npx @kanorio/cli jobs get <jobId>

# Theme Settings, Globals (Header / Footer) & Pages
npx @kanorio/cli settings get <siteId> | settings update <siteId> --brand-color "#2563eb"
npx @kanorio/cli globals get <siteId> | globals replace-header <siteId> --file header.json
npx @kanorio/cli pages list <siteId> | pages get <siteId> <pageId>
npx @kanorio/cli pages create <siteId> --title "About" --slug /about
npx @kanorio/cli pages replace-sections <siteId> <pageId> --file sections.json
npx @kanorio/cli sections describe [type...] [--detail full]

# Publish, Custom Domains & Media
npx @kanorio/cli publish <siteId> [--subdomain sunny-bakery] | unpublish <siteId>
npx @kanorio/cli domains list <siteId> | domains status <siteId> | domains bind <siteId> example.com
npx @kanorio/cli media list <siteId> | media upload <siteId> --file ./hero.jpg