diff --git a/src/content.config.ts b/src/content.config.ts index 806681f..bc0d738 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -22,12 +22,24 @@ function sha256Digest(source: string): string { function toPlainMarkdown(body: string): string { return body .replace(/^
\n([\s\S]*?)\n<\/pre>$/gm, '```\n$1\n```')
-		.replace(/^<\/?dl>\s*$/gm, '')
-		.replace(/^
(.*?)<\/dt>\s*$/gm, '### $1') - .replace(/^<\/?dd>\s*$/gm, '') .replace(/\n{3,}/g, '\n\n'); } +// Inject inline HTML into the spec source before rendering so that the FAQ +// comparison table shows accessible support indicators in HTML, while the +// plain Markdown body keeps its prose for curl/llms.txt consumers. +function preprocessForRendering(source: string): string { + return source + .replace( + /\| Supported \|/g, + '| |', + ) + .replace( + /\| Not supported \|/g, + '| |', + ); +} + const specification = defineCollection({ loader: { name: 'sembr-specification', @@ -46,7 +58,7 @@ const specification = defineCollection({ const id = 'sembr'; const data = await parseData({ id, data: {} }); const digest = generateDigest(source); - const rendered = await renderMarkdown(source); + const rendered = await renderMarkdown(preprocessForRendering(source)); const body = toPlainMarkdown(source); store.set({ id, data, body, digest, rendered }); diff --git a/src/styles/global.css b/src/styles/global.css index 6f5e203..ac6e008 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -307,17 +307,19 @@ code { font-size: 0.9em; line-height: var(--space-s); + white-space: nowrap; } pre { display: block; - overflow-x: scroll; + overflow-x: auto; width: 100%; padding: var(--space-s); font-size: calc((min(100vw, 900px) - 5rem) / 50); & code { font-size: inherit; + white-space: inherit; } &.sembr { @@ -328,6 +330,7 @@ ::-webkit-scrollbar { -webkit-appearance: none; width: 3px; + height: 3px; } ::-webkit-scrollbar-thumb { @@ -335,6 +338,74 @@ background-color: var(--color-rule); } + /* Tables */ + + table { + width: 100%; + border-collapse: collapse; + font-size: 0.9em; + font-feature-settings: "kern", "lnum", "tnum"; + } + + caption { + margin-block-end: var(--space-s); + color: var(--color-heading); + font-family: var(--font-sans); + font-weight: 700; + text-align: start; + } + + th, + td { + padding: 0.5em 0.75em; + text-align: start; + vertical-align: baseline; + overflow-wrap: break-word; + } + + th:first-child, + td:first-child { + padding-inline-start: 0; + } + + th:last-child, + td:last-child { + padding-inline-end: 0; + text-align: end; + } + + th { + color: var(--color-heading); + font-family: var(--font-sans); + font-weight: 700; + } + + thead { + border-block-end: var(--rule) solid var(--color-rule); + } + + tbody tr+tr { + border-block-start: 1px solid var(--color-rule); + } + + tbody tr>td:first-child { + font-weight: 700; + } + + mark[data-supported="true"] { + color: var(--color-heading); + } + + mark[data-supported="false"] { + color: var(--color-rule); + } + + /* Footnotes */ + + .footnotes { + font-size: 0.85em; + } + /* Separator */ hr {