minor homepage cleanup

README.md

@@ -32,6 +32,7 @@ Here's an example recipe, which could be saved to `_recipes/chocolate_cake.md`:
 ---
 name: Chocolate cake
 author: Jane Crocker
+difficulty: 2
 
 ingredients:
 - [1, egg, null]
@@ -47,6 +48,7 @@ time: 240
 ```
 - `name` (string) - The displayed name of the recipe. Does not appear in the URL.
 - `author` (string, optional) - The author of the recipe.
+- `difficulty` (float, optional) - The difficulty of the recipe on a scale of 1 to 5. Will be displayed as a star rating. Half stars (e.g. "2.5") are allowed.
 - `ingredients` (list) - Each entry in `ingredients` is an array consisting of up to four items:
 	- amount (number or array) - The amount of this item to add, e.g. `2` for 2 cups of flour.
 		- If this is `0`, the output will be e.g. "jalepeño chillis to taste" rather than "0 jalepeño chillis".
@@ -94,6 +96,8 @@ The entries in `parents` refer to the filenames of the parent recipes - `chocola
 If a subrecipe does not have at least one valid `parents` entry, it will not appear anywhere on the website.
 
 ## Licensing
+This software makes use of a subset of Font Awesome v4.7.0, which is licensed under the [SIL](https://scripts.sil.org/OFL_web).
+
 This software is licensed under the [Apache 2.0 license](https://choosealicense.com/licenses/apache-2.0/).
 
 Copyright 2020 Lynnesbian

_config.yml

@@ -14,3 +14,4 @@ collections:
     output: false
   recipes:
     output: true
+    permalink: "/:collection/:name"

_includes/difficulty_stars.html

@@ -0,0 +1,22 @@
+{%- if page.difficulty < 6 and page.difficulty > 0 -%}
+	{%- comment -%} note: these characters are invalid unicode. they will only render properly on the webpage using the bundled "stars" font. {%- endcomment -%}
+	{%- assign empty_star ="" -%}
+	{%- assign full_star = "" -%}
+	{%- assign half_star = "" -%}
+
+	{%- comment -%} build a string of empty stars {%- endcomment -%}
+	{%- assign difficulty = "" -%}
+	{%- for i in (1..5) -%}
+		{%- assign difficulty = difficulty | append: empty_star -%}
+	{%- endfor -%}
+	{%- comment -%} replace the first page.difficulty stars will filled stars {%- endcomment -%}
+	{%- assign page_difficulty_rounded = page.difficulty | floor -%}
+	{%- for i in (1..page_difficulty_rounded) -%}
+		{%- assign difficulty = difficulty | replace_first: empty_star, full_star -%}
+	{%- endfor -%}
+	{%- if page.difficulty != page_difficulty_rounded -%}
+		{%- comment -%} difficulty ends in .5 (or .1, or .9, or whatever) {%- endcomment -%}
+		{%- assign difficulty = difficulty | replace_first: empty_star, half_star -%}
+	{%- endif -%}
+	<span class='stars'>{{ difficulty }}</span>
+{%- endif -%}

_includes/footer.html

@@ -1,3 +1,4 @@
 <footer>
-	<a href='/'>Home</a> - <a href='https://git.bune.city/lynnesbian/recipe-site'>Git</a>
+	{% if page.url != '/' %}<a href='/'>Home</a> - {% endif %}<a href='https://git.bune.city/lynnesbian/recipe-site'>Git</a> <br>
+	Design by <a href='https://lynnesbian.space'>Lynne</a> - Site last built <time datetime='{{ site.time | date: "%Y-%m-%d %R:%S" }}'>{{ site.time | date_to_long_string: "ordinal" }} at {{ site.time | date: "%R" }}</time>
 </footer>

_includes/method.html

@@ -4,9 +4,12 @@
 		{%- assign tag = "h4" -%}
 	{%- endif -%}
 	<{{tag}}>Method</{{tag}}>
-	<ol>
-		{% for item in page.method -%}
-		<li>{{ item }}</li>
-		{% endfor %}
+	{%- assign prefix = page.id | downcase | split: "/" | last | url_encode | prepend: "cb-" -%}
+	<ol class='method' data-cb-prefix='{{ prefix }}'>
+	{% assign i = 1 -%}
+		{%- for item in page.method -%}
+		<li><input id='{{ prefix }}-{{ i }}' class='method-checkbox' data-number='{{ i }}' type='checkbox'><label for='{{ prefix }}-{{ i }}'>{{ item }}</label></li>
+		{% assign i = i | plus: 1 -%}
+		{%- endfor %}
 	</ol>
 {%- endif -%}

_includes/recipes.html

@@ -3,10 +3,11 @@
 	<a href='{{ recipe.url }}' class='recipe-listing'>
 		<h2>{{ recipe.name }}</h2>
 		<p>
-			By {{ recipe.author }} - {{ recipe.method | size }} steps -
+			By {{ recipe.author }} - {{ recipe.method | size }} steps {%- if recipe.time %} -
 			{%- if recipe.time > 59 %} {{ recipe.time | divided_by: 60}}h {% endif -%}
 			{% assign mins = recipe.time | modulo: 60 -%}
 			{%- if mins > 0 %}{{ mins }}m{% endif %}
+			{%- endif -%}
 		</p>
 		<ol class='excerpt'>
 			{% for step in recipe.method | limit: 4 %}

_layouts/recipe.html

@@ -13,7 +13,8 @@ layout: default
 	{%- endif -%}
 {%- endfor -%}
 
-<h1>{{ page.name }}</h1>
+<h1 class='scrolling'>{{ page.name }}</h1>
+<h1 class='invisible'>{{ page.name }}</h1>
 {%- if page.time -%}
 	{%- if page.time > 59 %}
 		{%- assign hours = page.time | divided_by: 60 -%}
@@ -28,7 +29,8 @@ layout: default
 		{%- assign time = page.time %}
 	{%- endif -%}
 {%- endif -%}
-<p class='subtle'> {{ page.method.size }} steps - Estimated cooking time: {{ time | default: "Not provided" }} {% if page.author %} - By {{ page.author }} {% endif %}</p>
+
+<p class='subtle'>{% if page.difficulty %}Difficulty: {% include difficulty_stars.html %} - {% endif %}{{ page.method.size }} steps - Estimated cooking time: {{ time | default: "Not provided" }} {% if page.author %} - By {{ page.author }} {% endif %}</p>
 {%- if applicable_subrecipes %}
 	<h2> Subrecipes </h2>
 	{% for subrecipe in site.subrecipes -%}

assets/script.js

@@ -1,3 +1,33 @@
+window.onload = function () {
+	Array.from(dgcn('method-checkbox')).forEach(checkbox => {
+		// uncheck all the checkboxes every time the page is reloaded
+		checkbox.checked = false;
+		checkbox.onclick = function () {
+			let num = parseInt(this.dataset.number);
+			let prefix = this.parentElement.parentElement.dataset.cbPrefix;
+			let max = this.parentElement.parentElement.children.length;
+
+			if (this.checked) {
+				// check everything before this - if you've done step 6, you've done steps 1-5
+				for (i = num - 1; i > 0; i--) {
+					dgel(`${prefix}-${i}`).checked = true;
+				}
+			} else {
+				// uncheck everything after this - you can't have done step 8 if you haven't done step 4
+				console.log(num + 1);
+				for (i = num + 1; i <= max; i++) {
+					console.log(i);
+					dgel(`${prefix}-${i}`).checked = false;
+				}
+			}
+		}
+	})
+}
+
+function dgcn(cn) {
+	return document.getElementsByClassName(cn);
+}
+
 function dgel(id) {
 	return document.getElementById(id);
 }

assets/style.css

@@ -20,6 +20,17 @@ h1 {
 	text-align: center;
 	background: linear-gradient(to right, turquoise, transparent 80%);
 }
+h1.scrolling {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	/* backdrop-filter: blur(5px); */ /* disabled because firefox (73) renders it weirdly */
+}
+h1.invisible {
+	position: relative;
+	visibility: hidden;
+}
 h2 {
 	padding-left: 10px;
 	background: linear-gradient(to right, turquoise 5px, transparent 5px 100%);
@@ -35,6 +46,10 @@ h4 {
 	margin: 0.75em 0;
 }
 
+.stars {
+	font-family: 'stars';
+}
+
 .ingredients li.optional::before {
 	content: "(Optional) ";
 	font-style: italic;
@@ -110,10 +125,9 @@ li {
 	border-radius: 10px;
 	background: linear-gradient(to right, turquoise 5px, #eee 5px 100%);
 	max-width: 600px;
-	flex: 1 0 300px;
+	flex: 1 0 400px;
 	box-shadow: 0 0 3px #0003;
 	transition: 0.2s all;
-
 }
 .recipe-listing:hover {
 	box-shadow: 0 0 15px #0003;
@@ -126,6 +140,11 @@ a.recipe-listing {
 	background: none;
 }
 
+.method li input[type=checkbox]:checked + label {
+	color: grey;
+	text-decoration: line-through;
+}
+
 .excerpt {
 	color: grey;
 	position: relative;
@@ -154,3 +173,8 @@ footer, .subtle {
 	color: grey;
 	font-style: italic;
 }
+
+@font-face {
+	font-family: 'stars';
+	src: url("/assets/fonts/stars.woff") format("woff"), url("/assets/fonts/stars.woff2") format("woff2");
+}