@matthieuauger/gatsby-theme-meetup NPM

Gatsby Theme Meetup is a simple theme for meetup organizers. Theme features includes

Past and futures meetup fetched from Meetup thanks to gatsby-source-meetup
Configurable meetup name, CFP form, videos link and editorial content powered by markdown
Translatable texts for call to action

:rocket: Get Your Meetup Site Up and Running in 5 Minutes

You can get a new Meetup Gatsby site up and running on your local dev environment in 5 minutes with these four steps:

Create you meetup site directory and bootstrap package.json.

mkdir my-awesome-meetup-website
cd my-awesome-meetup-website/
npm init -y

Install Gatsby, Gatsby Theme Meetup and its dependencies.

npm install react react-dom gatsby @matthieuauger/gatsby-theme-meetup

Configure Gatsby to use the Gatsby Theme Meetup
Open the my-awesome-meetup-website directory in your code editor of choice, create a gatsby-config.js file at the root with following lines and save your changes
```
module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup"
    }
  ]
};
```
Set API key
Add MEETUP_API_KEY env variable from here: https://secure.meetup.com/meetup_api/key/

Start the site in develop mode.

node_modules/.bin/gatsby develop # or install Gatsby CLI globally with npm install -g gatsby-cli

At this point, you’ve got a fully functional Meetup website. For now, it fetchs and dislpay content for the JAMstack Paris Meetup.

:paintbrush: Configure site for your meetup

The theme offers simple configurations directly by modifying the gatsby-config.js file in your site directory.

:point_up: Beware, when updating your gatsby-config.js file, you must stop and start again gatsby develop so it can source the new configuration :point_up:

Meetup Name (default: JAMstack Paris)
Homepage Headline (default: Le meetup bimestriel autour de la JAMstack)
Meetup.com group URL. You can get it in the URL of your Meetup (default: jamstack-paris)
Videos Url (by default, redirect to the JAMstack Paris Youtube Page)
Talk Proposal Url (by default, redirect to the JAMstack Paris form)

Here is an example of a gatsby-config.js configuration for the JAMstack London Meetup.

module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup",
      options: {
        meetupName: "JAMstack London",
        meetupHomepageHeadline: "The JAMstack meetup with a cup of tea 🍵",
        meetupDotComGroupUrlName: "JAMstack-London",
        displayVideosLink: false,
        //meetupVideosUrl = 'https://www.youtube.com/channel/UC66eQOycjMnaqzpbRUhEK2w'
        talkProposalUrl: "#",
        //textBlocksPath: `${__dirname}/src/text-blocks`,
        dateFormat: `dddd DD MMMM YYYY`,
        translations: {
          PROPOSE_A_TALK: "Propose a talk →",
          FETCH_VIDEOS: "See videos →",
          LAST_MEETUPS: "Last meetups",
          REGISTER_ON_MEETUP: "Register on Meetup →"
        },
        currentMeetupColor: "#EFCC74",
        pastMeetupColors: ["#E6BB91", "#DDDEC4", "#F3DBD1"]
      }
    }
  ]
};

:point_up: Beware, when updating your gatsby-config.js file, you must stop and start again gatsby develop so it can source the new configuration :point_up:

:writing_hand: Personalize Editorial Content

Editorial content consists of three blocks on the website.

The main text at the top of the page (usually a description of your Meetup but can be whatever)
The main text at the bottom of the page (usually a call to action for talk proposals)
The footer (usually some credits or sponsorship links)

These contents are markdown files sourced by Gatsby during build time.

To override these:

Create the text-blocks directory in your site which will contain your markdown editorial content.
```
mkdir -p src/text-blocks
```

Copy the Markdown files inside your site directory.

cp node_modules/@matthieuauger/gatsby-theme-meetup/src/text-blocks/*.md src/text-blocks

Add option in the configuration to tell Gatsby to source content from your directory

module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup",
      options: {
        //
        // ... your configuration here
        //
        textBlocksPath: `${__dirname}/src/text-blocks`,
        //
        // ... you configuration here
        //
      }
    }
  ]
};

Edit the copied markdown files in your code editor. Beware not to change the type field at the top of the markdown files.

:point_up: Beware, when updating your gatsby-config.js file, you must stop and start again gatsby develop so it can source the new configuration :point_up:

:lipstick: Change Logo

Look at the Advanced configuration section.

:ghost: Advanced configuration

For more advanced configurations, you can use Component Shadowing. For example to override the logo.

Create the directory structure in your site which will contain your shadow component.
```
mkdir -p src/@matthieuauger/gatsby-theme-meetup/components/Header
```

Copy the base Logo component inside your site directory.

cp node_modules/@matthieuauger/gatsby-theme-meetup/src/components/Header/MeetupLogo.component.js src/@matthieuauger/gatsby-theme-meetup/components/Header

Edit the component and use an image of your choice

:point_up: Beware, when shadowing compopnents, you must stop and start again gatsby develop so it can load your shadowed components :point_up:

:handshake: How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community! :muscle::purple_heart:

This repository contains the published package on NPM but also a fully functional development environment with Yarn Workspaces.

Pull the sources, run yarn install, yarn workspace site gatsby develop and you're ready to go.

I will read give feedbacks to new Pull Request as fast as possible.