Component lab

This is the working reference for article components. Figures and diagrams arrive already rendered; interactive models add controls when they enter view.

Widget previews

Try these additions on the same images. Each one is optional for an individual post.

Inspect detail without leaving the article

The same figure at the same reading size. In the proposed version, click the image, then press Escape to return.

Current · inline figure

Proposed · optional enlargement

Enlarge image

Open original Close image

Use this figure in a post

1
<ZoomFigure src={image} alt="Describe the image"
2
  caption="Explain the figure" original="/posts/your-post/original.webp" />

Compare two renders at the same position

Move the slider to compare 40 and 320 escape iterations of the same Mandelbrot region. Both position and scale stay fixed.

40 iterations

320 iterations

40 iterations 320 iterations

Both complete images are shown.

Separate figures make you remember a detail while looking between them. This control keeps the same feature under your eye.

Use this comparison in a post

1
<ImageCompare before={firstRender} after={secondRender}
2
  beforeAlt="Describe the first render" afterAlt="Describe the second render"
3
  beforeLabel="40 iterations" afterLabel="320 iterations" />

Give mixed images a shared row height

These are the same three uncropped images in the same order. The proposed layout assigns each image a width proportional to its shape.

Current · equal-width grid

1. 

2. 

3. 

Proposed · proportional rows

1. 

2. 

3. 

The portrait no longer sets the height of a mostly empty row. On phones, images stack at their natural proportions.

Use these rows in a post

1
<Gallery images={images} layout="rows" />

Visualization foundation

These examples keep the first render useful: exact geometry and the data plot are static HTML/SVG, while the harmonic model adds behavior only after it becomes visible.

Download SVGDownload CSV

Year	Synthetic indexed notes
2019	3
2020	5
2021	8
2022	13
2023	11
2024	17

Signal composition

Fourier harmonic explorer

Explore the shape of a signal: combine two sine waves, then adjust its strength and timing.

Signal controls

Fundamental 1 Harmonic 3 Amplitude 0.45 Phase 0°

Pure sineWarm thirdStrong third Reset Download CSV Download SVG

The default curve and equation remain available; controls will activate when ready.

Fundamental 1, harmonic 3, amplitude 0.45, phase 0 degrees.

Complex plane

Mandelbrot explorer

Pick a familiar region of the set, then increase the escape limit to expose more boundary detail.

View controls

Full setSeahorse valleyElephant valleyReset

Escape iterations: 180

Download current PNG

Preparing the selected view.

Images, geometry, and source

These patterns retain the original image and make the intended display constraint explicit. The surrounding slot may crop; the source image does not.

Existing source uses the shared Expressive Code renderer and a raw import; it is not copied into a separate fence.

1
export const HARMONIC_LIMITS = {
2
  fundamental: { min: 1, max: 8, step: 1 },
3
  harmonic: { min: 1, max: 12, step: 1 },
4
  amplitude: { min: 0, max: 1, step: 0.05 },
5
  phase: { min: -180, max: 180, step: 5 },
6
} as const
7

8
export type HarmonicState = {
9
  fundamental: number
10
  harmonic: number
11
  amplitude: number
12
  phase: number
13
}
14

15
export const DEFAULT_HARMONIC_STATE: HarmonicState = {
16
  fundamental: 1,
17
  harmonic: 3,
18
  amplitude: 0.45,
19
  phase: 0,
20
}
21

22
export const HARMONIC_PRESETS = {
23
  'Pure sine': { fundamental: 1, harmonic: 3, amplitude: 0, phase: 0 },
24
  'Warm third': DEFAULT_HARMONIC_STATE,
25
  'Strong third': { fundamental: 1, harmonic: 3, amplitude: 0.9, phase: 0 },
26
} as const satisfies Record<string, HarmonicState>
27

28
export type HarmonicPoint = { x: number; y: number }
29

30
function finite(value: unknown, fallback: number): number {
31
  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
32
}
33

34
function clamp(
35
  value: number,
36
  { min, max, step }: (typeof HARMONIC_LIMITS)[keyof typeof HARMONIC_LIMITS]
37
) {
38
  const rounded = Math.round((Math.min(max, Math.max(min, value)) - min) / step) * step + min
39
  return Number(rounded.toFixed(8))
40
}
41

42
export function normalizeHarmonicState(value: Partial<HarmonicState> = {}): HarmonicState {
43
  return {
44
    fundamental: clamp(
45
      finite(value.fundamental, DEFAULT_HARMONIC_STATE.fundamental),
46
      HARMONIC_LIMITS.fundamental
47
    ),
48
    harmonic: clamp(
49
      finite(value.harmonic, DEFAULT_HARMONIC_STATE.harmonic),
50
      HARMONIC_LIMITS.harmonic
51
    ),
52
    amplitude: clamp(
53
      finite(value.amplitude, DEFAULT_HARMONIC_STATE.amplitude),
54
      HARMONIC_LIMITS.amplitude
55
    ),
56
    phase: clamp(finite(value.phase, DEFAULT_HARMONIC_STATE.phase), HARMONIC_LIMITS.phase),
57
  }
58
}
59

60
export function harmonicValue(x: number, state: HarmonicState): number {
61
  const phase = (state.phase * Math.PI) / 180
62
  return (
63
    Math.sin(2 * Math.PI * state.fundamental * x) +
64
    state.amplitude * Math.sin(2 * Math.PI * state.harmonic * x + phase)
65
  )
66
}
67

68
export function harmonicSamples(state: HarmonicState, count = 241): HarmonicPoint[] {
69
  if (!Number.isInteger(count) || count < 2)
70
    throw new RangeError('Sample count must be an integer of at least 2')
71
  const normalized = normalizeHarmonicState(state)
72
  return Array.from({ length: count }, (_, index) => {
73
    const x = index / (count - 1)
74
    return { x, y: harmonicValue(x, normalized) }
75
  })
76
}
77

78
function queryKeys(namespace: string): Record<keyof HarmonicState, string> {
79
  return {
80
    fundamental: `${namespace}-f`,
81
    harmonic: `${namespace}-h`,
82
    amplitude: `${namespace}-a`,
83
    phase: `${namespace}-p`,
84
  }
85
}
86

87
export function harmonicHasState(search: string, namespace = 'hv'): boolean {
88
  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)
89
  return Object.values(queryKeys(namespace)).some((key) => params.has(key))
90
}
91

92
export function harmonicStateFromSearch(search: string, namespace = 'hv'): HarmonicState {
93
  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)
94
  const raw: Partial<HarmonicState> = {}
95
  for (const [name, key] of Object.entries(queryKeys(namespace)) as [
96
    keyof HarmonicState,
97
    string,
98
  ][]) {
99
    const value = params.get(key)
100
    if (value !== null && value.trim() !== '') raw[name] = Number(value)
101
  }
102
  return normalizeHarmonicState(raw)
103
}
104

105
export function harmonicSearch(state: HarmonicState, base = '', namespace = 'hv'): string {
106
  const params = new URLSearchParams(base.startsWith('?') ? base.slice(1) : base)
107
  const normalized = normalizeHarmonicState(state)
108
  for (const [name, key] of Object.entries(queryKeys(namespace)) as [keyof HarmonicState, string][])
109
    params.set(key, String(normalized[name]))
110
  return params.toString()
111
}
112

113
export function harmonicCsv(state: HarmonicState): string {
114
  const normalized = normalizeHarmonicState(state)
115
  const rows = harmonicSamples(normalized).map(({ x, y }) => `${x.toFixed(6)},${y.toFixed(8)}`)
116
  return [
117
    `# fundamental=${normalized.fundamental}, harmonic=${normalized.harmonic}, amplitude=${normalized.amplitude}, phase_degrees=${normalized.phase}`,
118
    'x,signal',
119
    ...rows,
120
  ].join('\n')
121
}

Static diagrams

Mermaid is rendered during the build in both themes. This diagram needs no client JavaScript. Give each diagram a title and a description in its source.

Social preview

One generated card, shown as a wide preview and a narrow chat-style crop.

Markdown reference

This page is a reference for markdown syntax and display, to sanity check that everything is working as expected, and appears properly when converted to HTML. It also tests features that might not be available in default configurations¹, definition lists², mathematical notation³, and tables⁴.

To see what it should look like, you can see it in action at: cade.io/test

Internal link test: link to code block

Text

Basic text in markdown is just plain text, which is rendered as-is. You can bold, italicize, underline, strikethrough, or preformat text by using special syntaces:

• bold text is surrounded by ** characters, as in: **bold text**
• italic text is surrounded by * characters, as in: *italic text*
• underlined text is surrounded by <u> tags, as in: <u>underlined text</u> (note: this is not standard markdown)
• strikethrough text is surrounded by <s> tags, as in: <s>strikethrough text</s> (note: this is not standard markdown)
• preformatted text is surrounded by backticks, as in: `preformatted text`

Furthermore, multiple styles of text can be combined, like bold italic text, by combining the syntaces: ***bold italic text***. Or, you can create really wild combinations like bold italic underlined strikethrough preformatted text. (though, your readers may not appreciate it).

You can also add footnotes¹ like this.

Block Quotes

Block quotes are denoted by prefixing lines with the > character,

1
> This is a block quote.
2
>
3
> It can span multiple lines, and contain other markdown syntax.

A somewhat uncommon feature of block quotes is that they can be nested, for example when a quote contains another quote:

You miss 100% of the shots you don’t take.

– Wayne Gretzky

– Michael Scott

Further, in some cases there can be multiple levels of nesting, which is a good test for ensuring display styles are properly cascading:

I met a traveller from an antique land

Who said:

Two vast and trunkless legs of stone

Stand in the desart. Near them, on the sand,

Half sunk, a shattered visage lies whose frown,

And wrinkled lip, and sneer of cold command,

Tell that its sculptor well those passions read

Which yet survive, stamped on these lifeless things,

The hand that mocked them and the heart that fed:

And on the pedestal these words appear:

My name is Ozymandias, King of Kings:

Look on my works, ye Mighty, and despair!

No thing beside remains. Round the decay

Of that colossal wreck, boundless and bare

The lone and level sands stretch far away.

– Percy Bysshe Shelley, “Ozymandias”

And, we can also just use straightforward block quotes, without any nesting:

We can easily forgive a child who is afraid of the dark;

the real tragedy of life is when men are afraid of the light.

– Plato

No man has the right to be an amateur in the matter of physical training.

It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable

– Socrates

Sample Text

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio. nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Code Snippets

Inline code has a small border. Code blocks use the shared renderer, with syntax highlighting, line numbers, wrapping, and a copy button.

1
const outcomes = [400, 200, 100]
2
const average = outcomes.reduce((sum, wealth) => sum + wealth, 0) / outcomes.length
3
console.log(average)

1
npm run validate

Imported source uses the same renderer and theme:

1
/** File-format builds expose .html while rendering; public HTML routes are slashless. */
2
export function canonicalPath(pathname: string): string {
3
  return (
4
    pathname
5
      .replace(/\/index\.html$/, '/')
6
      .replace(/\.html$/, '')
7
      .replace(/\/$/, '') || '/'
8
  )
9
}
10

11
export function authorUrl(id: string): string {
12
  return `/authors/${encodeURIComponent(id)}`
13
}

Unicode Symbols

Box Drawing Characters

Unicode provides a set of special characters called box-drawing characters, which allows writing tables, diagrams, and other structures directly with text. Here is a table of the most common ones:

Mathematical Symbols

Unicode provides a set of mathematical operators and symbols, which allows writing mathematical notation and equations directly with text. Here is a table of the most common ones:

Lists

Unordered Lists

Here’s an example of an unordered list:

• Item 1
• Item 2
• Item 3

And here’s another example that also nests other lists:

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
    • Item 3.2.1
      • Item 3.2.1.1
• Item 4

Ordered Lists

Here’s an example of an ordered list:

1. Item 1
2. Item 2
3. Item 3

And here’s another example that also nests other lists:

1. Item 1
2. Item 2
3. Item 3
   1. Item 3.1
   2. Item 3.2
   3. Item 3.3
4. Item 4
   1. Item 4.1
      1. Item 4.1.1
      2. Item 4.1.2
   2. Item 4.2
      1. Item 4.2.1
      2. Item 4.2.2
5. Item 5

Definition Lists

Here’s an example of a definition list, which is not standard markdown, but is supported by some markdown processors:

Term 1

Definition 1

Term 2

Definition 2

And it can have multiple definitions

Term 3

Definition 3

And it can have fancy text too

Tables

Here’s an example of a table of the largest cities in the world (from Wikipedia):

Here’s another which represents the Figurate Number Sequences (i.e. triangular numbers, tetrahedral numbers, and so on):

And those column labels are:

• $ T_n $, the triangular numbers are given by: $T_n = \frac{n(n+1)}{2}$
• $ S_n $, the square pyramidal numbers are given by: $S_n = \frac{n(n+1)(2n+1)}{6}$
• $ P_n $, the pentagonal numbers are given by: $P_n = \frac{n(3n-1)}{2}$

Assets

Images

Here’s an example of an image: