Not a Propaganda Machine

    @marinda/gatsby-theme-recipes

    2.0.0 • Public • Published

    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.

    Install

    npm i @marinda/gatsby-theme-recipes

    DownloadsWeekly Downloads

    3

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    1.38 MB

    Total Files

    47

    Last publish

    Collaborators

    • marinda