chore: clean up UI

src/routes/pr.js

@@ -1,6 +1,15 @@
 const Handlebars = require('handlebars');
 const { Router } = require('express');
 const semver = require('semver');
+const MarkdownIt = require('markdown-it');
+const createDOMPurify = require('dompurify');
+const { JSDOM } = require('jsdom');
+
+const window = new JSDOM('').window;
+const DOMPurify = createDOMPurify(window);
+const md = new MarkdownIt({
+  html: true,
+});
 
 const a = require('../utils/a');
 const { compareTagToCommit, getReleasesOrUpdate, getPR, getPRComments } = require('../data');
@@ -11,6 +20,10 @@ Handlebars.registerHelper('formattedDate', (date) => new Date(date).toUTCString(
 
 Handlebars.registerHelper('sha', (commitSha) => commitSha.substr(0, 7));
 
+Handlebars.registerHelper('markdown', function (content) {
+  return DOMPurify.sanitize(md.render(content));
+});
+
 async function getPRReleaseStatus(prNumber) {
   const releases = [...(await getReleasesOrUpdate())].reverse();
   const [prInfo, comments] = await Promise.all([getPR(prNumber), getPRComments(prNumber)]);

src/routes/release.js

@@ -12,9 +12,7 @@ const { getGitHubRelease, getReleasesOrUpdate, getTSDefs } = require('../data');
 
 const window = new JSDOM('').window;
 const DOMPurify = createDOMPurify(window);
-const md = new MarkdownIt({
-  html: true,
-});
+const md = new MarkdownIt({});
 
 const router = new Router();
 

src/static/css/pr.css

@@ -23,3 +23,7 @@
   display: flex;
   justify-content: center;
 }
+
+#grid-pr-body {
+  padding: 0 15px 0px 15px;
+}

src/views/pr.handlebars

@@ -10,7 +10,7 @@
   </div>
   <div class="grid-item">
     <h2 class="grid-header">PR Information</h2>
-    <p class="grid-contents">{{primary.pr.body}}</p>
+    <div id="grid-pr-body">{{{markdown primary.pr.body}}}</div>
   </div>
   <div class="grid-item">
     <h2 class="grid-header">Release</h2>
@@ -40,4 +40,4 @@
       {{/each}}
     </div>
   </div>
-</div>
+</div>