feat: add implementationStatus badge (Baseline browser availability)#5174
feat: add implementationStatus badge (Baseline browser availability)#5174marcoscaceres wants to merge 2 commits intomainfrom
Conversation
marcoscaceres
force-pushed
the
baseline-badge
branch
6 times, most recently
from
6492196 to
449ed44
Compare
marcoscaceres
force-pushed
the
baseline-badge
branch
from
449ed44 to
c0b7c44
Compare
There was a problem hiding this comment.
Pull request overview
Adds a new implementationStatus feature to ReSpec’s W3C profile that fetches Baseline availability data from web-features and renders an “implementation status” badge + browser support indicators in the document front matter.
Changes:
- Introduces
core/implementation-statusmodule to fetch web-features data, auto-detect relevant features, aggregate status, and render a badge in the.head dl. - Adds dedicated styling for the badge/UI elements.
- Adds unit tests + local fixtures and an example document to demonstrate configuration.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
src/core/implementation-status.js |
New core module that fetches Baseline data, resolves features, aggregates status/support, renders badge, and supports removeOnSave. |
src/styles/implementation-status.css.js |
New CSS for badge layout, dark mode, and print behavior. |
profiles/w3c.js |
Registers the new module in the W3C processing pipeline. |
tests/spec/core/implementation-status-spec.js |
Adds unit tests for rendering, auto-detection, aggregation, and config normalization. |
tests/data/baseline/data.json |
Adds test fixtures for Baseline/web-features-like data. |
examples/baseline.html |
Adds a runnable example demonstrating the new configuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
marcoscaceres
force-pushed
the
baseline-badge
branch
2 times, most recently
from
2bfcfe5 to
cbcf529
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
marcoscaceres
force-pushed
the
baseline-badge
branch
from
cbcf529 to
a282850
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const ENGINES = new Map([ | ||
| ["chrome", "Chrome"], | ||
| ["edge", "Edge"], | ||
| ["firefox", "Firefox"], | ||
| ["safari", "Safari"], | ||
| ]); |
There was a problem hiding this comment.
ENGINES is keyed by browser IDs (chrome/edge/firefox/safari) and maps to browser names, not engine names. Renaming this (e.g., to BROWSERS/BROWSER_NAMES) and updating related identifiers (like ENGINE_GROUPS.engines) would make the intent clearer and reduce confusion for future maintainers.
There was a problem hiding this comment.
agree... this should be BROWSERS
marcoscaceres
force-pushed
the
baseline-badge
branch
from
a282850 to
e29e742
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
New module that shows a Baseline browser availability badge in the spec front matter (e.g. "Limited availability [icon]:"), driven by web-features data from web-platform-dx. Config: `respecConfig.implementationStatus` accepts `true` (auto-detect from spec URLs), a feature ID string, or an options object. Features: - Auto-detects features by matching spec URLs against web-features data - Shows browser icons grouped by engine in rounded pills - Uses official Baseline SVG icons from web-platform-dx/baseline-status - Uses official support indicator SVGs (check/x with arc) - Aggregates multi-feature specs using worst-of semantics - removeOnSave collapses to a static link - Dark mode and print support
marcoscaceres
force-pushed
the
baseline-badge
branch
from
e29e742 to
5b8408d
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
Adds a new
implementationStatusconfig option that shows a Baseline browser availability badge in the spec front matter, driven by web-features data.This addresses the W3C TAG's request that specs signal their implementation status to developers "at a glance" (w3ctag/design-reviews#1187). By building this into ReSpec, every spec gets data-driven implementation status automatically, rather than requiring manual editorial text per spec.
Configuration
What it renders
A
<dt>/<dd>pair in the front matter showing:Features
removeOnSavecollapses to a static linkFiles
src/core/implementation-status.js— new modulesrc/styles/implementation-status.css.js— stylingprofiles/w3c.js— registered in pipelineexamples/baseline.html— demo (try different feature IDs)tests/spec/core/implementation-status-spec.js— 9 teststests/data/baseline/data.json— test fixturesFuture work
caniusemodule (this subsumes its purpose)Test plan