@westegg/gatsby-theme-recipes v1.2.21

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

```bash
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

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

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.