@jbolda/gatsby-theme-articles
Installation
Install from npm or yarn:
npm install @jbolda/gatsby-theme-articles
or
yarn add @jbolda/gatsby-theme-articles
We also rely on peer dependencies of the following packages. Consult the package installation guides for each to potentially additional peer depedencies that require installation.
yarn add @jbolda/gatsby-theme-layout@^0.0.7 gatsby-plugin-mdx@^1.0.49 gatsby-plugin-sharp@^2.2.31 gatsby-plugin-theme-ui@^0.2.46 gatsby-source-filesystem@^2.1.0 gatsby-transformer-sharp@^2.2.20 theme-ui@^0.2.46
Convention
This plugin expects markdown files in a folder defined by a gatsby-source-filesystem
config entry with a name
entry of articles. The name can be configured with the contentPath
option. The contentPath
is in an array of objects named contents
. With this configuration as an array, we can enable you to add multiple folders to "watch". This may be valuable if you have notes or drafts that should be treated separate from the main articles. You may also specify a basePath
which will be prepended to your url slug, e.g. when basePath: "article"
then your url might be example.com/article/my-first-post
.
Configuration
module.exports = {
plugins: [
{
resolve: `@jbolda/gatsby-theme-articles`,
options: { contents: [{contentPath: "articles"}] }
},
]
}
Design Tokens
The following are design tokens that are applied by variants through this theme. You may use them to apply styles to elements as a stopgap before needing to shadow a component.
{
jboldaGatsbyTheme: {
articles: {
list: {
container: { },
each: { },
heading: { },
text: { },
link: { }
},
article: {
container: { },
content: { },
footer: { },
featuredImage: { },
heading: { },
text: { },
link: { },
components: {
}
}
}
}
}