@jampile/gatsby-theme-conference v1.0.2
Jamstack Conferencing built on GatsbyJS, NetlifyCMS, and Firebase
This is a GatsbyJS theme to try and test the limits of online conferencing using JAMStack technologies. A version of it has been tested in production with 500 conference participants and worked well. The application itself is built with GatsbyJS, content managed via NetlifyCMS, and user auth/interaction is built on Firebase.
This theme features a lobby, the ability to livestream, go to breakout Jitsi-based groups, chat while on the site, as well as a few other odds and ends useful for anyone hosting an online conference. You will need a github account, firebase account, and static file hosting. I recommend Netlify.com for hosting, but any server that can serve static files will do.
Getting Started
The easiest way to get started is by deploying our starter to Netlify or Gatsby Cloud. Be sure to setup the correct environment variables to deploy a successful build.
Seting up Your Environment
Setup the following enviornment variables either in a .env.development file on your local dev box or through your hosting provider.
GATSBY_SITE_NAME=Jampile
NETLIFY_SITE_URL=https://localhost:8000
NETLIFY_DISPLAY_URL=https://localhost:8000
NETLIFY_BACKEND_NAME=github
NETLIFY_BACKEND_REPO=username/repo
NETLIFY_BACKEND_BRANCH=master
FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=Firebase Configuration
This theme needs some basic Firebase setup in order to work correctly. You will need to create a Google Firebase account and then enable authentication choices of your liking. You will also need to create an index on the messages table in your Firestore Database.
Messages index to create:
event_id Ascending created_at AscendingTheme Configuration
Add the package to your Gatsby site:
yarn add @jampile/gatsby-theme-conferenceSimply add @jampile/gatsby-theme-conference to your plugins under gastby-config.js. Your content will live under the ./content directory in your main repository. When new features get implemented in the the theme, they will automatically be fetched when you upgrade packages or during the build process.
plugins: [
{
resolve: `@jampile/gatsby-theme-conference`,
}
],Theme Shadowing
GatsbyJS supports Theme Shadowing, allowing you to customize any part of another theme. View the shadowing docs to see how to do this. For example, you might want add information to the footer area of this theme. Copy the Footer component to ./src/gatsby-theme-conference/components/Site/footer.tsx and customize to your liking.
Changelog
See CHANGELOG.md
Contributing
See CONTRIBUTING.md