Skip to content
Create blazing fast meetup sites for your community ⚡️
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Add base of README Jul 31, 2019
packages/@matthieuauger/gatsby-theme-meetup Prepare publication Aug 1, 2019
site
.gitignore Initial commit Jul 17, 2019
README.md Use simple list notation to ease new sections additions Aug 4, 2019
package.json Prepare publication Jul 28, 2019
yarn.lock

README.md

Gatsby

Gatsby Theme Meetup

⚛️ 🤝 ☕️

Launch your meetup website in minutes 🚀

Gatsby Theme Meetup is an open source theme based on Gatsby that helps meetup organizers create blazing fast meetup sites to share to their community.

Gatsby Theme Meetup is released under the MIT license. Current npm package version. PRs welcome! Follow @jamstackparis

Demo · Quickstart · Learn Gatsby · About Themes ·

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

🚀 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:

  1. Create you meetup site directory and bootstrap package.json.

    mkdir my-awesome-meetup-website
    cd my-awesome-meetup-website/
    npm init -y
  2. Install Gatsby, Gatsby Theme Meetup and its dependencies.

    npm install react react-dom gatsby @matthieuauger/gatsby-theme-meetup
  3. 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"
        }
      ]
    };
  4. Set API key

    Add MEETUP_API_KEY env variable from here: https://secure.meetup.com/meetup_api/key/

  5. 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.

🖌 Configure site for your meetup

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

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

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 →"
        }
      }
    }
  ]
};

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

✍️ Personalize Editorial Content

Editorial content consists of three blocks on the website.

  1. The main text at the top of the page (usually a description of your Meetup but can be whatever) Top text Editorial Content

  2. The main text at the bottom of the page (usually a call to action for talk proposals) Bottom text Editorial Content

  3. The footer (usually some credits or sponsorship links) Bottom text Editorial Content

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

To override these:

  1. Create the text-blocks directory in your site which will contain your markdown editorial content.

    mkdir -p src/text-blocks
  2. Copy the Markdown files inside your site directory.

    cp node_modules/@matthieuauger/gatsby-theme-meetup/src/text-blocks/*.md src/text-blocks
  3. 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
            //
          }
        }
      ]
    };
  4. Edit the copied markdown files in your code editor. Beware not to change the type field at the top of the markdown files.

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

💄 Change Logo

Look at the Advanced configuration section.

👻 Advanced configuration

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

  1. Create the directory structure in your site which will contain your shadow component.

    mkdir -p src/@matthieuauger/gatsby-theme-meetup/components/Header
  2. 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
  3. Edit the component and use an image of your choice

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

🤝 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! 💪💜

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.

📝 License

Licensed under the MIT License.

You can’t perform that action at this time.