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

Tags not added on images with Docusaurus #21

Open
jaguarondi opened this issue Sep 9, 2020 · 4 comments
Open

Tags not added on images with Docusaurus #21

jaguarondi opened this issue Sep 9, 2020 · 4 comments
Labels
bug Something isn't working

Comments

@jaguarondi
Copy link

I'm using docusaurus which uses rehype/remark and added remark-attr. Other markups like links, headers, etc. are working fine but image tags just don't get any attributes added. I also tested the paragraph branch which works fine with paragraphs.

Is there any test I could do to help diagnose the problem with images further?
I'm using

![img](img.png){class="none"}

which leads to

<img alt="img" src="/assets/images/img-2ce0a3f91f9b6ea2d3149cbaab375986.png">

Images are obviously copied to another folder and the src attribute rewritten in the way. This might just be the reason.

@arobase-che
Copy link
Owner

Ok I spent some time to reproduce this case.
I'm happy that most of the plugin works. :)

I'm on vacation at the moment, I will investigate this bug next week. ^^

@arobase-che arobase-che added the bug Something isn't working label Sep 9, 2020
@jaguarondi
Copy link
Author

Checking a bit further, I could get to the point where the token is called and the returned 'eaten' data seems correct:

{
  type: 'image',
  title: null,
  url: '/img/Logo_Cyan_flat.png',
  alt: 'alt',
  position: Position {
    start: { line: 5, column: 1, offset: 32 },
    end: { line: 5, column: 45, offset: 76 },
    indent: []
  },
  data: { hProperties: { height: '50' } }
}

This is with a default docusaurus install and just this last line added to docusaurus.config.js:

  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl:
            'https://github.com/facebook/docusaurus/edit/master/website/',
          remarkPlugins: [require('remark-attr')],

@arobase-che
Copy link
Owner

Ok, it's exactly what I tried.

If you manage to get the 'eaten' data and that seems correct then the problem doesn't come from remark-attr.
Need more investigation.

Thank you for you implication.

@jaguarondi
Copy link
Author

That's good to know, thanks. I could try to reach out at Docusaurus to investigate further but it's outside my skills at the moment. If you have anything that could help point in the right direction, that could help.

I integrated Tailwind CSS with Docusarus and remark-attr would be great to stick to markdown as much as possible while still having much more functionalities by tagging lists or paragraphs to have various meanings like figure or table caption, check mark lists, tutorial step lists, etc. I would like to look into lists after but I'm afraid that if tags don't get through, more problems might appear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants