@dsbasko/cookbook-engine 0.1.0

package/src/lib/mdx-plugins/remark-link-rewrite.ts

@@ -0,0 +1,231 @@
+import path from 'node:path';
+import type { Course } from '../course';
+import { DEFAULT_LANG, isLang, type Lang } from '../lang';
+
+export interface RemarkLinkRewriteOptions {
+  moduleId: string;
+  slug: string;
+  basePath: string;
+  course: Course;
+  /**
+   * Active route language — the `/<lang>/` prefix stamped on emitted site URLs.
+   * Defaults to {@link DEFAULT_LANG}.
+   */
+  lang?: Lang;
+  /**
+   * Language of the source README being processed — used to resolve the
+   * `i18n/<sourceLang>/` directory the relative links are anchored to. Defaults
+   * to {@link lang}. Decoupled from `lang` so an EN route falling back to the
+   * RU README can keep emitting `/en/...` URLs while still anchoring source
+   * resolution at `i18n/ru/`.
+   */
+  sourceLang?: Lang;
+  /**
+   * Absolute path to the lectures root (the directory that contains
+   * `<moduleId>/<slug>/README.md`). Optional — defaults to the path that
+   * `course-loader` uses (`<repo-root>/lectures`). Tests pass a synthetic root.
+   */
+  lecturesRoot?: string;
+}
+
+interface LinkNode {
+  type: 'link' | 'linkReference' | 'definition';
+  url?: string;
+  data?: {
+    hProperties?: Record<string, unknown>;
+  } & Record<string, unknown>;
+  children?: AstNode[];
+}
+
+interface ParentNode {
+  type: string;
+  children?: AstNode[];
+}
+
+type AstNode = LinkNode | ParentNode;
+
+const EXTERNAL_PROTOCOL_RE = /^[a-z][a-z0-9+.-]*:\/\//i;
+const PASS_THROUGH_PROTOCOL_RE = /^(?:mailto:|tel:|data:)/i;
+const IMAGE_EXT_RE = /\.(?:png|jpe?g|gif|svg|webp|avif|ico)(?:[?#]|$)/i;
+
+/**
+ * Pure rewrite logic, exported for unit tests. Returns the new url plus a flag
+ * indicating whether the link should be marked external in HAST.
+ */
+export function rewriteLessonLink(
+  rawUrl: string,
+  options: RemarkLinkRewriteOptions,
+): { url: string; external: boolean } {
+  const url = rawUrl.trim();
+
+  if (url.length === 0) {
+    return { url: rawUrl, external: false };
+  }
+
+  if (url.startsWith('#')) {
+    return { url, external: false };
+  }
+
+  if (EXTERNAL_PROTOCOL_RE.test(url)) {
+    return { url, external: true };
+  }
+
+  if (PASS_THROUGH_PROTOCOL_RE.test(url)) {
+    return { url, external: false };
+  }
+
+  if (!url.startsWith('./') && !url.startsWith('../')) {
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `is not allowed. Only relative links ("./", "../"), absolute URLs ` +
+        `(http(s)://, mailto:, tel:, data:) and "#anchor" are supported.`,
+    );
+  }
+
+  const [pathPart, hashPart = ''] = splitHash(url);
+  const lecturesRoot = options.lecturesRoot ?? '/lectures';
+  const lang = options.lang && isLang(options.lang) ? options.lang : DEFAULT_LANG;
+  const sourceLang =
+    options.sourceLang && isLang(options.sourceLang) ? options.sourceLang : lang;
+  const lessonDir = path.posix.join(
+    lecturesRoot,
+    options.moduleId,
+    options.slug,
+    'i18n',
+    sourceLang,
+  );
+  const resolved = path.posix.normalize(path.posix.join(lessonDir, pathPart));
+
+  if (!isInside(resolved, lecturesRoot)) {
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `escapes the lectures root (resolved to "${resolved}")`,
+    );
+  }
+
+  const relative = resolved.slice(lecturesRoot.length).replace(/^\/+/, '');
+  const segments = relative.split('/').filter(Boolean);
+
+  // Image / static asset under another lesson — leave as-is. The image plugin
+  // handles its own `image` nodes; <a href="…image">…</a> is a manual link and
+  // we don't want to break it.
+  if (IMAGE_EXT_RE.test(resolved)) {
+    return { url: rawUrl, external: false };
+  }
+
+  const isMarkdown = resolved.endsWith('.md');
+  const looksLikeLessonDir =
+    segments.length === 2 && pathPart.endsWith('/');
+  const looksLikeLessonReadme =
+    segments.length === 5 &&
+    segments[2] === 'i18n' &&
+    isLang(segments[3]) &&
+    segments[4] === 'README.md';
+
+  if (!isMarkdown && !looksLikeLessonDir) {
+    // Non-markdown file (e.g. "../foo.txt") — outside the supported subset.
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `points to a non-markdown, non-lesson resource ("${resolved}"). Only ` +
+        `lesson README.md and lesson directory links are supported.`,
+    );
+  }
+
+  if (isMarkdown && !looksLikeLessonReadme) {
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `points to "${segments.join('/')}". Only ` +
+        `"<module>/<slug>/i18n/<ru|en>/README.md" markdown links are supported.`,
+    );
+  }
+
+  const targetModuleId = segments[0];
+  const targetSlug = segments[1];
+
+  const moduleEntry = options.course.modules.find((m) => m.id === targetModuleId);
+  if (!moduleEntry) {
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `targets unknown module "${targetModuleId}" (not present in course.yaml)`,
+    );
+  }
+
+  const lessonEntry = moduleEntry.lessons.find((l) => l.slug === targetSlug);
+  if (!lessonEntry) {
+    throw new Error(
+      `remark-link-rewrite: link "${rawUrl}" in ${options.moduleId}/${options.slug} ` +
+        `targets unknown lesson "${targetModuleId}/${targetSlug}" ` +
+        `(not present in course.yaml)`,
+    );
+  }
+
+  const basePath = options.basePath.replace(/\/+$/, '');
+  const siteUrl = `${basePath}/${lang}/${targetModuleId}/${targetSlug}/${hashPart}`;
+  return { url: siteUrl, external: false };
+}
+
+export default function remarkLinkRewrite(options: RemarkLinkRewriteOptions) {
+  if (
+    !options ||
+    !options.moduleId ||
+    !options.slug ||
+    !options.course ||
+    typeof options.basePath !== 'string'
+  ) {
+    throw new Error(
+      'remark-link-rewrite: options.moduleId, options.slug, options.basePath and options.course are required',
+    );
+  }
+
+  return function transformer(tree: AstNode): void {
+    walk(tree, (node) => {
+      if (node.type !== 'link' && node.type !== 'definition') return;
+      const link = node as LinkNode;
+      if (typeof link.url !== 'string') return;
+
+      // mdast `definition` nodes are shared by image and link references.
+      // remark-lesson-images already rewrites image-targeted definitions to
+      // absolute asset paths (e.g. `/kafka-cookbook/static/lectures/.../foo.png`);
+      // those would fail rewriteLessonLink's relative-only check, so skip them.
+      // Link nodes still go through full validation — rewriteLessonLink handles
+      // relative image URLs internally and preserves protocol/allowlist checks.
+      if (
+        node.type === 'definition' &&
+        link.url.startsWith('/') &&
+        IMAGE_EXT_RE.test(link.url)
+      ) {
+        return;
+      }
+
+      const { url, external } = rewriteLessonLink(link.url, options);
+      link.url = url;
+
+      if (external) {
+        link.data = link.data ?? {};
+        link.data.hProperties = link.data.hProperties ?? {};
+        link.data.hProperties['data-external'] = 'true';
+      }
+    });
+  };
+}
+
+function walk(node: AstNode, visitor: (node: AstNode) => void): void {
+  visitor(node);
+  const children = (node as ParentNode).children;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      walk(child, visitor);
+    }
+  }
+}
+
+function splitHash(input: string): [string, string] {
+  const i = input.indexOf('#');
+  if (i === -1) return [input, ''];
+  return [input.slice(0, i), input.slice(i)];
+}
+
+function isInside(candidate: string, root: string): boolean {
+  const r = root.endsWith('/') ? root : `${root}/`;
+  return candidate === root || candidate.startsWith(r);
+}

package/src/lib/paths.ts

@@ -0,0 +1,36 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+// Shared CWD-based resolution for the consumer's course.yaml / lectures dir.
+//
+// The engine ships inside the consumer's node_modules, so __dirname /
+// import.meta.url point into node_modules and must never be used to locate
+// course data. Resolve from process.cwd() instead: builds, vitest and the CLI
+// helpers all run with CWD=web/ (course data one level up), while coverage/TOC
+// tooling may run with CWD=repo-root (course data alongside). Probe `./` before
+// `../` so a stray manifest in the parent of the repo never wins over the one
+// inside the repo when run from the repo root.
+//
+// `lesson.ts` and `course-loader.ts` both call these so their candidate lists
+// can never drift apart. Evaluated lazily (per call) — never as a module-load
+// constant — so the CWD in effect at call time is honoured.
+function firstExisting(candidates: string[]): string {
+  for (const candidate of candidates) {
+    if (existsSync(candidate)) return candidate;
+  }
+  return candidates[0];
+}
+
+export function resolveCourseYaml(): string {
+  return firstExisting([
+    path.resolve(process.cwd(), 'course.yaml'), // CWD=repo root
+    path.resolve(process.cwd(), '..', 'course.yaml'), // CWD=web/
+  ]);
+}
+
+export function resolveLecturesRoot(): string {
+  return firstExisting([
+    path.resolve(process.cwd(), 'lectures'), // CWD=repo root
+    path.resolve(process.cwd(), '..', 'lectures'), // CWD=web/
+  ]);
+}

package/src/lib/program-drawer.ts

@@ -0,0 +1,8 @@
+// Cross-component channel for opening the program drawer. The drawer state
+// lives in AppShell; descendants dispatch this event to open it.
+export const OPEN_PROGRAM_EVENT = 'kafka-cookbook:open-program';
+
+export function openProgramDrawer(): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent(OPEN_PROGRAM_EVENT));
+}

package/src/lib/progress-mode.ts

@@ -0,0 +1,69 @@
+export const PROGRESS_DISABLED_STORAGE_KEY = 'kafka-cookbook-progress-disabled';
+export const PROGRESS_DISABLED_ATTR = 'data-progress-disabled';
+
+/**
+ * Reads the persisted "free reading" flag. The value is stored raw (as in
+ * `theme.ts`): the literal string `'true'` means progress is disabled; the
+ * absence of the key — or any other value — means progress is enabled
+ * (the backwards-compatible default). Returns `false` on any failure so the
+ * course keeps its normal gated behaviour when storage is unavailable.
+ */
+export function readProgressDisabled(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return window.localStorage.getItem(PROGRESS_DISABLED_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Persists the flag. Writes the literal `'true'` when disabling progress and
+ * removes the key entirely when re-enabling it, so the default state leaves no
+ * trace in storage.
+ */
+export function writeProgressDisabled(value: boolean): void {
+  if (typeof window === 'undefined') return;
+  try {
+    if (value) {
+      window.localStorage.setItem(PROGRESS_DISABLED_STORAGE_KEY, 'true');
+    } else {
+      window.localStorage.removeItem(PROGRESS_DISABLED_STORAGE_KEY);
+    }
+  } catch {
+    /* storage may be unavailable (private mode, quota); ignore. */
+  }
+}
+
+/**
+ * Sets/removes `data-progress-disabled` on <html>. When disabled the value
+ * matches the stored value (`'true'`); when enabled the attribute is removed.
+ */
+export function applyProgressDisabled(value: boolean): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  if (value) {
+    root.setAttribute(PROGRESS_DISABLED_ATTR, 'true');
+  } else {
+    root.removeAttribute(PROGRESS_DISABLED_ATTR);
+  }
+}
+
+/**
+ * Inline script string injected into <head> before hydration — and crucially
+ * before the gate-init script. Reads the stored flag and sets/removes
+ * `data-progress-disabled` on <html> synchronously, so a previously-locked
+ * lesson never flashes its locked interstitial in free-reading mode (FOUC-free).
+ */
+export const PROGRESS_MODE_INIT_SCRIPT = `(() => {
+  try {
+    var key = ${JSON.stringify(PROGRESS_DISABLED_STORAGE_KEY)};
+    var stored = null;
+    try { stored = window.localStorage.getItem(key); } catch (_) {}
+    if (stored === 'true') {
+      document.documentElement.setAttribute(${JSON.stringify(PROGRESS_DISABLED_ATTR)}, 'true');
+    } else {
+      document.documentElement.removeAttribute(${JSON.stringify(PROGRESS_DISABLED_ATTR)});
+    }
+  } catch (_) {}
+})();`;

package/src/lib/progress.ts

@@ -0,0 +1,182 @@
+import type { Course } from './course';
+import { flattenLessons } from './course';
+
+export const PROGRESS_STORAGE_KEY = 'kafka-cookbook-progress';
+export const FURTHEST_STORAGE_KEY = 'kafka-cookbook-furthest';
+export const PROGRESS_CHANGE_EVENT = 'kafka-cookbook:progress-change';
+
+export type LessonKey = `${string}/${string}`;
+
+export interface ProgressEntry {
+  completed: true;
+  at: string;
+}
+
+export type ProgressMap = Record<LessonKey, ProgressEntry>;
+
+export function lessonKey(moduleId: string, slug: string): LessonKey {
+  return `${moduleId}/${slug}` as LessonKey;
+}
+
+export function getProgress(): ProgressMap {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.localStorage.getItem(PROGRESS_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!isPlainObject(parsed)) return {};
+    const result: ProgressMap = {};
+    for (const [key, value] of Object.entries(parsed)) {
+      if (isProgressEntry(value)) {
+        result[key as LessonKey] = value;
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+function writeProgress(map: ProgressMap): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(PROGRESS_STORAGE_KEY, JSON.stringify(map));
+  } catch {
+    /* storage may be unavailable (private mode, quota); ignore. */
+  }
+}
+
+export function markCompleted(key: LessonKey, now: () => string = () => new Date().toISOString()): ProgressMap {
+  const current = getProgress();
+  current[key] = { completed: true, at: now() };
+  writeProgress(current);
+  return current;
+}
+
+export function unmarkCompleted(key: LessonKey): ProgressMap {
+  const current = getProgress();
+  delete current[key];
+  writeProgress(current);
+  return current;
+}
+
+export function isCompleted(map: ProgressMap, key: LessonKey): boolean {
+  return map[key]?.completed === true;
+}
+
+export function getCompletedCount(map: ProgressMap): number {
+  return Object.values(map).filter((entry) => entry?.completed === true).length;
+}
+
+export function getCompletedPercent(map: ProgressMap, total: number): number {
+  if (total <= 0) return 0;
+  const ratio = Math.min(getCompletedCount(map), total) / total;
+  return Math.round(ratio * 100);
+}
+
+/**
+ * Furthest-reached lesson — a "sticky" pointer used by the gate to decide which
+ * lessons are unlocked. Stored separately from progress so unchecking a lesson
+ * does not retract access: once you've gone past a point, that ground stays
+ * unlocked. The pointer is a LessonKey rather than a numeric index — the
+ * course.yaml ordering can shift across releases, but a stable key survives
+ * inserts/removals (and we recompute its index on the fly).
+ */
+export function getFurthestKey(): LessonKey | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(FURTHEST_STORAGE_KEY);
+    if (!raw) return null;
+    if (!/^[^/\s]+\/[^/\s]+$/.test(raw)) return null;
+    return raw as LessonKey;
+  } catch {
+    return null;
+  }
+}
+
+function writeFurthestKey(key: LessonKey | null): void {
+  if (typeof window === 'undefined') return;
+  try {
+    if (key === null) {
+      window.localStorage.removeItem(FURTHEST_STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(FURTHEST_STORAGE_KEY, key);
+    }
+  } catch {
+    /* storage may be unavailable; ignore. */
+  }
+}
+
+/**
+ * Bump the furthest pointer toward `key` if (and only if) `key` sits past the
+ * current furthest in linear course order. Unknown keys (not in `course`) are
+ * ignored — we don't want a stale lesson key to clobber a valid one.
+ */
+export function bumpFurthest(course: Course, key: LessonKey): LessonKey | null {
+  const flat = flattenLessons(course);
+  const newIndex = flat.findIndex((e) => lessonKey(e.moduleId, e.lesson.slug) === key);
+  if (newIndex === -1) return getFurthestKey();
+
+  const currentKey = getFurthestKey();
+  if (currentKey === null) {
+    writeFurthestKey(key);
+    return key;
+  }
+  const currentIndex = flat.findIndex(
+    (e) => lessonKey(e.moduleId, e.lesson.slug) === currentKey,
+  );
+  if (currentIndex === -1 || newIndex > currentIndex) {
+    writeFurthestKey(key);
+    return key;
+  }
+  return currentKey;
+}
+
+/**
+ * Mark a lesson complete and advance the furthest pointer in one atomic step,
+ * then notify listeners. This is the single entry point UI code should use
+ * when the user explicitly finishes a lesson (e.g. clicking "Next lesson") —
+ * combining the writes keeps the gate state internally consistent.
+ */
+export function markCompletedAndAdvance(course: Course, key: LessonKey): void {
+  markCompleted(key);
+  bumpFurthest(course, key);
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event(PROGRESS_CHANGE_EVENT));
+  }
+}
+
+/**
+ * Wipe all stored progress — both the completion map and the furthest-reached
+ * pointer — then notify listeners. This is a destructive reset used by the
+ * "free reading" mode toggle: turning that mode on drops accumulated progress
+ * so it can't reappear if the mode is later switched off.
+ *
+ * Dispatches PROGRESS_CHANGE_EVENT synchronously. Callers that also flip
+ * free-reading mode must set `data-progress-disabled` BEFORE calling this, so
+ * the GateProvider effect takes its cleanup branch instead of repainting the
+ * gate (which would flash locked rows). See ProgressModeProvider.setDisabled.
+ */
+export function clearProgress(): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.removeItem(PROGRESS_STORAGE_KEY);
+    window.localStorage.removeItem(FURTHEST_STORAGE_KEY);
+    window.dispatchEvent(new Event(PROGRESS_CHANGE_EVENT));
+  } catch {
+    /* storage may be unavailable; ignore. */
+  }
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isProgressEntry(value: unknown): value is ProgressEntry {
+  return (
+    isPlainObject(value) &&
+    value.completed === true &&
+    typeof value.at === 'string' &&
+    value.at.length > 0
+  );
+}

package/src/lib/reading-prefs.ts

@@ -0,0 +1,127 @@
+export type SizeStep = 0 | 1 | 2 | 3 | 4 | 5;
+export type ProseFont = 'serif' | 'sans' | 'slab';
+export type CodeFont = 'jetbrains' | 'fira';
+
+export interface ReadingPrefs {
+  proseSize: SizeStep;
+  codeSize: SizeStep;
+  proseFont: ProseFont;
+  codeFont: CodeFont;
+}
+
+// Bumped from v1 → v2 when the prose `lora` option became `slab` (Roboto Slab)
+// and the `plex` code option was retired. Old stored values fall back to defaults.
+export const READING_PREFS_STORAGE_KEY = 'kafka-cookbook-reading-prefs:v2';
+
+export const PROSE_FONTS = ['serif', 'sans', 'slab'] as const;
+export const CODE_FONTS = ['jetbrains', 'fira'] as const;
+export const SIZE_STEPS = [0, 1, 2, 3, 4, 5] as const;
+
+// Step values match design reference: 14 / 16 / 18 / 20 / 22 / 24 px.
+export const DEFAULT_PREFS: ReadingPrefs = {
+  proseSize: 1,
+  codeSize: 0,
+  proseFont: 'serif',
+  codeFont: 'jetbrains',
+};
+
+export function isProseFont(value: unknown): value is ProseFont {
+  return value === 'serif' || value === 'sans' || value === 'slab';
+}
+
+export function isCodeFont(value: unknown): value is CodeFont {
+  return value === 'jetbrains' || value === 'fira';
+}
+
+export function isSizeStep(value: unknown): value is SizeStep {
+  return (
+    value === 0 ||
+    value === 1 ||
+    value === 2 ||
+    value === 3 ||
+    value === 4 ||
+    value === 5
+  );
+}
+
+export function readStoredPrefs(): ReadingPrefs {
+  if (typeof window === 'undefined') return { ...DEFAULT_PREFS };
+  let raw: string | null = null;
+  try {
+    raw = window.localStorage.getItem(READING_PREFS_STORAGE_KEY);
+  } catch {
+    return { ...DEFAULT_PREFS };
+  }
+  if (raw == null) return { ...DEFAULT_PREFS };
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { ...DEFAULT_PREFS };
+  }
+  if (!parsed || typeof parsed !== 'object') return { ...DEFAULT_PREFS };
+  const obj = parsed as Record<string, unknown>;
+  return {
+    proseSize: isSizeStep(obj.proseSize) ? obj.proseSize : DEFAULT_PREFS.proseSize,
+    codeSize: isSizeStep(obj.codeSize) ? obj.codeSize : DEFAULT_PREFS.codeSize,
+    proseFont: isProseFont(obj.proseFont) ? obj.proseFont : DEFAULT_PREFS.proseFont,
+    codeFont: isCodeFont(obj.codeFont) ? obj.codeFont : DEFAULT_PREFS.codeFont,
+  };
+}
+
+export function writeStoredPrefs(prefs: ReadingPrefs): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(READING_PREFS_STORAGE_KEY, JSON.stringify(prefs));
+  } catch {
+    /* storage may be unavailable (private mode, quota); ignore. */
+  }
+}
+
+export function applyPrefs(prefs: ReadingPrefs): void {
+  if (typeof document === 'undefined') return;
+  const ds = document.documentElement.dataset;
+  ds.proseSize = String(prefs.proseSize);
+  ds.codeSize = String(prefs.codeSize);
+  ds.proseFont = prefs.proseFont;
+  ds.codeFont = prefs.codeFont;
+}
+
+/**
+ * Inline script injected into <head> before hydration. Reads localStorage,
+ * validates per-field, and stamps four data-* attributes on <html>
+ * synchronously to avoid FOUC.
+ */
+export const READING_PREFS_INIT_SCRIPT = `(() => {
+  var KEY = ${JSON.stringify(READING_PREFS_STORAGE_KEY)};
+  var defaults = ${JSON.stringify(DEFAULT_PREFS)};
+  var sizes = [0, 1, 2, 3, 4, 5];
+  var proseFonts = ['serif', 'sans', 'slab'];
+  var codeFonts = ['jetbrains', 'fira'];
+  var prefs = {
+    proseSize: defaults.proseSize,
+    codeSize: defaults.codeSize,
+    proseFont: defaults.proseFont,
+    codeFont: defaults.codeFont,
+  };
+  try {
+    var raw = null;
+    try { raw = window.localStorage.getItem(KEY); } catch (_) {}
+    if (raw != null) {
+      var parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object') {
+        if (sizes.indexOf(parsed.proseSize) !== -1) prefs.proseSize = parsed.proseSize;
+        if (sizes.indexOf(parsed.codeSize) !== -1) prefs.codeSize = parsed.codeSize;
+        if (proseFonts.indexOf(parsed.proseFont) !== -1) prefs.proseFont = parsed.proseFont;
+        if (codeFonts.indexOf(parsed.codeFont) !== -1) prefs.codeFont = parsed.codeFont;
+      }
+    }
+  } catch (_) {}
+  try {
+    var ds = document.documentElement.dataset;
+    ds.proseSize = String(prefs.proseSize);
+    ds.codeSize = String(prefs.codeSize);
+    ds.proseFont = prefs.proseFont;
+    ds.codeFont = prefs.codeFont;
+  } catch (_) {}
+})();`;