Merge pull request chrisrhymes#97 from chrisrhymes/feature/recipes

Add recipe layout

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

README.md

@@ -33,6 +33,7 @@ The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for its interacti
     * [Sponsors](#sponsors)
     * [Gallery](#gallery)
     * [Disqus](#disqus)
+    * [Recipe](#recipe)
 * [Contributing](#contributing)
 * [Development](#development)
 * [Licence](#licence)
@@ -624,6 +625,54 @@ Comments are enabled by default. If you want to disable them, set in the front m
 comments: false
 ```
 
+### Recipe
+
+You can make a single page using the recipe layout, or you can use it in your blog by specifying the `layout: recipe` instead of post.
+
+You probably want to hide the sidebar, so the recipe takes up the whole page width. If you add any additional content to the page it will appear below the recipe details.
+
+Create a list in the front matter for the ingredients, then the method steps and it will automatically be added to the page.
+
+The front matter will also be added to the page as schema data that is used by search engines. Please see the below example for all of the schema options available.
+
+```yaml
+layout: recipe
+title: An Example Recipe Page
+subtitle: Tastes great and easy to cook
+author: CS Rhymes
+date: 2021-03-02
+show_sidebar: false
+image: /bulma-clan-theme/img/recipe-example.jpg
+hero_image: /bulma-clean-theme/img/recipe-example.jpg
+ingredients:
+    - 1tsp vegetable oil
+    - 2 Carrots, finely diced
+    - 1 Onion, finely dices
+    - 1 Celery stick, finely diced
+    - 2 Cloves of Garlic, crushed
+    - 400g lean Minced Beef
+    - 400g tin of Chopped Tomatoes
+    - 2tbsp Tomato Puree
+    - 300ml Beef Stock
+    - 1tsp Worcestershire Sauce
+    - 2tsp Italian Herbs
+    - Salt and Pepper
+method:
+    - Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
+    - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
+    - Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
+    - Add the chopped tomatoes, tomato puree, beef stock, worcestershire sauce and italian herbs and stir. Add a pinch of salt and pepper then stir through
+    - Bring to a gentle simmer and cook for 30 minutes
+prep_time: PT10M
+cook_time: PT1H
+total_time: PT1H10M
+keywords: recipe,cooking
+recipie_yield: 4
+recipe_category: Main course
+recipe_cuisine: Italian
+calories: 500 calories
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/chrisrhymes/bulma-clean-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

_data/example_menu.yml

@@ -5,7 +5,7 @@
     - name: Pages
       link: /#
       items:
-        - name: Page With Sidebar 
+        - name: Page With Sidebar
           link: /page-1/
         - name: Page Without Sidebar
           link: /page-2/
@@ -31,5 +31,7 @@
           link: /sponsors/
         - name: Image Gallery
           link: /gallery/
+        - name: Recipe Page
+          link: /example-recipe/
     - name: Blog
-      link: /blog/
+      link: /blog/

_data/navigation.yml

@@ -27,9 +27,11 @@
       link: /sponsors/
     - name: Image Gallery
       link: /gallery/
+    - name: Recipe Page
+      link: /example-recipe/
 - name: Products
   link: /products/
 - name: Showcase
   link: /showcase/
 - name: Blog
-  link: /blog/
+  link: /blog/

_layouts/recipe.html

@@ -0,0 +1,76 @@
+---
+layout: default
+---
+
+<script type="application/ld+json">
+{
+    "@context": "https://schema.org/",
+    "@type": "Recipe",
+    "name": "{{ page.title }}",
+    "image": [
+        "{{ page.image }}"
+    ],
+    "author": {
+        "@type": "Person",
+        "name": "{{ page.author }}"
+    },
+    "datePublished": "{{ page.date }}",
+    "description": "{{ page.description }}",
+    "prepTime": "{{ page.prep_time }}",
+    "cookTime": "{{ page.cook_time }}",
+    "totalTime": "{{ page.total_time }}",
+    "keywords": "{{ page.keywords }}",
+    "recipeYield": "{{ page.recipe_yield }}",
+    "recipeCategory": "{{ page.recipe_category }}",
+    "recipeCuisine": "{{ page.recipe_cuisine }}",
+    {% if page.calories %}
+    "nutrition": {
+        "@type": "NutritionInformation",
+        "calories": "{{ page.calories }}"
+    },
+    {% endif %}
+    "recipeIngredient":
+        {{ page.ingredients | jsonify }},
+    "recipeInstructions": [
+        {% for step in page.method %}
+        {
+            "@type": "HowToStep",
+            "text": "{{ step }}"
+        {% if forloop.last == true %}
+        }
+        {% else %}
+        },
+        {% endif %}
+        {% endfor %}
+    ]
+}
+</script>
+
+<div class="columns is-multiline">
+    <div class="column is-4">
+        <div class="box">
+            <p class="title is-4">Ingredients</p>
+            <div class="content">
+                <ul>
+                    {% for ingredient in page.ingredients %}
+                    <li>{{ ingredient }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="column is-8">
+        <p class="title is-4">Method</p>
+        <div class="content">
+            <ol>
+                {% for step in page.method %}
+                    <li>{{ step }}</li>
+                {% endfor %}
+            </ol>
+            <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
+        </div>
+        <div class="content">
+            {{ content }}
+        </div>
+    </div>
+</div>

bulma-clean-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "bulma-clean-theme"
-  spec.version       = "0.10.6"
+  spec.version       = "0.11"
   spec.authors       = ["chrisrhymes"]
   spec.email         = ["csrhymes@gmail.com"]
 

changelog.txt

@@ -1,3 +1,6 @@
+# 0.11
+* Added Recipe page layout
+
 # 0.10.6
 * Create tag partial - pull request #87 by DarthGandalf
 * Update navbar to use Alpine js
@@ -122,4 +125,4 @@
 * Added hero background image, blog page images and Google Analytics
 
 # 0.1
-* Initial release
+* Initial release

example-recipe.md

@@ -0,0 +1,89 @@
+---
+layout: recipe
+title: An Example Recipe Page
+subtitle: Tastes great and easy to cook
+description: An example recipe page
+author: CS Rhymes
+date: 2021-03-02
+show_sidebar: false
+image: /bulma-clan-theme/img/recipe-example.jpg
+hero_image: /bulma-clean-theme/img/recipe-example.jpg
+hero_darken: true
+ingredients:
+    - 1tsp vegetable oil
+    - 2 Carrots, finely diced
+    - 1 Onion, finely dices
+    - 1 Celery stick, finely diced
+    - 2 Cloves of Garlic, crushed
+    - 400g lean Minced Beef
+    - 400g tin of Chopped Tomatoes
+    - 2tbsp Tomato Puree
+    - 300ml Beef Stock
+    - 1tsp Worcestershire Sauce
+    - 2tsp Italian Herbs
+    - Salt and Pepper
+method:
+    - Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
+    - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
+    - Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
+    - Add the chopped tomatoes, tomato puree, beef stock, worcestershire sauce and italian herbs and stir. Add a pinch of salt and pepper then stir through
+    - Bring to a gentle simmer and cook for 30 minutes
+prep_time: PT10M
+cook_time: PT1H
+total_time: PT1H10M
+keywords: recipe,cooking
+recipie_yield: 4
+recipe_category: Main course
+recipe_cuisine: Italian
+calories: 500 calories
+---
+
+Photo by <a href="https://stocksnap.io/author/36317">Janko Ferlic</a> from <a href="https://stocksnap.io">StockSnap</a>
+
+## Recipe Page Instructions
+
+This is an example recipe page, generated from page's front matter. You can make a single page using this layout, or you can use it in your blog by specifying the layout as recipe instead of post. 
+
+You probably want to hide the sidebar, so the recipe takes up the whole page width. If you add any additional content to the page it will appear below the recipe details. 
+
+Create a list in the front matter for the ingredients, then the method steps and it will automatically be added to the page.
+
+The front matter will also be added to the page as schema data that is used by search engines. Please see the below example for all of the schema options available.
+
+```yaml
+layout: recipe
+title: An Example Recipe Page
+subtitle: Tastes great and easy to cook
+author: CS Rhymes
+date: 2021-03-02
+show_sidebar: false
+image: /bulma-clan-theme/img/recipe-example.jpg
+hero_image: /bulma-clean-theme/img/recipe-example.jpg
+ingredients:
+    - 1tsp vegetable oil
+    - 2 Carrots, finely diced
+    - 1 Onion, finely dices
+    - 1 Celery stick, finely diced
+    - 2 Cloves of Garlic, crushed
+    - 400g lean Minced Beef
+    - 400g tin of Chopped Tomatoes
+    - 2tbsp Tomato Puree
+    - 300ml Beef Stock
+    - 1tsp Worcestershire Sauce
+    - 2tsp Italian Herbs
+    - Salt and Pepper
+method:
+    - Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
+    - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
+    - Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
+    - Add the chopped tomatoes, tomato puree, beef stock, worcestershire sauce and italian herbs and stir. Add a pinch of salt and pepper then stir through
+    - Bring to a gentle simmer and cook for 30 minutes
+prep_time: PT10M
+cook_time: PT1H
+total_time: PT1H10M
+keywords: recipe,cooking
+recipie_yield: 4
+recipe_category: Main course
+recipe_cuisine: Italian
+calories: 500 calories
+```

index.md

@@ -44,6 +44,7 @@ This demo site showcases the available page layout options.
 * Landing Page With Callouts
 * Sponsors Page
 * Image Gallery
+* Recipe Page
 * Blog
 * Post