kaiymu / recipes

A super minimal recipe website built on Markdown

RECIPE BOOK

A super minimal recipe website – great for keeping track of family recipes, mods to ones you find online, or have created yourself!

See it in action here: jeffreythompson.org/recipes

Features:

• Recipes in a simple Markdown format, just dump them in a folder and upload
• List of recipes will auto-populate with quick alpha links at the top
• Each recipe is displayed in a nice, clean format designed for use while cooking or at the grocery store – no extra 💩 or ads
• Auto-generated links to a Google image search for that dish, recipes on Serious Eats and Google, and for restaurants on Yelp (in case you burn something and need takeout fast)
• To save your place while scrolling up around on the page, click the step you're on to highlight it; click it again to remove the highlight, or use the left/right arrow keys to advance
• Easily customized and code is (mostly) really well annotated 🙃

MORE INFO

• Recipe format
• Adding images
• Other options
• Search
• Suggestions welcome!

RECIPE FORMAT

In order to show up properly, your recipe's Markdown file should be named with dashes in place of spaces (ex: rice-pilaf.md or saag-paneer.md). This will be used to populate your list of recipes on the main page.

Use tecipe-template.md and/or follow this format:

# TITLE
Optional subheader

## info  
* About XXX minutes  
* XXX servings  

## ingredients
* 

## steps  
1. 

## notes  
* 

## based on  
* url to where the recipe came from

## tags 
* [Main course]

For example:

# Raspberry and Elderflower Gin and Tonic
A delicious light-red drink perfect for winter gatherings!

## ingredients
* 8 raspberries (frozen ok but should be thawed)  
* Fresh thyme (optional)  
* Gin  
* 1/2 lime  
* 1-2 tbsp St Germaine (or 1-2 tsp simple syrup)  

## steps
1. Muddle raspberries with 1.5 oz gin (and fresh thyme, if using)  
2. Add juice of half a lime  
3. Add 1-2 tbsp St Germaine (or 1-2 tsp simple syrup)  
4. Strain into glass, add ice cubes and top with tonic 

## notes
* Replace tonic with champagne for a *French 75* mashup   

## based on
* https://www.instagram.com/p/Bq3ckR8HIDE/

You can optionally include info about how long the recipe takes and how many servings it makes. Put this before the Ingredients list:

* Takes about 90 minutes  
* Enough for a large biryani or a full-sized curry

The Ingredients and Steps sections can be split with subheaders too:

1. Soak urad dal for 4 hours to overnight, drain  
2. Grind in blender until a smooth and thick paste (add a little water if necessary)  
3. Put in mixing bowl and whip with hands for 2-3 minutes until fluffy  
4. Add spices, herbs, and salt and whip again to combine  

To fry:
1. Heat oil over medium/medium-high heat  
2. Take a bowl of water, wet hands, and form small balls  
3. Slide into oil and cook, flipping often, until golden  
4. Drain on paper towels  

ADDING IMAGES

Thanks to a suggestion from @mpember, if you have a jpg image with the same filename as your recipe, it will automatically be added!

For example: aloo-matar.md should have an image called aloo-matar.jpg in the images folder.

You can also include other images in the recipe using Markdown's image syntax: ![alt text](url). You'll probably want to update the stylesheet to size them appropriately.

SEARCH

On the recipes list, you can now search using either ingredients or tags, it'll highlight all recipes that includes any of theses elements. For French, I automaticly stripped the last "S" of every words to avoid using plurals (Oeufs becomes oeuf)

INGREDIENTS

On the ingredients section, if you put into [] (brackets) any ingredients, it'll be found if you search for that word

For exemple

• 2 [eggs]

If you search egg, it should highlight all recipes includings egg into it.

---

---

TAGS

On the .md file of your recipes, you can add also between [] any tags that you want to search for It won't be displayed into the recipe page, it's more for you to filter in any recipes that you think should match

For exemple

• [Main course]
• [Romanian]

If you type any of theses words into the seach bar, it'll automaticly be highlighted just like seen here

---

---

OTHER OPTIONS

The recipe.php file also includes some more options you can customize:

• yelpLocation: the city/state where you're located to make Yelp searches easier! No need for fancy formatting, this will work fine: Minneapolis MN
• helpUrls: dictionary with the label (text displayed) and url in template form. The string <name> will be replaced with your recipe's name
• lookForHeroImage: on by default, but you can turn it off if you never intend to include hero images
• autoUrlSections: list of sections in the recepe template where you want raw URLs (ex: www.instagram.com) to be turned into real links. Great for the Based On section but not so good if you want to include Markdown-formatted links in other sections
• shortenUrls: turns a super-long url into just the main domain name (link will still work as normal, just less cluttered). Off by default but exists if you want it

SUGGESTIONS WELCOME

If you have suggestions for improving this project, please let me know! Either open an issue or send me an email.