Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(readme): fixed readme images to link to local assets #6116

Merged
merged 5 commits into from
Sep 27, 2018
Merged

docs(readme): fixed readme images to link to local assets #6116

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c95336
Fixed footer logo, made example audit have max width 500px.
exterkamp Sep 26, 2018
e7997b3
Replaced dev tools integration image.
exterkamp Sep 26, 2018
c06ef6c
Changed to absolute paths for NPM.
exterkamp Sep 26, 2018
00d324c
Adjusted links to match possible best practice, e.g. pointing to HEAD…
exterkamp Sep 27, 2018
6cd274b
Added absolute URLs to readme images. Added explanation to CONTRIBUT…
exterkamp Sep 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/example_dev_tools.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Lighthouse is integrated directly into the Chrome Developer Tools, under the "Au

**Run it**: open Chrome DevTools, select the Audits panel, and hit "Run audits".

<img width="500px" alt="Lighthouse integration in Chrome DevTools" src="https://user-images.githubusercontent.com/2301202/40556658-4ef7d128-6002-11e8-903e-5224894a7cca.png">
<img src="https://github.com/GoogleChrome/lighthouse/raw/master/assets/example_dev_tools.png" alt="Lighthouse integration in Chrome DevTools" width="500px">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we're moving to raw/master instead of hash-based?

raw/master can just be super confusing once master gets ahead of older versions. We don't update the images that often, think we could stick with hashes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm true

https://www.npmjs.com/package/@code-therapy/packages-with-readme-relative-images#conclusion lays out how annoying this is right now

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I definitely find the hashed links confusing because I never know where they are coming from. And I think it would be much easier to keep them updated if they were in the repo/easy to find and update.

There is the raw.github link for these images e.g. https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/lighthouse-logo.png but I guess that comes right back to the raw/master issue, this is just the resolution after replacing blob with raw.

Not sure exactly how to handle this then.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like in the example @paulirish sent over he uses the form raw.githubusercontent.com/.../HEAD/.../...png so it removes the master hardcoding. Seems like what he was doing might be good for us to maintain absolute paths, but still have some flexibility.


## Using the Chrome extension

Expand Down Expand Up @@ -165,7 +165,7 @@ Lighthouse can produce a report as JSON or HTML.

HTML report:

![Lighthouse report](/assets/example_audit.png)
<img src="https://github.com/GoogleChrome/lighthouse/raw/master/assets/example_audit.png" alt="Lighthouse example audit" width="500px">

### Online Viewer

Expand Down Expand Up @@ -332,9 +332,8 @@ We'd love help writing audits, fixing bugs, and making the tool more useful!
See [Contributing](./CONTRIBUTING.md) to get started.

---

<p align="center">
<img src="https://cloud.githubusercontent.com/assets/39191/22478294/23f662f6-e79e-11e6-8de3-ffd7be7bf628.png" alt="Lighthouse logo" height="150">
<img src="https://github.com/GoogleChrome/lighthouse/raw/master/assets/lighthouse-logo.png" alt="Lighthouse logo" height="150">
<br>
<b>Lighthouse</b>, ˈlītˌhous (n): a <s>tower or other structure</s> tool containing a beacon light
to warn or guide <s>ships at sea</s> developers.
Expand Down