draftRich Algorithm Content Demo

This draft algorithm page mirrors the rich markdown feature coverage of the blog pipeline so the /algorithms/* route is exercised with the same authoring tools. It also provides explicit internal links to the intro post and the Harris detector page.

Typography Basics

Body text is rendered in Source Serif 4 at 18px with a line height of 1.75. This creates comfortable reading rhythm for technical prose. The maximum line width is constrained to approximately 68 characters, which is optimal for sustained reading.

Paragraphs have generous spacing between them. Bold text stands out clearly, while italic text provides subtle emphasis. Links like the algorithms index use a steel blue color with a subtle underline that becomes more prominent on hover.

Heading Hierarchy

Headings use Inter (sans-serif) to create clear visual contrast with the serif body text. The spacing above headings is generous to signal new sections, while the space below is tighter to keep the heading connected to its content.

Fourth-Level Heading

Fourth-level headings are used sparingly for fine-grained structure within subsections.

Lists

Unordered lists with improved spacing:

• First item with comfortable line height
• Second item demonstrating consistent bullet appearance
• Third item with a longer description that wraps to multiple lines to verify that the indentation and line height remain comfortable

Ordered lists:

1. Normalize the image coordinates using an isotropic scaling transformation.
2. Assemble the linear system $A\mathbf{h} = 0$ from point correspondences.
3. Compute the SVD of $A$ and extract the null space vector.
4. Reshape the solution into the $3 \times 3$ homography matrix $H$.

Nested lists:

• Camera models
  • Pinhole model
  • Fisheye model
  • Omnidirectional model
• Calibration methods
  • Zhang's method
  • DLT (Direct Linear Transform)

Inline Math and Display Math

The homography matrix $H$ maps points between two views when all observed points lie on a plane. Given a camera intrinsic matrix $K$, rotation $R$, and translation $t$, the plane-induced homography is:

where $n$ is the plane normal and $d$ is the distance from the camera center to the plane.

The reprojection error for a point correspondence $(x_i, x_i')$ is defined as:

Equation \eqref{eq

Code Blocks

Python example with syntax highlighting:

import numpy as np
from numpy.linalg import svd

def normalize_points(pts: np.ndarray) -> tuple[np.ndarray, np.ndarray]:
    """Normalize 2D points so that centroid is at origin and mean distance is sqrt(2)."""
    centroid = pts.mean(axis=0)
    shifted = pts - centroid
    mean_dist = np.sqrt((shifted ** 2).sum(axis=1)).mean()
    scale = np.sqrt(2) / mean_dist

    T = np.array([
        [scale, 0, -scale * centroid[0]],
        [0, scale, -scale * centroid[1]],
        [0, 0, 1],
    ])
    return T, (T @ np.vstack([pts.T, np.ones(len(pts))]))[: 2].T

TypeScript example:

interface CalibrationResult {
  reprojectionError: number;
  intrinsics: Matrix3x3;
  distortion: number[];
}

async function calibrate(
  imagePoints: Point2D[][],
  objectPoints: Point3D[][],
): Promise<CalibrationResult> {
  const response = await fetch("/api/v1/cv/calibrate", {
    method: "POST",
    body: JSON.stringify({ imagePoints, objectPoints }),
  });
  return response.json();
}

Inline code like np.linalg.svd() or CalibrationResult should be clearly distinct from surrounding prose without being visually noisy.

Semantic Blocks

Definitions

Theorems and Proofs

Lemma

Notes and Warnings

Examples

Algorithm

Quote

Tables

Blockquote (Standard Markdown)

The fundamental matrix encapsulates the epipolar geometry of two views. It is a $3 \times 3$ matrix of rank 2, and satisfies the constraint $x'^{\top} F x = 0$ for every pair of corresponding points.

Mermaid Diagram

graph TD
    A[Input Images] --> B[Feature Detection]
    B --> C[Feature Matching]
    C --> D[Homography Estimation]
    D --> E{RANSAC}
    E --> |Inliers| F[Refined H]
    E --> |Outliers| C
    F --> G[Image Warping]

Inline Colored Text

Use inline colour to mark semantic roles inside a paragraph — a variable, a warning, a confirmed value, a symbolic identifier, or a secondary annotation. Unknown directive names like :rainbow[text] are left as-is by the parser so authors get predictable fallback.

Emphasized Phrase Block

For a single stand-alone idea that deserves a reader's full attention, use the :::emph container directive. It renders as a decorated pull-quote distinct from :::quote (which is attribution-oriented) and :::note (which is informational).

This concludes the content feature demonstration for algorithm pages.