big rework of the main page

- display stats (recipe count, recipe with the most ingredients, etc)
- display difficulty on recipes with difficulties
- minor style changes
- limit to 15 recipes (pagination coming soon™)

_config.yml

@@ -15,3 +15,5 @@ collections:
   recipes:
     output: true
     permalink: "/:collection/:name"
+
+recipes_per_page: 15

_includes/difficulty_stars.html

@@ -1,22 +1,30 @@
-{%- if page.difficulty < 6 and page.difficulty > 0 -%}
+{%- if page.difficulty or recipe.difficulty -%}
+	{%- if page.difficulty -%}
+		{%- assign difficulty = page.difficulty -%}
+	{%- else -%}
+		{%- assign difficulty = recipe.difficulty -%}
+	{%- endif -%}
+
+	{%- if difficulty < 6 and 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 = "" -%}
+		{%- assign stars = "" -%}
 		{%- for i in (1..5) -%}
-		{%- assign difficulty = difficulty | append: empty_star -%}
+			{%- assign stars = stars | append: empty_star -%}
 		{%- endfor -%}
-	{%- comment -%} replace the first page.difficulty stars will filled stars {%- endcomment -%}
+		{%- comment -%} replace the first difficulty stars will filled stars {%- endcomment -%}
-	{%- assign page_difficulty_rounded = page.difficulty | floor -%}
+		{%- assign page_stars_rounded = difficulty | floor -%}
-	{%- for i in (1..page_difficulty_rounded) -%}
+		{%- for i in (1..page_stars_rounded) -%}
-		{%- assign difficulty = difficulty | replace_first: empty_star, full_star -%}
+			{%- assign stars = stars | replace_first: empty_star, full_star -%}
 		{%- endfor -%}
-	{%- if page.difficulty != page_difficulty_rounded -%}
+		{%- if difficulty != page_stars_rounded -%}
-		{%- comment -%} difficulty ends in .5 (or .1, or .9, or whatever) {%- endcomment -%}
+			{%- comment -%} stars ends in .5 (or .1, or .9, or whatever) {%- endcomment -%}
-		{%- assign difficulty = difficulty | replace_first: empty_star, half_star -%}
+			{%- assign stars = stars | replace_first: empty_star, half_star -%}
+		{%- endif -%}
+		<span class='stars'>{{ stars }}</span>
 	{%- endif -%}
-	<span class='stars'>{{ difficulty }}</span>
 {%- endif -%}

_includes/recipes.html

@@ -1,9 +1,11 @@
 <div id='recipes'>
-	{% for recipe in site.recipes -%}
+	{% for recipe in site.recipes | limit: 15 -%}
 	<a href='{{ recipe.url }}' class='recipe-listing'>
-		<h2>{{ recipe.name }}</h2>
+		<h3>{{ recipe.name }}</h3>
 		<p>
-			By {{ recipe.author }} - {{ recipe.method | size }} steps {%- if recipe.time %} -
+			By {{ recipe.author }} -
+			{% if recipe.difficulty %}Difficulty: {% include difficulty_stars.html %} - {%- endif %}
+			{{ 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 %}

assets/style.css

@@ -35,6 +35,9 @@ h2 {
 	padding-left: 10px;
 	background: linear-gradient(to right, turquoise 5px, transparent 5px 100%);
 }
+h2.no-bg {
+	background: none;
+}
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 400;
 }
@@ -98,6 +101,9 @@ a {
 	color: turquoise;
 	text-decoration: none;
 }
+a.dark {
+	filter: brightness(80%);
+}
 a:not(.recipe-listing):hover {
 	text-decoration: underline;
 }
@@ -121,7 +127,8 @@ li {
 .recipe-listing {
 	display: block;
 	margin: 10px;
-	padding: 5px;
+	height: min-content;
+	padding: 0 5px;
 	border-radius: 10px;
 	background: linear-gradient(to right, turquoise 5px, #eee 5px 100%);
 	max-width: 600px;
@@ -136,8 +143,8 @@ a.recipe-listing {
 	color: black;
 }
 
-.recipe-listing h2 {
+.recipe-listing h3 {
-	background: none;
+	padding-left: 10px;
 }
 
 .method li input[type=checkbox]:checked + label {
@@ -161,13 +168,32 @@ a.recipe-listing {
 	background: linear-gradient(to top, #eee 1em, transparent);
 }
 
+table {
+	border-collapse: collapse;
+	width: max-content;
+	min-width: 50%;
+	max-width: 90%;
+	margin: 0 auto;
+	background: #0001;
+	border-radius: 10px;
+}
+tr:nth-of-type(2n) {
+	background: #0001;
+}
+td {
+	padding: 10px;
+}
+td:last-of-type {
+	text-align: right;
+}
+
 footer {
 	text-align: center;
 	background: #333;
 	display: block;
 	width: 100%;
 	padding: 20px 0;
-	margin: 0;
+	margin: 30px 0 0 0;
 }
 footer, .subtle {
 	color: grey;

index.html

@@ -3,5 +3,53 @@ title: Home
 layout: default
 ---
 <h1>Home</h1>
-<p>Currently tracking {{ site.recipes.size }} recipes and {{ site.subrecipes.size }} subrecipes.</p>
+<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 %}
+
+{%- if site.recipes.size > 1 %}
+<h2 class='no-bg'>Stats</h2>
+{%- assign steps_total = 0 -%}
+{%- assign longest_recipe = site.recipes | first -%}
+{%- assign most_ingredients = site.recipes | first -%}
+{%- for recipe in site.recipes -%}
+	{%- assign steps_total = steps_total | plus: recipe.method.size -%}
+
+	{%- if recipe.method.size > longest_recipe.method.size -%}
+		{%- assign longest_recipe = recipe -%}
+	{%- endif -%}
+
+	{%- if recipe.ingredients.size > most_ingredients.ingredients.size -%}
+		{%- assign most_ingredients = recipe -%}
+	{%- endif -%}
+{%- endfor -%}
+
+{%- assign recipes_size_float = site.recipes.size | times: 1.0 -%}
+<table>
+	<tr>
+		<td>Recipes</td>
+		<td>{{ site.recipes.size }}</td>
+	</tr>
+	<tr>
+		<td>Subrecipes</td>
+		<td>{{ site.subrecipes.size }}</td>
+	</tr>
+	<tr>
+		<td>Authors</td>
+		<td>{{ site.recipes | map: "author" | uniq | size }}</td>
+	</tr>
+	<tr>
+		<td>Average recipe steps</td>
+		<td>{{ steps_total | divided_by: recipes_size_float | round: 1 | replace: '.0', '' -}}</td>
+	</tr>
+	<tr>
+		<td>Most ingredients (excluding subrecipes)</td>
+		<td><a class='dark' href='{{ most_ingredients.url }}'>{{ most_ingredients.name }}</a> ({{ most_ingredients.ingredients.size }} ingredients)</td>
+	</tr>
+	<tr>
+		<td>Most steps (excluding subrecipes)</td>
+		<td><a class='dark' href='{{ longest_recipe.url }}'>{{ longest_recipe.name }}</a> ({{ longest_recipe.method.size }} steps)</td>
+	</tr>
+
+</table>
+{% endif %}