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

| Option | Explanation | | -------------------------- | --------------------------------------------------------------------------- | | spreadsheetId | The id of the spreadsheet (required) | | worksheetTitle | The title of the shett containing the configuration (required) | | credentials | The service account credentials generated from the Google Developer Console | | imageSettings | Array of image configs | | imageSettings.key | The key of the row the value comes from | | imageSettings.dest | The destination folder (relative to the root of the site) | | imageSettings.outputName | The name of the output (minues the extension) | | themeSettings | Theme settings | | themeSettings.output | Name of the generated scss file | | themeSettings.formatters | Array of variable (inner part of the [...]) key (function) pairs | | fontKeys | Array of theme variables that are fonts that should be prefetched |

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