From 959478ea41e1d6f4440a131eb492b2a5a3113a98 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 25 Jul 2018 12:32:03 -0700 Subject: [PATCH 1/2] docs: define a renderer readme --- docs/architecture.md | 2 +- .../report/html/readme.md | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) rename docs/report.md => lighthouse-core/report/html/readme.md (88%) diff --git a/docs/architecture.md b/docs/architecture.md index 2c8a68e7eebc..b907290a9810 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -11,7 +11,7 @@ _Some incomplete notes_ * **Artifacts** - output of a gatherer * **Audit** - Tests for a single feature/optimization/metric. Using the Artifacts as input, an audit evaluates a test and resolves to a numeric score. See [Understanding Results](./understanding-results.md) for details of the LHR (Lighthouse Result object). * **Computed Artifacts** - Generated on-demand from artifacts, these add additional meaning, and are often shared amongst multiple audits. -* **Report** - The report UI, created client-side from the LHR. See [HTML Report Generation Overview](./report.md) for details. +* **Report** - The report UI, created client-side from the LHR. See [HTML Report Generation Overview](../lighthouse-core/report/html/readme.md) for details. ### Audit/Report terminology * **Category** - Roll-up collection of audits and audit groups into a user-facing section of the report (eg. `Best Practices`). Applies weighting and overall scoring to the section. Examples: PWA, Accessibility, Best Practices. diff --git a/docs/report.md b/lighthouse-core/report/html/readme.md similarity index 88% rename from docs/report.md rename to lighthouse-core/report/html/readme.md index 35132e5bcd83..07eccc934645 100644 --- a/docs/report.md +++ b/lighthouse-core/report/html/readme.md @@ -1,8 +1,13 @@ -## HTML Report Generation Overview +# Lighthouse HTML Report Renderer + +[Source on Github](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) | [![Lighthouse package version](https://img.shields.io/npm/v/lighthouse.svg)](https://npmjs.org/package/lighthouse) + + +## Overview Lighthouse has an indepedent report renderer that takes the **LHR** (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side. -Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.0-alpha.html`](https://googlechrome.github.io/lighthouse/reports/dbwtest-3.0.0-alpha.html) _(View the source! 📖)_ +Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](https://googlechrome.github.io/lighthouse/reports/dbwtest-3.0.3.html) _(View the source! 📖)_ ### Report Renderer components @@ -10,7 +15,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.0-alpha.html - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content. 1. [`lighthouse-core/report/html/`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) has everything required to create the HTML report. 1. [`lighthouse-core/report/html/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser. -1. [`lighthouse-core/report/html/report-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/63c999789dc08b9a3b56b22f25f478f13050da29/lighthouse-core/report/html/report-template.html#L27-L31)) However, see _Current Uses.._ below for more possibilities. +1. [`lighthouse-core/report/html/report-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities. ### Data Hydration From ab0d3c9848639b963774c53c2ad536d424551fff Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 25 Jul 2018 12:51:37 -0700 Subject: [PATCH 2/2] remove badge [skip ci] --- lighthouse-core/report/html/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/readme.md b/lighthouse-core/report/html/readme.md index 07eccc934645..c9e9ebc41c1c 100644 --- a/lighthouse-core/report/html/readme.md +++ b/lighthouse-core/report/html/readme.md @@ -1,6 +1,6 @@ # Lighthouse HTML Report Renderer -[Source on Github](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) | [![Lighthouse package version](https://img.shields.io/npm/v/lighthouse.svg)](https://npmjs.org/package/lighthouse) +[Source on Github](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) ## Overview