diff options
| author | scottj <jones.scott0391@gmail.com> | 2021-08-16 13:29:37 -0700 |
|---|---|---|
| committer | scottj <jones.scott0391@gmail.com> | 2021-08-16 13:29:37 -0700 |
| commit | cdaeb4a0089572f821c2ce1fafec725c56ff20ef (patch) | |
| tree | b6a1377353b6c5a29ee5114dfe025dbc1012ea11 | |
| parent | 92628707867104138b8d243b1e50b8230f66b74e (diff) | |
altered layout so index and about page are also generated from md files. created an sh file that runs all bin files to generate full static site
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | about.html | 42 | ||||
| -rwxr-xr-x | bin/build_about | 3 | ||||
| -rwxr-xr-x | bin/build_index | 3 | ||||
| -rw-r--r-- | build_about.rb | 19 | ||||
| -rw-r--r-- | build_blog.rb | 4 | ||||
| -rw-r--r-- | build_index.rb | 19 | ||||
| -rwxr-xr-x | build_website.sh | 5 | ||||
| -rw-r--r-- | content/main-pages/about.md | 18 | ||||
| -rw-r--r-- | content/main-pages/index.md | 29 | ||||
| -rw-r--r-- | content/posts/my-new-recipe.md (renamed from posts/my-new-recipe.md) | 0 | ||||
| -rw-r--r-- | content/posts/my-newer-recipe.md (renamed from posts/my-newer-recipe.md) | 0 | ||||
| -rw-r--r-- | header.html.erb | 16 | ||||
| -rw-r--r-- | index.html | 55 | ||||
| -rw-r--r-- | output/about.html | 43 | ||||
| -rw-r--r-- | output/index.html | 54 | ||||
| -rw-r--r-- | output/recipes.html | 17 | ||||
| -rw-r--r-- | style/style.css | 4 | ||||
| -rw-r--r-- | template.html.erb | 1 |
19 files changed, 221 insertions, 115 deletions
@@ -21,8 +21,8 @@ bundle install and finally generate the blog! ```sh -bin/build_blog -open output/blog.html +sh build_website.sh +open output/index.html ``` diff --git a/about.html b/about.html deleted file mode 100644 index a3dc16a..0000000 --- a/about.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>Pantry of Plants</title> - <link rel="stylesheet" href="style/style.css"> -</head> -<body> - <header> - <nav> - <a href="index.html"> - <img src="images/pantry-of-plants-logo.png" class="logo"> - </a> - <div class="nav-text-outer"> - <a href="output/recipes.html" class="nav-text">Recipes</a> - <a href="about.html" class="nav-text" id="active">About</a> - </div> - </nav> - </header> - <div class="content"> - <h1>About</h1> - <div class="image-and-text"> - <img src="images/placeholder/home3.jpg" class="image"> - <div class="text"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - </p> - </div> - </div> - </div> - <footer> - <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="images/mail.svg" class="mail-2"></a> - <p>© 2021 Pantry of Plants</p> - </footer> -</body> -</html>
\ No newline at end of file diff --git a/bin/build_about b/bin/build_about new file mode 100755 index 0000000..06d251e --- /dev/null +++ b/bin/build_about @@ -0,0 +1,3 @@ +#!/usr/bin/env bash + +ruby build_about.rb > output/about.html diff --git a/bin/build_index b/bin/build_index new file mode 100755 index 0000000..bf2025c --- /dev/null +++ b/bin/build_index @@ -0,0 +1,3 @@ +#!/usr/bin/env bash + +ruby build_index.rb > output/index.html diff --git a/build_about.rb b/build_about.rb new file mode 100644 index 0000000..5e56ab7 --- /dev/null +++ b/build_about.rb @@ -0,0 +1,19 @@ +require 'erb' +require 'kramdown' + +def render(partial_path) + ERB.new(File.read(partial_path)).result(binding) +end + +def content + output = "" + Dir.foreach("./content/main-pages") do |post_filename| + if post_filename.include?("about.md") + output.concat(Kramdown::Document.new(File.read("./content/main-pages/#{post_filename}")).to_html) + end + end + return output +end + +template = ERB.new(File.read('template.html.erb')) +puts template.result(binding)
\ No newline at end of file diff --git a/build_blog.rb b/build_blog.rb index 405143d..1ff5ea9 100644 --- a/build_blog.rb +++ b/build_blog.rb @@ -7,9 +7,9 @@ end def content output = "" - Dir.foreach("./posts") do |post_filename| + Dir.foreach("./content/posts") do |post_filename| if post_filename.include?("md") - output.concat(Kramdown::Document.new(File.read("./posts/#{post_filename}")).to_html) + output.concat(Kramdown::Document.new(File.read("./content/posts/#{post_filename}")).to_html) end end return output diff --git a/build_index.rb b/build_index.rb new file mode 100644 index 0000000..aae1268 --- /dev/null +++ b/build_index.rb @@ -0,0 +1,19 @@ +require 'erb' +require 'kramdown' + +def render(partial_path) + ERB.new(File.read(partial_path)).result(binding) +end + +def content + output = "" + Dir.foreach("./content/main-pages") do |post_filename| + if post_filename.include?("index.md") + output.concat(Kramdown::Document.new(File.read("./content/main-pages/#{post_filename}")).to_html) + end + end + return output +end + +template = ERB.new(File.read('template.html.erb')) +puts template.result(binding)
\ No newline at end of file diff --git a/build_website.sh b/build_website.sh new file mode 100755 index 0000000..ede3690 --- /dev/null +++ b/build_website.sh @@ -0,0 +1,5 @@ +#!/bin/bash + +bin/build_index +bin/build_about +bin/build_blog
\ No newline at end of file diff --git a/content/main-pages/about.md b/content/main-pages/about.md new file mode 100644 index 0000000..fd048f8 --- /dev/null +++ b/content/main-pages/about.md @@ -0,0 +1,18 @@ +<div class="content"> + <h1>About</h1> + <div class="image-and-text"> + <img src="../images/placeholder/home3.jpg" class="image"> + <div class="text"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + </p> + </div> + </div> +</div>
\ No newline at end of file diff --git a/content/main-pages/index.md b/content/main-pages/index.md new file mode 100644 index 0000000..4387bec --- /dev/null +++ b/content/main-pages/index.md @@ -0,0 +1,29 @@ +<div class="content"> + <!-- Slideshow container --> + <div class="slideshow-container"> + <!-- Full-width images with rounded edges --> + <div class="slides"> + <img src="../images/placeholder/home1.jpg" style="width:100%; border-radius:20px;"> + </div> + <div class="slides"> + <img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;"> + </div> + <div class="slides"> + <img src="../images/placeholder/home3.jpg" style="width:100%; border-radius:20px;"> + </div> + </div> + <!-- The dots/circles --> + <div style="text-align:center"> + <span class="dot" onclick="currentSlide(1)"></span> + <span class="dot" onclick="currentSlide(2)"></span> + <span class="dot" onclick="currentSlide(3)"></span> + </div> + <div class="home-links"> + <a class="button" id="explore" href="recipes.html"> + <p>Explore Recipes</p> + </a> + <a class="button" id="contact" href="mailto:scott@pantryofplants.ca"> + <p>Contact <img src="../images/mail.svg" class="mail-1"></p> + </a> + </div> +</div>
\ No newline at end of file diff --git a/posts/my-new-recipe.md b/content/posts/my-new-recipe.md index 9c854aa..9c854aa 100644 --- a/posts/my-new-recipe.md +++ b/content/posts/my-new-recipe.md diff --git a/posts/my-newer-recipe.md b/content/posts/my-newer-recipe.md index 28d583e..28d583e 100644 --- a/posts/my-newer-recipe.md +++ b/content/posts/my-newer-recipe.md diff --git a/header.html.erb b/header.html.erb index 3a262da..efe40c9 100644 --- a/header.html.erb +++ b/header.html.erb @@ -1,7 +1,9 @@ -<nav> - <a href="../index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> - <div class="nav-text-outer"> - <a href="recipes.html" class="nav-text" id="active">Recipes</a> - <a href="../about.html" class="nav-text">About</a> - </div> -</nav> +<header> + <nav> + <a href="index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="about.html" class="nav-text">About</a> + </div> + </nav> +</header> diff --git a/index.html b/index.html deleted file mode 100644 index 5e3b251..0000000 --- a/index.html +++ /dev/null @@ -1,55 +0,0 @@ -<!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> - <a href="index.html"> - <img src="images/pantry-of-plants-logo.png" class="logo"> - </a> - <div class="nav-text-outer"> - <a href="output/recipes.html" class="nav-text">Recipes</a> - <a href="about.html" class="nav-text">About</a> - </div> - </nav> - </header> - <div class="content"> - <!-- Slideshow container --> - <div class="slideshow-container"> - <!-- Full-width images with rounded edges --> - <div class="slides"> - <img src="images/placeholder/home1.jpg" style="width:100%; border-radius:20px;"> - </div> - <div class="slides"> - <img src="images/placeholder/home2.jpg" style="width:100%; border-radius:20px;"> - </div> - <div class="slides"> - <img src="images/placeholder/home3.jpg" style="width:100%; border-radius:20px;"> - </div> - </div> - <!-- The dots/circles --> - <div style="text-align:center"> - <span class="dot" onclick="currentSlide(1)"></span> - <span class="dot" onclick="currentSlide(2)"></span> - <span class="dot" onclick="currentSlide(3)"></span> - </div> - <div class="home-links"> - <a class="button" id="explore" href="output/recipes.html"> - <p>Explore Recipes</p> - </a> - <a class="button" id="contact" href="mailto:scott@pantryofplants.ca"> - <p>Contact <img src="images/mail.svg" class="mail-1"></p> - </a> - </div> - </div> - - <footer> - <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="images/mail.svg" class="mail-2"></a> - <p>© 2021 Pantry of Plants</p> - </footer> -</body> -</html>
\ No newline at end of file diff --git a/output/about.html b/output/about.html new file mode 100644 index 0000000..6dc92f2 --- /dev/null +++ b/output/about.html @@ -0,0 +1,43 @@ +<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> + <a href="index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="about.html" class="nav-text">About</a> + </div> + </nav> +</header> + + <div class="content"> + <h1>About</h1> + <div class="image-and-text"> + <img src="../images/placeholder/home3.jpg" class="image" /> + <div class="text"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + </p> + </div> + </div> +</div> + + <footer> + <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a> + <p>© 2021 Pantry of Plants</p> +</footer> + + </body> +</html> diff --git a/output/index.html b/output/index.html new file mode 100644 index 0000000..be03e24 --- /dev/null +++ b/output/index.html @@ -0,0 +1,54 @@ +<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> + <a href="index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="about.html" class="nav-text">About</a> + </div> + </nav> +</header> + + <div class="content"> + <!-- Slideshow container --> + <div class="slideshow-container"> + <!-- Full-width images with rounded edges --> + <div class="slides"> + <img src="../images/placeholder/home1.jpg" style="width:100%; border-radius:20px;" /> + </div> + <div class="slides"> + <img src="../images/placeholder/home2.jpg" style="width:100%; border-radius:20px;" /> + </div> + <div class="slides"> + <img src="../images/placeholder/home3.jpg" style="width:100%; border-radius:20px;" /> + </div> + </div> + <!-- The dots/circles --> + <div style="text-align:center"> + <span class="dot" onclick="currentSlide(1)"></span> + <span class="dot" onclick="currentSlide(2)"></span> + <span class="dot" onclick="currentSlide(3)"></span> + </div> + <div class="home-links"> + <a class="button" id="explore" href="recipes.html"> + <p>Explore Recipes</p> + </a> + <a class="button" id="contact" href="mailto:scott@pantryofplants.ca"> + <p>Contact <img src="../images/mail.svg" class="mail-1" /></p> + </a> + </div> +</div> + + <footer> + <a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a> + <p>© 2021 Pantry of Plants</p> +</footer> + + </body> +</html> diff --git a/output/recipes.html b/output/recipes.html index bde9176..b3551f6 100644 --- a/output/recipes.html +++ b/output/recipes.html @@ -2,15 +2,18 @@ <head> <title>Pantry of Plants</title> <link rel="stylesheet" href="../style/style.css"> + <script src="../scripts/image-slide.js" defer></script> </head> <body> - <nav> - <a href="../index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> - <div class="nav-text-outer"> - <a href="recipes.html" class="nav-text" id="active">Recipes</a> - <a href="../about.html" class="nav-text">About</a> - </div> -</nav> + <header> + <nav> + <a href="index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a> + <div class="nav-text-outer"> + <a href="recipes.html" class="nav-text">Recipes</a> + <a href="about.html" class="nav-text">About</a> + </div> + </nav> +</header> <h1 id="big-header-boi">Big Header Boi</h1> diff --git a/style/style.css b/style/style.css index 74118bb..9c94afd 100644 --- a/style/style.css +++ b/style/style.css @@ -8,6 +8,10 @@ body { color: #758B7A; } +header { + padding-bottom: 8px; +} + .nav-text { padding-left: 10px; } diff --git a/template.html.erb b/template.html.erb index 1d9db76..868cd4c 100644 --- a/template.html.erb +++ b/template.html.erb @@ -2,6 +2,7 @@ <head> <title>Pantry of Plants</title> <link rel="stylesheet" href="../style/style.css"> + <script src="../scripts/image-slide.js" defer></script> </head> <body> <%= render "header.html.erb" %> |