Skip to content

Commit

Permalink
Document how to work with this repo
Browse files Browse the repository at this point in the history
  • Loading branch information
stefanoverna committed Dec 30, 2021
1 parent d85c359 commit aef69cb
Showing 1 changed file with 29 additions and 9 deletions.
38 changes: 29 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato

<br /><br />
<a href="https://www.datocms.com/">
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
</a>
<br /><br />

Expand Down Expand Up @@ -570,7 +570,6 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
<StructuredText
data={data.blogPost.content}
customRules={[

// Add HTML anchors to heading levels for in-page navigation
renderRule(isHeading, ({ node, children, key }) => {
const HeadingTag = `h${node.level}`;
Expand All @@ -586,7 +585,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
</HeadingTag>
);
}),

// Use a custom syntax highlighter component for code blocks
renderRule(isCode, ({ node, key }) => {
return (
Expand All @@ -598,25 +597,27 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
/>
);
}),

// Apply different formatting to top-level paragraphs
renderRule(
isParagraph,
({ adapter: { renderNode }, node, children, key, ancestors }) => {
if (isRoot(ancestors[0])) {
// If this paragraph node is a top-level one, give it a special class
return renderNode('p', { key, className: 'top-level-paragraph-container-example' }, children);
return renderNode(
'p',
{ key, className: 'top-level-paragraph-container-example' },
children,
);
} else {
// Proceed with default paragraph rendering...
// return renderNode('p', { key }, children);

// Or even completely remove the paragraph and directly render the inner children:
return children;
}
}
)


},
),
]}
/>;
```
Expand All @@ -634,3 +635,22 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
| customRules | `Array<RenderRule>` | :x: | Customize how document is converted in JSX (use `renderRule()` to generate) | `null` |
| renderText | `(text: string, key: string) => ReactElement \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |

## Development

This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:

```
npm link
cd examples/images-and-seo/vanilla-react
npm link react-datocms
npm run start
```

Now on another terminal you can run:

```
npm run watch
```

This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.

0 comments on commit aef69cb

Please sign in to comment.