Merge pull request #208 from CloudCannon/feat/hugo-markdown-unsafe

Updated Hugo goldmark config to allow rendering HTML via `markdownify`
CloudCannon · Feb 12, 2025 · 06fe868 · 06fe868
2 parents b725e70 + a1518f5
commit 06fe868
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@
 
 ## Unreleased
 
+* Updated Hugo Bookshop's goldmark settings to allow rendering HTML through the `markdownify` function.
+
 ## v3.13.0 (January 22, 2025)
 
 * Added support for Astro 5.

diff --git a/javascript-modules/engines/hugo-engine/lib/engine.js b/javascript-modules/engines/hugo-engine/lib/engine.js
@@ -66,7 +66,7 @@ export class Engine {
             "layouts/partials/_bookshop/errors/err.html": (await import("../bookshop-hugo-templates/errors/err.html")).default,
         };
 
-        templates["config.toml"] = "params.env_bookshop_live = true";
+        templates["config.toml"] = "params.env_bookshop_live = true\nmarkup.goldmark.renderer.unsafe = true";
 
         // When this script is run locally, the hugo wasm is loaded as binary rather than output as a file.
         if (compressedHugoWasm?.constructor === Uint8Array) {
@@ -206,7 +206,8 @@ export class Engine {
                 meta.baseurl ? `baseURL = ${meta.baseurl}` : "",
                 meta.copyright ? `copyright = ${meta.copyright}` : "",
                 meta.title ? `title = ${meta.title}` : "",
-                "params.env_bookshop_live = true"
+                "params.env_bookshop_live = true",
+                "markup.goldmark.renderer.unsafe = true"
             ].join('\n')
         }));
         const err = window.initHugoConfig();

diff --git a/...odules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_edge_cases.feature b/...odules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_edge_cases.feature
@@ -130,3 +130,46 @@ Feature: Hugo Bookshop CloudCannon Live Editing Edge Cases
     *    🌐 The selector div:nth-of-type(1)>span:nth-of-type(2) should contain 'text: Hello'
     *    🌐 The selector div:nth-of-type(2)>span:nth-of-type(1) should contain '_bookshop_name: text'
     *    🌐 The selector div:nth-of-type(2)>span:nth-of-type(2) should contain 'text: Hooray'
+
+  Scenario: Hugo Bookshop live renders unsafe Markdown
+    Given a component-lib/components/cont/cont.hugo.html file containing:
+      """
+      <div class="c-content">{{ .text | markdownify }}</div>
+      """
+    Given [front_matter]:
+      """
+      content:
+        text: |-
+          <h3 class="bolder">Heading</h3>
+
+          normal markdown
+      """
+    And a site/content/_index.md file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      """
+    And a site/layouts/index.html file containing:
+      """
+      <html>
+      <body>
+      {{ partial "bookshop_bindings" `.Params.content` }}
+      {{ partial "bookshop" (slice "cont" .Params.content) }}
+      </body>
+      </html>
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    When 🌐 CloudCannon pushes new yaml:
+      """
+      content:
+        text: |-
+          <h3 class="bolder">Bolder Heading</h3>
+
+          normal markdown
+      """
+    And  🌐 "window.bookshopLive?.renderCount === 2" evaluates
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector h3 should match '<h3 class="bolder">Bolder Heading</h3>'
+    *    🌐 The selector p should match '<p>normal markdown</p>'