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:
@smerth/gatsby-theme-events creates a simple events content type and adds a listing page for events and a page for each separate event.
- implementation of a custom grahpql interface to merge json and yaml data sources into a single graphql type called
- use of the new
- example of using the JSX prama
/** @jsx jsx */in the
StyledLinkcomponent be able to access
theme.jsvariables to style the Gatsby
events.json or an
events.yaml file, (or both,) must be added to a data source folder.
Events data should take this form:
or, for yaml this:
- id: dc6a999d-292b-4fa4-bbb5-e87f39f53128name: nulla justo aliquam quis turpislocation: 6122 Grayhawk Roadstart_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-e173c8efd642name: ante ipsum primis in faucibus orcilocation: 91212 Dorton Placestart_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:
moduleexports =plugins:resolve: "@smerth/gatsby-theme-events"options:basePath: "/events"contentPath: "events";
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".
This theme contains an example of customizing Gatsby's GraphQL Schema.
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: