Add discouraged reason

Author: captainbrosset

.eleventy.js

@@ -124,6 +124,31 @@ export default async function (eleventyConfig) {
 
   eleventyConfig.addLiquidFilter("dateToRfc3339", feedPlugin.dateToRfc3339);
 
+  eleventyConfig.addFilter("prettyUrlForAdditionalDiscouragedInfo", function(value) {
+    const ghPrefix = "https://github.com/";
+    const w3cPrefix = "https://www.w3.org/";
+    const csswgDraftPrefix = "https://drafts.csswg.org/";
+    const htmlSpecPrefix = "https://html.spec.whatwg.org/multipage/";
+
+    if (value.startsWith(ghPrefix)) {
+      return value.substring(ghPrefix.length) + " (GitHub)";
+    }
+
+    if (value.startsWith(w3cPrefix)) {
+      return value.substring(w3cPrefix.length) + " (W3C)";
+    }
+
+    if (value.startsWith(csswgDraftPrefix)) {
+      return value.substring(csswgDraftPrefix.length) + " (CSSWG draft)";
+    }
+
+    if (value.startsWith(htmlSpecPrefix)) {
+      return value.substring(htmlSpecPrefix.length) + " (HTML spec)";
+    }
+
+    return value;
+  })
+
   eleventyConfig.addPassthroughCopy("site/assets");
   eleventyConfig.addPassthroughCopy({ "node_modules/apexcharts/dist/apexcharts.css": "assets/apexcharts.css" });
   eleventyConfig.addPassthroughCopy({ "node_modules/apexcharts/dist/apexcharts.min.js": "assets/apexcharts.js" });

site/_includes/discouraged.njk

@@ -1,21 +1,26 @@
 {% if feature.discouraged %}
   <div class="discouraged-info">
     <p>
-      This feature is discouraged.
-      {% if feature.discouraged.alternatives %}
-        Consider using
-          {% for alternative in feature.discouraged.alternatives %}
-            <a href="/features/{{ alternative }}">{{ allFeaturesAsObject[alternative].name }}</a>
-            {% if not loop.last %}, {% endif %}
-          {% endfor %}
-        instead.
+      <strong>This feature is discouraged</strong>
+      {% if feature.discouraged.reason %}
+        &mdash; {{ feature.discouraged.reason }}
       {% endif %}
-      For the rationale, see:
     </p>
-    <ul>
+    {% if feature.discouraged.alternatives %}
+      <p>
+        Consider using
+        {% for alternative in feature.discouraged.alternatives %}
+          <a href="/features/{{ alternative }}">{{ allFeaturesAsObject[alternative].name }}</a>
+          {% if not loop.last %}, {% endif %}
+        {% endfor %}
+        instead.
+      </p>
+    {% endif %}
+    <p>For more information, see:
       {% for rationale in feature.discouraged.according_to %}
-        <li><a href="{{ rationale }}">{{ rationale }}</a></li>
+        <a href="{{ rationale }}">{{ rationale | prettyUrlForAdditionalDiscouragedInfo }}</a>
+        {% if not loop.last %}, {% endif %}
       {% endfor %}
-    </ul>
+    </p>
   </div>
 {% endif %}

site/assets/styles.css

@@ -384,6 +384,10 @@ a:hover {
   margin: 0;
 }
 
+.feature-page .discouraged-info p:not(:last-child) {
+  margin-block-end: .5rem;
+}
+
 .feature-page .feature-box {
   background: var(--background-alt);
   padding: calc(var(--margin) / 2);