Add link to opportunities (#113)

README.md

@@ -86,6 +86,13 @@ Default: `70`
 
 Threshold score to pass the PageSpeed test. Useful for setting a performance budget.
 
+##### links
+
+Type: `boolean`<br>
+Default: `false`
+
+If passed adds links with more info about opportunities. Useful for checking documentation about opportunities.
+
 ### psi.output(url, [options])
 
 Output the formatted report to the terminal.

cli.js

@@ -15,6 +15,7 @@ const cli = meow(`
     --format     Output format: cli|json|tap
     --locale     Locale results should be generated in
     --threshold  Threshold score to pass the PageSpeed test
+    --links  Adds link with more info about opportunities
 
   Example
     $ psi https://addyosmani.com --strategy=mobile

lib/output.js

@@ -2,7 +2,9 @@
 const sortOn = require('sort-on');
 const humanizeUrl = require('humanize-url');
 const prettyMs = require('pretty-ms');
+const terminalLink = require('terminal-link');
 const {getThreshold, getReporter} = require('./../lib/options-handler');
+const {getLink} = require('./../lib/string-utils');
 
 function overview(url, strategy, scores) {
   return [
@@ -53,7 +55,19 @@ const labData = lighthouseResult => {
   return sortOn(ret, 'label');
 };
 
-const opportunities = lighthouseResult => {
+const getTitle = (title, description) => {
+  let output = title;
+  if (description) {
+    const link = getLink(description);
+    if (link) {
+      output = terminalLink(title, getLink(description));
+    }
+  }
+
+  return output;
+};
+
+const opportunities = (lighthouseResult, links) => {
   const {audits, categories} = lighthouseResult;
   const rules = getRules(categories.performance.auditRefs, 'load-opportunities');
 
@@ -63,9 +77,10 @@ const opportunities = lighthouseResult => {
   });
 
   const ret = opportunityRules.map(rule => {
-    const {title, details} = audits[rule.id];
+    const {title, details, description} = audits[rule.id];
+
     return {
-      label: title,
+      label: links ? getTitle(title, description) : title,
       value: prettyMs(details.overallSavingsMs)
     };
   });
@@ -85,7 +100,7 @@ module.exports = (parameters, response) => {
       overview(humanizeUrl(id), parameters.strategy, lighthouseResult),
       fieldData(loadingExperience.metrics),
       labData(lighthouseResult),
-      opportunities(lighthouseResult),
+      opportunities(lighthouseResult, parameters.links),
       threshold
     ));
 

lib/string-utils.js

@@ -0,0 +1,9 @@
+const getLink = str => {
+  const containsLink = str.match(/\(https?:(.*)\)/);
+
+  return containsLink ? containsLink[0].replace('(', '').replace(')', '') : '';
+};
+
+module.exports = {
+  getLink
+};

package.json

@@ -41,6 +41,7 @@
     "prepend-http": "^3.0.1",
     "pretty-ms": "^6.0.1",
     "sort-on": "^4.1.0",
+    "terminal-link": "^2.1.1",
     "update-notifier": "^4.1.0"
   },
   "devDependencies": {

test/string-utils.test.js

@@ -0,0 +1,18 @@
+/* eslint-env mocha */
+const {expect} = require('chai');
+const {getLink} = require('../lib/string-utils');
+
+describe('stringUtils module', () => {
+  describe('getLink method', () => {
+    it('should return the url from a string', () => {
+      const str = `Consider lazy - loading offscreen and hidden images after all critical resources
+       have finished loading to lower time to interactive. [Learn more](https://web.dev/offscreen-images).`;
+      expect(getLink(str)).to.eql('https://web.dev/offscreen-images');
+    });
+    it('should return an empty string when it does not contain an url', () => {
+      const str = `Consider lazy - loading offscreen and hidden images after all critical resources
+       have finished loading to lower time to interactive.`;
+      expect(getLink(str)).to.eql('');
+    });
+  });
+});