Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
scripts
src
.eslintrc.json
.gitignore
.prettierrc
LICENSE
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
index.js
package-lock.json
package.json

README.md

Gatsby Theme Recipes

A Gatsby theme for recipe enthusiasts.

Gatsby Theme Recipes is released under the MIT license.

Screenshots of gatsby theme recipes demo site

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.

You can’t perform that action at this time.