1

So I have a bunch of cocktail recipes in a folder, each with a distinct name like screwdriver.json or adult-hot-chocolate.json with a correspondingly named image, and each recipe looks like this:

{
"name": "Adult Hot Chocolate",
"description": "Appropriately named 'adult hot chocolate', this recipe is one of the easiest and most common ways to spike your cocoa. To make it, you will simply add a shot of peppermint schnapps to your favorite hot chocolate and a delicious, warm drink is yours to enjoy.",
"github": "thesanjeevsharma",
"ingredients": [
    {
        "quantity": "2",
        "measure": "oz",
        "ingredient": "Peppermint Schnapps"
    },
    {
        "quantity": "6",
        "measure": "oz",
        "ingredient": "Hot Chocolate"
    },
    {
        "quantity": "",
        "measure": "",
        "ingredient": "Garnish: ​whipped cream"
    },
    {
        "quantity": "",
        "measure": "",
        "ingredient": "Garnish: chocolate sprinkles or shaved chocolate"
    }
],
"directions": [
    "Gather the ingredients.",
    "Pour the schnapps into a warm mug or Irish coffee glass.",
    "Fill with hot chocolate.",
    "Stir well.",
    "Optionally, top with whipped cream and chocolate sprinkles or shaved chocolate.",
    "Serve and enjoy!"
],
"image": "adult-hot-chocolate.jpg",
"keywords": [
    "chocolate",
    "peppermint",
    "schnapps"
]
}

I want to create a layout and randomly pick one recipe and image to show on my website. I know how to do it if they were all just in one big YAML document, but it’s not clear to me how to tell Jekyll to parse separate files so I can reference one at random.

The other possibility is to combine them into one big json but then I couldn’t just pull down new recipes as easily from the original source.

Any help would be greatly appreciated!

cfn
  • 69
  • 6

1 Answers1

0

Please have a look to the jekyll data documentation.

So you have to create a _data folder, when it is not already there.

Then copy per cocktail a json file iinside the sub-folder e.g. _data/cocktails.

To read the list of cocktails you have to create page with html or markdown content.

The content of the html could be something like this

---
layout: default
title: "My Cocktails"
---

<ul>
{% for file in site.data.cocktails%}
{% assign cocktail = file[1] %} {% comment %}The assign is needed, because we have different json files!{% endcomment %}
  <li><strong>{{ cocktail.name }}</strong> - {{ cocktail.description}}</li>
{% endfor %}
</ul>
KargWare
  • 1,746
  • 3
  • 22
  • 35
  • If you want to join the json files, you can have a look to [Mergeing many jsons with jq](https://unix.stackexchange.com/questions/433678/merging-many-json-files-into-one-by-merging-it-into-a-common-object) or [Shell script to join 5 or more json files together](https://stackoverflow.com/questions/23387256/shell-script-to-join-5-or-more-json-files-together). You can "merge" the jsons to a big one, with a [hook](https://jekyllrb.com/docs/plugins/hooks/). – KargWare Dec 25 '20 at 14:22
  • Thanks! I read the documentation a couple times, I'm just not very experienced so I didn't understand the bit about assign. What does the file[1] do? Why isn't it file[0] for example. My googling can't find other examples of that usage. Thanks again for your help. – cfn Dec 25 '20 at 21:52
  • Hey. I need to do some research where I found the file[1]... But more important, is it working for you? – KargWare Dec 25 '20 at 21:59
  • Here is the post to the array index, https://stackoverflow.com/a/56177784/10655742 – KargWare Dec 25 '20 at 22:15
  • Yes! Thank you! After implementing your answer for the main drinks page that listed all of them I realized that the data-page-generator I was using for my recipes pages (generated from one big file) might also work on individual files, and it did. – cfn Dec 26 '20 at 22:23
  • Not sure if you want to take a look but I'm having a related issue generating the pages using the correct url: https://stackoverflow.com/questions/65620610/key-for-name-of-json-file-rather-than-just-its-fields-for-use-in-jekyll-page-g – cfn Jan 07 '21 at 22:15