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.

3. Create gatsby-config.js and add the theme:

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"
      }
    }
  ]
};
```

1. Add following to your package.json scripts

   1 "start": "gatsby develop",
   2 "clean": "gatsby clean",
   3 "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

1// gatsby-config.js
2module.exports = {
3   plugins: [
4    {
5      resolve: "@marinda/gatsby-theme-recipes",
6      options: {
7        // your site title
8        title: "Classic Recipes",
9        // your site short title
10        shortTitle: "C-Recipes",
11        // the path to your icon file
12        iconPath: "./src/images/favicon.png"
13      }
14    }
15  ]
16};

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.

1// gatsby-config.js
2module.exports = {
3  siteMetadata: {
4    // Used for SEO
5    description: 'My site description...',
6    // Used for SEO. Do not include a trailing slash
7    url: 'https://www.example.com',
8    // Site image used for social sharing, image should live in the 'static' folder
9    image: "/images/og-image.jpg",
10    // Used for SEO
11    author: 'J Hollyhock',
12    // Used for an optional intro section at the top of the recipes template
13    intro: 'Classic recipes you’ll want to keep making.',
14    // Used for the top navigation links
15    menuLinks: [
16      {
17        name: 'About',
18        slug: '/about/',
19      }
20    ],
21    // Used for the links in the footer
22    footerLinks: [
23      {
24        name: 'Instagram',
25        href: 'https://www.instagram.com/recipes',
26      },
27    ],
28  },
29}

Writing a recipe

View recipe example

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.

1// src/gatsby-plugin-theme-ui/index.js
2
3import theme from '@marinda/gatsby-theme-recipes/src/gatsby-plugin-theme-ui';
4
5export default {
6  ...theme,
7  colors: {
8    ...theme.colors,
9    text: "#000",
10    background: "#fff",
11    primary: "#3b5bdb",
12    secondary: "#0ca678",
13    muted: "#F9DFC9",
14    modes: {
15      dark: {
16        ...theme.colors.modes.dark,
17        muted: "#472438"
18      }
19    }
20  }
21};

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

1<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:

1<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:

1import React from 'react';
2import { StyledParagraph } from '@marinda/gatsby-theme-recipes';
3
4export default () => (
5  <div>
6    <StyledParagraph>These delicious choc-chip cookies are crispy on the outside and chewy on the inside.</StyledParagraph>
7  </div>
8);

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!

Feedback

Send me an email, or create an issue.