Merge https://github.com/polent/recipe

eleventy.config.js

@@ -24,6 +24,7 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addCollection("posts", collections.posts);
 	eleventyConfig.addCollection("feed", collections.feed);
 	eleventyConfig.addCollection("latest", collections.latest);
+	eleventyConfig.addCollection("featured", collections.featured);
 
 	// Filters
 	eleventyConfig.addFilter("dateToDMY", filters.dateToDMY);

src/_11ty/collections.js

@@ -1,10 +1,12 @@
 // Collection for posts
 const posts = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse();
 const latest = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse().slice(0, 3);
+const featured = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse().slice(0, 1);
 const feed = i => i.getFilteredByGlob("./src/content/posts/*.md").reverse();
 
 module.exports = {
 	posts,
 	feed,
 	latest,
+	featured,
 };

src/_11ty/data/meta.js

@@ -8,8 +8,8 @@ module.exports = {
 			? "http://localhost:8080"
 			: "https://recipe.polente.de",
 	robots: "index, follow",
-	themeColor: "#FFFFFF",
-	backgroundColor: "#FFFFFF",
+	themeColor: "#fefbdc",
+	backgroundColor: "#fefbdc",
 	author: {
 		name: "Holger Hellinger",
 		email: "[email protected]",
@@ -25,7 +25,7 @@ module.exports = {
 		type: "website",
 		image: {
 			rel: "/og-default.png",
-			alt: "Default OG image displayed here",
+			alt: "A nice AI generated Dish",
 		},
 	},
 };

src/_includes/layouts/index.njk

@@ -11,9 +11,17 @@
     <div class="layout-span layout-span--aside">
       <aside class="content-aside flow">
         <h2>Latest recipes</h2>
-        <ul>
+        <ul class="recipe-ul">
           {% for item in collections.latest %}
-            {% include "partials/site-post-list.njk" %}
+            <li>
+              <a href="{{ item.url }}">
+                  {% figure %}
+                      {% picture item.data.figureRecipe.imageSrc, item.data.figureRecipe.imageTitle, item.data.figureRecipe.imageAlt, item.data.figureRecipe.loading, "(min-width: 60rem) 260px, 340px" %}
+                  {% endfigure %}
+                  {{ item.data.title }}
+              </a>
+              <time datetime="{{ item.date | dateToYYYYMMDD }}"> {{ item.date | dateToDMY }}</time>
+          </li>
           {% endfor %}
         </ul>
       </aside>

src/_includes/layouts/list.njk

@@ -4,9 +4,14 @@
   <section class="wrapper layout-grid">
     <h1 class="page-header layout-span">{{ title }}</h1>
     <div class="layout-span | content-main flow">
-      <ul>
-        {% for item in pagination.items %}
-          {% include "partials/site-post-list.njk" %}
+      <ul class="recipe-ul">
+        {% for item in pagination.items %} 
+          <a href="{{ item.url }}">         
+          {% figure %}
+              {% picture item.data.figureRecipe.imageSrc, item.data.figureRecipe.imageTitle, item.data.figureRecipe.imageAlt, item.data.figureRecipe.loading, "(min-width: 60rem) 250px, (min-width: 30rem) 440px, 430px" %}
+          {% endfigure %}
+          {{ item.data.title }}
+          </a>
         {% endfor %}
       </ul>
     </div>

src/_includes/layouts/tag-results.njk

@@ -2,11 +2,16 @@
 
 {% block content %}
   <section class="wrapper layout-grid">
-    <h1 class="page-header layout-span">Recipes using “{{ tag }}”</h1>
+    <h1 class="page-header layout-span">Recipes tagged with “{{ tag }}”</h1>
     <div class="layout-span | content-main flow">
-      <ul>
-        {% for item in collections[tag] | reverse %}
-          {% include "partials/site-post-list.njk" %}
+      <ul class="recipe-ul">
+        {% for item in collections[tag] | reverse %}          
+          <a href="{{ item.url }}">
+              {% figure %}
+                  {% picture item.data.figureRecipe.imageSrc, item.data.figureRecipe.imageTitle, item.data.figureRecipe.imageAlt, item.data.figureRecipe.loading, "(min-width: 60rem) 250px, (min-width: 30rem) 440px, 430px" %}
+              {% endfigure %}
+              {{ item.data.title }}
+          </a>
         {% endfor %}
       </ul>
     </div>

src/_includes/partials/site-header.njk

@@ -15,7 +15,7 @@
 					<li>
 						<a href="{{ item.url }}" 
 							{% if item.url in page.url %} 
-								class="main-nav-item--active"
+								aria-current="page"
 							{% endif %}
 						>{{ item.title }}</a>
 					</li>

src/_styles/base/sections.css

@@ -23,6 +23,7 @@ h1 {
 
 h2 {
 	@extend %heading-2;
+	margin-bottom: 0.25em;
 }
 
 h3 {

src/_styles/components/recipe-list.css

@@ -0,0 +1,42 @@
+ul.recipe-ul {
+	display: grid;
+	grid-gap: 1em;
+	grid-template-columns: 1fr;
+
+	@extend %list-reset;
+
+	time {
+		display: block;
+		font-style: italic;
+		text-align: right;
+		margin-top: 0.25em;
+	}
+
+	li {
+		border-bottom: 1px solid var(--color-border-default);
+		padding-bottom: 0.25em;
+	}
+}
+@media only screen and (min-width: 480px) {
+	ul.recipe-ul {
+		grid-template-columns: 1fr 1fr;
+	}
+	aside ul.recipe-ul {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+@media only screen and (min-width: 960px) {
+	ul.recipe-ul {
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+	}
+	aside ul.recipe-ul {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}
+
+@media only screen and (min-width: 1100px) {
+	aside ul.recipe-ul {
+		grid-template-columns: 1fr;
+	}
+}

src/_styles/layout/content.css

@@ -30,15 +30,4 @@
 	padding: var(--space-l);
 	border-radius: var(--border-radius-small);
 	background-color: var(--color-surface-secondary);
-
-	ul {
-		@extend %list-reset;
-
-		time {
-			display: block;
-			font-style: italic;
-			text-align: right;
-			margin-top: 0.25em;
-		}
-	}
 }

src/content/index.md

@@ -1,10 +1,21 @@
 ---
 layout: "layouts/index"
 permalink: "/index.html"
+eleventyImport:
+  collections: ["featured"]
 ---
 
 Welcome to our AI-Generated Vegan Recipe Page, a unique culinary destination where the fusion of technology and diverse global flavors brings you an exclusive range of vegan recipes. We are thrilled to introduce you to our four AI-created chef personas, each representing a different corner of the world, infusing their unique cultural touch into vegan cooking.
 
+## Newest Recipe
+
+{% set latestRecipe = collections.featured[0].data %}
+<a class="index" href="{{ collections.featured[0].url }}">
+{% figure latestRecipe.figureRecipe.caption %}
+    {% picture latestRecipe.figureRecipe.imageSrc, latestRecipe.figureRecipe.imageTitle, latestRecipe.figureRecipe.imageAlt, latestRecipe.figureRecipe.loading %}
+{% endfigure %}
+</a>
+
 ## Meet Our Chefs
 
 Emily from America brings the sizzle and smoke of vegan BBQ to your table with her smoky BBQ tempeh ribs and grilled jackfruit, redefining American BBQ with a vegan twist; Hiroshi from Asia is an expert in vegan sushi and noodle dishes, blending traditional Asian flavors with plant-based ingredients like avocado cucumber sushi rolls and vegan ramen; Isabella from Europe takes you on a journey through Italy with her vegan pastas and pizzas, showcasing the versatility of Italian vegan cuisine with dishes like creamy mushroom risotto and hand-tossed pizza; and Nia from Africa offers a colorful exploration of African cuisine with her Ethiopian lentil stew and Moroccan vegetable tagine, infusing rich African flavors into her vegan creations. [Meet them here](/our-chefs)

src/content/posts/2024-01-19-african-spiced-vegan-lunch.md → src/content/posts/2024-01-05-african-spiced-vegan-lunch.md

@@ -11,7 +11,7 @@ tags:
   - "Nia"
 figureRecipe: 
   caption: "African Spiced Vegan Lunch"
-  imageSrc: "./src/media/2024-01-19-african-spiced-vegan-lunch.png"
+  imageSrc: "./src/media/2024-01-05-african-spiced-vegan-lunch.png"
   imageTitle: "African Spiced Vegan Lunch"
   imageAlt: "Generate an image that illustrates a lunch table setting bathed in sunlight coming in from a near window. In the center, there's a vibrant, tantalizing African vegan meal, intricately seasoned with spices such as cumin, paprika, turmeric, and coriander. This dish combines cooked sorghum and black-eyed peas, and is subtly garnished with bright green cilantro. Additional small bowls surround the main plate, offering more servings of the sorghum and peas. A side of freshly baked bread is present, as well as a glass of cool, refreshing lemonade. The ambience is inviting, with lively colors and textures, reflecting the richness of African vegan culinary culture."
   loading: "eager"
@@ -27,29 +27,29 @@ Looking for a simple yet delicious vegan lunch? Try out this flavorful African-i
 
 ## Ingredients
 
-- 1 cup cooked sorghum
-- 1 cup cooked black-eyed peas
-- 1 small red onion, finely chopped
-- 2 cloves garlic, minced
-- 1 small red bell pepper, diced
-- 1 small yellow bell pepper, diced
-- 1 tablespoon olive oil
-- 1 teaspoon ground cumin
-- 1 teaspoon paprika
-- 1/2 teaspoon turmeric
-- 1/2 teaspoon ground coriander
-- Salt and pepper to taste
+- 1 cup cooked sorghum
+- 1 cup cooked black-eyed peas
+- 1 small red onion, finely chopped
+- 2 cloves garlic, minced
+- 1 small red bell pepper, diced
+- 1 small yellow bell pepper, diced
+- 1 tablespoon olive oil
+- 1 teaspoon ground cumin
+- 1 teaspoon paprika
+- 1/2 teaspoon turmeric
+- 1/2 teaspoon ground coriander
+- Salt and pepper to taste
 - Fresh cilantro, for garnish
 
 ## Instructions
 
-1. In a large pan, heat the olive oil over medium heat.
-2. Add the chopped red onion and minced garlic to the pan. Sauté until fragrant and translucent.
-3. Add the diced red and yellow bell peppers to the pan and cook until slightly softened.
-4. Sprinkle the ground cumin, paprika, turmeric, and ground coriander over the vegetables. Stir well to coat.
-5. Add the cooked sorghum and black-eyed peas to the pan. Mix everything together until well combined.
-6. Season with salt and pepper to taste. Cook for an additional 2-3 minutes to heat everything through.
-7. Remove from heat and garnish with fresh cilantro.
+1. In a large pan, heat the olive oil over medium heat.
+2. Add the chopped red onion and minced garlic to the pan. Sauté until fragrant and translucent.
+3. Add the diced red and yellow bell peppers to the pan and cook until slightly softened.
+4. Sprinkle the ground cumin, paprika, turmeric, and ground coriander over the vegetables. Stir well to coat.
+5. Add the cooked sorghum and black-eyed peas to the pan. Mix everything together until well combined.
+6. Season with salt and pepper to taste. Cook for an additional 2-3 minutes to heat everything through.
+7. Remove from heat and garnish with fresh cilantro.
 8. Serve hot and enjoy!
 
 Enjoy this delightful vegan dish and experience the rich flavors of African cuisine. It's a perfect option for a quick and nutritious lunch.

src/content/posts/2024-01-19-warm-breakfast-bowl.md → src/content/posts/2024-01-06-warm-breakfast-bowl.md

@@ -9,7 +9,7 @@ tags:
   - "Isabella"
 figureRecipe: 
   caption: "Warm Breakfast Bowl"
-  imageSrc: "./src/media/2024-01-19-warm-breakfast-bowl.png"
+  imageSrc: "./src/media/2024-01-06-warm-breakfast-bowl.png"
   imageTitle: "Warm Breakfast Bowl"
   imageAlt: "Visualize a cozy and comforting breakfast scene, set on a beautifully arranged table that basks in soft morning light, exuding a serene and inviting ambiance. At the center of the table is a steaming bowl filled with creamy oats cooked in almond milk infused with flavorful mashed banana, maple syrup, cinnamon, and vanilla extract. Adorning this oat meal bowl are vibrant toppings - bright slices of strawberries, blueberries, and banana, along with crunchy almonds and walnuts for texture. Optional coconut flakes add an adventurous touch. This wholesome vegan breakfast radiates warmth and happiness, symbolizing a refreshing start to the day."
   loading: "eager"

src/content/posts/2024-01-19-african-inspired-vegan-porridge.md → src/content/posts/2024-01-07-african-inspired-vegan-porridge.md

@@ -12,7 +12,7 @@ tags:
   - "Nia"
 figureRecipe: 
   caption: "African-Inspired Vegan Porridge"
-  imageSrc: "./src/media/2024-01-19-african-inspired-vegan-porridge.png"
+  imageSrc: "./src/media/2024-01-07-african-inspired-vegan-porridge.png"
   imageTitle: "African-Inspired Vegan Porridge"
   imageAlt: "Visualize a calm morning scenario. Located on a grand table situated against the tranquil backdrop of nature, a cold breakfast spread is set. In the middle, a bowl of African-Inspired Vegan Porridge emanates welcoming steam carrying the fragrance of spices like cinnamon, nutmeg, and ginger. The table is beautifully decorated with colorful fresh toppings like sliced bananas, chopped nuts, and coconut flakes, all meticulously arranged. The serving of porridge gleams with a tantalising drizzle of maple syrup. Natural light softly streams through a nearby window, imbuing the scene with a comforting glow and illuminating the vibrant colors of the culinary arrangement. Enjoy this visual experience of a peaceful morning with a delectable African-inspired vegan breakfast."
   loading: "eager"

src/content/posts/2024-01-19-bbq-tempeh-bowl.md → src/content/posts/2024-01-08-bbq-tempeh-bowl.md

@@ -9,7 +9,7 @@ tags:
   - "Emily"
 figureRecipe: 
   caption: "BBQ Tempeh Bowl"
-  imageSrc: "./src/media/2024-01-19-bbq-tempeh-bowl.png"
+  imageSrc: "./src/media/2024-01-08-bbq-tempeh-bowl.png"
   imageTitle: "BBQ Tempeh Bowl"
   imageAlt: "Depict a vibrant vegan dinner setting featuring a BBQ Tempeh Bowl. Show a dinner table holding a luscious bowl overflowing with grilled tempeh, fluffy quinoa, vibrant bell peppers, sliced red onions, sweet corn kernels, creamy avocado slices, and a sprinkle of fresh cilantro, all basking under the warm glow of a setting sun. An aroma of BBQ sauce permeates the air, with a fresh lime wedge poised for squeezing over the bowl. The viewer is virtually sat at the table, anticipation evident, ready to explore this culinary delight. The scene is meant to evoke the sensation of relishing each bite of this healthy and flavorful dish."
   loading: "eager"

src/content/posts/2024-01-19-chilled-millet-salad-with-spiced-chickpeas.md → src/content/posts/2024-01-08-chilled-millet-salad-with-spiced-chickpeas.md

@@ -11,7 +11,7 @@ tags:
   - "Nia"
 figureRecipe: 
   caption: "Chilled Millet Salad with Spiced Chickpeas"
-  imageSrc: "./src/media/2024-01-19-chilled-millet-salad-with-spiced-chickpeas.png"
+  imageSrc: "./src/media/2024-01-08-chilled-millet-salad-with-spiced-chickpeas.png"
   imageTitle: "Chilled Millet Salad with Spiced Chickpeas"
   imageAlt: "Generate an image of a rustic, warmly lit dinner table set with a large, colorful bowl of Chilled Millet Salad with Spiced Chickpeas. The salad should be vibrant and textured, showcasing the fluffy millet grains, crispy spiced chickpeas, diced red bell pepper, and cucumber mixed in. Sprigs of fresh coriander are scattered throughout, and the dish is drizzled with a sheen of lemon juice and olive oil. The dinner table should also feature a few other elements suggesting a cold weather - perhaps a lit candle, a cozy plaid tablecloth, or a steaming cup of herbal tea. The overall mood should be inviting and comforting, with the salad as the star of the scene, ready to be enjoyed."
   loading: "eager"

src/content/posts/2024-01-19-african-inspired-vegan-curry.md → src/content/posts/2024-01-09-african-inspired-vegan-curry.md

@@ -10,7 +10,7 @@ tags:
   - "Nia"
 figureRecipe: 
   caption: "African-Inspired Vegan Curry"
-  imageSrc: "./src/media/2024-01-19-african-inspired-vegan-curry.png"
+  imageSrc: "./src/media/2024-01-09-african-inspired-vegan-curry.png"
   imageTitle: "African-Inspired Vegan Curry"
   imageAlt: "Visualize a homely kitchen scene with an African-inspired meal being served. See a modest dinner table boasting a piping hot bowl of vegan curry. The curry looks vibrant with an assortment of multihued vegetables immersed in creamy coconut milk, sprinkled generously with aromatic spices. Fresh cilantro adds a striking contrast with its bright green hue. See perfectly cut sweet potatoes, red-yellow bell peppers, and crunchy bits of carrots and zucchini interspersed in the curry, with cooked chickpeas peppering through for a protein punch. Wafts of curry powder, paprika, cumin, and turmeric mix into the air, setting a tantalizing aroma. The smooth, rich creaminess of coconut milk adds a layer of indulgence, making each bite a gastronomic delight. The meal emanates a colorful, aromatic richness typical of African cuisine, while also promising to be a wholesome, healthful dinner option. You are seated at this table, ready to experience this exciting burst of flavors. The warmth of the curry pot, the liveliness of its colors, and the enticing smells present a feast for your senses. The meal leaves you satiated, with an unforgettable flavor experience that transports you to the very heart of Africa. Bon appétit!"
   loading: "eager"

src/content/recipes.md

@@ -6,7 +6,7 @@ eleventyNavigation:
   order: 1
 pagination:
   data: "collections.posts"
-  size: 5
+  size: 8
 permalink: "/recipes{% if pagination.pageNumber > 0 %}/{{ pagination.pageNumber + 1 }}{% endif %}/index.html"
 title: "Recipes"
 ---

src/site.css

@@ -35,6 +35,7 @@
 @import "./_styles/components/footnotes.css";
 @import "./_styles/components/tags.css";
 @import "./_styles/components/chefs.css";
+@import "./_styles/components/recipe-list.css";
 
 /* Vendor */
 @import "./_styles/vendor/prism.css";