setup recipe index page, added js to search recipes, tweaks to css, updates to recipes including new image file

18 files changed, 265 insertions, 117 deletions

diff --git a/build_posts.rb b/build_posts.rb
index 53a18ac..ec03b77 100644
--- a/build_posts.rb
+++ b/build_posts.rb
@@ -25,7 +25,6 @@ def filename
 	return file
 end
 
-
 i = 0
 while (i < content.length)
 	@content = content[i]
@@ -36,12 +35,4 @@ while (i < content.length)
 		f.write(template.result)
 		end
 	i += 1
-end
-
-=begin
-filename.each do |file|
-	File.open(file, 'w') do |f|
-		f.write(template.result)
-	end
-end
-=end
\ No newline at end of file
+end
\ No newline at end of file
diff --git a/build_recipe_directory.rb b/build_recipe_directory.rb
index 433e179..de61f4f 100644
--- a/build_recipe_directory.rb
+++ b/build_recipe_directory.rb
@@ -7,9 +7,9 @@ end
 
 def content
   output = ""
-  Dir.foreach("./content/posts") do |post_filename|
-    if post_filename.include?("md")
-      output.concat(Kramdown::Document.new(File.read("./content/posts/#{post_filename}")).to_html)
+  Dir.foreach("./content/main-pages") do |post_filename|
+    if post_filename.include?("recipes.md")
+      output.concat(Kramdown::Document.new(File.read("./content/main-pages/#{post_filename}")).to_html)
     end
   end
   return output
diff --git a/build_website.sh b/build_website.sh
index f9b062b..e153716 100755
--- a/build_website.sh
+++ b/build_website.sh
@@ -2,5 +2,5 @@
 
 bin/build_index
 bin/build_about
-bin/build_blog
-bin/build_posts
\ No newline at end of file
+bin/build_posts
+bin/build_recipe_directory
\ No newline at end of file
diff --git a/content/main-pages/index.md b/content/main-pages/index.md
index 1b6d0a0..e04e393 100644
--- a/content/main-pages/index.md
+++ b/content/main-pages/index.md
@@ -6,7 +6,7 @@
 			<img src="../images/recipe-images/bread-3.JPG" style="width:100%; border-radius:20px;">
 		</div>
 		<div class="slides">
-			<img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;">
+			<img src="../images/recipe-images/banana-muffin.JPG" style="width:100%; border-radius:20px;">
 		</div>
 		<div class="slides">
 			<img src="../images/placeholder/home3.jpg" style="width:100%; border-radius:20px;">
diff --git a/content/main-pages/recipes.md b/content/main-pages/recipes.md
new file mode 100644
index 0000000..c31044f
--- /dev/null
+++ b/content/main-pages/recipes.md
@@ -0,0 +1,62 @@
+<div id="recipe-search">
+	<h1>Recipes</h1>
+	<input type="text" id="searchInput" onkeyup="search()" placeholder="Search recipes...">
+</div>
+
+<div id="recipe">
+	
+</div>
+<script>
+	//setup arrays for recipe data
+	var names = [];
+	var images = [];
+	var links = [];
+
+	//recipe names
+	names[0] = "<p>Vegan Banana Loaf / Muffins</p>";
+	names[1] = "<p>Vegan Maple Bread</p>";
+
+	//recipe image links
+	images[0] = '<img src="../images/recipe-images/banana-muffin.JPG">';
+	images[1] = '<img src="../images/recipe-images/bread-3.JPG">';
+
+	//recipe hrefs
+	links[0] = '<a href="banana-muffins.md.html"</a>';
+	links[1] = '<a href="maple-bread.md.html"</a>';
+
+	//show arrays in console
+	console.log(names, images, links);
+
+	var box;
+
+	//loop through recpie names, images, and links to display on page
+	for (var i = 0; i < names.length; i++) {
+		box = document.createElement('div');
+		box.className = 'boxes';
+		box.innerHTML = links[i] + names[i] + images[i];
+		document.getElementById('recipe').appendChild(box);
+	}
+
+	//function to search recipes
+	function search() {
+		// Declare variables
+		var input, filter, div, boxes, a, i, txtValue;
+		input = document.getElementById('searchInput');
+		filter = input.value.toUpperCase();
+		div = document.getElementById("recipe");
+		boxes = document.getElementsByClassName('boxes');
+
+		// Loop through all boxesst items, and hide those who don't match the search query
+		for (i = 0; i < boxes.length; i++) {
+			a = boxes[i].getElementsByTagName("a")[0];
+			txtValue = a.textContent || a.innerText;
+			if (txtValue.toUpperCase().indexOf(filter) > -1) {
+				boxes[i].style.display = "";
+			} else {
+				boxes[i].style.display = "none";
+			}
+		}
+	}
+	
+</script>
+
diff --git a/content/posts/banana-muffins.md b/content/posts/banana-muffins.md
index e09b03a..096a4f1 100644
--- a/content/posts/banana-muffins.md
+++ b/content/posts/banana-muffins.md
@@ -1,14 +1,17 @@
-# Vegan Banana Loaf / Muffins {#recipe-title}
+#Vegan Banana Loaf / Muffins {#recipe-title}
 
 <div markdown=1 class="image-and-text">
 
 {::nomarkdown} 
-<img src="../images/placeholder/home3.jpg" class="image">
+<img src="../images/recipe-images/banana-muffin.JPG" class="image">
 {:/}
 
 <div markdown=1 class="text">
 
-## Ingredients
+##Description
+This recipe is adapted from my great grandmother’s Banana Loaf recipe. It Works great as a loaf or muffins. No need for a proper egg substitute in this recipe as the bananas accomplish this on their own. For the oil I strongly recommend using Coconut Oil as it yields a buttery flavour and texture. 
+
+##Ingredients
 - 1/4 cup Oil (Coconut or other)
 - 1 cup Sugar
 - 3 or 4 bananas (depending on size: 3 large or 4 small) Approx: 1 cup
@@ -16,14 +19,31 @@
 - 1 cup whole wheat flour
 - 1/4 tsp salt
 - 1 tsp baking soda
-- Vegan 'Dairy Free' chocolate chips (optional)
+- Vegan 'Dairy Free' chocolate chips (optional)[^2]
 
 ##Instructions
-1. Heat oven to 350 degrees fahrenheit.
-2. Cream oil and sugar.
-3. Add mashed banana and baking soda.
-4. Add flour and salt and mix until combined. 
-5. Add chocolate chips if desired.
+1. Heat oven to 350 degrees Fahrenheit.
+2. Add Oil and Sugar to large mixing bowl.
+3. Cream oil and sugar.
+4. Mash Bananas in separate smaller bowl.
+5. Add mashed banana and baking soda to the oil and sugar mix.
+6. Add flour and salt.
+7. Mix ingredients by hand until combined. Avoid over-mixing.
+8. Add chocolate chips if desired.
+9. Grease Muffin Pan or Loaf pan with Coconut Oil.
+10. Add muffin batter to pan.
+11. Bake until brown on top and firm to the touch.[^1]
+
+[^1]:For muffins bake approx 25-30 minutes.
+	For Loaf bake approx 50-60 minutes.
+
+
+	Note: Your cooking time may vary based on your oven.
+
+[^2]:For Vegan chocolate chips I recommend reading the ingredients rather than looking for ones that are advertised as Vegan. Most semi-sweet chocolate chips other than ‘Chipits’ are dairy free. Bakers semi-sweet is a good option. Enjoy Life are a good option if you need to avoid other potential allergens like soy. Personally I find them overpriced compared to grocery store house brands or Bakers. 
+
+* footnotes will be placed here. This line is necessary
+{:footnotes}
 
 
 </div>
diff --git a/content/posts/maple-bread.md b/content/posts/maple-bread.md
index 8ba0851..7544047 100644
--- a/content/posts/maple-bread.md
+++ b/content/posts/maple-bread.md
@@ -1,4 +1,4 @@
-# Quick Vegan Whole Wheat Maple Bread {#recipe-title}
+#Quick Vegan Whole Wheat Maple Bread {#recipe-title}
 
 <div markdown=1 class="image-and-text">
 
@@ -11,7 +11,7 @@
 ##Description
 This recipe is for a single loaf of whole wheat bread. This recipe is quick and easy! We will use the oven to do our dough rise which will save both time and effort.
 
-## Ingredients (1 loaf)
+##Ingredients (1 loaf)
 - 1/2 Tablespoon Active Dry Yeast or Traditional Yeast
 - 1/3 cup Maple Syrup or Sugar (any form of sugar will work)
 - 1 and 1/2 Cups or 425ml Warm Water
diff --git a/head.html.erb b/head.html.erb
new file mode 100644
index 0000000..54a1636
--- /dev/null
+++ b/head.html.erb
@@ -0,0 +1,5 @@
+<head>
+    <title>Pantry of Plants</title>
+    <link rel="stylesheet" href="../style/style.css">
+    <script src="../scripts/image-slide.js" defer></script>
+  </head>
diff --git a/images/recipe-images/banana-muffin.JPG b/images/recipe-images/banana-muffin.JPG
new file mode 100755
index 0000000..588729a
--- /dev/null
+++ b/images/recipe-images/banana-muffin.JPG
diff --git a/output/about.html b/output/about.html
index 6dc92f2..4fb6ec2 100644
--- a/output/about.html
+++ b/output/about.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pantry of Plants</title>
     <link rel="stylesheet" href="../style/style.css">
     <script src="../scripts/image-slide.js" defer></script>
   </head>
+
   <body>
     <header>
 	<nav>
diff --git a/output/banana-muffins.md.html b/output/banana-muffins.md.html
index fb05606..5dd7644 100644
--- a/output/banana-muffins.md.html
+++ b/output/banana-muffins.md.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pantry of Plants</title>
     <link rel="stylesheet" href="../style/style.css">
     <script src="../scripts/image-slide.js" defer></script>
   </head>
+
   <body>
     <header>
 	<nav>
@@ -20,10 +22,13 @@
 
 <div class="image-and-text">
 
-<img src="../images/placeholder/home3.jpg" class="image">
+<img src="../images/recipe-images/banana-muffin.JPG" class="image">
 
   <div class="text">
 
+    <h2 id="description">Description</h2>
+    <p>This recipe is adapted from my great grandmother’s Banana Loaf recipe. It Works great as a loaf or muffins. No need for a proper egg substitute in this recipe as the bananas accomplish this on their own. For the oil I strongly recommend using Coconut Oil as it yields a buttery flavour and texture.</p>
+
     <h2 id="ingredients">Ingredients</h2>
     <ul>
       <li>1/4 cup Oil (Coconut or other)</li>
@@ -33,18 +38,38 @@
       <li>1 cup whole wheat flour</li>
       <li>1/4 tsp salt</li>
       <li>1 tsp baking soda</li>
-      <li>Vegan ‘Dairy Free’ chocolate chips (optional)</li>
+      <li>Vegan ‘Dairy Free’ chocolate chips (optional)<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">1</a></sup></li>
     </ul>
 
     <h2 id="instructions">Instructions</h2>
     <ol>
-      <li>Heat oven to 350 degrees fahrenheit.</li>
+      <li>Heat oven to 350 degrees Fahrenheit.</li>
+      <li>Add Oil and Sugar to large mixing bowl.</li>
       <li>Cream oil and sugar.</li>
-      <li>Add mashed banana and baking soda.</li>
-      <li>Add flour and salt and mix until combined.</li>
+      <li>Mash Bananas in separate smaller bowl.</li>
+      <li>Add mashed banana and baking soda to the oil and sugar mix.</li>
+      <li>Add flour and salt.</li>
+      <li>Mix ingredients by hand until combined. Avoid over-mixing.</li>
       <li>Add chocolate chips if desired.</li>
+      <li>Grease Muffin Pan or Loaf pan with Coconut Oil.</li>
+      <li>Add muffin batter to pan.</li>
+      <li>Bake until brown on top and firm to the touch.<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">2</a></sup></li>
     </ol>
 
+<div class="footnotes" role="doc-endnotes">
+  <ol>
+    <li id="fn:2" role="doc-endnote">
+      <p>For Vegan chocolate chips I recommend reading the ingredients rather than looking for ones that are advertised as Vegan. Most semi-sweet chocolate chips other than ‘Chipits’ are dairy free. Bakers semi-sweet is a good option. Enjoy Life are a good option if you need to avoid other potential allergens like soy. Personally I find them overpriced compared to grocery store house brands or Bakers. <a href="#fnref:2" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
+    </li>
+    <li id="fn:1" role="doc-endnote">
+      <p>For muffins bake approx 25-30 minutes.
+For Loaf bake approx 50-60 minutes.</p>
+
+      <p>Note: Your cooking time may vary based on your oven. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
+    </li>
+  </ol>
+</div>
+
   </div>
 
 </div>
diff --git a/output/index.html b/output/index.html
index 9b0d41a..401eb25 100644
--- a/output/index.html
+++ b/output/index.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pantry of Plants</title>
     <link rel="stylesheet" href="../style/style.css">
     <script src="../scripts/image-slide.js" defer></script>
   </head>
+
   <body>
     <header>
 	<nav>
@@ -23,7 +25,7 @@
 			<img src="../images/recipe-images/bread-3.JPG" style="width:100%; border-radius:20px;" />
 		</div>
 		<div class="slides">
-			<img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;" />
+			<img src="../images/recipe-images/banana-muffin.JPG" style="width:100%; border-radius:20px;" />
 		</div>
 		<div class="slides">
 			<img src="../images/placeholder/home3.jpg" style="width:100%; border-radius:20px;" />
diff --git a/output/maple-bread.md.html b/output/maple-bread.md.html
index 6bceebb..3d02bd1 100644
--- a/output/maple-bread.md.html
+++ b/output/maple-bread.md.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pantry of Plants</title>
     <link rel="stylesheet" href="../style/style.css">
     <script src="../scripts/image-slide.js" defer></script>
   </head>
+
   <body>
     <header>
 	<nav>
diff --git a/output/recipes.html b/output/recipes.html
index 01e10c7..90f57f3 100644
--- a/output/recipes.html
+++ b/output/recipes.html
@@ -1,9 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pantry of Plants</title>
     <link rel="stylesheet" href="../style/style.css">
     <script src="../scripts/image-slide.js" defer></script>
   </head>
+
   <body>
     <header>
 	<nav>
@@ -16,78 +18,68 @@
 </header>
 
     <div class="content">
-      <h1 id="recipe-title">Quick Vegan Whole Wheat Maple Bread</h1>
-
-<div class="image-and-text">
-
-<img src="../images/recipe-images/bread-3.jpg" class="image">
-
-  <div class="text">
-
-    <h2 id="description">Description</h2>
-    <p>This recipe is for a single loaf of whole wheat bread. This recipe is quick and easy! We will use the oven to do our dough rise which will save both time and effort.</p>
-
-    <h2 id="ingredients-1-loaf">Ingredients (1 loaf)</h2>
-    <ul>
-      <li>1/2 Tablespoon Active Dry Yeast or Traditional Yeast</li>
-      <li>1/3 cup Maple Syrup or Sugar (any form of sugar will work)</li>
-      <li>1 and 1/2 Cups or 425ml Warm Water</li>
-      <li>50ml (approx 1/6 cup) of Olive Oil</li>
-      <li>2 cups Whole Wheat Flour</li>
-      <li>1 and 3/4 cups White Flour</li>
-      <li>1/2 Tablespoon Salt</li>
-      <li>Extra Olive Oil and Salt to spread on top of bread</li>
-    </ul>
-
-    <h2 id="instructions">Instructions</h2>
-    <ol>
-      <li>Heat oven to 200 degrees fahrenheit. Warm a standard sized loaf pan (approx 8-1/2 x 4-1/2 x 2-1/2 inches – cast iron or non stick) in oven. Add Olive oil and cornmeal to the bottom of the pan.</li>
-      <li>Add yeast and sweetener of choice (sugar or maple syrup) to mixing bowl. Poor in warm water and give the mixture a few stirs. Let the yeast proof for about 5 minutes. (It should look foamy when it’s done).</li>
-      <li>Add the Olive Oil to the wet mixture.</li>
-      <li>Add the flour and salt to a large mixing bowl or stand mixer if you have one.</li>
-      <li>Add the wet ingredients to the dry.</li>
-      <li>If using a stand mixer, knead the dough for about 5 minutes. If you are kneading by hand it should take around 100 to 200 turns.</li>
-      <li>Place a little oil on your hands and shape dough into a loaf. Add 3 diagonal score marks to the top of the loaf. Cover load with Olive Oil and salt and place the pan in the warm oven to rise. After 20 minutes it should be doubled in size.</li>
-      <li>After the 20 minutes, turn oven to 350 degrees fahrenheit. Leave bread in oven and set your timer for 35 minutes.</li>
-      <li>Once the bread is golden brown it is done. Remove the loaf from the oven, brush top with Olive Oil, remove from pan and cool on a cooling rack.</li>
-      <li>Enjoy :)</li>
-    </ol>
-
-  </div>
-
+      <div id="recipe-search">
+	<h1>Recipes</h1>
+	<input type="text" id="searchInput" onkeyup="search()" placeholder="Search recipes..." />
 </div>
-<h1 id="recipe-title">Vegan Banana Loaf / Muffins</h1>
-
-<div class="image-and-text">
-
-<img src="../images/placeholder/home3.jpg" class="image">
-
-  <div class="text">
-
-    <h2 id="ingredients">Ingredients</h2>
-    <ul>
-      <li>1/4 cup Oil (Coconut or other)</li>
-      <li>1 cup Sugar</li>
-      <li>3 or 4 bananas (depending on size: 3 large or 4 small) Approx: 1 cup</li>
-      <li>1/2 cup white flour</li>
-      <li>1 cup whole wheat flour</li>
-      <li>1/4 tsp salt</li>
-      <li>1 tsp baking soda</li>
-      <li>Vegan ‘Dairy Free’ chocolate chips (optional)</li>
-    </ul>
-
-    <h2 id="instructions">Instructions</h2>
-    <ol>
-      <li>Heat oven to 350 degrees fahrenheit.</li>
-      <li>Cream oil and sugar.</li>
-      <li>Add mashed banana and baking soda.</li>
-      <li>Add flour and salt and mix until combined.</li>
-      <li>Add chocolate chips if desired.</li>
-    </ol>
-
-  </div>
 
+<div id="recipe">
+	
 </div>
+<script>
+	//setup arrays for recipe data
+	var names = [];
+	var images = [];
+	var links = [];
+
+	//recipe names
+	names[0] = "<p>Vegan Banana Loaf / Muffins</p>";
+	names[1] = "<p>Vegan Maple Bread</p>";
+
+	//recipe image links
+	images[0] = '<img src="../images/recipe-images/banana-muffin.JPG">';
+	images[1] = '<img src="../images/recipe-images/bread-3.JPG">';
+
+	//recipe hrefs
+	links[0] = '<a href="banana-muffins.md.html"</a>';
+	links[1] = '<a href="maple-bread.md.html"</a>';
+
+	//show arrays in console
+	console.log(names, images, links);
+
+	var box;
+
+	//loop through recpie names, images, and links to display on page
+	for (var i = 0; i < names.length; i++) {
+		box = document.createElement('div');
+		box.className = 'boxes';
+		box.innerHTML = links[i] + names[i] + images[i];
+		document.getElementById('recipe').appendChild(box);
+	}
+
+	//function to search recipes
+	function search() {
+		// Declare variables
+		var input, filter, div, boxes, a, i, txtValue;
+		input = document.getElementById('searchInput');
+		filter = input.value.toUpperCase();
+		div = document.getElementById("recipe");
+		boxes = document.getElementsByClassName('boxes');
+
+		// Loop through all boxesst items, and hide those who don't match the search query
+		for (i = 0; i < boxes.length; i++) {
+			a = boxes[i].getElementsByTagName("a")[0];
+			txtValue = a.textContent || a.innerText;
+			if (txtValue.toUpperCase().indexOf(filter) > -1) {
+				boxes[i].style.display = "";
+			} else {
+				boxes[i].style.display = "none";
+			}
+		}
+	}
+	
+</script>
+
 
     </div>
     <footer>
diff --git a/recipe-directory-template.html.erb b/recipe-directory-template.html.erb
index 55d0c7c..bbfe4dc 100644
--- a/recipe-directory-template.html.erb
+++ b/recipe-directory-template.html.erb
@@ -1,9 +1,6 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title>Pantry of Plants</title>
-    <link rel="stylesheet" href="../style/style.css">
-    <script src="../scripts/image-slide.js" defer></script>
-  </head>
+  <%= render "head.html.erb" %>
   <body>
     <%= render "header.html.erb" %>
     <div class="content">
diff --git a/recipe-template.html.erb b/recipe-template.html.erb
index 2ef2340..9c24d50 100644
--- a/recipe-template.html.erb
+++ b/recipe-template.html.erb
@@ -1,9 +1,6 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title>Pantry of Plants</title>
-    <link rel="stylesheet" href="../style/style.css">
-    <script src="../scripts/image-slide.js" defer></script>
-  </head>
+  <%= render "head.html.erb" %>
   <body>
     <%= render "header.html.erb" %>
     <div class="content">
diff --git a/style/style.css b/style/style.css
index 658778b..76e3ed2 100644
--- a/style/style.css
+++ b/style/style.css
@@ -246,6 +246,62 @@ ol li::before {
 	direction: rtl;
 }
 
+#recipe {
+	display: flex;
+	text-align: center;
+	justify-content: space-around;
+	padding-bottom: 20px;
+}
+
+#recipe-search {
+	display: flex;
+	justify-content: space-between;
+	padding: 20px;
+}
+
+#recipe-search h1 {
+	margin-top: -25px;
+}
+
+.boxes img {
+	width: 90%;
+	border-radius: 20px;
+}
+
+.boxes {
+	padding: 4px;
+	text-align: center;
+	width: 33%;
+	background-color: #F1F1F1;
+	color: #758B7A;
+	border-radius: 20px;
+	transition-duration: 0.5s;
+	font-size: 24px;
+	font-weight: bold;
+}
+
+.boxes:hover {
+	filter: brightness(80%);
+}
+
+#searchInput {
+	border-radius: 20px;
+	border: none;
+	height: 40px;
+	width: 200px;
+	font-weight: bold;
+	color: #758B7A;
+	font-size: 1.25rem;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #B8C5BB;
+  opacity: 1; /* Firefox */
+}
+
+
+
+
 @media only screen and (min-width: 355px) {
 	.logo {
 		width: 330px;
diff --git a/template.html.erb b/template.html.erb
index 868cd4c..62b7a15 100644
--- a/template.html.erb
+++ b/template.html.erb
@@ -1,9 +1,6 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title>Pantry of Plants</title>
-    <link rel="stylesheet" href="../style/style.css">
-    <script src="../scripts/image-slide.js" defer></script>
-  </head>
+  <%= render "head.html.erb" %>
   <body>
     <%= render "header.html.erb" %>
     <%= content %>