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.

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. 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 ☝️

• 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",
          ALL_MEETUPS: "All meetups →",
          REGISTER_ON_MEETUP: "Register on Meetup →"
        },
        currentMeetupColor: "#EFCC74",
        pastMeetupColors: ["#E6BB91", "#DDDEC4", "#F3DBD1"]
      }
    }
  ]
};

☝️ 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)

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

3. The footer (usually some credits or sponsorship links)

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 components, 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 jamstack-london-demo-website 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.