From 4c46da8cc5477792460dadc7bec590338b4d0411 Mon Sep 17 00:00:00 2001 From: lowlighter <22963968+lowlighter@users.noreply.github.com> Date: Wed, 14 Apr 2021 13:56:09 +0200 Subject: [PATCH] Improve organization for metrics insights - Organization insight now display actor usernames - Comments are rendered as markdown --- package-lock.json | 17 ++++ package.json | 1 + source/app/web/instance.mjs | 1 + source/app/web/statics/about/index.html | 119 ++++++++++-------------- source/app/web/statics/about/script.js | 5 + source/app/web/statics/about/style.css | 28 ++++++ 6 files changed, 101 insertions(+), 70 deletions(-) diff --git a/package-lock.json b/package-lock.json index 216742ae..1fadbac8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "faker": "^5.5.2", "jimp": "^0.16.1", "js-yaml": "^4.0.0", + "marked": "^2.0.3", "memory-cache": "^0.2.0", "node-chartist": "^1.0.5", "open-graph-scraper": "^4.8.1", @@ -7975,6 +7976,17 @@ "node": ">=0.10.0" } }, + "node_modules/marked": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz", + "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==", + "bin": { + "marked": "bin/marked" + }, + "engines": { + "node": ">= 8.16.2" + } + }, "node_modules/matchmedia": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/matchmedia/-/matchmedia-0.1.2.tgz", @@ -18832,6 +18844,11 @@ "object-visit": "^1.0.0" } }, + "marked": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz", + "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==" + }, "matchmedia": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/matchmedia/-/matchmedia-0.1.2.tgz", diff --git a/package.json b/package.json index 258f2e32..a9a56d16 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "faker": "^5.5.2", "jimp": "^0.16.1", "js-yaml": "^4.0.0", + "marked": "^2.0.3", "memory-cache": "^0.2.0", "node-chartist": "^1.0.5", "open-graph-scraper": "^4.8.1", diff --git a/source/app/web/instance.mjs b/source/app/web/instance.mjs index a45dcb67..5b68c48f 100644 --- a/source/app/web/instance.mjs +++ b/source/app/web/instance.mjs @@ -129,6 +129,7 @@ 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)) diff --git a/source/app/web/statics/about/index.html b/source/app/web/statics/about/index.html index 372ad95a..fb7db7de 100644 --- a/source/app/web/statics/about/index.html +++ b/source/app/web/statics/about/index.html @@ -49,7 +49,7 @@ Share this profile using {{ url }} -
+

Generating insights for {{ user }}

@@ -178,46 +178,41 @@ Recent activity
No recent activity @@ -317,6 +295,7 @@ + \ No newline at end of file diff --git a/source/app/web/statics/about/script.js b/source/app/web/statics/about/script.js index 4738002d..42b977d2 100644 --- a/source/app/web/statics/about/script.js +++ b/source/app/web/statics/about/script.js @@ -71,6 +71,11 @@ finally { this.pending = false } + }, + markdown(content) { + const escaped = document.createElement("textarea") + escaped.textContent = content + return marked(escaped.innerHTML) } }, //Computed properties diff --git a/source/app/web/statics/about/style.css b/source/app/web/statics/about/style.css index 897b4034..3b6f0f69 100644 --- a/source/app/web/statics/about/style.css +++ b/source/app/web/statics/about/style.css @@ -9,6 +9,7 @@ } .center { align-items: center; + margin-top: 1rem; } /* Search */ @@ -128,6 +129,16 @@ margin: .25rem 0; margin-right: .5rem; } + .activity .actor { + display: flex; + align-items: center; + } + .activity .actor img { + width: 1rem; + height: 1rem; + border-radius: 50%; + margin-right: .5rem; + } .activity .event { display: flex; align-items: flex-start; @@ -135,6 +146,23 @@ .activity .event ul { font-size: .8rem; } + .activity .content { + flex-grow: 1; + } + .activity quote { + display: block; + margin: .5rem 0; + padding: 1rem; + border-radius: .25rem; + border: 1px solid var(--color-border-secondary); + color: var(--color-text-secondary); + } + .activity quote p:first-child { + margin-top: 0; + } + .activity quote p:last-child { + margin-bottom: 0; + } /* User */ .user {