npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

typesite-jsx-layouts

v1.2.1

Published

Typesite plugin to wrap files with a JSX layout rendered to HTML

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

skellskell

Keywords

typesitetypescriptstatic-website-generatorwebsitestaticgeneratorfilter

Readme

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