❤
npm
Sign UpSign In

typesite-jsx-layouts
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

Typesite-jsx-layouts

A plugin for Typesite that allows you to wrap file contents' with a JSX layout and render it all to HTML.

Installation

Run npm install typesite-jsx-layouts

How to use

First register JsxLayoutPlugin plugin in your Typesite project:

typesite.use(new JsxLayoutPlugin({
    layoutsDirectory: "src/layouts",
    removeDataReactRoot: true,
    prefix: "<!DOCTYPE html>",
    suffix: "<!-- Website made with Typesite -->"
}));

Then add JsxLayoutMeta to the frontmatter of whatever files you want to put into a layout. It takes one argument, the name or path to the layout file relative to the layouts directory provided to JsxLayoutPlugin, including file extension:

export default new Frontmatter(
    new JsxLayoutMeta('wrap.tsx'),
    "I will have my own layout today~~!"
);

Then, finally, create a new .tsx file in your layouts directory and export new instance of JsxLayout. It takes a callback which will be given the file's contents neatly wrapped in {__html: ""} for immediate use in JSX, ContentFile and Typesite as params and will expect you to return JSX.Element:

export default new JsxLayout((content, file, typesite) => {
    return <html>
    	<head>
    		<title>{file.metadata.getMeta(CommonMeta).title}</title>
    	</head>
        <div dangerouslySetInnerHTML={content}/>
    </html>;
});

And that's it!

API

JsxLayoutPlugin

The plugin that performs the wrapping in layout.

constructor

  • Argument options.layoutsDirectory: string The relative or absolute path to the directory containing the layouts. The layouts defined in JsxLayoutMeta will be resolved by being joined with this value.
  • Argument options.removeDataReactRoot: boolean Controls whether to remove any and all data-reactroot attributes that might appear
  • Argument options.prefix: string and options.suffix: string Optional strings which are added before and after the layout respectively. Useful if you want to add doctype before the actual HTML or anything else that can't be a valid JSX.
  • Exception Typesite.ArgumentNullError when options.layoutsDirectory is null
  • Exception Typepsite.ArgumentInvalidError when:
    • options.layoutsDirectory does not exist
    • options.prefix is not null or a string
    • options.suffix is not null or a string

JsxLayoutMeta

The meta that defines which layout to use for the given file

constructor

  • Argument layoutFileName :string Name or path to the layout file, relative to layoutsDirectory defined in JsxLayoutPlugin
  • Exception Typesite.ArgumentNullError When layoutFileName is null
  • Exception Typesite.ArgumentInvalidError When layoutFileName is not a string

JsxLayout

A class defining layout's contents.

constructor

  • Argument render: (content: { __html: string }, path: string, file: ContentFile, files:ContentFileCollection, typesite: Typesite) => JSX.Element A function that should return the final content of the file after being wrapped. content is already prepared for use with dangerouslySetInnerHTML
  • Exception Typesite.ArgumentNullError When render is null
  • Exception Typesite.ArgumentInvalidError When render is not a function

InvalidLayoutError

Exception thrown when layout file cannot be found, is not accessible, is incorrect or does not export default an instance of JsxLayout.

  • Getter layoutFileName Name of the file which had thrown an error

Dependencies (6)

Dev Dependencies (6)

Package Sidebar

Install

npm i typesite-jsx-layouts

Repository

github.com/EvidentlyCube/typesite-jsx-layouts

Homepage

github.com/EvidentlyCube/typesite-jsx-layouts#readme

Weekly Downloads

1

Version

1.2.1

License

MIT

Unpacked Size

36.5 kB

Total Files

32

Last publish

Collaborators

  • skell
Try on RunKit
Report malware