Typesite-filter-out
A plugin for Typesite that allows you to render JSX to HTML easily, even if you want to have multiple JSX fragments in the same file.
Installation
Run npm install typesite-filter-out
How to use
First register JsxRendererPlugin
plugin in your Typesite project:
typesite.usenew JsxRendererPlugintrue;
Then add JsxContentsMeta
to the frontmatter of whatever files you want to have JSX contents. It takes a callback which will be given ContentFile
and Typesite
as params and will expect you to return JSX.Element
.
This will overwrite content sent by just having a string in the frontmatter.
;
Multiple JSX fragments
If you want to have multiple JSX fragments in one file, for example a summary for a blog post, you first have to create a new class extending JsxContentsMeta
:
It's absolutely necessary to override getKey
! Then register the meta in frontmatter:
;
You can later access its contents as string with:
file.metadata.getItemJsxSummaryMeta.contents;
Important: when you have multiple metas extending JsxContentsMeta
only the base one will be transferred to ContentFile
's contents.
API
JsxContentsPlugin
The plugin responsible for rendering the JSX metas:
constructor
- Argument
removeDataReactRoot :boolean
Controls wheteher to remove any and alldata-reactroot
attributes that might appear
JsxContentsMeta
Meta class that builds the JSX for the page's contents:
constructor
- Argument
render: (path:string, file:ContentFile, files:ContentFileCollection, typesite:Typesite) => JSX.Element
A function that expects file path, rendered file, files collection & typescite instace and should returnJSX.Element
with the page's contents which will later be rendered to string. - Exception
Typesite.ArgumentNullError
Whenrender
is null - Exception
Typesite.ArgumentInvalidError
Whenrender
is not a function
Properties
contents:string
The rendered JSX