{"_id":"@cyberhippo/gatsby-theme-recipes","_rev":"1-1a10fd3abb67d788f505f4335427196f","name":"@cyberhippo/gatsby-theme-recipes","dist-tags":{"latest":"3.0.0-beta.1"},"versions":{"3.0.0-beta.1":{"name":"@cyberhippo/gatsby-theme-recipes","author":{"name":"Marinda S","email":"hello@marinda.me"},"repository":{"type":"git","url":"git+https://github.com/CyberHippo/gatsby-theme-recipes.git"},"version":"3.0.0-beta.1","main":"index.js","license":"MIT","scripts":{"build":"gatsby build","clean":"gatsby clean","develop":"gatsby develop","lint":"eslint \"src/**/*.{js,jsx}\" --quiet","format":"prettier --write \"src/**/*.{js,jsx}\"","optimize":"node scripts/optimize.js"},"peerDependencies":{"gatsby":"^4.5.2","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-eslint":"^10.1.0","eslint":"^8.6.0","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.25.4","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.3.0","fs-extra":"^10.0.0","gatsby":"^4.5.2","glob":"^7.2.0","react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mdx-js/mdx":"^1.6.22","@mdx-js/react":"^1.6.22","@mui/material":"^5.2.8","babel-eslint":"^10.1.0","eslint-plugin-emotion":"^11.0.0","framer-motion":"^5.6.0","gatsby":"^4.5.2","gatsby-background-image":"^1.6.0","gatsby-image":"^3.11.0","gatsby-plugin-emotion":"^7.5.0","gatsby-plugin-google-fonts":"^1.0.1","gatsby-plugin-manifest":"^4.5.1","gatsby-plugin-mdx":"^3.5.1","gatsby-plugin-page-creator":"^4.5.1","gatsby-plugin-react-helmet":"^5.5.0","gatsby-plugin-sharp":"^4.5.1","gatsby-plugin-theme-ui":"^0.13.1","gatsby-remark-images":"^6.5.1","gatsby-source-filesystem":"^4.5.1","gatsby-transformer-sharp":"^4.5.0","react":"^17.0.2","react-dom":"^17.0.2","react-helmet":"^6.1.0","theme-ui":"^0.13.1"},"keywords":["gatsby","gatsby-theme","gatsby-plugin"],"prettier":{},"description":"A Gatsby theme for recipe enthusiasts.","bugs":{"url":"https://github.com/CyberHippo/gatsby-theme-recipes/issues"},"homepage":"https://github.com/CyberHippo/gatsby-theme-recipes#readme","_id":"@cyberhippo/gatsby-theme-recipes@3.0.0-beta.1","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-K6qKI9FxdZLJPIcOV2lG+jV6KPqkloZ3vM6Oa+NtHbwfiNgz9PZGJyA8cYgbbzBAZls/CD9B30K+ZoOnSzloPQ==","shasum":"8f76b1ccccc4e66ea579bad122142b24a39b46e5","tarball":"https://registry.npmjs.org/@cyberhippo/gatsby-theme-recipes/-/gatsby-theme-recipes-3.0.0-beta.1.tgz","fileCount":47,"unpackedSize":1375942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4ZblCRA9TVsSAnZWagAAQY4P/j54Gxgs7/xrks/r5L+o\nz7X5jgTSGd1dCf8mJ6YC7wAJviCCUcfynAlBaQWyBsMkd0P0USvVFlHFRoWs\np0WDn+7cnUhNEZszNB07A1q8gNT0eSAcP6cuoulmUN2fPgJmaO6NrDCrdQAd\nE2Y1r4R7teAvYVtDs5MbMF5l+ImATMsBjSnNTUnn6191qNTC9cH2NB8BbK3B\nzQm4lEJiUTzFo6Pm5rS3w9hfdZhuCPU9Th/g2aJq5+DS3+9rDLLk/NwdcmS4\nIL8gfZYSsowwBbJSPYqm3oazHNcD/R45DyQuZXaq20RHAyliJgwojrFVnDOr\nz9uoOtft4OpdyDg9NKDLX7oTX5XJnBFM4thsOkx8xGzDk8RBLj/rZA83r0Sb\nV1O1T1518Y8kkN7O8QSpHt3pCRLMAHmHTLIn90x2J9D3Sv4Kt12unirAfFul\nkFo4BQgweXM/yAwILttL+DdoEX8wrce0soMqHuu3yBKZaD/DNlJDuxC7Czve\nimISavFYe3hfBMbn3rJKE0yxvkPdTWGKqxhOQXb8CkevKOVNG505LlHaf1gR\n5T+RDu/IIaumf7qUwknSZnddR0CdYTqdbGNLUxn0+SglAvWgz7or1eQP1Onq\nDsbdLYX81DIyakbnCIFbtaRD7rdVIz9lJifFexgx7iheIxYL9f/uIFn0U9Nj\noQBK\r\n=r0Ud\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHeD1JfIUCyDue0KEI1TfuzpWTLnd1qY4TNDskx4Lf0+AiEAwsQCt9/PcV3j3rzBo92yN8qpJotlpMz094MghUWc/Rk="}]},"_npmUser":{"name":"cyberhippo","email":"hippolyte@vergnol.fr"},"directories":{},"maintainers":[{"name":"cyberhippo","email":"hippolyte@vergnol.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-theme-recipes_3.0.0-beta.1_1642174180896_0.20643389625008535"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-14T15:29:40.838Z","3.0.0-beta.1":"2022-01-14T15:29:41.294Z","modified":"2022-04-05T02:25:23.499Z"},"maintainers":[{"name":"cyberhippo","email":"hippolyte@vergnol.fr"}],"description":"A Gatsby theme for recipe enthusiasts.","homepage":"https://github.com/CyberHippo/gatsby-theme-recipes#readme","keywords":["gatsby","gatsby-theme","gatsby-plugin"],"repository":{"type":"git","url":"git+https://github.com/CyberHippo/gatsby-theme-recipes.git"},"author":{"name":"Marinda S","email":"hello@marinda.me"},"bugs":{"url":"https://github.com/CyberHippo/gatsby-theme-recipes/issues"},"license":"MIT","readme":"# Gatsby Theme Recipes\n\nA Gatsby theme for recipe enthusiasts.\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@marinda/gatsby-theme-recipes\" target=\"_blank\">\n    <img src=\"https://badgen.net/npm/v/@marinda/gatsby-theme-recipes\" alt=\"\">\n    </a>\n <a href=\"https://github.com/mariiinda/gatsby-theme-recipes/blob/master/packages/gatsby-theme-recipes/LICENSE\" target=\"_blank\">\n    <img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Gatsby Theme Recipes is released under the MIT license.\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@marinda/gatsby-theme-recipes\" target=\"_blank\">\n    <img src=\"https://badgen.net/npm/dt/@marinda/gatsby-theme-recipes\" alt=\"\">\n  </a>\n</p>\n\n![Screenshots of gatsby theme recipes demo site](https://github.com/mariiinda/gatsby-theme-recipes/raw/master/assets/cover.jpg?raw=true)\n\n## [View the Demo](https://recipes-demo.marinda.me/)\n\n## Why use this theme?\n\n- Write recipes in markdown ([MDX](https://mdxjs.com/)).\n- Recipe images are automatically optimized for the web.\n- Tag your recipes with multiple tags.\n- Simple Customization with [Theme UI](https://theme-ui.com/).\n- Pagination (if recipes per page exceeds 12 items).\n- SEO, meta tags and social meta tags are built in.\n- Color modes: light & dark.\n\n## Installation from scratch\n\nThis guide will take you through adding the theme to a new project.\n\n### 1. Installation\n\n    ```sh\n    npm i -S react react-dom gatsby @marinda/gatsby-theme-recipes\n    ```\n\n### 2. Folder structure\n\nThe following is the recommended folder structure:\n\n```\n  recipe-site\n    ├── posts\n    │ ├── my-first-recipe\n    │ │   ├── images\n    │ │   │    └── my-first-recipe-image.jpg\n    │ │   └── my-first-recipe.mdx\n    ├── node_modules\n    ├── gatsby-config.js\n    └── package.json\n```\nCreate a folder 'posts' and add at least one recipe inside.\nIts recommended to have a folder for each recipe, with a .mdx file for your recipe content and an image inside an images folder.\n\n### 3. Create `gatsby-config.js` and add the theme:\n\nAdd `@marinda/gatsby-theme-recipes` as a plugin in `gatsby-config.js`.\n`@marinda/gatsby-theme-recipes` is configurable through plugin options.\n\n    ```js\n    module.exports = {\n       plugins: [\n        {\n          resolve: \"@marinda/gatsby-theme-recipes\",\n          options: {\n            // your site title\n            title: \"Classic Recipes\",\n            // your site short title\n            shortTitle: \"C-Recipes\",\n            // the path to your icon file\n            iconPath: \"./src/images/favicon.png\"\n          }\n        }\n      ]\n    };\n    ```\n\n1. Add following to your package.json scripts\n    ```json\n     \"start\": \"gatsby develop\",\n     \"clean\": \"gatsby clean\",\n     \"build\": \"gatsby build\",\n    ```\n\nRun `npm start` to start the site.\n\n## Usage\n\n### Theme Options\n\n| Option                 |     Default     |                                                             Description                                                             |\n| ---------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------- |\n| basePath           |  /  |                                          Root URL where your site will be served from. `/recipes` will change all paths to start with `/recipes`.                                         |\n| contentPath         | posts |                                         Location of recipe content files.                                         |\n| title           |      Delicious Recipes      |                                                         Your site title, used for the site title, SEO and mobile home screen.                                                         |\n| shortTitle            |    Recipes     |                                                   A short title for your site, used for mobile home screen.                                                   |\n| 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.                      |\n\n#### Example usage\n\nRecommended example usage\n```js\n// gatsby-config.js\nmodule.exports = {\n   plugins: [\n    {\n      resolve: \"@marinda/gatsby-theme-recipes\",\n      options: {\n        // your site title\n        title: \"Classic Recipes\",\n        // your site short title\n        shortTitle: \"C-Recipes\",\n        // the path to your icon file\n        iconPath: \"./src/images/favicon.png\"\n      }\n    }\n  ]\n};\n```\n\n### Additional Configuration\n\nIn 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`.\n\n```javascript\n// gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    // Used for SEO\n    description: 'My site description...',\n    // Used for SEO. Do not include a trailing slash\n    url: 'https://www.example.com',\n    // Site image used for social sharing, image should live in the 'static' folder\n    image: \"/images/og-image.jpg\",\n    // Used for SEO\n    author: 'J Hollyhock',\n    // Used for an optional intro section at the top of the recipes template\n    intro: 'Classic recipes you’ll want to keep making.',\n    // Used for the top navigation links\n    menuLinks: [\n      {\n        name: 'About',\n        slug: '/about/',\n      }\n    ],\n    // Used for the links in the footer\n    footerLinks: [\n      {\n        name: 'Instagram',\n        href: 'https://www.instagram.com/recipes',\n      },\n    ],\n  },\n}\n```\n\n## Writing a recipe\n[View recipe example](https://github.com/mariiinda/gatsby-theme-recipes/blob/master/packages/demo/posts/chocolate-chip-cookies/chocolate-chip-cookies.mdx)\n\n| Key          | Required |    Type    |                                          Description                                          |\n| ------------ | :------: | :-------- | :------------------------------------------------------------------------------------------- |\n| title        | optional |   String   |  Recipe title.                  |\n| slug         | required |   String   |  Define a custom slug that will.                |\n| date         | optional |    Date    |  YYYY-MM-DD format                                       |\n| image         | required |    String    |  Image to be used as preview on recipe listings |\n| tags         | optional |    Array    |  A list of tags to associate with the recipe |\n\n## Customization\n\n### Changing styles\nChange the default theme styling by updating the [theme-ui](https://theme-ui.com/gatsby-plugin) properties.\n\nFirst, you must create a theme file and then you can override `theme` properties.\n[See all theme](https://github.com/mariiinda/gatsby-theme-recipes/blob/b39c1f160558082aacac25ab327323b41b10fb49/packages/gatsby-theme-recipes/src/gatsby-plugin-theme-ui/index.js) properties.\n\n```js\n// src/gatsby-plugin-theme-ui/index.js\n\nimport theme from '@marinda/gatsby-theme-recipes/src/gatsby-plugin-theme-ui';\n\nexport default {\n  ...theme,\n  colors: {\n    ...theme.colors,\n    text: \"#000\",\n    background: \"#fff\",\n    primary: \"#3b5bdb\",\n    secondary: \"#0ca678\",\n    muted: \"#F9DFC9\",\n    modes: {\n      dark: {\n        ...theme.colors.modes.dark,\n        muted: \"#472438\"\n      }\n    }\n  }\n};\n```\n\n### Pages\n\nContent 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](https://github.com/mariiinda/gatsby-theme-recipes/tree/master/packages/demo/src/pages).\n\n### Markdown components:\nThe following components available in .mdx files that live in 'posts' and 'src/pages'.\n\n#### `Image`\n\nFloat an image left or right with the Image component.\n\n#### Example usage in MDX\n\n```mdx\n<Image alt=\"About\" src=\"/images/about.jpg\" position=\"right\" />\n```\n\n#### `StyledParagraph`\n\nIntroduction text that captures your reader's attention. It has a larger font size applied.\n\n#### Example usage in MDX\n\nIn any MDX file:\n\n```mdx\n<StyledParagraph>These delicious choc-chip cookies are crispy on the outside and chewy on the inside.</StyledParagraph>\n```\n\n#### Example usage in React components\n\nIn any React component:\n\n```jsx\nimport React from 'react';\nimport { StyledParagraph } from '@marinda/gatsby-theme-recipes';\n\nexport default () => (\n  <div>\n    <StyledParagraph>These delicious choc-chip cookies are crispy on the outside and chewy on the inside.</StyledParagraph>\n  </div>\n);\n```\n\n#### How to shadow a component\n\nIf you want to use [component shadowing](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/) with a component, for example 'src/components/StyledParagraph.js', create a file at the following path in your site:\n\n```\nsrc/@marinda/gatsby-theme-recipes/components/StyledParagraph.js\n```\n\n## If you like it, please rate it\n\nIf you enjoy using it, please star it!\n\n## Feedback\n\nSend me an [email](mailto:hello@marinda.me), or create an [issue](https://github.com/mariiinda/gatsby-theme-recipes/issues).","readmeFilename":"README.md"}