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.

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

Fix to ignore hash in images #60

Merged
merged 2 commits into from
Mar 3, 2021
Merged

Conversation

kliput
Copy link
Contributor

@kliput kliput commented Feb 24, 2021

Hi!

The puprose of this feature is to fulfill following requirement:

When linting image paths, hashes should be ignored just like question signs.

AFAIK text after # sign in image sources are never used as a part of target but rather as an additinal data for resulting image. For example: https://www.xaprb.com/blog/how-to-style-images-with-markdown/ describes how to style images using content after # sign in image source. There is also use case in: https://www.gatsbyjs.com/plugins/gatsby-remark-image-attributes/ where #content is converted to img attributes in resulting HTML.

For example, currently if image.png file exists but we lint:

![My image](./image.png#metadata)

There will be an error:

Link to unknown heading in `image.png`: `metadata`  missing-heading-in-file  remark-validate-links

Despite the fact, that the image exists and it will be rendered properly.

Other changes

In this PR I also changed test/fixtures/query-params.md

Link to relative heading ![link](?foo=bar#query-params)

to

Link to relative heading [link](?foo=bar#query-params)

because it is a "Link" not "image", so this looks like a mistake (and prevented tests from working with my code).

@kliput kliput force-pushed the ignore-image-headings branch from 3b1d2e5 to 2089092 Compare February 24, 2021 16:54
@codecov-io
Copy link

codecov-io commented Feb 24, 2021

Codecov Report

Merging #60 (3ad55d4) into main (6935702) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##              main       #60   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           12        12           
  Lines          322       325    +3     
=========================================
+ Hits           322       325    +3     
Impacted Files Coverage Δ
lib/find/find.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6935702...3ad55d4. Read the comment docs.

Copy link
Member

@wooorm wooorm left a comment

Choose a reason for hiding this comment

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

Awesome! Thanks for working on a PR!

From the changed test, and the missing handling of full URLs, I think it’d be good to apply some changed though. Annotated inline!

lib/find/find.js Outdated
Comment on lines 233 to 236
if (
// Ignore "headings" in image links: `image.png#bordered`
if (numberSignIndex !== -1 && nodeType === 'image') {
value = value.slice(0, numberSignIndex)
} else if (
Copy link
Member

Choose a reason for hiding this comment

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

I think this is interfering with query params, as can be seen by the fixture change.
This is also not handling the case for full URLs: the if (url) before this.

Can this be reverted and added somewhere else?

Copy link
Member

Choose a reason for hiding this comment

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

L255 can be solved with:

    return normalize(path.resolve(config.root, value + (nodeType === 'image' ? '' : url.hash)), config)

Copy link
Member

Choose a reason for hiding this comment

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

Then after the old L239, now L242, add a new:

numberSignIndex = value.indexOf(numberSign)

Copy link
Member

Choose a reason for hiding this comment

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

The you can add your if-statement on old L241, new L244:

if (numberSignIndex !== -1 && nodeType === 'image') {
  value = value.slice(0, numberSignIndex)
} 

Copy link
Contributor Author

Choose a reason for hiding this comment

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

L255 can be solved with:

    return normalize(path.resolve(config.root, value + (nodeType === 'image' ? '' : url.hash)), config)

As I suppose - you mean line 225 :)

It makes code complexity at 21, but the limit is 20 - can you help me with refactor?

@@ -1,6 +1,6 @@
# Query params

Link to relative heading ![link](?foo=bar#query-params)
Link to relative heading [link](?foo=bar#query-params)
Copy link
Member

Choose a reason for hiding this comment

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

Could this be reverted, unless I’m missing something?

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I missed that in your PR body.

because it is a "Link" not "image", so this looks like a mistake (and prevented tests from working with my code).

It sure looks that way. But, as an image is expected by browsers, they will send something along the lines of an expected image/png, image/jpg, ... mimetype, for which the server could respond with an image.
I think it’s good to keep it in!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure, so wouldn't it be better if we create a new case for image and fix the current for heading?

Link to relative heading [link](?foo=bar#query-params) // change to be valid

Link to an ![image](./examples/image.jpg?foo=bar) // current image test without hash

Link to an ![image](./examples/image.jpg?foo=bar#client-params) with hash // new image test with hash

to keep test clean and understandable?

lib/find/find.js Outdated Show resolved Hide resolved
@kliput
Copy link
Contributor Author

kliput commented Feb 25, 2021

I have pushed all the proposed changes, but there is complexity warning, so we need refactor.
Thanks for your quick response!

@wooorm wooorm changed the title Ignore hash in image source Fix to ignore hash in images Mar 3, 2021
@wooorm wooorm merged commit 0bd3369 into remarkjs:main Mar 3, 2021
@wooorm
Copy link
Member

wooorm commented Mar 3, 2021

Thanks for your patience! Released!

@wooorm wooorm added ⛵️ status/released 🐛 type/bug This is a problem 👶 semver/patch This is a backwards-compatible fix 🗄 area/interface This affects the public interface labels Mar 3, 2021
@kliput
Copy link
Contributor Author

kliput commented Mar 3, 2021

Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🗄 area/interface This affects the public interface 💪 phase/solved Post is done 👶 semver/patch This is a backwards-compatible fix 🐛 type/bug This is a problem
Development

Successfully merging this pull request may close these issues.

3 participants