Use JS instead of JSON for pages

[MoOx]

Multiples reasons for that:

• markdown can be converted to react (eg: with reactdown
• maybe markdown will be able to contain React code like it can contains HTML?
• no dangerousSetInnerHTML, so probably better hot loading UX for pages
• dates from front matter will be real dates in the head object (see Normalize head date (server: Date, client: string) #397)

[kristojorg]

Is there any progress on this? How close are we to being able to use react in md? I have a Link component I use to wrap anchor tags with styling + other stuff. Would love to be able to use it in markdown files.

In the mean time, is there a way to catch the anchor tags in markdown files and replace with my own implementation?

[MoOx]

Some people did this by parsing the markdown in there react components, not using the loader preset.

[bloodyowl]

nope for me.

pages need to be serialisable, we can think later about a markdown plugin that compiles the body to a serialised object that a component can use to make an element tree out of it.

[MoOx]

Pretty sure we need to address the "markdown to react" somehow. But if you have an idea to handle this using json, I am listening :)

[btnwtn]

Is this in progress still? I want to be able to render a React component within markdown. Thanks :)

[haywirez]

Looking for the best way to integrate custom components in posts as well...
Found this package that might be helpful:
https://github.com/kitze/react-in-markdown

[MoOx]

v1 branch is getting support by default of markdown to react compo using remark + lowlight.
Stay tuned ;)

[MoOx]

Not an option, but we already have a solution for v1 to render markdown into a tree, so no more dangerousinnerhtml :)

[bherila]

Pardon if I'm being ignorant here, but @MoOx how do we use this feature?

Thanks,
Ben

[haywirez]

Still on the old version of phenomic, but I used cmichel.io's approach for solving the problem of custom components defined in the markdown files. Works well.

[bherila]

Ok @haywirez that was a good starting point, thanks!

I found this d3500ae in the meanwhile, appears to be a commit done by @MoOx which allows <BodyRenderer> to map HTML tags to React components.

Is there a small example available (or perhaps a .md file that is being used somewhere) for how to use this feature from the .md file side?

P.S. I would be happy to contribute to the documentation once figuring it out as it appears to be a common use case (I read about such missing features in static site generators e.g. on the Hackernews thread from where I discovered this lovely project in the first place 😄 )

 + test("BodyRenderer accepts a map for components", () => {
 +  const map = {
 +    p: function View(props: Object) {
 +      return <div>{props.children}</div>;
 +    },
 +    a: function Link(props: Object) {
 +      return <a href={props.href} className="auto">{props.children}</a>;
 +    }
 +  };
 +  expect(
 +    renderJSX(
 +      <BodyRenderer components={map}>
 +        {{
 +          t: "p",
 +          p: { className: "test" },
 +          c: [
 +            {
 +              t: "a",
 +              p: { href: "http://test" },
 +              c: "Link"
 +            }
 +          ]
 +        }}
 +      </BodyRenderer>
 +    )
 +  ).toMatchSnapshot();
 +});

[MoOx]

Forget the tree t/p/c thing as it's generated by markdown parser (in short: markdown is converted to a tree to avoid having to render raw html in react component).
You should be able to consume json like markdown, but it's totally up to you to handle the thing you are going to render.
What do you expect?

[bherila]

@MoOx what I am looking for is:

1. a way to create reusable components and then include them in the body, or a way to have multiple regions on a page and populate them from the .md file (e.g. MainContent + Gutter)
2. ability to include images/files in the bundle alongside the .md file without having to maintain a separate "static uploads" folder and figure out links to those images.

For example, this might be one page on the site:

[MoOx]

You can probably use markdown body for main content and use a custom section from the yaml header for other parts.

[bherila]

Okay @MoOx , thanks!

But what if I want to put a React component in the middle of the body somehow, like this:

Water Company owns and operates regulated water utility and wastewater systems 
in New Jersey, Delaware and Pennsylvania. The Company also operates water and 
wastewater systems under contract on behalf of municipal and private clients in 
New Jersey and Delaware. Middlesex Water has grown from a single water utility 
to an enterprise with distinct business operating units meeting a full range of 
residential, commercial, residential and municipal water and wastewater needs.

Through our affiliated companies we are delivering technical and management 
capabilities that creatively address challenges such as aging infrastructure and 
increasing regulatory pressures faced by municipalities, developers and small 
system owners. 

<Expandable>
    <Title>See a map of our service territory</Title>
    <Content>
        <img src="require('./service-map.png')" />
    </Content>
</Expandable>

We have two overall business segments:

* Regulated: The regulated business involves collecting, treating and 
distributing water on a retail and wholesale basis to residential, commercial, 
industrial and fire protection customers in parts of New Jersey and Delaware. 
This segment also includes regulated wastewater systems in New Jersey, 
Delaware and Pennsylvania.
* Non-Regulated: Non-regulated contract services includes the operation 
and ...

[MoOx]

Please track #1104