✨ Allow interactive react examples

[matthiasrohmer]

This allows interactive examples for the Bento React components like the following:

{% example %}
```javascript
import React from 'react';
import {
  BentoAccordion, 
  BentoAccordionSection, 
  BentoAccordionHeader, 
  BentoAccordionContent
} from '@bentoproject/accordion/react';
import '@bentoproject/accordion/styles.css';

function App() {
  return (
    <BentoAccordion>
      <BentoAccordionSection key={1}>
        <BentoAccordionHeader>
          <h1>Section 1</h1>
        </BentoAccordionHeader>
        <BentoAccordionContent>Content 1</BentoAccordionContent>
      </BentoAccordionSection>

      <BentoAccordionSection key={2}>
        <BentoAccordionHeader>
          <h1>Section 2</h1>
        </BentoAccordionHeader>
        <BentoAccordionContent>Content 2</BentoAccordionContent>
      </BentoAccordionSection>

      <BentoAccordionSection key={3}>
        <BentoAccordionHeader>
          <h1>Section 3</h1>
        </BentoAccordionHeader>
        <BentoAccordionContent>Content 3</BentoAccordionContent>
      </BentoAccordionSection>
    </BentoAccordion>
  );
}
``
{% endexample %}

Some remarks: I added a copy of markdown-it-container to the project as the NPM package is esm only. Its only purpose though is to pass through parsed markdown tokens unaltered so markdown-it doesn't throw random <p> in our example widgets. That could also be achieved with a much more lighter custom markdown-it plugin but I wanted to move quickly.

For this to work JS examples need to be ensured working. Example: the bento-accordion example I used for testing purposes is actually broken upstream. It misses to import BentoAccordionSection, BentoAccordionHeader and BentoAccordionContent.

Broken examples would kill the whole build process as next.js has no option to ignore broken pages. I could find none at least.

So far: npm run develop and http://localhost:8080/components/bento-accordion/#preact%2Freact-component

[sebastianbenz]

Nice! I really like the approach of using next.js to build the examples. Left a few comments regarding style/structure, but in general looks good.

[sebastianbenz]

Why are the example templates in different directories?

[matthiasrohmer]

I wanted to make clear that this template doesn't make sense in the 11ty/HTML context by putting it in a different directory.

[sebastianbenz]

Hm. Not sure if that is needed. I'd prefer to keep all templates in the same hierachy, but maybe add a comment in the template.

[sebastianbenz]

It feels like it'd be better to extract the JS and wc parsing/rendering logic into separate classes to avoid these repeated if statements. Or is there a case when both are valid at the same time?

[matthiasrohmer]

Yes that would be cleaner. When building I always had in mind that at some point one might want to extend this to be able to power a widget where you are able to toggle between web component and react sample like we had in mind for the hero example. That's when you would have both a js and a html snippet in one {% example %}. But that's probably not a valid use case anymore...?

[sebastianbenz]

The hero examples are standalone anyway.

[sebastianbenz]

Thanks!