From b1bbe4f6c6f102a13e79349b65c316c243ac2c64 Mon Sep 17 00:00:00 2001 From: Daniel Bluhm Date: Fri, 6 Oct 2023 14:23:05 -0400 Subject: [PATCH] feat: add help text modal and github link Signed-off-by: Daniel Bluhm --- docs/help.md | 57 +++++++++++ package-lock.json | 189 ++++++++++++++++++++++++++++++++++++ package.json | 2 + src/declarations.d.ts | 4 + src/pages/profile/help.css | 6 ++ src/pages/profile/help.ts | 19 ++++ src/pages/profile/navbar.ts | 42 +++++++- webpack.config.js | 4 + 8 files changed, 320 insertions(+), 3 deletions(-) create mode 100644 docs/help.md create mode 100644 src/declarations.d.ts create mode 100644 src/pages/profile/help.css create mode 100644 src/pages/profile/help.ts diff --git a/docs/help.md b/docs/help.md new file mode 100644 index 0000000..bd58af5 --- /dev/null +++ b/docs/help.md @@ -0,0 +1,57 @@ +# Servat ex terram verba poena neque novus + +## Leonis puerile meae + +Lorem markdownum *Trachinius movimus terrigenae* clamavit dedit petisse: captus +coit [non auditaque quod](http://oscula.org/nec.html) Alcithoe utraque hic. +Tradita victa cadet et figis dissiluit, adhuc torquet in edidit. Infera effudit +querella exurunt inducit. Dum quae quae moveoque, circumspicit *tanti*; +excipiunt potior tenuitque revulsos rigida; maiorque. + +1. Penetrant inquit +2. Stabat mater +3. Et ora sceleris undae deos relicta cum +4. Insignia hoc mater sociam ut clamavit porrexit +5. Et salutem et gelidus aliter +6. Lacrimas cyclopum stupuit + +## Est arva falso ambobus calamo fallente + +*Quaerens iuppiter trahit* super o facies Olympus, tibi dumque omnes illa morti +da memorata est haec missa. Mentem Cephesidas non prohibebant nam per vivosque +Parrhasio tabent inspicitur ultima ossaque iugo, Palladios fumis **removit**. +Hoc Aquilonem hosti modusque quisque aliter fudit. + +1. Probor in vario +2. Parenti te solet +3. Pro per amnes sine quoque lumina + +Uterque prodet. Sed acres at cervice! Ab nunc, raptaturque per colubrasque +parentes quae populandas capillos mecum, deorum, nec spatiantur. Alis potenti +nam. Est nec tractus. + +## Ipse reice carpunt + +Milibus ortu sentiat et locutum per vivit et liquores, Finierat, cadavera, et +sola Lelegeia pedes, texitur. [Levare florumque](http://www.ille.com/) tympana, +dissuaserat amore iuvencum negare rumpit ignaram **permansit dabimus** veteres. + + if (flamingNewsgroupSwappable != debuggerBase.of.nullTerminalCloud( + google_computing) * icsPrinterLink) { + modem_source = emoticon_name; + } + var ctpReality = expansion_shell_zone; + remote_user_vle(ugc.tcp(-5, 70788)); + voip += flat; + +Bis [heu](http://species.io/) in ratione luctus quietis montibus inmenso +exaestuat cornua, est. Coepere pro rapta pollice sorore numina iunctisque +superest [invidiosa](http://www.vivacisque-subitis.com/spes) viribus quaeque: +feri pro. Urbem Dumque docendam superosque quater. Ore coit, pharetratae +adfectat hiscere repetenda herbas rursus sorores vobis. Illo sum quoque hoc, cum +sedebat nurus. + +In [puduit](http://est.io/omni.aspx), sanguine, oblita dare rapta innectere +videtur. Me Telephon **clementia** sceleri aetas Aulidaque conveniunt nais +facinus vitale crimen triplicis bella Cernis umbram temptat. In virga noluit +Molpeus illud anima. diff --git a/package-lock.json b/package-lock.json index 1a2ccf2..084122b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,8 @@ "@types/uuid": "^9.0.3", "bulma": "^0.9.4", "css-loader": "^6.8.1", + "html-loader": "^4.2.0", + "markdown-loader": "^8.0.0", "mini-css-extract-plugin": "^2.7.6", "postcss-loader": "^7.3.3", "prettier": "^3.0.3", @@ -1135,6 +1137,16 @@ "node": ">=6" } }, + "node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001529", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001529.tgz", @@ -1219,6 +1231,18 @@ "node": ">=6.0" } }, + "node_modules/clean-css": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", + "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==", + "dev": true, + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 10.0" + } + }, "node_modules/clone-deep": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", @@ -1517,6 +1541,16 @@ "node": ">=6" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -1551,6 +1585,18 @@ "node": ">=10.13.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/envinfo": { "version": "7.10.0", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.10.0.tgz", @@ -2109,6 +2155,56 @@ } ] }, + "node_modules/html-loader": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-4.2.0.tgz", + "integrity": "sha512-OxCHD3yt+qwqng2vvcaPApCEvbx+nXWu+v69TYHx1FO8bffHn/JjHtE3TTQZmHjwvnJe4xxzuecetDVBrQR1Zg==", + "dev": true, + "dependencies": { + "html-minifier-terser": "^7.0.0", + "parse5": "^7.0.0" + }, + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/html-minifier-terser": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz", + "integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==", + "dev": true, + "dependencies": { + "camel-case": "^4.1.2", + "clean-css": "~5.3.2", + "commander": "^10.0.0", + "entities": "^4.4.0", + "param-case": "^3.0.4", + "relateurl": "^0.2.7", + "terser": "^5.15.1" + }, + "bin": { + "html-minifier-terser": "cli.js" + }, + "engines": { + "node": "^14.13.1 || >=16.0.0" + } + }, + "node_modules/html-minifier-terser/node_modules/commander": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -2551,6 +2647,15 @@ "node": ">=8" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -2563,6 +2668,33 @@ "node": ">=10" } }, + "node_modules/markdown-loader": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/markdown-loader/-/markdown-loader-8.0.0.tgz", + "integrity": "sha512-dxrR3WhK/hERbStPFb/yeNdEeWCKa2qUDdXiq3VTruBUWufOtERX04X0K44K4dnlN2i9pjSEzYIQJ3LjH0xkEw==", + "dev": true, + "dependencies": { + "marked": "^4.0.12" + }, + "engines": { + "node": ">=12.22.9" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "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==", + "dev": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -2840,6 +2972,16 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-forge": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", @@ -3012,6 +3154,16 @@ "node": ">=6" } }, + "node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3042,6 +3194,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "dev": true, + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -3051,6 +3215,16 @@ "node": ">= 0.8" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3473,6 +3647,15 @@ "node": ">= 10.13.0" } }, + "node_modules/relateurl": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", + "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -4137,6 +4320,12 @@ "webpack": "^5.0.0" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true + }, "node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", diff --git a/package.json b/package.json index 705740c..6c74a12 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "@types/uuid": "^9.0.3", "bulma": "^0.9.4", "css-loader": "^6.8.1", + "html-loader": "^4.2.0", + "markdown-loader": "^8.0.0", "mini-css-extract-plugin": "^2.7.6", "postcss-loader": "^7.3.3", "prettier": "^3.0.3", diff --git a/src/declarations.d.ts b/src/declarations.d.ts new file mode 100644 index 0000000..c94d67b --- /dev/null +++ b/src/declarations.d.ts @@ -0,0 +1,4 @@ +declare module "*.md" { + const content: string; + export default content; +} diff --git a/src/pages/profile/help.css b/src/pages/profile/help.css new file mode 100644 index 0000000..6d90bb4 --- /dev/null +++ b/src/pages/profile/help.css @@ -0,0 +1,6 @@ +.modal-content { + background-color: #fff; + padding: 1rem; + width: 70% !important; + border-radius: 8px; +} diff --git a/src/pages/profile/help.ts b/src/pages/profile/help.ts new file mode 100644 index 0000000..744fb63 --- /dev/null +++ b/src/pages/profile/help.ts @@ -0,0 +1,19 @@ +import * as m from 'mithril'; + +import helpContent from '../../../docs/help.md' +import "./help.css" + +interface ModalAttrs { + isActive: boolean + onClose: () => void +} + +export default class Modal implements m.ClassComponent { + view(vnode: m.Vnode) { + return vnode.attrs.isActive ? m('div.modal.is-active', [ + m('div.modal-background', { onclick: vnode.attrs.onClose }), + m('div.modal-content.content', m.trust(helpContent)), + m('button.modal-close.is-large', { ariaLabel: "close", onclick: vnode.attrs.onClose }) + ]) : null; + } +} diff --git a/src/pages/profile/navbar.ts b/src/pages/profile/navbar.ts index 6ca9754..3f0e11b 100644 --- a/src/pages/profile/navbar.ts +++ b/src/pages/profile/navbar.ts @@ -1,5 +1,6 @@ import * as m from "mithril" import Icon from "../../components/icon" +import HelpModal from "./help" import "./navbar.css" @@ -11,6 +12,8 @@ import { faRefresh, faChevronDown, faChevronUp, + faCircleQuestion, + faCodeBranch, } from "@fortawesome/free-solid-svg-icons" import agent from "../../lib/agent" @@ -20,9 +23,14 @@ library.add( faEdit, faRefresh, faChevronDown, - faChevronUp + faChevronUp, + faCircleQuestion, + faCodeBranch, ) +const GITHUB_URL = "https://github.com/decentralized-identity/didcomm-demo" + + interface NavbarAttributes { profileName: string did?: string @@ -36,6 +44,7 @@ export default class Navbar implements m.ClassComponent { private editMode: boolean = false private editedProfileName: string = "" private didCopied: boolean = false + private showHelp: boolean = false private showToast(message: string, duration: number = 2000) { // Create a div element for the toast @@ -197,10 +206,37 @@ export default class Navbar implements m.ClassComponent { ] ), ]), + m(HelpModal, { + isActive: this.showHelp, + onClose: () => this.showHelp = false, + }), m(".navbar-menu", { class: this.burgerActive ? "is-active" : "" }, [ m(".navbar-end", { style: { display: "flex", alignItems: "center" } }, [ m( - "button.button.is-white", + "a.is-white.navbar-item", + { + href: GITHUB_URL, + target: "_blank", + title: "Check out the source on Github.", // Hover text + }, + [ + m("span.icon", [m("i.fas.fa-code-branch")]), + m("span", "Github") + ] + ), + m( + "button.button.is-white.navbar-item", + { + onclick: () => this.showHelp = true, + title: "What's going on here?", // Hover text + }, + [ + m("span.icon", [m("i.fas.fa-circle-question")]), + m("span", "Help") + ] + ), + m( + "button.button.is-white.navbar-item", { onclick: () => { this.refreshMessages() @@ -211,7 +247,7 @@ export default class Navbar implements m.ClassComponent { [m("span.icon", [m("i.fas.fa-refresh")])] ), m( - "a.navbar-item", + "button.button.is-white.navbar-item", { onclick: toggleConnection, title: "Click to " + (isConnected ? "disconnect" : "connect"), // Hover text diff --git a/webpack.config.js b/webpack.config.js index e7e0fcf..309eac1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -33,6 +33,10 @@ module.exports = { } } ] + }, + { + test: /\.md$/, + use: ['html-loader', 'markdown-loader'] } ], },