diff options
| -rw-r--r-- | content/recipes/_index.md | 9 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 21 | ||||
| -rw-r--r-- | layouts/_default/list.html | 8 | ||||
| -rw-r--r-- | layouts/recipes/list.html | 17 | ||||
| -rw-r--r-- | layouts/recipes/single.html | 78 | ||||
| -rw-r--r-- | static/js/cookbook.js | 34 |
6 files changed, 152 insertions, 15 deletions
diff --git a/content/recipes/_index.md b/content/recipes/_index.md new file mode 100644 index 0000000..337e63b --- /dev/null +++ b/content/recipes/_index.md @@ -0,0 +1,9 @@ +--- +title: Cookbook +--- + +People have often asked me to share recipes for various meals and snacks I've +served over time, so I've started writing down my recipes. This section of my +blog covers these recipes in my own personal cookbook. If you want to stay up to +date with the latest additions, subscribe to the [RSS +feed](/recipes/index.xml). diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index a88cca2..c61432e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,30 +5,29 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" type="text/css" href="{{ $cssMain.Permalink }}"> - - {{ range .AlternativeOutputFormats -}} - <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" title="{{ $.Site.Title }}" href="{{ .Permalink }}"> - {{ end }} - + {{- range .AlternativeOutputFormats }} + <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" title="{{ $.Site.Title }}" href="{{ .Permalink }}"> + {{- end }} <title>{{ .Page.Title }} - {{ .Site.Title }}</title> + {{- block "head" . }} + {{- end }} </head> <body> - {{ block "body" . }} + {{- block "body" . }} <header id="site-header"> <div class="container"> <nav> <a href="/" class="brand-name">{{ .Site.Title }}</a> - {{ range .Site.Sections }} + {{- range .Site.Sections }} <a href="{{ .Permalink }}">{{ .Title }}</a> - {{ end }} + {{- end }} </nav> </div> </header> <main id="site-main"> <div class="container"> - {{ block "main" . }}{{ end }} + {{- block "main" . }}{{ end }} </div> </main> <footer id="site-footer"> @@ -44,6 +43,6 @@ </p> </div> </footer> - {{ end }} + {{- end }} </body> </html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html index a9698f8..6ba66fc 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,11 +1,11 @@ -{{ define "main" }} +{{- define "main" }} <h1>{{ .Title }}</h1> {{ .Content }} <ul> - {{ range .Paginator.Pages }} + {{- range .Paginator.Pages }} <li> <a href="{{ .Permalink }}">{{ .Title }}</a> </li> - {{ end }} + {{- end }} </ul> -{{ end }} +{{- end }} diff --git a/layouts/recipes/list.html b/layouts/recipes/list.html new file mode 100644 index 0000000..0565d93 --- /dev/null +++ b/layouts/recipes/list.html @@ -0,0 +1,17 @@ +{{- define "main" }} +<h1>{{ .Title }}</h1> +{{ .Content }} +<ul> + {{- range .Paginator.Pages }} + <li> + <a href="{{ .Permalink }}">{{ .Title }}</a> + <small> + {{ .Summary }} + {{- range .Params.tags }} + <a href="/tags/{{ . | lower }}">#{{ . }}</a> + {{- end }} + </small> + </li> + {{- end }} +</ul> +{{- end }} diff --git a/layouts/recipes/single.html b/layouts/recipes/single.html new file mode 100644 index 0000000..36981ce --- /dev/null +++ b/layouts/recipes/single.html @@ -0,0 +1,78 @@ +{{ define "head" }} +<script type="text/javascript" src="/js/cookbook.js"></script> +{{ end }} + +{{ define "main" }} +<article> + <header> + <h1>{{ .Title }}</h1> + {{- range .Params.tags }} + <a href="/tags/{{ . | lower }}">#{{ . }}</a> + {{- end }} + </header> + <main> + {{ .Content }} + <table> + <tbody> + <tr> + <td>Preparation time</td> + <td>{{ .Params.preptime }} minutes</td> + </tr> + <tr> + <td>Cooking time</td> + <td>{{ .Params.cooktime }} minutes</td> + </tr> + <tr> + <td>Serves</td> + <td data-serves="{{ .Params.serves }}">{{ .Params.serves }}</td> + </tr> + </tbody> + </table> + <h2>Ingredients</h2> + <table> + <thead> + <tr> + <th> </th> + <th>Ingredient</th> + <th>Amount</th> + <th>Unit</th> + </tr> + </thead> + <tbody> + {{- range .Params.ingredients }} + <tr> + <td> + <input type="checkbox"> + </td> + <td>{{ .label }}</td> + {{- if .unit }} + <td data-unit="{{ .unit }}" data-amount="{{ .amount }}">{{ .amount }}</td> + <td data-unit="{{ .unit }}">{{ .unit }}</td> + {{- else }} + <td colspan="2">{{ .amount }}</td> + {{- end }} + </tr> + {{- end }} + </tbody> + </table> + <h2>Instructions</h2> + {{- range .Params.stages }} + <h3>{{ .label }}</h3> + <ol> + {{- range .steps }} + <li> + <input type="checkbox"> {{ . | $.Page.RenderString }} + </li> + {{- end }} + </ol> + {{- end }} + </main> + <footer> + <p class="text-center"> + <a class="image-link" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> + <img alt="Creative Commons License" src="/img/cc-by-sa.png"> + </a> + </p> + </footer> +</article> +{{ end }} diff --git a/static/js/cookbook.js b/static/js/cookbook.js new file mode 100644 index 0000000..fc2177c --- /dev/null +++ b/static/js/cookbook.js @@ -0,0 +1,34 @@ +"use strict"; + +// Kindly copied from MartijnBraam's fathub sources +// https://sr.ht/~martijnbraam/fathub.org/ + +var serve_fraction = 1.0; + +function update_ingredient_list() { + var ingredients = document.querySelectorAll('td[data-amount]'); + for (var i = 0; i < ingredients.length; i++) { + var ingredient = ingredients[i]; + ingredient.innerText = ingredient.dataset.amount * serve_fraction; + } +} + +function adjust_serves() { + serve_fraction = this.value / this.dataset.original; + update_ingredient_list(); +} + +function add_dynamic_controls() { + var serves = document.querySelector("td[data-serves]"); + var spinner = document.createElement('INPUT'); + spinner.type = 'number'; + spinner.dataset.original = serves.dataset.serves; + spinner.value = serves.dataset.serves; + spinner.addEventListener('change', adjust_serves); + serves.innerHTML = ''; + serves.appendChild(spinner); +} + +document.addEventListener("DOMContentLoaded", function () { + add_dynamic_controls(); +}); |