Markdown interpretation (#237)

2021-04-18 16:15:17 +02:00
parent f451085c98
commit db603605bd
14 changed files with 240 additions and 49 deletions
--- a/source/app/metrics/index.mjs
+++ b/source/app/metrics/index.mjs
@@ -102,7 +102,7 @@
            rendered = await imports.svg.gemojis(rendered, {rest})
        //Optimize rendering
          if (!q.raw)
-            rendered = xmlformat(rendered, {lineSeparator:"\n"})
+            rendered = xmlformat(rendered, {lineSeparator:"\n", collapseContent:true})
          if ((conf.settings?.optimize)&&(!q.raw)) {
            console.debug(`metrics/compute/${login} > optimize`)
            if (experimental.has("--optimize")) {
--- a/source/app/metrics/utils.mjs
+++ b/source/app/metrics/utils.mjs
@@ -16,6 +16,11 @@
  import nodechartist from "node-chartist"
  import GIFEncoder from "gifencoder"
  import PNG from "png-js"
+  import marked from "marked"
+  import htmlsanitize from "sanitize-html"
+  import prism from "prismjs"
+  import prism_lang from "prismjs/components/index.js"
+  prism_lang()

 //Exports
  export {fs, os, paths, url, util, processes, axios, git, opengraph, jimp, rss}
@@ -155,6 +160,26 @@
    return false
  }

+/**Markdown-html sanitizer-interpreter */
+  export async function markdown(text, {mode = "inline", codelines = Infinity} = {}) {
+    //Sanitize once user text and then apply markdown. Depending on mode, reapply stricter sanitization if required
+      let rendered = htmlsanitize(await marked(htmlsanitize(text), {
+        highlight(code, lang) {
+          return lang in prism.languages ? prism.highlight(code, prism.languages[lang]) : code
+        },
+        silent:true,
+        xhtml:true,
+      }), {
+        inline:{allowedTags:["br", "code", "span"], allowedAttributes:{code:["class"], span:["class"]}},
+      }[mode])
+    //Trim code snippets
+      rendered = rendered.replace(/(?<open><code[\s\S]*?>)(?<code>[\s\S]*?)(?<close><\/code>)/g, (m, open, code, close) => { //eslint-disable-line max-params
+        const lines = code.trim().split("\n")
+        return `${open}${lines.slice(0, codelines).join("\n")}${lines.length > codelines ? `\n<span class="token trimmed">(${lines.length-codelines} more ${lines.length-codelines === 1 ? "line was" : "lines were"} trimmed)</span>` : ""}${close}`
+      })
+    return rendered
+  }
+
 /**Image to base64 */
  export async function imgb64(image, {width, height, fallback = true} = {}) {
    //Undefined image
--- a/source/app/web/instance.mjs
+++ b/source/app/web/instance.mjs
@@ -129,7 +129,6 @@
        app.get("/.js/prism.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/prism.js`))
        app.get("/.js/prism.yaml.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/components/prism-yaml.min.js`))
        app.get("/.js/prism.markdown.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/components/prism-markdown.min.js`))
-        app.get("/.js/marked.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/marked/marked.min.js`))
      //Meta
        app.get("/.version", limiter, (req, res) => res.status(200).send(conf.package.version))
        app.get("/.requests", limiter, (req, res) => res.status(200).json(requests))
@@ -182,7 +181,7 @@
                    activity:true, "activity.limit":100, "activity.days":0,
                    notable:true,
                  },
-                }, {graphql, rest, plugins:{achievements:{enabled:true}, isocalendar:{enabled:true}, languages:{enabled:true}, activity:{enabled:true}, notable:{enabled:true}}, conf, convert:"json"}, {Plugins, Templates})
+                }, {graphql, rest, plugins:{achievements:{enabled:true}, isocalendar:{enabled:true}, languages:{enabled:true}, activity:{enabled:true, markdown:"extended"}, notable:{enabled:true}}, conf, convert:"json"}, {Plugins, Templates})
              //Cache
                if ((!debug)&&(cached)) {
                  const maxage = Math.round(Number(req.query.cache))
--- a/source/app/web/statics/about/index.html
+++ b/source/app/web/statics/about/index.html
@@ -190,7 +190,7 @@
                      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z"></path></svg>
                      <div class="content">
                        Commented on <a :href="`https://github.com/${repo}/${{issue:'issues', pr:'pull', commit:'commit'}[event.on]}/${event.number}`">#{{ event.number }} {{ event.title }}</a> from <a :href="`https://github.com/${repo}`">{{ repo }}</a>
-                        <quote v-html="markdown(event.content)"></quote>
+                        <quote v-if="event.content.trim().length" v-html="event.content"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'member'">
@@ -205,7 +205,7 @@
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>
                      <div class="content">
                        {{ event.draft ? "Drafted release" : event.prerelease ? "Pre-released" : "Released" }} of <a :href="`https://github.com/${repo}`">{{ repo }}</a>
-                        <quote v-html="markdown(event.content)"></quote>
+                        <quote v-if="event.content.trim().length" v-html="event.content"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'fork'">
@@ -227,14 +227,14 @@
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
                      <div class="content">
                        {{ event.action === "opened" ? "Opened" : event.action === "reopened" ? "Reopened" : "Closed" }} <a :href="`https://github.com/${repo}/issues/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
-                        <quote v-html="markdown(event.content)"></quote>
+                        <quote v-if="event.content.trim().length" v-html="event.content"></quote>
                      </div>
                    </template>
                    <template v-if="type === 'pr'">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
                      <div class="content">
                        {{ event.action === "opened" ? "Opened" : event.action === "merged" ? "Merged" : "Closed" }} <a :href="`https://github.com/${repo}/pull/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
-                        <quote v-html="markdown(event.content)"></quote>
+                        <quote v-if="event.content.trim().length" v-html="event.content"></quote>
                        <ul>
                          <li>
                            {{ event.files.changed }} file{{ "s" }} changed <code>++{{ event.lines.added }} --{{ event.lines.deleted }}</code>
@@ -295,7 +295,6 @@
    <!-- Scripts -->
    <script src="/.js/axios.min.js"></script>
    <script src="/.js/vue.min.js"></script>
-    <script src="/.js/marked.min.js"></script>
-    <script src="/about/.statics/script.js?v=3.7"></script>
+    <script src="/about/.statics/script.js?v=3.8"></script>
  </body>
 </html>
--- a/source/app/web/statics/about/script.js
+++ b/source/app/web/statics/about/script.js
@@ -71,11 +71,6 @@
            finally {
              this.pending = false
            }
-          },
-          markdown(content) {
-            const escaped = document.createElement("textarea")
-            escaped.textContent = content
-            return marked(escaped.innerHTML)
          }
        },
      //Computed properties
--- a/source/app/web/statics/index.html
+++ b/source/app/web/statics/index.html
@@ -179,7 +179,7 @@
    <script src="/.js/faker.min.js"></script>
    <script src="/.js/vue.min.js"></script>
    <script src="/.js/vue.prism.min.js"></script>
-    <script src="/.js/app.placeholder.js?v=3.7"></script>
+    <script src="/.js/app.placeholder.js?v=3.8"></script>
    <script src="/.js/app.js?v=3.7"></script>
  </body>
 </html>