add a help file, expand on the readme a bit

Gemfile

@@ -7,7 +7,9 @@ source "https://rubygems.org"
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "~> 4.0.0"
+# gem "jekyll", "~> 4.0.0"
+gem "nokogiri", ">= 1.11.0.rc1"
+gem "jekyll", github: "jekyll/jekyll"
 gem "html-proofer"
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 # gem "minima", "~> 2.5"

Gemfile.lock

@@ -1,3 +1,23 @@
+GIT
+  remote: https://github.com/jekyll/jekyll.git
+  revision: ab6ef0b257e4c7aafec0518d93bea3e9c4b75b75
+  specs:
+    jekyll (4.0.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.9.5, < 2)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 1.8)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -24,21 +44,6 @@ GEM
     http_parser.rb (0.6.0)
     i18n (1.8.2)
       concurrent-ruby (~> 1.0)
-    jekyll (4.0.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (>= 0.9.5, < 2)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
     jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
@@ -50,9 +55,9 @@ GEM
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     mini_portile2 (2.4.0)
-    nokogiri (1.10.9)
+    nokogiri (1.11.0.rc1)
       mini_portile2 (~> 2.4.0)
     nokogumbo (2.0.2)
       nokogiri (~> 1.8, >= 1.8.4)
@@ -86,7 +91,8 @@ PLATFORMS
 
 DEPENDENCIES
   html-proofer
-  jekyll (~> 4.0.0)
+  jekyll!
+  nokogiri (>= 1.11.0.rc1)
   tzinfo (~> 1.2)
   tzinfo-data
   wdm (~> 0.1.1)

README.md

@@ -50,7 +50,7 @@ time: 240
 - `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.
+	- amount (number or array) - The amount of this item to add, e.g. `2` for 2 cups of flour. Non-whole numbers will be displayed as fractions, e.g. `1.5` becomes `1½`.
 		- If this is `0`, the output will be e.g. "jalepeño chillis to taste" rather than "0 jalepeño chillis".
 		- If this is an array, it will be printed as `amount[0] to amount[1]`. For example, if you wanted to say "2 to 3 cups of peas", you would write `[[2, 3], peas, cups]`.
 	- ingredient name (string) - The name of the ingredient, e.g. `flour` for 2 cups of flour.
@@ -61,7 +61,7 @@ time: 240
 
 The recipe's file name isn't important, but it's good practice to make it something obvious, like `chocolate_cake.md` and not `strawberry_pie.md`.
 
-The recipe files are standard YAML. Every recipe **must** begin and end with three dashes [to ensure that Jekyll processes it](https://jekyllrb.com/docs/front-matter/). Jekyll only processes files with certain extensions. Even though the recipes are formatted as YAML, they can't be saved as `.yml` or `.yaml` files - they must be saved with an extension that Jekyll will process, like `.md` or `.html`.
+The recipe files are standard YAML. Every recipe **must** begin and end with three dashes [to ensure that Jekyll processes it](https://jekyllrb.com/docs/front-matter/). Jekyll only processes files with certain extensions. Even though the recipes are formatted as YAML, they can't be saved as `.yml` or `.yaml` files - they must be saved with an extension that Jekyll will process, like `.md` or `.html`. Additionally, any tags not marked as optional **must** be included in order for the file to render properly.
 
 Good:
 ```yaml
@@ -77,7 +77,7 @@ name: Example
 ### Subrecipes
 Subrecipes behave a little differently to regular recipes:
 - They don't show up on the home page
-- The `time` tag is not supported
+- The `time`, `author`, `difficulty` and `ratings` tags do not do anything. They can still be included, but won't be displayed.
 
 Subrecipes have a tag that regular recipes do not - the `parents` tag. This is a list of recipes that the subrecipe should be included in. For example:
 ```yaml

_includes/footer.html

@@ -1,4 +1,4 @@
 <footer>
-	{% if page.url != '/' %}<a href='/'>Home</a> - {% endif %}<a href='https://git.bune.city/lynnesbian/recipe-site'>Source code</a> <br>
+	{% if page.url != '/' %}<a href='/'>Home</a> - {% endif %}<a href='https://git.bune.city/lynnesbian/recipe-site'>Source code</a>{% if page.title != 'Help' %} - <a href='/help.html'>Help</a>{% endif %} <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/ingredients.html

@@ -10,13 +10,15 @@
 		{%- assign tag = tag | append: " class='optional'" -%}
 	{%- endif -%}
 
-	{%- assign amount = item[0] | append: " " -%}
 	{%- assign end = "" -%}
 	{%- if item[0][0] -%}
-		{%- assign amount = item[0][0] | append: " to " | append: item[0][1] | append: " " -%}
+		{%- assign to = item[0][1] | fractionalise: 10 -%}
+		{%- assign amount = item[0][0] | fractionalise: 10 | append: " to " | append: to | append: " " -%}
 	{%- elsif item[0] == 0 -%}
 		{%- assign amount = "" -%}
 		{%- assign end = " to taste" -%}
+	{%- else -%}
+		{%- assign amount = item[0] | fractionalise: 10 | append: " " -%}
 	{%- endif -%}
 
 	<{{ tag }}>{{ amount }} {%- if item[2] %}{{ item[2] }} of {% endif -%} {{ item[1] }}{{ end }}</li>

_includes/method.html

@@ -8,7 +8,7 @@
 	<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>
+		<li><label for='{{ prefix }}-{{ i }}'>{{ item }}</label><input id='{{ prefix }}-{{ i }}' class='method-checkbox' data-number='{{ i }}' type='checkbox'></li>
 		{% assign i = i | plus: 1 -%}
 		{%- endfor %}
 	</ol>

_layouts/default.html

@@ -5,10 +5,11 @@
 	<meta charset="UTF-8">
 	<link rel='stylesheet' href='/assets/style.css'>
 	<script async src='/assets/script.js'></script>
-	<title>{{ page.title }}</title>
+	<title>{% if page.layout == "recipe" %}{{ page.name }}{% else %}{{ page.title }}{% endif %}</title>
 </head>
 
 <body>
+	{% unless layout.custom_h1 -%}<h1>{{ page.title }}</h1>{%- endunless %}
 	<div id='main'>
 		{{ content }}
 	</div>

_layouts/recipe.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+custom_h1: true
 ---
 {%- comment -%} return everything before the first full stop, without the trailing "_recipes/". for example: "_recipes/file.yml.md" becomes "file" {%- endcomment -%}
 {%- assign id = page.path | split: "." | pop | first | remove_first: "_recipes/" -%}

_plugins/custom_stuff.rb

@@ -0,0 +1,43 @@
+require "liquid"
+require "jekyll"
+
+module Jekyll
+	module FractionaliseFilter
+		def fractionalise(input, limit = 0)
+			input  = input.to_s
+
+			if not input.include? "."
+				# if input is a whole number, just return it
+				return input
+			end
+
+			if input.split(".").length != 2
+				# generally when liquid filters fail they just print nothing, so we'll do that too
+				return ""
+			end
+
+			leading_integer, decimal = input.split(".")
+			decimal = "0.#{decimal}"
+
+			rational = case decimal
+			# handle common weird cases so that e.g. 0.3 returns "1/3" and not "3/10" or "5404319552844595/18014398509481984"
+			when "0.3", "0.33", "0.333"
+				Rational(1, 3)
+			when "0.6", "0.67", "0.666"
+				Rational(2, 3)
+			else
+				decimal.to_r
+			end
+
+			if limit != 0 and rational.denominator > limit
+				# apply a maximum size for the denominator to avoid the (imo) much more readable "0.41" becoming "41/100" unless wanted
+				return input
+			end
+
+			"<span title='#{input}'>#{leading_integer != "0" ? "#{leading_integer} " : ""}<span class='fraction'><span class='numerator'>#{rational.numerator}</span><span class='denominator'>#{rational.denominator}</span></span></span>"
+
+		end
+	end
+end
+
+Liquid::Template.register_filter(Jekyll::FractionaliseFilter)

assets/script.js

@@ -10,16 +10,21 @@ window.onload = function () {
 			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;
+					cb = dgel(`${prefix}-${i}`);
+					cb.checked = true;
+					cb.parentElement.classList.add("checked");
 				}
 			} 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;
+					cb = dgel(`${prefix}-${i}`);
+					cb.checked = false;
+					cb.parentElement.classList.remove("checked");
 				}
 			}
+
+			this.parentElement.classList.toggle("checked");
 		}
 	})
 }

assets/style.css

@@ -11,7 +11,10 @@ body {
 	margin: 0;
 }
 #main {
+	width: 80%;
+	max-width: 1500px;
 	flex-grow: 1;
+	margin: 0 auto;
 }
 
 h1 {
@@ -40,6 +43,7 @@ h2.no-bg {
 }
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 400;
+	page-break-after: avoid;
 }
 h3 {
 	font-size: 1.3em;
@@ -110,10 +114,13 @@ a:not(.recipe-listing):hover {
 
 ul {
 	list-style-type: "- ";
+	padding-left: 20px;
+}
+ol {
+	padding-left: 30px;
 }
 ul, ol {
-	list-style-position: inside;
-	padding-left: 10px;
+	list-style-position: outside;
 }
 li {
 	padding: 1px 0;
@@ -147,7 +154,27 @@ a.recipe-listing {
 	padding-left: 10px;
 }
 
-.method li input[type=checkbox]:checked + label {
+.fraction span {
+	font-size: 0.5em;
+}
+.fraction {
+	display: inline-flex;
+	flex-direction: column;
+	width: min-content;
+	vertical-align: top;
+}
+.fraction .numerator {
+	text-align: center;
+}
+.fraction .denominator {
+	border-top: thin black solid;
+}
+
+.method li input[type=checkbox] {
+	display: none;
+}
+
+.method li.checked {
 	color: grey;
 	text-decoration: line-through;
 }
@@ -204,3 +231,47 @@ footer, .subtle {
 	font-family: 'stars';
 	src: url("/assets/fonts/stars.woff") format("woff"), url("/assets/fonts/stars.woff2") format("woff2");
 }
+
+/* print css */
+@page {
+	size: A4;
+	@bottom-center {
+		content: counter(page) " of " counter(pages);
+	}
+}
+@media print {
+	body {
+		display: block;
+	}
+	li {
+		padding: 0;
+	}
+	.method li.checked {
+		text-decoration: none;
+		color: black;
+	}
+	footer {
+		display: none;
+	}
+	h1.scrolling {
+		position: relative;
+	}
+	h1.invisible {
+		display: none;
+	}
+	.subrecipe-output {
+		height: min-content;
+	}
+	.subrecipe, p {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.subrecipe {
+		border-top: thin black solid;
+		border-bottom: thin black solid;
+		border-radius: 0;
+	}
+	.subrecipe .subrecipe-toggle::after {
+		content: "";
+	}
+}

help.html

@@ -0,0 +1,20 @@
+---
+title: Help
+layout: default
+---
+<h2>Using the site</h2>
+<p>
+	Here are a few tips and tricks you might find useful:
+</p>
+<ul>
+	<li>While working on a recipe, you can click on any step in the Method section to mark it as complete to help you keep track of how far along you are. You can undo this by clicking it again.</li>
+	<li>Hovering over a fraction will display its decimal equivalent. For example, hovering over "{{ 1.25 | fractionalise }}" will show "1.25".</li>
+	<li>Recipes can be printed by using your browser's built in print function. The output will be in black and white, and subrecipes will automatically be expanded.</li>
+</ul>
+<h2>Creating recipes</h2>
+<p>
+	You can create your own recipe by placing a properly formatted file in the <tt>_recipes</tt> directory in the Jekyll project folder. Note that creating recipes through the web UI is not possible.
+</p>
+<p>
+	For information about the recipe format, subrecipes, and more, see <a href='https://git.bune.city/lynnesbian/recipe-site/src/branch/master/README.md#user-content-recipe-file-format'>the README</a>.
+</p>

index.html

@@ -2,7 +2,6 @@
 title: Home
 layout: default
 ---
-<h1>Home</h1>
 <h2 class='no-bg'>Recipes</h2>
 <p class='subtle'>Showing {% if site.recipes_per_page > site.recipes.size %}{{ site.recipes_per_page}}{% else %}{{ site.recipes.size }}{% endif %} results.</p>
 {% include recipes.html %}