Relative image URLs in package READMEs are now resolved correctly #996
Conversation
lib/package-readme-view.js
Outdated
| @@ -45,13 +45,42 @@ function sanitize (html) { | |||
| checkbox.setAttribute('disabled', true) | |||
| } | |||
|
|
|||
| let path = require('path') | |||
| let urlProtocolRegex = new RegExp("^(?:[a-z]+:)?\/\/", "i") | |||
There was a problem hiding this comment.
Can't this be a simple constructed without the RegExp constructor, as in: /^(?:[a-z]+:)?\/\//i? Then it can be inlined on L57.
lib/package-readme-view.js
Outdated
| for (const image of temporaryContainer.querySelectorAll('img')) { | ||
| let imageSrc = image.getAttribute('src') | ||
|
|
||
| let changeSrc = true |
There was a problem hiding this comment.
For extra clarity I'd rename this to changeImageSrc.
lib/package-readme-view.js
Outdated
| // If repoUrl is a local path | ||
| image.setAttribute('src', path.join(readmeSrcBase, imageSrc)) | ||
| } else { | ||
| // If repoUrl is a URL |
There was a problem hiding this comment.
Maybe expound on when this can happen in the comment
There was a problem hiding this comment.
Like this?
// If repoUrl is a local path (i.e. package is installed)
// If repoUrl is a URL (i.e. package isn't installed)
lib/package-detail-view.js
Outdated
| @@ -372,7 +372,16 @@ export default class PackageDetailView { | |||
| readme = fs.readFileSync(this.readmePath, {encoding: 'utf8'}) | |||
| } | |||
|
|
|||
| const readmeView = new PackageReadmeView(readme) | |||
| let readmeSrcBase | |||
There was a problem hiding this comment.
What do you think about renaming this to readmeSrc instead?
There was a problem hiding this comment.
If you think that's better than I'm happy to change it. Would you want it changed in package-readme-view.js as well?
lib/package-detail-view.js
Outdated
| readmeSrcBase = this.pack.path | ||
| } else { | ||
| let repoUrl = this.packageManager.getRepositoryUrl(this.pack) | ||
| readmeSrcBase = repoUrl + '/blob/master/' |
There was a problem hiding this comment.
This needs to be changed to point to the last published tag.
There was a problem hiding this comment.
Do you know if there's a simple way to do that?
There was a problem hiding this comment.
I looked around a bit but it doesn't look like atom.io's API has a way of getting the latest tag. There's also the problem that master isn't guaranteed to exist (and be the default branch). Let me see if anyone else has any ideas.
lib/package-detail-view.js
Outdated
| if (this.pack.path) { | ||
| readmeSrcBase = this.pack.path | ||
| } else { | ||
| let repoUrl = this.packageManager.getRepositoryUrl(this.pack) |
There was a problem hiding this comment.
Edge case, but this might return undefined if the repository no longer exists or the package has been unpublished. You might want to make sure that this works in those cases.
There was a problem hiding this comment.
Just to clarify, is it getRepositoryUrl() which could return undefined?
There was a problem hiding this comment.
In latest commit I've added some checks to make try and catch this
|
We'd love to see this change go in if you can address @50Wliu's feedback. |
|
I've addressed most of it, I'm just waiting for some clarification on a couple of points |
|
Sorry, I'll try to get back to you soon! |
|
Cool, no rush |
|
I'd love to get this merged in - there seems to be some conflicting files now though - possibly because of my change from our own sanitization to dompurify. |
|
I'm going to attempt to resolve these conflicts. 🤞 |
|
@nathansobo Just so that you're aware of my last review comment that we're not sure how to resolve: |
|
Thanks for contributing this @frasertmay! |
|
@50Wliu Hey, sorry, I missed your comment somehow before merging this 😬 . Guess the PR didn't auto-update? Should I roll this back? Still seems like an overall improvement to have some sort of README images though it won't be 100% due to the fact they could be deleted, |
|
Yeah, it's definitely an improvement. I don't think it needs to be reverted; I'll create a follow-up issue for it. |
|
Thank's for sorting out the merge conflicts @nathansobo! @50Wliu, if you're happy to sort out the URL issue in a separate issue/PR I'll delete the branch. |
|
🎉 |
|
@frasertmay Feel free to delete the branch. |
Description of the Change
When rendering package READMEs, whilst sanitizing the source image, URLs are now checked to see if they are absolute or relative and if they are relative then they are resolved appropriately. For example for non-installed plugins the base URL would be the GitHub repo however if they are installed it uses the path of the installed plugin.
Before:
After:
Alternate Designs
I considered attempting to match up each image in the Markdown with its counterpart on its Atom.io page or its README on GitHub and using those URLs. I chose this solution in the end as it was much simpler and in the cases I've tested still seems to work.
Benefits
Packages using relative URLs for images in their README files as recommended by GitHub will now be rendered correctly
Possible Drawbacks
Any URL scheme not recognized by the code I have written will be assumed to be a relative path so the image URL may be altered incorrectly.
Applicable Issues
The applicable issue would be here