A Gatsby theme to generate simple events and conferences landings pages.
See the live demo generated from the template repository!
Features:
- Customize the design (based in bootstrap5) by overwriting the components in the gatsby site that uses this theme
- Different agendas for different days based in a yaml file
- Speakers detail and summary based in markdown files
- Organizers summary in a yaml file
- Static pages as markdown files
- Talks with none or more than one speaker based in markdown files
- Venue in GoogleMaps (without a GoogleMap key)
Not yet but prioritized:
- Sponsors
- Different venues per agenda (partially implemented)
- i18n and support for different languages
- PostEvent documentation (images, videos, etc)
- Stats in the home
You can open a PR with the label "proposal" to ask for more features!
You can use the template repository of the demo site that is fully configured and ready to be used.
Install the theme dependency in your gatsby site
yarn add gatsby-theme-agoraAdd the theme in your gatsby-config.js file
module.exports = {
plugins: [
{
resolve: "gatsby-theme-agora",
options: {
siteUrl: "https://yourdomain.com",
},
},
],
};All the configuration and content resides in the /content directory in the root of the gatsby project.
The structure should be similar to this:
content
├── agenda.yaml
├── links.yaml
├── organizers.yaml
├── config
├── config.yaml
└── images
├── banner.png
└── logo.png
├── pages
└── your-page.md
├── speakers
├── speaker-1.md
└── speaker-2.md
└── talks
├── talk-1.md
└── talk-2.md
The general configuration can be set in the content/config/config.yaml file, the default information is
Important note with images: if your received the error "Cannot return null for non-nullable field ConfigYamlConferenceInfo.xxxImage", check if the relative path for the image is correct. This happens when the image can't be found.
siteInfo:
# optional, the language of the site
language: en
# required, the site url
url: https://conference.com
# optional, the footer notes. You can specify null to remove all the footer notes.
# They can be written in markdown
footerNotes: Created with [Gatsby Theme Agora](https://github.com/asiermarques/gatsby-theme-agora)
conferenceInfo:
# required
name: Awesome Conference
# required
claim: A great conference for developers and other mystical creatures
# required
date: 5th May, Bilbao
# required
logoImage: images/logo.png
# required
hashTag: "#conference"
# required
shareImage: images/banner.png
# optional
ticketsCta:
text: Get your ticket!
link: "https://example.com"
summary:
# required
description: A little description for the conference, what is the audience, why is interesting to the people and this kind of stuff
# optional
cta:
text: Agenda
link: "#agenda"
location:
# required
mapIframeUrl: https://www.openstreetmap.org/export/embed.html?bbox=-3.0432558059692383%2C43.273112177849896%2C-2.9591417312622075%2C43.31212645126047&layer=mapnik
# required
venueInformation: |
Jardin Botánico s/n
48902 Barakaldo, EspañaYou can create a markdown file with the speaker data in the content/speakers directory.
The markdown file should have the following meta structure:
---
key: required, the key for the speaker
name: required, the name of the speaker
title: optional, the company title
image: required, the path to the image file, for example images/speaker.png
social:
twitter: optional, the twitter username
linkedin: optional, the linkedin username
github: optional, the github username
---
Text for the bioYou can create a markdown file with the speaker data in the content/talks directory.
The markdown file should have the following meta structure:
---
key: required, the key for the talk
speakers: required, an array for the speakers, for example [ speaker ]
title: required, the title for the talk
---
The talk description####3 Adding the talk for an agenda slot
You should add the talk to the content/agenda.yaml file in order to be shown in the agenda.
The talk is added by its key, for example:
content:
- type: talk
track: 1
key: the_talk_key
slot: "16:30 - 17:10"