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

feat(markdown): Add support for imageReference paths when collecting images #8475

Merged
merged 1 commit into from
Sep 13, 2023

Conversation

webpro
Copy link
Contributor

@webpro webpro commented Sep 9, 2023

Usually images in Markdown are authored like so:

![alt](url)

Yet they can also use an imageReference with a definition:

![alt][ref]

[ref]: url

Both syntaxes work fine when it comes to rendering HTML, but images referenced in the second form are not collected in remarkCollectImages() as that only catches image nodes, but not imageReference nodes.

Changes

This PR adds a unit test for the former, and support and a unit test for the latter.

Did not measure, but the impact on performance should be minimal. Also see the note with the relevant code.

Testing

This PR contains a test for existing functionality to assert image collection, and adds a test for the new functionality.

Docs

/cc @withastro/maintainers-docs for feedback!

Since I had all my images in the yet unsupported syntax, it I didn't see why my images weren't rendered at all. Also because the docs on images do not include an example with an image in the same directory as the Markdown file (yet I did have warnings in the console).

Accepting this PR will make all the problems go away ✨

@changeset-bot
Copy link

changeset-bot bot commented Sep 9, 2023

🦋 Changeset detected

Latest commit: f9f37d4

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the feat: markdown Related to Markdown (scope) label Sep 9, 2023
if (shouldOptimizeImage(node.url)) imagePaths.add(node.url);
}
if (node.type === 'imageReference') {
const imageDefinition = definition(node.identifier);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Instead of pre-loading the definitions(tree), we could also look them up lazily here. This would lower the performance impact when not using the additional imageReference syntax (the majority I guess), but slow down the implementation in this PR when that syntax is used.

Either way, this type of AST traversal is fast. We could traverse only direct tree.children (no further descendants) to minimize overhead.

@matthewp
Copy link
Contributor

!preview img-ref

@Princesseuh Princesseuh merged commit d939878 into withastro:main Sep 13, 2023
13 checks passed
@astrobot-houston astrobot-houston mentioned this pull request Sep 13, 2023
@webpro webpro deleted the feat/support-image-refs-in-md branch September 19, 2023 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: markdown Related to Markdown (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants