JSON output for features

Author: captainbrosset

.eleventy.js

@@ -310,6 +310,10 @@ export default function (eleventyConfig) {
     return `~${(value * 100).toFixed(3)}%`;
   });
 
+  eleventyConfig.addFilter("stringify", (data) => {
+    return JSON.stringify(data, null, " ", 2)
+  })
+
   eleventyConfig.addGlobalData("versions", async () => {
     const { default: webFeaturesPackageJson } = await import(
       "./node_modules/web-features/package.json",

site/_includes/feature_full.njk

@@ -35,11 +35,14 @@
   {% include "wpt.njk" %}
 
   <p class="edit-links">
-    <a href="https://github.com/web-platform-dx/web-features/blob/main/features/{{ feature.id }}.yml">View the feature source file</a>
-    <a href="https://github.com/web-platform-dx/web-features/blob/main/features/{{ feature.id }}.yml.dist">(dist)</a>
-    -
-    <a href="https://github.com/web-platform-dx/web-features/edit/main/features/{{ feature.id }}.yml">Edit the feature</a>
-    -
-    <a href="https://github.com/web-platform-dx/web-features/issues/new?title=[{{ feature.id }}] Issue title&body=Please describe the issue here...">Report an issue about this feature</a>
+    <a href="../{{ feature.id | slugify }}.json">View as JSON</a>
+    |
+    <a href="https://github.com/web-platform-dx/web-features/edit/main/features/{{ feature.id }}.yml">Edit this feature</a>
+    |
+    <a href="https://github.com/web-platform-dx/web-features/issues/new?title=[{{ feature.id }}] Issue title&body=Please describe the issue here...">Report an issue</a>
+    |    
+    Web-features entry:
+    <a href="https://github.com/web-platform-dx/web-features/blob/main/features/{{ feature.id }}.yml">source</a>,
+    <a href="https://github.com/web-platform-dx/web-features/blob/main/features/{{ feature.id }}.yml.dist">dist</a>
   </p>
 </div>

site/feature-json.njk

@@ -0,0 +1,8 @@
+---
+pagination:
+  data: allFeatures
+  size: 1
+  alias: feature
+permalink: "features/{{ feature.id | slugify }}.json"
+---
+{{ feature | stringify | safe }}