1.2.2 • Public • Published

    Gatsby Theme Events

    IMPORTANT! - this theme is not meant for use in a live site. I am using this package as a place to learn about gatsby theming. I am going to make breaking changes!!


    This is the code base for the NPM package: @smerth/gatsby-theme-events

    The repo contains the theme and a site for testing the theme, organised as a yarn workspace. The two workspaces are:

    • site
    • @smerth/gatsby-theme-events

    @smerth/gatsby-theme-events creates a simple events content type and adds a listing page for events and a page for each separate event.

    This theme is based on the free online course gatsby-theme-authoring by Jason Lengstorf at the egg-cellant Egghead.IO with the following changes:

    • implementation of a custom grahpql interface to merge json and yaml data sources into a single graphql type called event
    • use of the new gatsby-plugin-theme-ui
    • example of using the JSX prama /** @jsx jsx */ in the StyledLink component be able to access theme.js variables to style the Gatsby Link component


    Data source:

    Either an events.json or an events.yaml file, (or both,) must be added to a data source folder.

    Events data should take this form:

        "id": "6d9aecc5-722a-4562-aa18-c30b01d8484a",
        "name": "convallis duis consequat dui nec",
        "location": "62538 Di Loreto Place",
        "start_date": "2019-01-16",
        "end_date": "2019-06-13",
        "url": "https://nba.com/non/interdum.json"
        "id": "8702366c-b742-4832-9b28-fbb079edceb6",
        "name": "lobortis sapien sapien non mi",
        "location": "742 Rigney Junction",
        "start_date": "2019-04-13",
        "end_date": "2019-01-23",
        "url": "http://bloomberg.com/eget/rutrum/at.jpg"

    or, for yaml this:

    id: dc6a999d-292b-4fa4-bbb5-e87f39f53128
      name: nulla justo aliquam quis turpis
      location: 6122 Grayhawk Road
      start_date: "2019-02-02"
      end_date: "2018-10-29"
      url: http://google.cn/felis/eu/sapien/cursus/vestibulum/proin.jpg
    id: 64d24fe6-1084-45ff-bc05-e173c8efd642
      name: ante ipsum primis in faucibus orci
      location: 91212 Dorton Place
      start_date: "2018-08-17"
      end_date: "2019-04-25"
      url: http://craigslist.org/libero.png

    By default the theme creates a data folder @ host-site/site/src but this can be overridden in the plugin config. The base path for listing and event pages can also be set in the config, like this:

    @ host-site/gatsby-config.js

    module.exports = {
      plugins: [
          resolve: "@smerth/gatsby-theme-events",
          options: {
            basePath: "/events",
            contentPath: "events"

    Theme UI

    The theme uses gatsby-plugin-theme-ui to deliver a theme object to components. The theme.js file and any components can be overriden using "component shadowing".

    GraphQL Customization

    This theme contains an example of customizing Gatsby's GraphQL Schema.

    An event interface is defined. This interface is then implemented by the jsonEvents and yamlEvents types.

    Field extentions are used to rename fields (for example: @proxy(from: "start_date")), and to set date formats (for example: @dateformat.)




    npm i @smerth/gatsby-theme-events

    DownloadsWeekly Downloads






    Unpacked Size

    66.8 kB

    Total Files


    Last publish


    • smerth