show unsupported keys

Author: NiklasMerz

_layouts/feature.html

@@ -176,20 +176,27 @@ <h4 class="data-platform-name">
 		<div class="data-notes">
 			{% if has-page-notes == true or page.notes_by_num.size > 0 %}
 			<h2 class="list-title">Notes</h2>
-			{% if has-page-notes == true %}
-			{{ page.notes | markdownify }}
-			{% endif %}
 			{% if page.notes_by_num.size > 0 %}
+			<h3 class="list-subtitle">Unsupported keys in WebViews</h3>
 			<ul class="data-notes-list">
 				{% for note in page.notes_by_num %}
 				{% assign note-key = note | first %}
 				{% assign note-value = note | last %}
 				<li class="data-note" id="{{ page.slug }}-cite-note-{{ note-key | slugify }}">
-					<span class="data-note-key">{{ note-key }}</span> {{ note-value | markdownify }}
+					<b>{{ site.data.nicenames.family[note-key] }}:</b>
+					<div class="note-tags">
+						{% assign note-items = note-value | split: ',' %}
+						{% for item in note-items %}
+							<span class="tag unsupported">{{ item | strip }}</span>
+						{% endfor %}
+					</div>
 				</li>
 				{% endfor %}
 			</ul>
 			{% endif %}
+			{% if has-page-notes == true %}
+			{{ page.notes | markdownify }}
+			{% endif %}
 			{% endif %}
 			{% if page.links.size > 0 %}
 			<h2 class="list-title">Resources</h2>

_plugins/generated_features.rb

@@ -158,6 +158,7 @@ def generate_baseline(site)
 			doc.data['notes'] = data_source
 			doc.data['links'] = feature['links']
 			doc.data['stats'] = feature['stats']
+			doc.data['notes_by_num'] = feature['notes_by_num']
 			doc.data['baseline'] = feature['baseline']
 
 			site.collections['generated_features'].docs << doc

_sass/_pages/_feature.scss

@@ -200,6 +200,10 @@
 	background-color: #eda745 !important;
 }
 
+.partially-header {
+	color: #eda745 !important;
+}
+
 .score .mitigated {
 	background-image: repeating-linear-gradient(
 		-45deg,
@@ -678,6 +682,17 @@
 	}
 }
 
+.note-tags {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: rem(4px);
+	margin-top: rem(4px);
+
+	.tag {
+		font-size: rem(14px);
+	}
+}
+
 .data-note-key {
 	display: flex;
 	justify-content: center;

tools/baseline.ts

@@ -74,6 +74,7 @@ fetch(`http://unpkg.com/@mdn/browser-compat-data@${bcdVersion}/data.json`)
 					}
 				}
 			};
+			const notes = {};
 
 			try {
 				const computed = computeBaseline({
@@ -109,9 +110,8 @@ fetch(`http://unpkg.com/@mdn/browser-compat-data@${bcdVersion}/data.json`)
 						if (anySupported) {
 							stats[platform][sub] = {
 								"*": 'a',
-								//"supported_keys": supportedKeys,
-								//"unsupported_keys": unsupportedKeys
 							};
+							notes[platform] = unsupportedKeys.join(', ');
 						} else {
 							stats[platform][sub] = {
 								"u": 'n'
@@ -142,9 +142,10 @@ fetch(`http://unpkg.com/@mdn/browser-compat-data@${bcdVersion}/data.json`)
 				slug: 'web-feature-' + key,
 				description: feature.description_html,
 				category: 'web_feature',
-				keywords: '',
+				keywords: 'web-feature',
 				last_test_date,
 				stats,
+				notes_by_num: notes,
 				links: {},
 				baseline: {
 					webviewBaseline,