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 {