TheThomaas/my-online-cookbook
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
A starter kit to make your own online cookbook. Forked from https://github.com/maeligg/my-online-cookbook
92 commits 3 branches 0 tags 3 MiB
Nunjucks 47%
SCSS 39.7%
JavaScript 11.8%
HTML 1.5%
Go to file
TheThomaas 8bae281d6c Squashed commit of the following: 
commit 446595ceff8375826c246dc5698dbbb3bff995bc
Author: TheThomaas <thethomaas@protonmail.ch>
Date:   Mon Apr 21 17:30:14 2025 +0200

    Add 11ty Navigation
2025-04-21 17:38:57 +02:00
src Squashed commit of the following: 2025-04-21 17:38:57 +02:00
.gitignore Change output dir back to _site to match netlify's default settings 2021-05-20 00:04:57 +02:00
eleventy.config.js Squashed commit of the following: 2025-04-21 17:38:57 +02:00
github-readme.svg Update logo 2025-04-21 14:53:43 +02:00
LICENSE Initial commit 2021-05-12 13:28:48 +02:00
netlify.toml more toml formatting 2021-05-27 16:27:40 +02:00
package-lock.json Squashed commit of the following: 2025-04-21 17:38:57 +02:00
package.json Squashed commit of the following: 2025-04-21 17:38:57 +02:00
README.md Update logo 2025-04-21 14:57:02 +02:00

README.md

My Online Cookbook logo

My Online Cookbook

My Online Cookbook is a starter kit to create your own website of recipes, using Eleventy and Netlify CMS. It is meant to be both highly accessible (including to non-developers), as well as fully customisable should you want to use it as a starting off point.

Presentation & set-up instructions : https://myonlinecookbook.xyz/

Demo (this is what you get out of the box) : https://myonlinecookbook.netlify.app/

Get started now by forking the project or deploy to Netlify : Deploy to Netlify

Features

📘 Optimised for recipes

Unlike other general-purpose templates and website builders, My Online Cookbook is optimised for writing, reading and easily finding back your recipes. Quickly visualise which ingredients you need, navigate between recipes in the same categories, and automatically adapt quantities based on the number of servings.

💪 Powerful search

The kit includes a powerful live search system offering a UX on-par with third-party services like Algolia, without needing any external dependency or subscription service.

🧰 Lightweight & easily extendable

Easily customise the theme color and other site attributes using the global data files, or dive into the code and change anything. The CSS is authored using Sass and following the BEM naming convention. JavaScript is added where needed using Alpine and following a component-based approach. Images are processed and optimised at build-time using the Eleventy image plugin. Apart from Alpine, there are no run-time dependencies, making the site both extremely lightweight and easy to pick up and modify.

Running the site locally

  1. npm install to install all dependencies
  2. npm run dev to serve the site locally
  3. npm run build to build the site for production

Access the CMS admin interface

Go to /admin to access the admin interface (this also works locally). You'll need to configure a user with Netlify Identity to log in. For more information on how to use or configure Netlify CMS go to their documentation. In addition to recipes, all site settings (primary color, etc) as well as labels are editable from this interface.

Directory structure

  • .eleventy.js has all the custom configuration for Eleventy, including collections, filters and shortcodes.
  • src/_data contains nav and site settings, also editable from the CMS admin interface.
  • src/_includes contains layouts and reusable components (including SVG icons).
  • src/admin contains the configuration for editable fields in Netlify CMS.
  • src/img contains all images. Note that only images placed in src/img/recipes are editable from the CMS admin interface.
  • src/recipes is your main content, with each recipe saved as a markdown file.
  • Each other page is located at the root of src/ as its own markdown or nunjucks file.