Skip to content
This repository has been archived by the owner on Apr 23, 2024. It is now read-only.

A plugin that simplifies adding blogmail newsletters to your Gatsby website

License

Notifications You must be signed in to change notification settings

blogmail/gatsby-plugin-blogmail

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1847762 ยท May 11, 2021

History

11 Commits
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020
May 11, 2021
Jul 28, 2020
Jul 28, 2020
Jul 28, 2020

Repository files navigation

Node.js CI Node.js Package npm version

Gatsby Plugin blogmail

A plugin that simplifies adding blogmail newsletters to your Gatsby website

Description

The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating blogmail newsletters into their blazing-fast Gatsby websites. After struggling to integrate different components into my Gatsby site, creating an easily-configured plugin for the Gatsby ecosystem felt like a no-brainer.

Install

yarn add gatsby-plugin-blogmail

or

npm install -S gatsby-plugin-blogmail

Configure

Add the plugin to your gatsby-config.js file with your blogmail newsletterId. You must (at a minimum) provide a newsletter ID, and you can get one by signing up at https://blogmail.co/.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-blogmail`,
      options: {
        newsletterId: `your-newsletterId`,
      },
    },
  ],
}

Usage

You can use the plugin as shown in this brief example:

import Blogmail from "gatsby-plugin-blogmail"

const PostTemplate = () => {
  let blogmailConfig = {}
  return (
    <>
      <h1>{post.title}</h1>
      /* Post Contents here */
      <div
        style={{
          padding: `0.5rem`,
          borderWidth: `1px`,
          borderRadius: `0.25rem`,
          borderColor: `#cbd5e0`,
          borderStyle: `solid`,
          marginBottom: `1rem`,
        }}
      >
        <Blogmail
          subscribedText="You're subscribed! ๐ŸŽ‰"
          styles={{
            form: {
              marginBottom: `0px`,
            },
            formDiv: {
              display: `flex`,
              flexWrap: `wrap`,
            },
            label: {
              width: `100%`,
              padding: `0.5rem`,
            },
            subscribedDiv: {
              width: `100%`,
              padding: `0.5rem`,
            },
            textInput: {
              padding: `0.5rem`,
              flexGrow: 1,
              margin: `0.25rem`,
              borderRadius: `0.25rem`,
              borderColor: `#a0aec0`,
              borderStyle: `solid`,
            },
            submitInput: {
              padding: `0.5rem`,
              margin: `0.25rem`,
              borderRadius: `0.25rem`,
              borderColor: `#a0aec0`,
              borderStyle: `solid`,
            },
            bottomDiv: {
              color: `#718096`,
              padding: `0.5rem`,
              fontSize: `0.8rem`,
            },
          }}
        />
      </div>
    </>
  )
}

export default PostTemplate