@cyberhippo/gatsby-theme-recipes

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

    "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

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.

// 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!

Feedback

Send me an email, or create an issue.