Show changelog in apps management

Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

1 files changed, 197 insertions, 0 deletions

diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue
new file mode 100644
index 00000000000..74c333d8398
--- /dev/null
+++ b/apps/settings/src/components/Markdown.vue
@@ -0,0 +1,197 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="settings-markdown" v-html="renderMarkdown" />
+</template>
+
+<script>
+import marked from 'marked'
+import dompurify from 'dompurify'
+
+export default {
+	name: 'Markdown',
+	props: {
+		text: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		renderMarkdown() {
+			const renderer = new marked.Renderer()
+			renderer.link = function(href, title, text) {
+				let prot
+				try {
+					prot = decodeURIComponent(unescape(href))
+						.replace(/[^\w:]/g, '')
+						.toLowerCase()
+				} catch (e) {
+					return ''
+				}
+
+				if (prot.indexOf('http:') !== 0 && prot.indexOf('https:') !== 0) {
+					return ''
+				}
+
+				let out = '<a href="' + href + '" rel="noreferrer noopener"'
+				if (title) {
+					out += ' title="' + title + '"'
+				}
+				out += '>' + text + '</a>'
+				return out
+			}
+			renderer.image = function(href, title, text) {
+				if (text) {
+					return text
+				}
+				return title
+			}
+			renderer.blockquote = function(quote) {
+				return quote
+			}
+			return dompurify.sanitize(
+				marked(this.text.trim(), {
+					renderer,
+					gfm: false,
+					highlight: false,
+					tables: false,
+					breaks: false,
+					pedantic: false,
+					sanitize: true,
+					smartLists: true,
+					smartypants: false,
+				}),
+				{
+					SAFE_FOR_JQUERY: true,
+					ALLOWED_TAGS: [
+						'h1',
+						'h2',
+						'h3',
+						'h4',
+						'h5',
+						'h6',
+						'strong',
+						'p',
+						'a',
+						'ul',
+						'ol',
+						'li',
+						'em',
+						'del',
+						'blockquote',
+					],
+				}
+			)
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+	.settings-markdown::v-deep {
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: 600;
+		line-height: 120%;
+		margin-top: 24px;
+		margin-bottom: 12px;
+		color: var(--color-main-text);
+	}
+
+	h1 {
+		font-size: 36px;
+		margin-top: 48px;
+	}
+
+	h2 {
+		font-size: 28px;
+		margin-top: 48px;
+	}
+
+	h3 {
+		font-size: 24px;
+	}
+
+	h4 {
+		font-size: 21px;
+	}
+
+	h5 {
+		font-size: 17px;
+	}
+
+	h6 {
+		font-size: 14px;
+	}
+
+	pre {
+		white-space: pre;
+		overflow-x: auto;
+		background-color: var(--color-background-dark);
+		border-radius: var(--border-radius);
+		padding: 1em 1.3em;
+		margin-bottom: 1em;
+	}
+
+	p code {
+		background-color: var(--color-background-dark);
+		border-radius: var(--border-radius);
+		padding: .1em .3em;
+	}
+
+	li {
+		position: relative;
+	}
+
+	ul, ol {
+		padding-left: 10px;
+		margin-left: 10px;
+	}
+
+	ul li {
+		list-style-type: disc;
+	}
+
+	ul > li > ul > li {
+		list-style-type: circle;
+	}
+
+	ul > li > ul > li ul li {
+		list-style-type: square;
+	}
+
+	blockquote {
+		padding-left: 1em;
+		border-left: 4px solid var(--color-primary-element);
+		color: var(--color-text-maxcontrast);
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	}
+</style>