From 1bd258a87a51f10220972f5d9743f4075359172d Mon Sep 17 00:00:00 2001 From: Harminder Virk Date: Sat, 29 Sep 2018 17:52:21 +0200 Subject: [PATCH] feat(links): add support for font awesome icons and lazy load css files --- README.md | 27 +++++++++++++++++++++++++++ examples/index.js | 5 +++++ src/Youch.js | 8 +++++--- src/error.compiled.mustache | 26 +++++++++++++++++++++++++- static/app.css | 17 ++++++++++++++++- static/error.mustache | 9 +++++++++ 6 files changed, 87 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3c50ce0..7759c2b 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,33 @@ http.createServer(function (req, res) { }).listen(8000) ``` +## Adding helpful links +Everytime an error occurs, we can help users we letting search for the error on Google, over even on the Github repo of our project. + +Youch let you define clickable links to redirect the user to a website with the error message. + +```js +youch +.addLink(({ message }) => { + const url = `https://stackoverflow.com/search?q=${encodeURIComponent(`[adonis.js] ${message}`)}` + return `Search stackoverflow` +}) +.toHTML() +``` + +Also you can make use of [Font awesome brands icons](https://fontawesome.com/icons?d=gallery&s=brands&m=free) to display icons. + +**If you will use fontawesome icons, then Youch will automatically load the CSS files from the font awesome CDN for you.** + +```js +youch +.addLink(({ message }) => { + const url = `https://stackoverflow.com/search?q=${encodeURIComponent(`[adonis.js] ${message}`)}` + return `` +}) +.toHTML() +``` + ## Release History Checkout [CHANGELOG.md](CHANGELOG.md) file for release history. diff --git a/examples/index.js b/examples/index.js index 42df83d..a16be68 100644 --- a/examples/index.js +++ b/examples/index.js @@ -25,6 +25,11 @@ http.createServer((req, res) => { } youch + .addLink(({ message }) => { + const url = `https://stackoverflow.com/search?q=${encodeURIComponent(`[adonis.js] ${message}`)}` + return ` + ` + }) .toHTML() .then((response) => { res.writeHead(200, { 'content-type': 'text/html' }) diff --git a/src/Youch.js b/src/Youch.js index 3cde0d3..61981ab 100644 --- a/src/Youch.js +++ b/src/Youch.js @@ -36,9 +36,8 @@ class Youch { * @return {Promise} */ _getFrameSource (frame) { - const path = frame.getFileName() - // Handle the common setup of Webpack - .replace(/dist\/webpack:\//g, '') + const path = frame.getFileName().replace(/dist\/webpack:\//g, '') + return new Promise((resolve, reject) => { fs.readFile(path, 'utf-8', (error, contents) => { if (error) { @@ -308,8 +307,11 @@ class Youch { }) const request = this._serializeRequest() + data.request = request data.links = this.links.map(renderLink => renderLink(data)) + data.loadFA = !!data.links.find((link) => link.includes('fa-')) + return resolve(this._compileView(viewTemplate, data)) }) .catch(reject) diff --git a/src/error.compiled.mustache b/src/error.compiled.mustache index 1ee9f99..81ff9d8 100644 --- a/src/error.compiled.mustache +++ b/src/error.compiled.mustache @@ -4,6 +4,10 @@ + {{#loadFA}} + + + {{/loadFA}}