gatsby-plugin-liist-config v0.0.2

gatsby-plugin-liist-config

A Gatsby plugin for pulling Liist config from a spreadsheet.

The plugin uses the gatsby-source-google-sheets plugin to retrieve rows of key-value pairs that configure a Liist site.

• Install
  • Manual
• How to use
  • Options
  • Site Images
  • Theme
  • Fonts
  • Environment Variables
• Changelog
• License

Install

Manual

1. Install gatsby-plugin-liist-config

   npm install --save gatsby-plugin-liist-config

2. Add plugin to gatsby-config.js

   // In your gatsby-config.js
    module.exports = {
      plugins: [
        {
        resolve: `gatsby-plugin-liist-config`,
        options: {
          spreadsheetId: '1234',
          worksheetTitle: 'Settings',
          credentials: {/* service account credentials */},
          imageSettings: [/* ... */],
          themeSettings: {/* ... */},
          fontKeys: [/* .. */]
        }
      ],
    };

How to use

Options

Images

Any images configured with the imageSettings option will be downloaded, placed in the destination folder and have the public path exposed as an environment variable.

This configuration:

{
  imageSettings: [
    {
      key: 'GATSBY_LOGO',
      dest: 'src/images',
      outputName: 'logo',
    },
  ];
}

Would result in the image being downloaded and stored in src/images/logo.{ext}. The environment variable GATSBY_LOGO would equal images/logo.{ext}

Theme

Any settings with a key of the format THEME[$secondary] will be put into a custom scss file located at src/scss/ with the filename specified by themeSettings.output. The value inside the [...] is the variable name and the values will be printed as is.

If a variable's value requires a custom format, provide that in themeSettings.formatters. The key should be the theme variable and the function takes the value from the spreadsheet and must return a string to be written to the SCSS file.

For example a row with the key THEME[$default] and value #00ff00 becomes:

$default: #00ff00;

Adding a custom formatter:

{
  formatters: {
    '$default': value => `'Something'`;
  }
}

Now it becomes:

$default: 'Something';

Fonts

Theme variables that are provided in the fontKeys options will be treated differently. In addition to being output in the generated SCSS files, they are also prefetched using the gatsby-plugin-prefetch-google-fonts plugin.

Environment Variables

All other settings will be put on process.env using their key as the variable name.

For example

GATSBY_SITE_TITLE => Site Title

console.log(process.env.GATSBY_SITE_TITLE); //-> 'Site Title'

Changelog

See CHANGELOG.md.

License

MIT © Pixelplicity