Froth Pages

`, which is equivalent to `

`. There\n * may be other odd cases that need to be added to this list in future\n * @type {Record>}\n */\nconst replacements = {\n\ttranslate: new Map([\n\t\t[true, 'yes'],\n\t\t[false, 'no']\n\t])\n};\n\n/**\n * @template V\n * @param {string} name\n * @param {V} value\n * @param {boolean} [is_boolean]\n * @returns {string}\n */\nexport function attr(name, value, is_boolean = false) {\n\tif (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';\n\tconst normalized = (name in replacements && replacements[name].get(value)) || value;\n\tconst assignment = is_boolean ? '' : `=\"${escape_html(normalized, true)}\"`;\n\treturn ` ${name}${assignment}`;\n}\n","import { writable } from 'svelte/store';\nexport const storeHighlightJs = writable(undefined);\n// TODO: add support for other highlighters here in the future\n","export function clipboard(node, args) {\n if (!window.isSecureContext) {\n console.error('Clipboard action failed: app not running in secure context, see: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard');\n return {};\n }\n const fireCopyCompleteEvent = () => {\n node.dispatchEvent(new CustomEvent('copyComplete'));\n };\n const onClick = () => {\n // Handle `data-clipboard` target based on object key\n if (typeof args === 'object') {\n // Element Inner HTML\n if ('element' in args) {\n const element = document.querySelector(`[data-clipboard=\"${args.element}\"]`);\n if (!element)\n throw new Error(`Missing HTMLElement with an attribute of [data-clipboard=\"${args.element}\"]`);\n copyToClipboard(element.innerHTML, 'text/html').then(fireCopyCompleteEvent);\n return;\n }\n // Form Input Value\n if ('input' in args) {\n const input = document.querySelector(`[data-clipboard=\"${args.input}\"]`);\n if (!input)\n throw new Error(`Missing HTMLInputElement with an attribute of [data-clipboard=\"${args.input}\"]`);\n copyToClipboard(input.value).then(fireCopyCompleteEvent);\n return;\n }\n }\n // Handle everything else.\n copyToClipboard(args).then(fireCopyCompleteEvent);\n };\n // Event Listener\n node.addEventListener('click', onClick);\n // Lifecycle\n return {\n update(newArgs) {\n args = newArgs;\n },\n destroy() {\n node.removeEventListener('click', onClick);\n }\n };\n}\n// Shared copy method\nasync function copyToClipboard(data, mimeType = 'text/plain') {\n if (navigator.clipboard.write) {\n await navigator.clipboard.write([\n new ClipboardItem({\n [mimeType]: new Blob([data], {\n type: mimeType\n }),\n ['text/plain']: new Blob([data], {\n type: 'text/plain'\n })\n })\n ]);\n }\n else {\n // fallback since .writeText has wider browser support\n await new Promise((resolve) => {\n resolve(navigator.clipboard.writeText(String(data)));\n });\n }\n}\n","/** @import { BlurParams, CrossfadeParams, DrawParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from './public' */\n/** @param {number} x */\nconst linear = (x) => x;\n\n/** @param {number} t */\nfunction cubic_out(t) {\n\tconst f = t - 1.0;\n\treturn f * f * f + 1.0;\n}\n\n/**\n * @param {number} t\n * @returns {number}\n */\nfunction cubic_in_out(t) {\n\treturn t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;\n}\n\n/** @param {number | string} value\n * @returns {[number, string]}\n */\nfunction split_css_unit(value) {\n\tconst split = typeof value === 'string' && value.match(/^\\s*(-?[\\d.]+)([^\\s]*)\\s*$/);\n\treturn split ? [parseFloat(split[1]), split[2] || 'px'] : [/** @type {number} */ (value), 'px'];\n}\n\n/**\n * Animates a `blur` filter alongside an element's opacity.\n *\n * @param {Element} node\n * @param {BlurParams} [params]\n * @returns {TransitionConfig}\n */\nexport function blur(\n\tnode,\n\t{ delay = 0, duration = 400, easing = cubic_in_out, amount = 5, opacity = 0 } = {}\n) {\n\tconst style = getComputedStyle(node);\n\tconst target_opacity = +style.opacity;\n\tconst f = style.filter === 'none' ? '' : style.filter;\n\tconst od = target_opacity * (1 - opacity);\n\tconst [value, unit] = split_css_unit(amount);\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`\n\t};\n}\n\n/**\n * Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.\n *\n * @param {Element} node\n * @param {FadeParams} [params]\n * @returns {TransitionConfig}\n */\nexport function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {\n\tconst o = +getComputedStyle(node).opacity;\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (t) => `opacity: ${t * o}`\n\t};\n}\n\n/**\n * Animates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.\n *\n * @param {Element} node\n * @param {FlyParams} [params]\n * @returns {TransitionConfig}\n */\nexport function fly(\n\tnode,\n\t{ delay = 0, duration = 400, easing = cubic_out, x = 0, y = 0, opacity = 0 } = {}\n) {\n\tconst style = getComputedStyle(node);\n\tconst target_opacity = +style.opacity;\n\tconst transform = style.transform === 'none' ? '' : style.transform;\n\tconst od = target_opacity * (1 - opacity);\n\tconst [x_value, x_unit] = split_css_unit(x);\n\tconst [y_value, y_unit] = split_css_unit(y);\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (t, u) => `\n\t\t\ttransform: ${transform} translate(${(1 - t) * x_value}${x_unit}, ${(1 - t) * y_value}${y_unit});\n\t\t\topacity: ${target_opacity - od * u}`\n\t};\n}\n\n/**\n * Slides an element in and out.\n *\n * @param {Element} node\n * @param {SlideParams} [params]\n * @returns {TransitionConfig}\n */\nexport function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) {\n\tconst style = getComputedStyle(node);\n\tconst opacity = +style.opacity;\n\tconst primary_property = axis === 'y' ? 'height' : 'width';\n\tconst primary_property_value = parseFloat(style[primary_property]);\n\tconst secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];\n\tconst capitalized_secondary_properties = secondary_properties.map(\n\t\t(e) => /** @type {'Left' | 'Right' | 'Top' | 'Bottom'} */ (`${e[0].toUpperCase()}${e.slice(1)}`)\n\t);\n\tconst padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);\n\tconst padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);\n\tconst margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);\n\tconst margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);\n\tconst border_width_start_value = parseFloat(\n\t\tstyle[`border${capitalized_secondary_properties[0]}Width`]\n\t);\n\tconst border_width_end_value = parseFloat(\n\t\tstyle[`border${capitalized_secondary_properties[1]}Width`]\n\t);\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (t) =>\n\t\t\t'overflow: hidden;' +\n\t\t\t`opacity: ${Math.min(t * 20, 1) * opacity};` +\n\t\t\t`${primary_property}: ${t * primary_property_value}px;` +\n\t\t\t`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +\n\t\t\t`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +\n\t\t\t`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +\n\t\t\t`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +\n\t\t\t`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +\n\t\t\t`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`\n\t};\n}\n\n/**\n * Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.\n *\n * @param {Element} node\n * @param {ScaleParams} [params]\n * @returns {TransitionConfig}\n */\nexport function scale(\n\tnode,\n\t{ delay = 0, duration = 400, easing = cubic_out, start = 0, opacity = 0 } = {}\n) {\n\tconst style = getComputedStyle(node);\n\tconst target_opacity = +style.opacity;\n\tconst transform = style.transform === 'none' ? '' : style.transform;\n\tconst sd = 1 - start;\n\tconst od = target_opacity * (1 - opacity);\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (_t, u) => `\n\t\t\ttransform: ${transform} scale(${1 - sd * u});\n\t\t\topacity: ${target_opacity - od * u}\n\t\t`\n\t};\n}\n\n/**\n * Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `` and ``.\n *\n * @param {SVGElement & { getTotalLength(): number }} node\n * @param {DrawParams} [params]\n * @returns {TransitionConfig}\n */\nexport function draw(node, { delay = 0, speed, duration, easing = cubic_in_out } = {}) {\n\tlet len = node.getTotalLength();\n\tconst style = getComputedStyle(node);\n\tif (style.strokeLinecap !== 'butt') {\n\t\tlen += parseInt(style.strokeWidth);\n\t}\n\tif (duration === undefined) {\n\t\tif (speed === undefined) {\n\t\t\tduration = 800;\n\t\t} else {\n\t\t\tduration = len / speed;\n\t\t}\n\t} else if (typeof duration === 'function') {\n\t\tduration = duration(len);\n\t}\n\treturn {\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tcss: (_, u) => `\n\t\t\tstroke-dasharray: ${len};\n\t\t\tstroke-dashoffset: ${u * len};\n\t\t`\n\t};\n}\n\n/**\n * @template T\n * @template S\n * @param {T} tar\n * @param {S} src\n * @returns {T & S}\n */\nfunction assign(tar, src) {\n\t// @ts-ignore\n\tfor (const k in src) tar[k] = src[k];\n\treturn /** @type {T & S} */ (tar);\n}\n\n/**\n * The `crossfade` function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.\n *\n * @param {CrossfadeParams & {\n * \tfallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n * }} params\n * @returns {[(node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig, (node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig]}\n */\nexport function crossfade({ fallback, ...defaults }) {\n\t/** @type {Map} */\n\tconst to_receive = new Map();\n\t/** @type {Map} */\n\tconst to_send = new Map();\n\n\t/**\n\t * @param {Element} from_node\n\t * @param {Element} node\n\t * @param {CrossfadeParams} params\n\t * @returns {TransitionConfig}\n\t */\n\tfunction crossfade(from_node, node, params) {\n\t\tconst {\n\t\t\tdelay = 0,\n\t\t\tduration = /** @param {number} d */ (d) => Math.sqrt(d) * 30,\n\t\t\teasing = cubic_out\n\t\t} = assign(assign({}, defaults), params);\n\t\tconst from = from_node.getBoundingClientRect();\n\t\tconst to = node.getBoundingClientRect();\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\t\tconst dw = from.width / to.width;\n\t\tconst dh = from.height / to.height;\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\t\tconst style = getComputedStyle(node);\n\t\tconst transform = style.transform === 'none' ? '' : style.transform;\n\t\tconst opacity = +style.opacity;\n\t\treturn {\n\t\t\tdelay,\n\t\t\tduration: typeof duration === 'function' ? duration(d) : duration,\n\t\t\teasing,\n\t\t\tcss: (t, u) => `\n\t\t\t opacity: ${t * opacity};\n\t\t\t transform-origin: top left;\n\t\t\t transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${\n\t\t\t\t\t\tt + (1 - t) * dh\n\t\t\t\t\t});\n\t\t `\n\t\t};\n\t}\n\n\t/**\n\t * @param {Map} items\n\t * @param {Map} counterparts\n\t * @param {boolean} intro\n\t * @returns {(node: any, params: CrossfadeParams & { key: any; }) => () => TransitionConfig}\n\t */\n\tfunction transition(items, counterparts, intro) {\n\t\t// @ts-expect-error TODO improve typings (are the public types wrong?)\n\t\treturn (node, params) => {\n\t\t\titems.set(params.key, node);\n\t\t\treturn () => {\n\t\t\t\tif (counterparts.has(params.key)) {\n\t\t\t\t\tconst other_node = counterparts.get(params.key);\n\t\t\t\t\tcounterparts.delete(params.key);\n\t\t\t\t\treturn crossfade(/** @type {Element} */ (other_node), node, params);\n\t\t\t\t}\n\t\t\t\t// if the node is disappearing altogether\n\t\t\t\t// (i.e. wasn't claimed by the other list)\n\t\t\t\t// then we need to supply an outro\n\t\t\t\titems.delete(params.key);\n\t\t\t\treturn fallback && fallback(node, params, intro);\n\t\t\t};\n\t\t};\n\t}\n\treturn [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];\n}\n","\n\n\n\n\n\n

\n\t\n

\n","// Transitions ---\nexport function dynamicTransition(node, dynParams) {\n const { transition, params, enabled } = dynParams;\n if (enabled)\n return transition(node, params);\n // it's better to just set the `duration` to 0 to prevent flickering\n if ('duration' in params)\n return transition(node, { duration: 0 });\n // if the transition doesn't provide a `duration` prop, then we'll just return this as a last resort\n return { duration: 0 };\n}\n","\n\n\n\n

\n\t\n\t\n\t\t\n\t\t{#if $$slots.lead}\n\t\t\t

\n\t\t\t\t\n\t\t\t

\n\t\t{/if}\n\t\t\n\t\t

\n\t\t\t(summary)\n\t\t

\n\t\t\n\t\t{#if $$slots.iconClosed || $$slots.iconOpen}\n\t\t\t\n\t\t\t\n\t\t\t

\n\t\t\t\t{#if openState}\n\t\t\t\t\t{@html svgCaretIcon}\n\t\t\t\t{:else}\n\t\t\t\t\t{@html svgCaretIcon}\n\t\t\t\t{/if}\n\t\t\t

\n\t\t{:else}\n\t\t\t\n\t\t\t

{@html svgCaretIcon}

\n\t\t{/if}\n\t\n\t\n\t{#if openState}\n\t\t\n\t\t\t(content)\n\t\t

\n\t{/if}\n

\n","\n\n\n\n

\n\t\n\t{#if $state.total}\n\t\t\n\t\t\t{#each Array.from(Array($state.total).keys()) as step}\n\t\t\t\t

\n\t\t\t\t\t{isActive(step) ? `${stepTerm} ${step + 1}` : step + 1}\n\t\t\t\t

\n\t\t\t{/each}\n\t\t\n\t{/if}\n\t\n\t

\n\t\t\n\t

\n","\n\n\n{#if stepIndex === $state.current}\n\t

\n\t\t\n\t\t

\n\t\t\t{stepTerm} {stepIndex + 1}\n\t\t

\n\t\t\n\t\t

\n\t\t\t({stepTerm} {stepIndex + 1} Content)\n\t\t

\n\t\t\n\t\t{#if $state.total > 1}\n\t\t\t\n\t\t\t\t{#if stepIndex === 0 && $$slots.navigation}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{:else}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{/if}\n\t\t\t\t{#if stepIndex < $state.total - 1}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{:else}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{/if}\n\t\t\t

\n\t\t{/if}\n\t

What about custom domains?

What about custom domains?