Merge pull request #2 from moonpatel/branch1

boilerplate added
moonpatel · Aug 16, 2022 · ee93c13 · ee93c13
2 parents 59c8b66 + 46596ab
commit ee93c13
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 83 deletions.
diff --git a/app.js b/app.js
@@ -2,6 +2,7 @@
 const express = require('express')
 const mongoose = require('mongoose')
 const methodOverride = require('method-override')
+const ejsMate = require('ejs-mate')
 const path = require('path')
 // require models
 const Campground = require('./models/campgrounds')
@@ -19,6 +20,7 @@ db.once("open", () => console.log("Database connected"))
 // create an express application object
 const app = express()
 
+app.engine('ejs',ejsMate)
 // set parameters for rendering templates
 app.set('view engine','ejs')
 app.set('views',path.join(__dirname,'views'))

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "ejs": "^3.1.8",
+    "ejs-mate": "^4.0.0",
     "express": "^4.18.1",
     "method-override": "^3.0.0",
     "mongoose": "^6.5.2"

diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
@@ -1,14 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Campgrounds</title>
-</head>
-
-<body>
+<% layout('layouts/boilerplate.ejs') %>
     <h1>YelpCamp Campgrounds</h1>
     <p>
         <a href="/campgrounds/new">Add new campground</a>
@@ -21,7 +11,4 @@
                 </a>
             </li>
         <% } %>
-    </ul>
-</body>
-
-</html>
+    </ul>
diff --git a/views/campgrounds/show.ejs b/views/campgrounds/show.ejs
@@ -1,29 +1,14 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>
-        <%= c.title %>
-    </title>
-</head>
-
-<body>
-    <h1><%= c.title %></h1>
-    <p>
-        Title: <%= c.title %>
+<% layout('layouts/boilerplate.ejs') %>
+<h1><%= c.title %></h1>
+<p>
+    Title: <%= c.title %>
         <br>
-        Location: <%= c.location %>
-    </p>
-    <p>
-        <a href="/campgrounds">Back</a>
-        <a href="/campgrounds/<%= c._id %>/edit">Edit campground</a>
-        <form action="/campgrounds/<%= c._id %>?_method=DELETE" method="post">
-            <button>Delete Campground</button>
-        </form>
-    </p>
-</body>
-
-</html>
+    Location: <%= c.location %>
+</p>
+<p>
+    <a href="/campgrounds">Back</a>
+    <a href="/campgrounds/<%= c._id %>/edit">Edit campground</a>
+    <form action="/campgrounds/<%= c._id %>?_method=DELETE" method="post">
+    <button>Delete Campground</button>
+    </form>
+</p>
diff --git a/views/edit.ejs b/views/edit.ejs
@@ -1,17 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Edit campground</title>
-</head>
-<body>
+<% layout('layouts/boilerplate.ejs') %>
+
+
     <h1>Edit campground</h1>
     <form action="/campgrounds/<%= cg._id %>?_method=PUT" method="post">
         <input type="text" name="campground[title]" value="<%=cg.title%>" placeholder="Title">
         <input type="text" name="campground[location]" value="<%=cg.location%>" placeholder="Location">
         <button>Edit campground</button>
-    </form>
-</body>
-</html>
+    </form>
diff --git a/views/home.ejs b/views/home.ejs
@@ -1,12 +1,2 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
-</head>
-<body>
-    <h1>YelpCamp</h1>
-</body>
-</html>
+<% layout('./layouts/boilerplate.ejs') %>
+<h1>YelpCamp</h1>
diff --git a/views/layouts/boilerplate.ejs b/views/layouts/boilerplate.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> YelpCamp  </title>
+</head>
+<body>
+    <%- body -%>
+</body>
+</html>
diff --git a/views/new.ejs b/views/new.ejs
@@ -1,22 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>New Campground</title>
-    <style>
-        input, button {
-            display: block;
-        }
-    </style>
-</head>
-<body>
+<% layout('layouts/boilerplate.ejs') %>
+
+
     <h1>Add a new Campground</h1>
     <form action="/campgrounds" method="post">
         <input type="text" name="campground[title]" id="title" placeholder="Title">
         <input type="text" name="campground[location]" id="location" placeholder="Location">
         <button>Submit</button>
     </form>
-</body>
-</html>