Page react component & catalog style

[Cethy]

When trying to switch to "react pages" (from plain markdown), I noticed the generated page does not "inherit" css classes from catalog (eg: catalog-1ec5uok-h1-headingStyle).

Is it possible to give react component those css classes (and achieve "pixel perfect" compat' with markdown pages) ?

my (stripped) attempt :

import React from 'react'

import { Page } from 'catalog'

class SomeCatalogPage extends React.Component {
  render() {
    return <Page>
      <h1>Foo</h1>
    </Page>
  }
}

export default SomeCatalogPage

index.js

import React from 'react';
import { Catalog } from 'catalog';

const pages = [{
    path: '/some-page',
    title: 'some catalog page [in react]',
    content: require('./someCatalogPage.js')
  },
  // Other pages …
];

const UICatalog = () => (
  <Catalog
    title='Bloomer Admin UI | Catalog'
    pages={pages}
  />
);

export default UICatalog

[Cethy]

After a bit of digging, I think my problem could be resolved by obtaining access to the internal catalog react components.
Didn't find a way to do it. Is there a reason for why they're not accessible ?

[jstcki]

I don't think there's a real reason preventing us from exporting the page's building blocks. In the meantime, if you use the markdown tagged template literal it should work as expected. For example

import React from 'react'

import { markdown } from 'catalog'

class SomeCatalogPage extends React.Component {
  render() {
    return markdown`
       # Foo
    `
  }
}

export default SomeCatalogPage

[Cethy]

@herrstucki thx for your reply. It does solve one of my problem (inject arbitrary html).

The second one is using loops in template, which isn't really allowed by this technique (md context is "lost" when inside a $(doSomething). But I will try to solve it using a pre-building task for my pages.
A convoluted solution IMHO, and I still think it would be nice to have more freedom in a react template, but it will do the work. :)

[jstcki]

Do you have a concrete example of what you're trying to do? Then we can make sure that we'll cover it properly when we add these components.

[Cethy]

Sure, with the markdown literal, it would look like this (including a loop) :

# ${title}

> ${description}

${someArbitraryHtml}

${ itemsTypes.map((itemTitle, itemSpecimen) => {
    ## ${itemTitle}
    ${itemSpeciment}
} }

But IMHO, adding a loop-system inside the md literal is a bad idea. As it would act as a template-engine, which we already have with react.

[Cethy]

Update :
Loops are usable, with a .join("\n") trick, but specimen or other react elements inside the loop are not parsed/detected.

render() {
    return markdown`
${ ['foo', 'bar'].map(item => `
## ${item}
${<p>{item}</p>}
${<ReactSpecimen><p>{item}</p></ReactSpecimen>}
`).join("\n")}
`

Result :

[Cethy]

I ended up building a custom webpack loader after looking at the catalog/loader.
The all process stays a bit complicated, but it is a lot better than having a task generating files (it's technically the case, but at least, it is "hidden" 😄).