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 🙏

© 2024 – Pkg Stats / Ryan Hefner

metalsmith-react-tpl

v3.0.2

Published

Use React in metalsmith as a templating language

Downloads

191

Readme

Circle CI

metalsmith-react-tpl

Use React in metalsmith as a templating language

About

metalsmith-react-tpl is a metalsmith plugin to render files using React.js based templates.

Installation

npm install metalsmith-react-tpl

CLI Usage

Install the node modules and then add the metalsmith-react-tpl key to your metalsmith.json plugins. The simplest use case just requires the template engine you want to use:

{
  "plugins": {
    "metalsmith-react-tpl": true
  }
}

If you want to specify additional options, pass in an object:

{
  "plugins": {
    "metalsmith-react-tpl": {
      "baseFile": "base.jsx",
      "isStatic": true,
      "directory": "templates"
    }
  }
}

Javascript Usage

Simplest use case:

var templates = require('metalsmith-react-tpl');

metalsmith.use(templates());

To specify additional options:

metalsmith.use(templates({
  baseFile: 'base.html'
  isStatic: true,
  directory: 'templates'
}));

Usage Notes

Specifying Templates

If a rtemplate field is set in the yaml front-matter of your markdown files, metalsmith-react-tpl will use the specified template instead of default.jsx

You can also set noConflict to false and the plugin will use the template field instead of rtemplate field in the yaml front-matter.

Webpack / Build Systems

If you import css or any other non-standard js code using 'require', you might want to make use of the requireIgnoreExt to ignore those files.

Options

baseFile (optional)

default: null

You can pass in a .html or .jsx baseFile depending on your setup, using a react baseFile will allow you to continue using React even for your main layout template.

Using a .jsx baseFile will result in the baseFile.jsx to use isStatic: false and be rendered with ReactDOM.renderToString option and then will not have any reactid's passed through (Your templates will still go through the isStatic option).

Specifies a file which the contents of the react template will render into.

This is similar to the index.html file which you ReactDOM.render() your components in.

In your base file, put {{content}} in the location where you want your data will render into.

isStatic (optional)

default: true

Since this is a static site generator, by default, it will render the React Templates using renderToStaticMarkup()

However, you may choose to make a static site generator with React functionalities (similar to first render from server) and subsequently pull page routes via JavaScript / React.

Setting this parameter to false will cause templates to be parsed using renderToString()

noConflict (optional)

default: true

By default, this plugin will read from the rtemplate key in your yaml front-matter. However, if this is the only templating plugin, you may set noConflict to false to use the template key instead.

directory (optional)

default: templates

Sets the directory which your react templates (or baseFile) resides.

pattern (optional)

default: **/*

Specifies a file filter pattern

html (optional)

default: true

Renames files from *.md to *.html

preserve (optional)

default: false

Stores a copy of un-templated contents into rawContents meta.

requireIgnoreExt (optional)

default: []

A list of extensions to ignore. For example, {requireIgnoreExt: ['.css']} would ignore declarations like require('file.css')

Original license

Thanks to metalsmith-react-templates who i originally forked from.