From 8818eabd97f59fc6bffd8a1726b2e86b702dbab5 Mon Sep 17 00:00:00 2001 From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com> Date: Tue, 1 Aug 2023 00:31:56 +0800 Subject: [PATCH] =?UTF-8?q?[TAS-172]=F0=9F=92=84=20Add=20marked=20for=20ma?= =?UTF-8?q?rkdown=20rendering=20(#1259)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ➕ Add marked for markdown rendering * 💄[_classId] Add for rendering edition description * 🚨 Fix lint warning * 🐛 Add a parent classId for markdown style * ➕ Add DOMPurify to sanitize HTML * ➕ Update functions package.json * 🚨 Fix lint error * 📌 Update package-lock.json * 🔒️ Remove html in markdown * 🐛 Fix typo and double esacpe --------- Co-authored-by: William Chong --- functions/package-lock.json | 26 +- functions/package.json | 2 + src/assets/css/markdownStyle.css | 92 + src/components/Markdown.vue | 33 + .../NFTBook/EditionCompareTableColumn.vue | 2 +- src/components/NFTEditionSelect.vue | 2 +- src/package-lock.json | 73328 +++++++--------- src/package.json | 2 + src/util/misc.js | 16 + 9 files changed, 31967 insertions(+), 41536 deletions(-) create mode 100644 src/assets/css/markdownStyle.css create mode 100644 src/components/Markdown.vue diff --git a/functions/package-lock.json b/functions/package-lock.json index b297888b8..5edd87676 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -33,6 +33,7 @@ "cosmjs-types": "^0.8.0", "create-hash": "^1.2.0", "date-fns": "^1.30.1", + "dompurify": "^3.0.5", "express": "^4.16.4", "express-session": "^1.17.0", "fast-json-stable-stringify": "^2.1.0", @@ -44,6 +45,7 @@ "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", "magic-grid": "^3.2.4", + "marked": "^5.1.2", "node-fetch": "^2.6.7", "nuxt-start": "^2.15.3", "portal-vue": "^1.5.1", @@ -10906,6 +10908,11 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.5.tgz", + "integrity": "sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==" + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", @@ -16264,6 +16271,17 @@ "node": ">=8" } }, + "node_modules/jsdoc/node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/jsdoc/node_modules/mkdirp": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", @@ -17149,14 +17167,14 @@ } }, "node_modules/marked": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/marked/-/marked-4.1.1.tgz", - "integrity": "sha512-0cNMnTcUJPxbA6uWmCmjWz4NJRe/0Xfk2NhXCUHjew9qJzFN20krFnsUe7QynwqOwa5m1fZ4UDg0ycKFVC0ccw==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz", + "integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==", "bin": { "marked": "bin/marked.js" }, "engines": { - "node": ">= 12" + "node": ">= 16" } }, "node_modules/md5.js": { diff --git a/functions/package.json b/functions/package.json index 2e2ab87e1..02fda9ec0 100644 --- a/functions/package.json +++ b/functions/package.json @@ -40,6 +40,7 @@ "cosmjs-types": "^0.8.0", "create-hash": "^1.2.0", "date-fns": "^1.30.1", + "dompurify": "^3.0.5", "express": "^4.16.4", "express-session": "^1.17.0", "fast-json-stable-stringify": "^2.1.0", @@ -51,6 +52,7 @@ "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", "magic-grid": "^3.2.4", + "marked": "^5.1.2", "node-fetch": "^2.6.7", "nuxt-start": "^2.15.3", "portal-vue": "^1.5.1", diff --git a/src/assets/css/markdownStyle.css b/src/assets/css/markdownStyle.css new file mode 100644 index 000000000..7d85998fd --- /dev/null +++ b/src/assets/css/markdownStyle.css @@ -0,0 +1,92 @@ +.markdown-container h1 { + font-size: 34px; + font-weight: bold; +} + +.markdown-container h2 { + font-size: 28px; + font-weight: bold; +} + +.markdown-container h3 { + font-size: 24px; + font-weight: bold; +} + + +.markdown-container ul { + list-style-type: disc; + margin-left: 0.5em; +} + +.markdown-container ul ul { + list-style-type: circle; + margin-left: 1em; +} + +.markdown-container ol { + list-style-type: decimal; +} + +.markdown-container li { + text-align: left; +} + +.markdown-container a{ + color: '#1e4a51'; +} + +.markdown-container a:hover { + color: '#1e4a51'; + text-decoration: underline; +} + + +.markdown-container blockquote { + margin: 1em 0; + padding: 0.5em 1em; + border-left: 4px solid #ccc; +} + + +.markdown-container strong { + font-weight: bold; +} + +.markdown-container em { + font-style: italic; +} + + +.markdown-container pre { + background-color: #f0f0f0; + padding: 1em; + overflow: auto; + font-family: 'Courier New', Courier, monospace; +} + +.markdown-container code { + font-family: 'Courier New', Courier, monospace; +} + + +.markdown-container img { + max-width: 100%; + height: auto; +} + + +.markdown-container hr { + border: none; + border-bottom: 1px solid #ccc; + margin: 1em 0; +} + +.markdown-container p { + font-size: 14px; + font-weight: lighter; + text-align: left; + + word-wrap: break-word; + overflow-wrap: break-word; +} diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue new file mode 100644 index 000000000..f61ecbf82 --- /dev/null +++ b/src/components/Markdown.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/src/components/NFTBook/EditionCompareTableColumn.vue b/src/components/NFTBook/EditionCompareTableColumn.vue index e8ddc971e..d419ea8db 100644 --- a/src/components/NFTBook/EditionCompareTableColumn.vue +++ b/src/components/NFTBook/EditionCompareTableColumn.vue @@ -41,7 +41,7 @@ ]" >