feat(links): add support for font awesome icons and lazy load css files

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 `<a href="${url}" target="_blank" title="Search on stackoverflow">Search stackoverflow</a>`
+})
+.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 `<a href="${url}" target="_blank" title="Search on stackoverflow"><i class="fab fa-stack-overflow"></i></a>`
+})
+.toHTML()
+```
+
 ## Release History
 Checkout [CHANGELOG.md](CHANGELOG.md) file for release history.
 

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 `<a href="${url}" target="_blank" title="Search on stackoverflow"><i class="fab fa-stack-overflow"></i>
+      </a>`
+    })
     .toHTML()
     .then((response) => {
       res.writeHead(200, { 'content-type': 'text/html' })

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)

src/error.compiled.mustache

@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <title> </title>
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600" rel="stylesheet">
+  {{#loadFA}}
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/brands.css" integrity="sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous">
+  {{/loadFA}}
 
   <style type="text/css">
     /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-highlight+line-numbers+toolbar+show-language */
@@ -413,6 +417,13 @@ body {
   color: #444;
 }
 
+.fab {
+  font-family: "Font Awesome 5 Brands";
+  -webkit-font-smoothing: antialiased;
+  color: #afafaf;
+  font-size: 24px;
+}
+
 * {
   padding: 0;
   margin: 0;
@@ -458,10 +469,18 @@ body {
 
 .error-title {
   border-bottom: 1px solid #d0cfcf;
-  padding-bottom: 40px;
+  padding-bottom: 15px;
   margin-bottom: 20px;
 }
 
+.error-links {
+  margin-top: 20px;
+}
+
+.error-links a {
+  margin-right: 8px;
+}
+
 .error-frames {
   display: flex;
   flex-direction: row-reverse;
@@ -633,6 +652,11 @@ code[class*="language-"], pre[class*="language-"] {
       <div class="error-title">
         <h4 class="error-name"> {{ name }} </h4>
         <h2 class="error-message"> {{ message }} </h2>
+        <p class="error-links">
+          {{#links}}
+            {{{ . }}}
+          {{/links}}
+        </p>
       </div>
 
       <div class="error-frames">

static/app.css

@@ -10,6 +10,13 @@ body {
   color: #444;
 }
 
+.fab {
+  font-family: "Font Awesome 5 Brands";
+  -webkit-font-smoothing: antialiased;
+  color: #afafaf;
+  font-size: 24px;
+}
+
 * {
   padding: 0;
   margin: 0;
@@ -55,10 +62,18 @@ body {
 
 .error-title {
   border-bottom: 1px solid #d0cfcf;
-  padding-bottom: 40px;
+  padding-bottom: 15px;
   margin-bottom: 20px;
 }
 
+.error-links {
+  margin-top: 20px;
+}
+
+.error-links a {
+  margin-right: 8px;
+}
+
 .error-frames {
   display: flex;
   flex-direction: row-reverse;

static/error.mustache

@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <title> </title>
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600" rel="stylesheet">
+  {{#loadFA}}
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/brands.css" integrity="sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous">
+  {{/loadFA}}
 
   <style type="text/css">
     [[__css__]]
@@ -18,6 +22,11 @@
       <div class="error-title">
         <h4 class="error-name"> {{ name }} </h4>
         <h2 class="error-message"> {{ message }} </h2>
+        <p class="error-links">
+          {{#links}}
+            {{{ . }}}
+          {{/links}}
+        </p>
       </div>
 
       <div class="error-frames">