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

Add check for images' alt text #2348

Closed
wants to merge 4 commits into from

Conversation

arnaucasau
Copy link
Collaborator

@arnaucasau arnaucasau commented Nov 20, 2024

Superseded by #2349

Comment on lines +25 to +36
await unified()
.use(remarkParse)
.use(remarkGfm)
.use(() => (tree: Root) => {
visit(tree, "image", (node) => {
if (!node.alt) {
images.add(node.url);
}
});
})
.use(remarkStringify)
.process(markdown);
Copy link
Collaborator Author

@arnaucasau arnaucasau Nov 20, 2024

Choose a reason for hiding this comment

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

Notice that the plugin will not extract images from HTML tags. I have searched in the repo and we don't have any instance of it. HTML tags can be used for the writers if they want to resize the images in markdown:

<img src="example.jpg" alt="Example" width="200"/>

We could implement this by adding another visitor that uses Cheerio as follows:

visit(tree, "html", (node) => {
  const $ = load(node.value);
  const imgElement = $("img");
  if (imgElement.length) {
    images.add(imgElement.attr("src"));
 }
});

I think it would be good to add it to make it more robust, but what do you think?

Comment on lines +29 to +33
visit(tree, "image", (node) => {
if (!node.alt) {
images.add(node.url);
}
});
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

FYI: In my opinion, the visitor is already very simple and readable, but I discovered that we can add more conditions to the typeNode part to make it more concise. Equivalent example:

 visit(
        tree,
        (node) => node.type === "image" && !node.alt,
        (node) => images.add(node.url),
      );

I don't think is useful right now, but we could use it in the future if the logic becomes more complex.

Copy link

Check out this pull request on  ReviewNB

See visual diffs & provide feedback on Jupyter Notebooks.


Powered by ReviewNB

@@ -83,7 +83,7 @@
"dag = circuit_to_dag(qc)\n",
"dag_drawer(dag)\n",
"```\n",
"![](/images/guides/custom-transpiler-pass/DAG.png)\n",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This image was missing the alt text. Looking at the notebook (https://docs.quantum.ibm.com/guides/custom-transpiler-pass) I think the alt text of the previous image (the circuit inside the "Background: DAG representation" collapsible) refereed to this one, so I moved it here and added an alt text for the circuit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

1 participant