From cabd8b2b8266d2758e4acf3896deef68d49f1602 Mon Sep 17 00:00:00 2001 From: Jakub Kottnauer Date: Thu, 1 Apr 2021 15:37:13 +0200 Subject: [PATCH] Add new recipe template --- gatsby-node.js | 24 +++- recipes/asian-dipping-sauces.md | 8 ++ recipes/hainanese-chicken.md | 1 + src/templates/smallRecipesTemplate.js | 189 ++++++++++++++++++++++++++ 4 files changed, 215 insertions(+), 7 deletions(-) create mode 100644 recipes/asian-dipping-sauces.md create mode 100644 src/templates/smallRecipesTemplate.js diff --git a/gatsby-node.js b/gatsby-node.js index 1765d9880..e8b79eab6 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -8,7 +8,10 @@ const remarkHTML = require('remark-html') exports.createPages = ({ actions, graphql }) => { const { createPage } = actions - const recipeTemplate = path.resolve(`src/templates/recipeTemplate.js`) + const recipeTemplate = path.resolve('src/templates/recipeTemplate.js') + const smallRecipesTemplate = path.resolve( + 'src/templates/smallRecipesTemplate.js' + ) return graphql(` { @@ -24,6 +27,7 @@ exports.createPages = ({ actions, graphql }) => { frontmatter { title source + layout } } } @@ -35,12 +39,16 @@ exports.createPages = ({ actions, graphql }) => { } result.data.allMarkdownRemark.edges.forEach(({ node }) => { + const { slug } = node.fields createPage({ - path: node.fields.slug, - component: recipeTemplate, + path: slug, + component: + node.frontmatter.layout === 'smallrecipes' + ? smallRecipesTemplate + : recipeTemplate, context: { - slug: node.fields.slug, - }, // additional data can be passed via context + slug, + }, }) }) }) @@ -101,11 +109,13 @@ exports.sourceNodes = ({ actions, getNodes, getNode }) => { node.frontmatter.related instanceof Array ? node.frontmatter.related.map(getRecipeById) : [getRecipeById(node.frontmatter.related)] - + console.log( + node.frontmatter.title, + found.map((x) => x.frontmatter.title) + ) found .filter((n) => n) .map((n) => { - // if it's first time for this author init empty array for his books if (!relatedRecipes[n.id]) { relatedRecipes[n.id] = [] } diff --git a/recipes/asian-dipping-sauces.md b/recipes/asian-dipping-sauces.md new file mode 100644 index 000000000..cb328f8cc --- /dev/null +++ b/recipes/asian-dipping-sauces.md @@ -0,0 +1,8 @@ +--- +title: Asian Dipping Sauces +tags: sauce +lang: en +layout: smallrecipes +--- + +test diff --git a/recipes/hainanese-chicken.md b/recipes/hainanese-chicken.md index f443c6346..4f31a2527 100644 --- a/recipes/hainanese-chicken.md +++ b/recipes/hainanese-chicken.md @@ -3,6 +3,7 @@ title: Hainanese Chicken tags: chicken source: 'https://www.youtube.com/watch?v=Vsv8JKI6SwE' image: hainanese-chicken.jpg +related: asian-dipping-sauces --- - **1** chicken diff --git a/src/templates/smallRecipesTemplate.js b/src/templates/smallRecipesTemplate.js new file mode 100644 index 000000000..0f578028f --- /dev/null +++ b/src/templates/smallRecipesTemplate.js @@ -0,0 +1,189 @@ +import React from 'react' +import { graphql, Link } from 'gatsby' +import { Helmet } from 'react-helmet' +import { remarkForm } from 'gatsby-tinacms-remark' +import { BsFillPeopleFill, BsLink45Deg, BsLink } from 'react-icons/bs' +import Layout from '../components/layout' + +function Template({ data }) { + const { markdownRemark } = data + const { frontmatter, html, fields } = markdownRemark + + return ( + + + +
+

{frontmatter.title}

+
+
+ {frontmatter.source && ( + + )} + {frontmatter.serves && ( +
+ + {frontmatter.serves} +
+ )} + {fields.relatedRecipes && ( +
+ + + {fields.relatedRecipes + .map((r) => ( + + {r.title} + + )) + .reduce((prev, curr) => [prev, ', ', curr])} + +
+ )} +
+ +
+ {frontmatter.tags && ( +
+ {frontmatter.tags.split(' ').map((tag) => ( + {tag} + ))} +
+ )} +
+
+ +
+ + ) +} + +export const recipeForm = { + fields: [ + { + label: 'Name', + name: 'frontmatter.title', + description: + 'Something short but descriptive enougg, e.g. "Chicken Curry", "Sweet and Sour Chicken"', + component: 'text', + required: true, + }, + { + label: 'Date', + name: 'rawFrontmatter.date', + component: 'date', + dateFormat: 'YYYY-MM-DD', + timeFormat: false, + description: 'Date when the recipe was created, YYYY-MM-DD', + }, + { + name: 'frontmatter.lang', + component: 'select', + label: 'Language', + description: 'Language of the recipe', + options: ['en', 'cz', 'se'], + }, + { + label: 'Serves', + name: 'frontmatter.serves', + component: 'text', + }, + { + label: 'Related recipes', + name: 'frontmatter.related', + description: 'Space-separated list of filenames of related recipes', + component: 'text', + }, + { + label: 'Source', + name: 'frontmatter.source', + component: 'text', + description: 'URL of the original video/article', + }, + { + label: 'Tags', + name: 'frontmatter.tags', + component: 'text', + description: 'Space-separated list of tags', + }, + { + label: 'Ingredients', + name: 'rawFrontmatter.ingredients', + component: 'markdown', + }, + { + label: 'Text', + name: 'rawMarkdownBody', + component: 'markdown', + required: true, + }, + ], +} + +export default remarkForm(Template, recipeForm) + +const Recipe = ({ text, ingredients: sourceIngredients }) => { + let recipe = text + let ingredients = sourceIngredients + // Try to split by end of ingredient list + const splitBy = '' + const idx = text.lastIndexOf(splitBy) + + // if individual ingredients aren't specified, extract them from recipe text + if (idx > -1 && !ingredients) { + ingredients = text.substr(0, idx + splitBy.length) + recipe = text.substr(idx + splitBy.length) + } + + return ( +
+ {ingredients && ( +
+ )} +
+
+ ) +} + +export const pageQuery = graphql` + query SmallRecipesQuery($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + frontmatter { + title + serves + source + tags + } + fields { + ingredients + relatedRecipes { + slug + title + } + image { + childImageSharp { + gatsbyImageData(layout: CONSTRAINED) + } + } + } + ...TinaRemark + } + } +`