hebilicious/gatsby-remark-component

Gatsby-transformer-remark plugin for custom components.

gatsby-remark-component's Issues

Publish version 1.1.3 on NPM

The latest on master is not available via NPM. It would be great to have it.

Please update NPM

Hello, https://www.npmjs.com/package/gatsby-remark-component

is not up to date with this repository :)

Question: Is it optimized so the processing is only done during build and client-side has the AST for React?

Question: Is it optimized so the processing is only done during build and client-side has the AST for React?

Unable to find components in specific circumstances

I have a custom component that takes props.

This works great when I apply it to all components like this:

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }
]

But it doesn't work at all when I select components:

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-component",
          options: { components: ["my-component", "other-component"] }
        }
      ]
    }
  }
]

It doesn't give any errors, it doesn't log any "found component..." in console anymore, and it just doesn't replace the div tag.

Edit: turns out this issue occurs only when a custom component takes props.

React.Fragment

Hi @Hebilicious, and thanks for contributing to gatsbyjs/gatsby#312!

I understand that so far implementations use dangerouslySetInnerHTML, so they need to be HTML instead of JSX. Is there a way we could flatten the HTML out so that we don’t even wrap React components in a div? Could we utilize <React.Fragment> in some way?

Markdown/HTML inside the component renders as a literal string

When I use a custom component, I can't include HTML or markdown. Instead, the props.children content renders as literal text. It doesn't look like this is covered in the documentation, so I can't figure out if this is by design or a quirk of my configuration.

Thinks regular HTML elements are custom tags

I get this output in the console:

Found a custom tag <a href="http://domain">
Found a custom tag </a>

The entire paragraph is replaced by a DIV. All I had in the markdown was this:

After two iterations and Google Analytics inspections with <a href="http://domain.com">Name Name</a>

I assume this is the important part of my gatsby-config:

'gatsby-plugin-react-next',
{
    resolve: 'gatsby-source-contentful',
    options: {
      spaceId: 'xyzy',
      accessToken: '123',
    },
  },
  {
  resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }

Allow props in component definitions.

Hi,

I think the current plugin does not support custom components with props being set.
For example, it does not handle

<my-component props='123'></my-component>

Can we add &change

const re = new RegExp(`<\\s*${comp}\\b`)
        if (node.value.match(re) !== null) {

to line 22?

Thank you!

gatsby-remark-component/lib.js

Line 22 in 8ae52f2

if (node.value == "<" + comp + ">") {

Not working for some custom components (has an iframe inside)

      {
        resolve: 'gatsby-remark-component',
        options: { components: ["youtube", "content-wrapper", "welcome-hero"] }
      },

working for all except youtube. I even changed to you-tube. Still not working.

I added the same component with 2 different names and as you can see the inner component is the same but the wrapper is different.

Cannot pass props to component

I'm unable to pass a prop from the parent component to the child component rendered using rehype-react. For instance, I'd like to pass the fileAbsolutePath of a node to the rendered component so that I can use it in an image gallery. The image would live within the same folder as the post that I am creating (parallel to the index.md). In order to do this, I need to be able to pass the directory location to the component that gets rendered.

Is this possible? If not, is there a way to work around this?

Automatically Closing Tags?

Hello!

I'm noticing an issue when I try to use automatically closing tags.

For example, when I build using this in my markdown file:
<component-one /> <component-two />

I can only get component-one to display:

When I explicitly open and close the components, they work fine and dandy.

For example:
<component-one></component-one><component-two></component-two>

Pass image as prop

Hello!

How can I pass an image as a prop to my custom component?

I am trying something like this:

<image-box image='{ "url": "./image1.jpg", "title": "Paragon Veterinary Referral" }'></image-box>

the component's render function is

const image = JSON.parse(this.props.image)

return (
  <div className="container container-xxl">
    <div className={styles.oneColumnImg}>
      <img src={image.url} alt={image.title} />
    </div>
  </div>
)

is this even possible using this plugin? :)

Classes are stripped off

Components with className render without classes:

// Component.js
<div className='someClass'>Some text</div>

Actual:

// rendered page
<div>Some text</div>

Expected:

// rendered page
<div class='someClass'>Some text</div>

Style prop works as expected.

Found a custom tag... what should I do?

I pulled in a large amount of Markdown files into my site and when I run gatsby develop or build I get a huge amount of output about "Found a custom tag".

I realize some are bogus (e.g. <narf>) but others seem to be legit (e.g. comments, </a>, lines with multiple tags).

• What am I supposed to do?
• What files are these problems in? (I can guess some)
• What line number is a problem on?
• If they are harmless, can I turn them off?

Here's an example of the output:

Found a custom tag <narf>
Wow!  I found a blog post talking about <a href="http://addons.mozilla.org/firefox/4125">It's All Text!</a> on a blog called <a href="http://d.hatena.ne.jp/nyama/">Another 朝顔日記</a> written in <a href="http://technorati.com/tag/japanese" rel="tag">japanese</a>!
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag </code>
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag </narf>

Found a custom tag <!-- ckey="3406B841" -->
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag <!--more-->
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag <pre>Harm:      2.7
Fairness:  2.3
Loyalty:   1.5
Authority: 1.0
Purity:    0.7</pre>

Found a custom tag </a>
Found a custom tag </a>
Found a custom tag <pre> US      JP
 :-)     ^_^
 x-)      &gt;_&lt;
 :-(     ;_;</pre>

Found a custom tag <tt>
Found a custom tag </tt>
Found a custom tag <!--nevermore-->

Found a custom tag <narf>
So I have finally submitted It's All Text! to <a href="http://www.babelzilla.org/">Babelzilla</a>, the mozilla translation site.  It took a little <a href="http://www.babelzilla.org/forum/index.php?showtopic=3269&amp;st=0&amp;p=30125&amp;#entry30125">work</a> to get in, though.  There isn't anything so simple that I cannot break it. :-)
Found a custom tag <!--more-->
Found a custom tag </a>
Found a custom tag </a>
Found a custom tag </a>

Not working with some tag-names

Hey,
i think there is a bug. When I am using something like <component></component> the parent container updates to div to prevent invalid dom nesting. Nice.

But this does not update if the tag name is somthing like <atest></atest> or <a-test></a-test> or <ipsum></ipsum>. <cccatest></cccatest> is working!

My assumption: If a Tag-Name starts with a letter from a valid html tag name the override is not triggering. Maybe there is something breaks the mechanism, if the tag-name begins like an valid html tag name? I mean <i> like <ipsum> and <a> tag like <atest> ? So maybe the check is not the best solution?
if (!html.some(tag => node.value.startsWith(<${tag}) || node.value.startsWith(</${tag}))) {
in https://github.com/Hebilicious/gatsby-remark-component/blob/master/src/index.js#L27

Or did i something wrong?

validateDOMNesting warning

Hi I followed the same steps mentioned in https://using-remark.gatsbyjs.org/custom-components/#writing-a-component but I'm getting validateDOMNesting warning in console

I'm using following version of plugins:
"gatsby-remark-component": "^1.1.3",
"gatsby-transformer-remark": "^1.7.42"