mordoc 0.1.13 → 1.0.0

package/src/app/content/card/CardGrid.tsx

@@ -0,0 +1,34 @@
+/**
+ * CardGrid — responsive CSS grid container for Card components.
+ *
+ * Column count is controlled by the `cols` attribute (1–4, default 3).
+ * The value is passed as a `--cols` CSS custom property so the grid
+ * layout is driven entirely by CSS, keeping component logic minimal.
+ * Responsive collapse (to 2-col at medium, 1-col at small) is handled
+ * in CardGrid.module.css via media queries.
+ *
+ * Registered as a Markdoc tag (`cardGrid`) in markdoc-config.ts and
+ * added to Content.tsx's components map.
+ */
+
+import React from 'react';
+import styles from './CardGrid.module.css';
+
+interface CardGridProps {
+  cols?: string;
+  children?: React.ReactNode;
+}
+
+export function CardGrid({ cols = '3', children }: CardGridProps) {
+  const numCols = Math.max(1, Math.min(4, parseInt(cols, 10) || 3));
+  return (
+    <div
+      className={styles.cardGrid}
+      style={{ '--cols': numCols } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default CardGrid;

package/src/app/content/code-block/CodeBlock.module.css

@@ -0,0 +1,237 @@
+/* ============================================================
+   CODE BLOCK TOKENS
+   ============================================================ */
+:root {
+  --cb-bg:     var(--color-surface);
+  --cb-border: var(--color-border);
+}
+
+/* ── Wrapper ────────────────────────────────────────────────── */
+
+.wrapper {
+  position: relative;
+  margin: 1.25rem 0;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--cb-border);
+  overflow: hidden;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--cb-bg);
+  border-bottom: 1px solid var(--cb-border);
+}
+
+.language {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-fg-muted);
+  text-transform: capitalize;
+  font-family: var(--font-sans);
+}
+
+/* ── Copy button ─────────────────────────────────────────────── */
+
+.copyButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--color-fg-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.copyButton:hover {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg);
+}
+
+.copyButton:active {
+  transform: scale(0.95);
+}
+
+/* ── Pre / code ──────────────────────────────────────────────── */
+
+.pre {
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  background-color: var(--color-bg);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 400;
+  color: var(--color-fg);
+  border-radius: 0;
+}
+
+/* Plain (no language) fallback */
+.plain {
+  margin: 1.25rem 0;
+  padding: 1.25rem 1.5rem;
+  background: var(--color-surface);
+  border: 1px solid var(--cb-border);
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.plain code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 400;
+  color: var(--color-fg);
+}
+
+/* ============================================================
+   PRISM TOKEN COLORS
+   Light values are default; dark values under .dark
+   ============================================================ */
+
+:global(.token.comment),
+:global(.token.prolog),
+:global(.token.doctype),
+:global(.token.cdata) {
+  color: #6a737d;
+}
+
+:global(.dark) :global(.token.comment),
+:global(.dark) :global(.token.prolog),
+:global(.dark) :global(.token.doctype),
+:global(.dark) :global(.token.cdata) {
+  color: #8b949e;
+}
+
+:global(.token.punctuation) {
+  color: #383a42;
+}
+
+:global(.dark) :global(.token.punctuation) {
+  color: #cdd9e5;
+}
+
+:global(.token.namespace) {
+  opacity: 0.7;
+}
+
+:global(.token.property),
+:global(.token.tag),
+:global(.token.boolean),
+:global(.token.number),
+:global(.token.constant),
+:global(.token.symbol),
+:global(.token.deleted) {
+  color: #0184bc;
+}
+
+:global(.dark) :global(.token.property),
+:global(.dark) :global(.token.tag),
+:global(.dark) :global(.token.boolean),
+:global(.dark) :global(.token.number),
+:global(.dark) :global(.token.constant),
+:global(.dark) :global(.token.symbol),
+:global(.dark) :global(.token.deleted) {
+  color: #79c0ff;
+}
+
+:global(.token.selector),
+:global(.token.attr-name),
+:global(.token.string),
+:global(.token.char),
+:global(.token.builtin),
+:global(.token.inserted) {
+  color: #50a14f;
+}
+
+:global(.dark) :global(.token.selector),
+:global(.dark) :global(.token.attr-name),
+:global(.dark) :global(.token.string),
+:global(.dark) :global(.token.char),
+:global(.dark) :global(.token.builtin),
+:global(.dark) :global(.token.inserted) {
+  color: #7ee787;
+}
+
+:global(.token.operator),
+:global(.token.entity),
+:global(.token.url),
+:global(.language-css) :global(.token.string),
+:global(.style) :global(.token.string) {
+  color: #a626a4;
+}
+
+:global(.dark) :global(.token.operator),
+:global(.dark) :global(.token.entity),
+:global(.dark) :global(.token.url),
+:global(.dark) :global(.language-css) :global(.token.string),
+:global(.dark) :global(.style) :global(.token.string) {
+  color: #d2a8ff;
+}
+
+:global(.token.atrule),
+:global(.token.attr-value),
+:global(.token.keyword) {
+  color: #a626a4;
+}
+
+:global(.dark) :global(.token.atrule),
+:global(.dark) :global(.token.attr-value),
+:global(.dark) :global(.token.keyword) {
+  color: #ff7b72;
+}
+
+:global(.token.function),
+:global(.token.class-name) {
+  color: #c18401;
+}
+
+:global(.dark) :global(.token.function),
+:global(.dark) :global(.token.class-name) {
+  color: #d29922;
+}
+
+:global(.token.regex),
+:global(.token.important),
+:global(.token.variable) {
+  color: #e45649;
+}
+
+:global(.dark) :global(.token.regex),
+:global(.dark) :global(.token.important),
+:global(.dark) :global(.token.variable) {
+  color: #ffa657;
+}
+
+:global(.token.bold) {
+  font-weight: 700;
+}
+
+:global(.token.italic) {
+  font-style: italic;
+}
+
+:global(.token.entity) {
+  cursor: help;
+}

package/src/app/content/code-block/CodeBlock.tsx

@@ -0,0 +1,123 @@
+/**
+ * CodeBlock — syntax-highlighted fenced code block with language label and copy button.
+ *
+ * Prism.js runs synchronously, so highlighting works identically in SSR (Node)
+ * and on the client — no hydration mismatch.
+ *
+ * `dangerouslySetInnerHTML` is safe here: Prism only emits its own span/token
+ * markup around already-escaped source text; no user-controlled HTML is injected.
+ *
+ * Wired up via the `fence` node in markdoc-config, which forwards `language`
+ * and `content` as props. Registered in Content.tsx's `components` map.
+ */
+
+import { useState } from 'react';
+import Prism from 'prismjs';
+
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-sql';
+
+import styles from './CodeBlock.module.css';
+
+interface CodeBlockProps {
+  language?: string;
+  content?: string;
+}
+
+const LANG_ALIASES: Record<string, string> = {
+  html: 'markup',
+  js:   'javascript',
+  ts:   'typescript',
+  sh:   'bash',
+};
+
+const DISPLAY_NAMES: Record<string, string> = {
+  markup: 'HTML',
+};
+
+function normalize(lang: string): string {
+  const lower = lang.toLowerCase();
+  return LANG_ALIASES[lower] ?? lower;
+}
+
+function displayName(normalized: string): string {
+  return DISPLAY_NAMES[normalized] ?? (normalized.charAt(0).toUpperCase() + normalized.slice(1));
+}
+
+export function CodeBlock({ language = '', content = '' }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const code = content.trim();
+
+  if (!code) {
+    return <pre><code /></pre>;
+  }
+
+  const hasLanguage = language.trim().length > 0;
+
+  if (!hasLanguage) {
+    return (
+      <pre className={styles.plain}>
+        <code>{code}</code>
+      </pre>
+    );
+  }
+
+  const lang = normalize(language);
+  const grammar = Prism.languages[lang];
+  const highlighted = grammar ? Prism.highlight(code, grammar, lang) : code;
+
+  const handleCopy = async () => {
+    // navigator.clipboard is unavailable in SSR and some sandboxed environments
+    if (typeof navigator === 'undefined') return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // silently ignore — copy button just won't give feedback
+    }
+  };
+
+  return (
+    <div className={styles.wrapper} data-pagefind-ignore>
+      <div className={styles.header}>
+        <span className={styles.language}>{displayName(lang)}</span>
+        <button
+          className={styles.copyButton}
+          onClick={handleCopy}
+          aria-label="Copy code"
+          type="button"
+        >
+          {copied ? (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 6L9 17L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V11.2413C22 12.0463 22 12.7106 21.9558 13.2518C21.9099 13.8139 21.8113 14.3306 21.564 14.816C21.1805 15.5686 20.5686 16.1805 19.816 16.564C19.3306 16.8113 18.8139 16.9099 18.2518 16.9558C17.8906 16.9853 17.4745 16.9951 16.9984 16.9984C16.9951 17.4745 16.9853 17.8906 16.9558 18.2518C16.9099 18.8139 16.8113 19.3306 16.564 19.816C16.1805 20.5686 15.5686 21.1805 14.816 21.564C14.3306 21.8113 13.8139 21.9099 13.2518 21.9558C12.7106 22 12.0463 22 11.2413 22H7.75868C6.95372 22 6.28936 22 5.74818 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V12.7587C1.99999 11.9537 1.99998 11.2894 2.04419 10.7482C2.09012 10.1861 2.18868 9.66937 2.43597 9.18404C2.81947 8.43139 3.43139 7.81947 4.18404 7.43598C4.66937 7.18868 5.18608 7.09012 5.74817 7.04419C6.10939 7.01468 6.52548 7.00487 7.00162 7.00162C7.00487 6.52548 7.01468 6.10939 7.04419 5.74817C7.09012 5.18608 7.18868 4.66937 7.43598 4.18404C7.81947 3.43139 8.43139 2.81947 9.18404 2.43597C9.66937 2.18868 10.1861 2.09012 10.7482 2.04419C11.2894 1.99998 11.9537 1.99999 12.7587 2ZM9.00176 7L11.2413 7C12.0463 6.99999 12.7106 6.99998 13.2518 7.04419C13.8139 7.09012 14.3306 7.18868 14.816 7.43598C15.5686 7.81947 16.1805 8.43139 16.564 9.18404C16.8113 9.66937 16.9099 10.1861 16.9558 10.7482C17 11.2894 17 11.9537 17 12.7587V14.9982C17.4455 14.9951 17.7954 14.9864 18.089 14.9624C18.5274 14.9266 18.7516 14.8617 18.908 14.782C19.2843 14.5903 19.5903 14.2843 19.782 13.908C19.8617 13.7516 19.9266 13.5274 19.9624 13.089C19.9992 12.6389 20 12.0566 20 11.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H12.8C11.9434 4 11.3611 4.00078 10.911 4.03755C10.4726 4.07337 10.2484 4.1383 10.092 4.21799C9.7157 4.40973 9.40973 4.7157 9.21799 5.09202C9.1383 5.24842 9.07337 5.47262 9.03755 5.91104C9.01357 6.20463 9.00489 6.55447 9.00176 7ZM5.91104 9.03755C5.47262 9.07337 5.24842 9.1383 5.09202 9.21799C4.7157 9.40973 4.40973 9.7157 4.21799 10.092C4.1383 10.2484 4.07337 10.4726 4.03755 10.911C4.00078 11.3611 4 11.9434 4 12.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H11.2C12.0566 20 12.6389 19.9992 13.089 19.9624C13.5274 19.9266 13.7516 19.8617 13.908 19.782C14.2843 19.5903 14.5903 19.2843 14.782 18.908C14.8617 18.7516 14.9266 18.5274 14.9624 18.089C14.9992 17.6389 15 17.0566 15 16.2V12.8C15 11.9434 14.9992 11.3611 14.9624 10.911C14.9266 10.4726 14.8617 10.2484 14.782 10.092C14.5903 9.7157 14.2843 9.40973 13.908 9.21799C13.7516 9.1383 13.5274 9.07337 13.089 9.03755C12.6389 9.00078 12.0566 9 11.2 9H7.8C6.94342 9 6.36113 9.00078 5.91104 9.03755Z" fill="currentColor" />
+            </svg>
+          )}
+        </button>
+      </div>
+      <pre className={`${styles.pre} language-${lang}`}>
+        <code
+          className={`language-${lang}`}
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+      </pre>
+    </div>
+  );
+}
+
+export default CodeBlock;

package/src/app/content/heading/Heading.module.css

@@ -0,0 +1,52 @@
+.heading {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  gap: 0.35em;
+}
+
+.anchor {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  position: relative;
+}
+
+.heading:hover .anchor {
+  opacity: 1;
+}
+
+.anchor:hover {
+  color: var(--accent-emphasis);
+}
+
+.anchor:focus-visible {
+  outline: 2px solid var(--accent-emphasis);
+  outline-offset: 2px;
+  border-radius: 2px;
+  opacity: 1;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-surface-elevated);
+  color: var(--color-fg);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  padding: 0.2em 0.55em;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  white-space: nowrap;
+  pointer-events: none;
+  /* Reset inherited heading styles */
+  font-style: normal;
+  line-height: 1.5;
+}

package/src/app/content/heading/Heading.tsx

@@ -0,0 +1,75 @@
+/**
+ * Heading — renders h1–h6 with a hover-reveal anchor link icon.
+ *
+ * Clicking the icon does three things via a plain <a href="#id">:
+ *   1. Browser natively updates the URL to currentPath#id
+ *   2. Browser natively scrolls the heading into view (scroll-margin-top in
+ *      Content.module.css already accounts for the fixed topnav offset)
+ *   3. onClick copies the full URL (with hash) to the clipboard and shows
+ *      a brief "Copied" tooltip
+ *
+ * The icon is hidden by default and revealed on heading hover via CSS.
+ * Registered as a custom Markdoc `heading` node in markdoc-config.ts.
+ */
+
+import React, { useState } from 'react';
+import styles from './Heading.module.css';
+
+interface HeadingProps {
+  id: string;
+  level: number;
+  children?: React.ReactNode;
+}
+
+function LinkIcon() {
+  return (
+    <svg
+      width="0.75em"
+      height="0.75em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+export function Heading({ id, level, children }: HeadingProps) {
+  const [copied, setCopied] = useState(false);
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+  function handleClick(e: React.MouseEvent<HTMLAnchorElement>) {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    history.pushState(null, '', `#${id}`);
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <Tag id={id} className={styles.heading}>
+      {children}
+      <a
+        href={`#${id}`}
+        onClick={handleClick}
+        className={styles.anchor}
+        aria-label="Copy link to this section"
+      >
+        <LinkIcon />
+        {copied && <span className={styles.tooltip}>Copied</span>}
+      </a>
+    </Tag>
+  );
+}
+
+export default Heading;

package/src/app/content/image/Image.module.css

@@ -0,0 +1,113 @@
+/* ============================================================
+   IMAGE TOKENS
+   ============================================================ */
+:root {
+  --image-overlay-bg: rgba(0, 0, 0, 0.82);
+  --image-caption-color: var(--color-fg-muted);
+}
+
+/* ── Inline figure ───────────────────────────────────────────── */
+
+.figure {
+  margin: 1.5rem 0;
+  cursor: zoom-in;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  transition: filter 150ms ease, transform 150ms ease;
+}
+
+.figure:hover .image {
+  filter: brightness(0.95);
+  transform: scale(1.005);
+}
+
+.caption {
+  margin: 0.5rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--image-caption-color);
+  text-align: center;
+  font-style: italic;
+}
+
+/* ── Lightbox overlay ────────────────────────────────────────── */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--image-overlay-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: overlayFadeIn 150ms ease forwards;
+  cursor: zoom-out;
+}
+
+@keyframes overlayFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Close button ────────────────────────────────────────────── */
+
+.closeButton {
+  position: fixed;
+  top: 1.25rem;
+  right: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-md);
+  color: #ffffff;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.closeButton:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+/* ── Lightbox image ──────────────────────────────────────────── */
+
+.lightboxImageWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: default;
+  max-width: min(90vw, 1200px);
+  animation: imageFadeIn 180ms ease forwards;
+}
+
+@keyframes imageFadeIn {
+  from { opacity: 0; transform: scale(0.97); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.lightboxImage {
+  display: block;
+  max-width: 100%;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: var(--radius-md);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+}
+
+.lightboxCaption {
+  margin: 0.75rem 0 0;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.65);
+  text-align: center;
+  font-style: italic;
+}