Templates

luontola · Feb 23, 2018 · 9de139d · 9de139d
1 parent 30ce25e
commit 9de139d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 36 deletions.
diff --git a/app.rb b/app.rb
@@ -4,3 +4,11 @@
 get '/' do
   redirect to('/about.html')
 end
+
+get '/about.html' do
+  erb :about
+end
+
+get '/pictures.html' do
+  erb :pictures
+end
diff --git a/views/about.erb b/views/about.erb
@@ -0,0 +1,5 @@
+<img class="profile-picture" alt="My profile picture" src="http://web-intro.luontola.fi/html/ruby.png">
+
+<h1>Hi, I'm Ruby</h1>
+
+<p>My name is Ruby and here is my picture.</p>
diff --git a/public/about.html → views/layout.erb b/public/about.html → views/layout.erb
@@ -22,11 +22,7 @@
     <div class="pure-u-1 pure-u-sm-4-5 pure-u-md-3-5">
         <section class="content">
 
-<img class="profile-picture" alt="My profile picture" src="http://web-intro.luontola.fi/html/ruby.png">
-
-<h1>Hi, I'm Ruby</h1>
-
-<p>My name is Ruby and here is my picture.</p>
+<%= yield %>
 
         </section>
     </div>

diff --git a/public/pictures.html → views/pictures.erb b/public/pictures.html → views/pictures.erb
@@ -1,27 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pictures</title>
-    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
-    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
-<div class="pure-g">
-    <div class="pure-u-1 pure-u-sm-1-5">
-        <nav class="navigation pure-menu">
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a class="pure-menu-link" href="about.html">About</a></li>
-                <li class="pure-menu-item"><a class="pure-menu-link" href="pictures.html">Pictures</a></li>
-            </ul>
-        </nav>
-    </div>
-    <div class="pure-u-1 pure-u-sm-4-5 pure-u-md-3-5">
-        <section class="content">
-
 <h1>Pictures I like</h1>
 
 <img class="album-photo" src="http://www.publicdomainpictures.net/pictures/50000/t2/cat-looking-up.jpg">
@@ -34,10 +10,3 @@ <h1>Pictures I like</h1>
 <img class="album-photo" src="http://www.publicdomainpictures.net/pictures/60000/t2/cat-1382017414PaD.jpg">
 <img class="album-photo" src="http://www.publicdomainpictures.net/pictures/50000/t2/cat-1373445873hvw.jpg">
 <img class="album-photo" src="http://www.publicdomainpictures.net/pictures/40000/t2/cross-eyed-cat.jpg">
-
-        </section>
-    </div>
-</div>
-
-</body>
-</html>