Render post, page and comment bodies from the server

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.2.0
+
+- Post, page and comment bodies are rendered by goblog on the server; the theme no longer ships showdown or DOMPurify. Embeds that DOMPurify used to strip (YouTube, Instagram) work again, and the body reaches crawlers and link-preview bots.
+- The comment Preview button shows the draft as plain text, since no markdown library is loaded on the page.
+- Requires goblog 0.10.0.
+
 ## 1.1.0
 
 - The search page includes goblog's shared `_search_results` partial instead of rendering the post list itself, so plugin, theme and docs hits appear in the site search. The result colours the template used to set inline now come from `goblog.css`.

goblog-theme.json

@@ -4,6 +4,6 @@
   "description": "Misty greens, a soft serif and a full-bleed forest backdrop — goblog's forest theme.",
   "author": "Jason Ernst",
   "license": "Apache-2.0",
-  "min_goblog_version": "0.8.0",
+  "min_goblog_version": "0.10.0",
   "homepage": "https://github.com/goblogplatform/goblog-theme-forest"
 }

templates/page_content.html

@@ -8,14 +8,7 @@ <h1>{{ .page.Title }}</h1>
     {{ if .has_plugin_content }}
     <div id="page-content">{{ .plugin_content | rawHTML }}</div>
     {{ else }}
-    <div id="page-content"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.7/purify.min.js" integrity="sha512-78KH17QLT5e55GJqP76vutp1D2iAoy06WcYBXB6iBCsmO6wWzx0Qdg8EDpm8mKXv68BcvHOyeeP4wxAL0twJGQ==" crossorigin="anonymous"></script>
-    <script>
-      var converter = new showdown.Converter({tables: true});
-      var content = {{ .page.Content }};
-      document.getElementById('page-content').innerHTML = DOMPurify.sanitize(converter.makeHtml(content));
-    </script>
+    <div id="page-content">{{ .page.HTML }}</div>
     {{ end }}
   </div></div>
 

templates/post.html

@@ -22,7 +22,7 @@ <h1 style="font-weight: 700; margin-bottom: 8px; color: #1c2e1c;">{{ .post.Title
         </p>
         {{ end }}
         <hr style="border-color: rgba(45,90,39,0.15); margin: 20px 0;">
-        <div id="html" class="text-left" style="line-height: 1.7;"></div>
+        <div id="html" class="text-left" style="line-height: 1.7;">{{ .post.HTML }}</div>
       </article>
     </div>
 
@@ -109,21 +109,6 @@ <h3>External Backlinks</h3>
 
   </div>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.7/purify.min.js" integrity="sha512-78KH17QLT5e55GJqP76vutp1D2iAoy06WcYBXB6iBCsmO6wWzx0Qdg8EDpm8mKXv68BcvHOyeeP4wxAL0twJGQ==" crossorigin="anonymous"></script>
-  <script type="text/javascript">
-    var converter = new showdown.Converter({tables: true});
-    var md = "{{ .post.Content }}";
-    var html = DOMPurify.sanitize(converter.makeHtml(md));
-    $("#html").html(html)
-  </script>
-  <noscript>
-    <div class="container">
-      <p style="text-align: left;">
-        {{ .post.Content }}
-      </p>
-    </div>
-  </noscript>
 
   <!-- Comments Section -->
   <div class="container">
@@ -153,26 +138,10 @@ <h3 class="text-left" id="comments">Comments ({{ len .comments }})</h3>
             <a href="javascript:void(0)" onclick="deleteComment({{ .ID }})" class="text-danger" style="margin-left: 10px;">[delete]</a>
             {{ end }}
           </div>
-          <div class="comment-content" id="comment-content-{{ .ID }}"></div>
-          <noscript>
-            <div class="comment-content">{{ .Content }}</div>
-          </noscript>
+          <div class="comment-content">{{ .HTML }}</div>
         </div>
         {{ end }}
 
-        <script type="text/javascript">
-          {{ range .comments }}
-          (function() {
-            var raw = {{ .Content }};
-            var el = document.getElementById("comment-content-{{ .ID }}");
-            if (el && typeof converter !== 'undefined') {
-              el.innerHTML = DOMPurify.sanitize(converter.makeHtml(raw));
-            } else if (el) {
-              el.textContent = raw;
-            }
-          })();
-          {{ end }}
-        </script>
 
         <hr>
         <h4 class="text-left">Leave a Comment</h4>
@@ -225,11 +194,7 @@ <h4 class="text-left">Leave a Comment</h4>
           function previewComment() {
             var content = document.getElementById("comment-content").value;
             var preview = document.getElementById("comment-preview");
-            if (typeof converter !== 'undefined') {
-              preview.innerHTML = DOMPurify.sanitize(converter.makeHtml(content));
-            } else {
-              preview.textContent = content;
-            }
+            preview.textContent = content;
             preview.style.display = "block";
           }