Gatsby Theme Recipes
A Gatsby theme for recipe enthusiasts.
View the Demo
Why use this theme?
- Write recipes in markdown (MDX).
- Recipe images are automatically optimized for the web.
- Tag your recipes with multiple tags.
- Simple Customization with Theme UI.
- Pagination (if recipes per page exceeds 12 items).
- SEO, meta tags and social meta tags are built in.
- Color modes: light & dark.
Installation from scratch
This guide will take you through adding the theme to a new project.
1. Installation
```sh
npm i -S react react-dom gatsby @marinda/gatsby-theme-recipes
```
2. Folder structure
The following is the recommended folder structure:
recipe-site
├── posts
│ ├── my-first-recipe
│ │ ├── images
│ │ │ └── my-first-recipe-image.jpg
│ │ └── my-first-recipe.mdx
├── node_modules
├── gatsby-config.js
└── package.json
Create a folder 'posts' and add at least one recipe inside. Its recommended to have a folder for each recipe, with a .mdx file for your recipe content and an image inside an images folder.
gatsby-config.js
and add the theme:
3. Create Add @marinda/gatsby-theme-recipes
as a plugin in gatsby-config.js
.
@marinda/gatsby-theme-recipes
is configurable through plugin options.
```js
module.exports = {
plugins: [
{
resolve: "@marinda/gatsby-theme-recipes",
options: {
// your site title
title: "Classic Recipes",
// your site short title
shortTitle: "C-Recipes",
// the path to your icon file
iconPath: "./src/images/favicon.png"
}
}
]
};
```
- Add following to your package.json scripts
"start": "gatsby develop", "clean": "gatsby clean", "build": "gatsby build",
Run npm start
to start the site.
Usage
Theme Options
Option | Default | Description |
---|---|---|
basePath | / | Root URL where your site will be served from. /recipes will change all paths to start with /recipes . |
contentPath | posts | Location of recipe content files. |
title | Delicious Recipes | Your site title, used for the site title, SEO and mobile home screen. |
shortTitle | Recipes | A short title for your site, used for mobile home screen. |
iconPath | default icon | Path to the icon to be used for the favicon and web manifest. For example 'src/images/favicon.png' . For best results provide a 512x512 square. |
Example usage
Recommended example usage
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: "@marinda/gatsby-theme-recipes",
options: {
// your site title
title: "Classic Recipes",
// your site short title
shortTitle: "C-Recipes",
// the path to your icon file
iconPath: "./src/images/favicon.png"
}
}
]
};
Additional Configuration
In addition to the theme options, there are a handful of items you can customize via the siteMetadata
object in your site's gatsby-config.js
.
// gatsby-config.js
module.exports = {
siteMetadata: {
// Used for SEO
description: 'My site description...',
// Used for SEO. Do not include a trailing slash
url: 'https://www.example.com',
// Site image used for social sharing, image should live in the 'static' folder
image: "/images/og-image.jpg",
// Used for SEO
author: 'J Hollyhock',
// Used for an optional intro section at the top of the recipes template
intro: 'Classic recipes you’ll want to keep making.',
// Used for the top navigation links
menuLinks: [
{
name: 'About',
slug: '/about/',
}
],
// Used for the links in the footer
footerLinks: [
{
name: 'Instagram',
href: 'https://www.instagram.com/recipes',
},
],
},
}
Writing a recipe
Key | Required | Type | Description |
---|---|---|---|
title | optional | String | Recipe title. |
slug | required | String | Define a custom slug that will. |
date | optional | Date | YYYY-MM-DD format |
image | required | String | Image to be used as preview on recipe listings |
tags | optional | Array | A list of tags to associate with the recipe |
Customization
Changing styles
Change the default theme styling by updating the theme-ui properties.
First, you must create a theme file and then you can override theme
properties.
See all theme properties.
// src/gatsby-plugin-theme-ui/index.js
import theme from '@marinda/gatsby-theme-recipes/src/gatsby-plugin-theme-ui';
export default {
...theme,
colors: {
...theme.colors,
text: "#000",
background: "#fff",
primary: "#3b5bdb",
secondary: "#0ca678",
muted: "#F9DFC9",
modes: {
dark: {
...theme.colors.modes.dark,
muted: "#472438"
}
}
}
};
Pages
Content pages live in the 'src/pages' folder. You can add .mdx files in this folder. View the demo site's about and privacy policy pages.
Markdown components:
The following components available in .mdx files that live in 'posts' and 'src/pages'.
Image
Float an image left or right with the Image component.
Example usage in MDX
<Image alt="About" src="/images/about.jpg" position="right" />
StyledParagraph
Introduction text that captures your reader's attention. It has a larger font size applied.
Example usage in MDX
In any MDX file:
<StyledParagraph>These delicious choc-chip cookies are crispy on the outside and chewy on the inside.</StyledParagraph>
Example usage in React components
In any React component:
import React from 'react';
import { StyledParagraph } from '@marinda/gatsby-theme-recipes';
export default () => (
<div>
<StyledParagraph>These delicious choc-chip cookies are crispy on the outside and chewy on the inside.</StyledParagraph>
</div>
);
How to shadow a component
If you want to use component shadowing with a component, for example 'src/components/StyledParagraph.js', create a file at the following path in your site:
src/@marinda/gatsby-theme-recipes/components/StyledParagraph.js
If you like it, please rate it
If you enjoy using it, please star it!