Community Plugin
View plugin on GitHub@undataforum/gatsby-theme-profiles
A Gatsby theme to create profile pages and a profiles overview page.
Usage
Theme options
| Key | Default value | Description |
|---|---|---|
basePath |
/ |
Root url for all profiles. Should be changed to /profiles in most cases. basePath is used in Gatsby lifecycle methods to generate individual profile pages and the profiles overview page. |
contentPath |
content/profiles |
Location of profile MDX files. The filename convention is <slug>.md, e.g. antonio-guterres.md. If you do not set a slug in the frontmatter, the MDX file’s base name, in this example antonio-guterres, is used as slug. contentPath is used to configure plugin gatsby-source-filesystem. Any file in contentPath is part of the GraphQL Mdx collection. |
assetPath |
content/assets |
Location of avatar images. assetPath is used to configure plugin gatsby-source-filesystem. Any image in assetPath can be linked to a profile by adding it to the frontmatter avatar key via relative path. Avatar images can follow any file name convention you like. The recommended convention is ` |
collection |
profiles |
The collection option is supplied to the name option of plugin gatsby-source-filesystem for the contentPath definition. This makes it possible to filter File nodes by collection using sourceInstanceName. If you configure this theme more than once in gatsby-config.js, you can use collection to distinguish different profile collections, e.g. collection authors for author profiles and collection speakers for speaker profiles. |
postCollection |
undefined |
If this option is set, it refers to a collection of posts defined with @undataforum/gatsby-theme-blog. On each profile page, all posts from this collection matching the profile’s slug are displayed. |
This example config shows how to configure two separate profiles collections:
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: '@undataforum/gatsby-theme-profiles',
options: {
basePath: '/author-profiles',
contentPath: 'content/author-profiles',
assetPath: 'content/assets/author-profiles',
collection: 'author-profiles'
},
},
{
resolve: '@undataforum/gatsby-theme-profiles',
options: {
basePath: '/speaker-profiles',
contentPath: 'content/speaker-profiles',
assetPath: 'content/assets/speaker-profiles',
collection: 'speaker-profiles'
},
},
],
}MDX frontmatter
Frontmatter keys for MDX profiles located in contentPath. The YAML type of
each key corresponds to the GraphQL type listed in the following section.
| Key | Required | Description |
|---|---|---|
avatar |
yes | Relative path to avatar image located in the assetPath. |
honorific |
no | Honorific title, e.g. Her Excellency or His Royal Highness. |
firstName |
yes | First name. |
lastName |
yes | Last name. |
jobtitle |
no | Job title. |
organization |
no | Organization. |
slug |
no | The default slug is the profile MDX file’s base name. This value overrides the default. |
description |
no | The default description for SEO purposes is the first paragraph in a profile MDX file. This value overrrides the default. |
roles |
no | One or more roles that a profile can have. This is a YAML list with role keys as values, e.g. 2020-committee-member or 2018-organizer. |
GraphQL Profile type
This theme adds GraphQL type Profile which can be queried with profile and
allProfile queries. Type Profile makes no assumptions about what the
underlying data source is.
| Field | Type | Description |
|---|---|---|
id |
ID! |
Gatsby node GUID. |
slug |
ID! |
Alternative ID used for querying and building the graph. |
collection |
String! |
Distinguish separate profile collections. |
avatar |
File! |
If in the future data sources other than MDX are supported, avatar still needs to be of type File!, e.g. downoaded from Contentful to cache. Data sources need to support gatsby-image. |
firstName |
String! |
firstName can be used to sort profiles alphabetically. |
lastName |
String! |
lastName can be used to sort profiles alphabetically. |
name |
String! |
Display name. |
honorific |
String |
|
jobtitle |
String |
|
organization |
String |
|
description |
String |
|
body |
String! |
A string representation of the body of the profile page. For MDX pages this is the MDX body. |
roles |
[String!] |
A role is an identifier that can be used to lookup a role name. A profile can have more than one role. |
path |
String! |
Path to generated page. |
Localizations
| Key | Description |
|---|---|
title |
Title of profiles overview page. |
description |
Description page metadata for profiles overview page. |
relatedPosts |
Heading for related posts on profile pages. May contain the {firstName} tag. |