From 2a04d1057bf0a59282536482e57661a2e9bf870c Mon Sep 17 00:00:00 2001
From: Dylan Depass <dylandepass@gmail.com>
Date: Wed, 22 Jan 2025 14:44:50 -0500
Subject: [PATCH] feat: format JSON-LD in response

---
 src/steps/render.js                                  |  2 +-
 .../content/page-metadata-jsonld-global.html         |  6 +++++-
 test/fixtures/content/page-metadata-jsonld-list.html | 12 +++++++++++-
 .../fixtures/content/page-metadata-jsonld-multi.html |  6 +++++-
 test/fixtures/content/page-metadata-jsonld-xss.html  |  4 +++-
 test/fixtures/content/page-metadata-jsonld.html      |  7 ++++++-
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/steps/render.js b/src/steps/render.js
index ecd560f3..94f5b657 100644
--- a/src/steps/render.js
+++ b/src/steps/render.js
@@ -37,7 +37,7 @@ function createElement(name, ...attrs) {
 
 function sanitizeJsonLd(jsonLd) {
   const sanitizedJsonLd = jsonLd.replaceAll('<', '&#x3c;').replaceAll('>', '&#x3e;');
-  return JSON.stringify(JSON.parse(sanitizedJsonLd.trim()));
+  return JSON.stringify(JSON.parse(sanitizedJsonLd.trim()), null, 2);
 }
 
 /**
diff --git a/test/fixtures/content/page-metadata-jsonld-global.html b/test/fixtures/content/page-metadata-jsonld-global.html
index 7004bc9a..ec6d80f0 100644
--- a/test/fixtures/content/page-metadata-jsonld-global.html
+++ b/test/fixtures/content/page-metadata-jsonld-global.html
@@ -8,7 +8,11 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Global JSON LD Test">
     <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
-    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"AA-BB-GLOBAL"}</script>
+    <script type="application/ld+json">{
+        "@context": "http://schema.org",
+        "@type": "Product",
+        "sku": "AA-BB-GLOBAL"
+    }</script>
     <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/scripts.js" type="module"></script>
diff --git a/test/fixtures/content/page-metadata-jsonld-list.html b/test/fixtures/content/page-metadata-jsonld-list.html
index e3e0c285..0bc959fc 100644
--- a/test/fixtures/content/page-metadata-jsonld-list.html
+++ b/test/fixtures/content/page-metadata-jsonld-list.html
@@ -8,7 +8,17 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Home | Helix Project Boilerplate">
     <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
-    <script type="application/ld+json">{"@context":"https://schema.org","@type":"Course","name":"Getting Started with AEM","description":"Setup your first project with AEM for Developers.","provider":{"@type":"Organization","name":"Adobe","sameAs":"http://www.adobe.com"}}</script>
+    <script type="application/ld+json">{
+        "@context": "https://schema.org",
+        "@type": "Course",
+        "name": "Getting Started with AEM",
+        "description": "Setup your first project with AEM for Developers.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Adobe",
+          "sameAs": "http://www.adobe.com"
+        }
+    }</script>
     <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/scripts.js" type="module"></script>
diff --git a/test/fixtures/content/page-metadata-jsonld-multi.html b/test/fixtures/content/page-metadata-jsonld-multi.html
index e0d9b564..92d73d26 100644
--- a/test/fixtures/content/page-metadata-jsonld-multi.html
+++ b/test/fixtures/content/page-metadata-jsonld-multi.html
@@ -8,7 +8,11 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Home | Helix Project Boilerplate">
     <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
-    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"FOO-BAR-12345"}</script>
+    <script type="application/ld+json">{
+        "@context": "http://schema.org",
+        "@type": "Product",
+        "sku": "FOO-BAR-12345"
+    }</script>
     <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/scripts.js" type="module"></script>
diff --git a/test/fixtures/content/page-metadata-jsonld-xss.html b/test/fixtures/content/page-metadata-jsonld-xss.html
index 9f3d1388..2ef3690c 100644
--- a/test/fixtures/content/page-metadata-jsonld-xss.html
+++ b/test/fixtures/content/page-metadata-jsonld-xss.html
@@ -8,7 +8,9 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Home | Helix Project Boilerplate">
     <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
-    <script type="application/ld+json">{"foo:":"&#x3c;/script&#x3e;alert('hello, world.')"}</script>
+    <script type="application/ld+json">{
+        "foo:": "&#x3c;/script&#x3e;alert('hello, world.')"
+    }</script>
     <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/scripts.js" type="module"></script>
diff --git a/test/fixtures/content/page-metadata-jsonld.html b/test/fixtures/content/page-metadata-jsonld.html
index 0454a95b..1dbb1a70 100644
--- a/test/fixtures/content/page-metadata-jsonld.html
+++ b/test/fixtures/content/page-metadata-jsonld.html
@@ -8,7 +8,12 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Home | Helix Project Boilerplate">
     <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
-    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"BPB-CMON-TABS"}</script>
+    <script type="application/ld+json">{
+        "@context": "http://schema.org",
+        "@type": "Product",
+        "sku": "BPB-CMON-TABS"
+    }
+    </script>
     <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/scripts.js" type="module"></script>