docs(readme): add related project: lighthouse-viewer

[dvelasquez]

Summary

This PR updates the README.md adding 4 small projects I'm maintaining.

• lighthouse-viewer: lighthouse-reporter sourcecode packaged as an UMD & ESM npm package, to visualise your JSON reports. The process to copy the code from lighthouse to this package is automated.
• react2-lighthouse-viewer: This package is a React wrapper of lighthouse-viewer.
• svelte-lighthouse-viewer: This package is a Svelte wrapper of lighthouse-viewer.
• vue-lighthouse-viewer: This package is a Vue wrapper of lighthouse-viewer.

Add more options for visualisation of lighthouse JSON reports.

Sourcecode of the projects added: https://github.com/dvelasquez/lighthouse-viewer
Related Issues/PRs

Summary

This change just add 4 new projects to the related projects section.

• Repository: https://github.com/dvelasquez/lighthouse-viewer
• CodeSandbox Demo: https://codesandbox.io/s/lighthouse-viewer-vanillajs-demo-zw2bj
• Demo/Documentation: https://dvelasquez.github.io/lighthouse-viewer/index.html
  Related Issues/PRs

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[dvelasquez]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[brendankenny]

maybe it makes sense to combine the four into a single entry, but call out in the description that there are react, svelte, and vue components included?

[dvelasquez]

@brendankenny Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

[connorjclark]

This is neat, thanks for making and sharing!

Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

They're still all fundamentally the same thing: embedding the report viewer in vanilla JS or some given framework. Can you keep just the link to https://github.com/dvelasquez/lighthouse-viewer, with language in the description that there is support for react, vue, etc... ?

---

I noticed some issues, so here's some unsolicited issue reporting. :)

URL: https://dvelasquez.github.io/lighthouse-viewer/packages/react2-lighthouse-viewer/demo/index.html
(happens when you click on a big category gauge. can't scroll back up)

URL: https://codesandbox.io/s/lighthouse-viewer-vanillajs-demo-zw2bj

[dvelasquez]

This is neat, thanks for making and sharing!

Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

They're still all fundamentally the same thing: embedding the report viewer in vanilla JS or some given framework. Can you keep just the link to https://github.com/dvelasquez/lighthouse-viewer, with language in the description that there is support for react, vue, etc... ?

I noticed some issues, so here's some unsolicited issue reporting. :)

URL: https://dvelasquez.github.io/lighthouse-viewer/packages/react2-lighthouse-viewer/demo/index.html
(happens when you click on a big category gauge. can't scroll back up)

URL: https://codesandbox.io/s/lighthouse-viewer-vanillajs-demo-zw2bj

Thanks very much for your review. All feedback is welcome! One of the problems I got was with the use of MVP.css, a classless css framework, but because of this, several of the elements of the report itself were override. That's why I'm loading the report inside an iFrame.
So I will drop this framework and use a different one for the demos.
And maybe will make some sense to make some changes in the report itself to avoid involuntary overrides of styles.