gatsby-plugin-template

Gatsby template plugin for code

Usage no npm install needed!

<script type="module">
  import gatsbyPluginTemplate from 'https://cdn.skypack.dev/gatsby-plugin-template';
</script>

README

gatsby-plugin-template

Load code with template, indent is preserved, only support Gatsby v2

Install

npm install --save gatsby-plugin-template

How to use

In your gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-template',
      options: {
        test: /\/src\/examples\/(?!index).*\.jsx?$/,
        template: `${__dirname}/example-template.js`,
        placeholder: '/*** placeholder ***/',
      },
    },
  ],
}

Options

  • test (regexp) - required, regexp identifies which files should be transformed.
  • template (string) - required, absolute path of the template file.
  • placeholder (string) - placeholder to be replaced, defaults to /*** placeholder ***/.
  • exportResult (string | boolean) - export the transformed content as provided name, defautls to false.
  • exportRaw (string | boolean) - export the raw content as provided name, defautls to false.

Example

  1. template
import React from 'react'
import styled, { css } from 'styled-components'

/*** placeholder ***/
  1. code
const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
`;

export default Button
`
  1. transformed
import React from 'react'
import styled, { css } from 'styled-components'

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
`

export default Button