summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick Spek <p.spek@tyil.nl>2022-04-18 11:22:33 +0200
committerPatrick Spek <p.spek@tyil.nl>2022-04-18 20:49:18 +0200
commita190487ef793aeeb0937322cf98383b7505b5ceb (patch)
treeed570406d9b352324c5d8b3a7ed60c84183ada2f
parent04c13d8007efe2597cad3fe24436368bed73bf1f (diff)
downloadblog-a190487ef793aeeb0937322cf98383b7505b5ceb.tar.gz
blog-a190487ef793aeeb0937322cf98383b7505b5ceb.tar.bz2
Add a cookbook section
-rw-r--r--content/recipes/_index.md9
-rw-r--r--layouts/_default/baseof.html21
-rw-r--r--layouts/_default/list.html8
-rw-r--r--layouts/recipes/list.html17
-rw-r--r--layouts/recipes/single.html78
-rw-r--r--static/js/cookbook.js34
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>&nbsp;</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();
+});