Introduction
A blog site is pretty self explanatory so... I'll just say how its different(for now).
It doesn't have a database so when we restart the server all the blogs get wiped.
There's also no logins or accounts, so for now you just write, view and edit.
Content
For this project im not writing any HTML, technically, instead we will be writing ejs files i.e. Embedded JavaScript.
Its basically just HTML with JavaScript.
we can split this into different files called partials, we do this to avoid rewriting a lot.
when writing for different pages instead of writing the same header and footer for every HTML file, we make different files for header and footer and only the body has to be written for other pages.
In my project i had header, footer and a nav bar file to be reused as partials
The header :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<linkß
href="https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,500;1,500&display=swap"
rel="stylesheet"
/>
<link href="styles/style.css" rel="stylesheet" />
</head>
<body class="radio-canada-big-font">
- The footer :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
- The nav bar :-
<%- include("header.ejs") %>
<div class="container">
<div class="nav-bar">
<div><h1 class="title">Our blog</h1></div>
<div class="profile">
<div class="feed button">
<a href="/">My Feed</a>
</div>
<div class="button write">
<a href="/writing">Write</a>
</div>
<div class="button darkmode">
<div class="circle">
<img src="media/svg/icons8-sun.svg" height="20px" />
</div>
</div>
<div class="button profile-pic">
<img src="media/images/image.png" height="50px" />
</div>
</div>
</div>
</div>
Body
- The body has 3 parts the feed, the writing/editing and viewing.
<%- include("partials/nav_bar.ejs") %>
<% var titles = title %> <% var num=0; %>
<div class="feeds">
<% if (titles.length !=0){ %>
<% titles.forEach(function(item){ %>
<% var idValue="feed-"+num; %>
<% num++%>
<%-include("partials/post.ejs",{title:item, idVal:idValue}) %>
<% }) %>
<%}else{%>
<h3 class="empty"> It's a little empty try writing something...</h3>
<% } %>
</div>
<%- include("partials/footer.ejs") %>
The feed page will render as many rectangles/divs (idk what to call it) as the number of blogs written.
The divs are rendered form a different file.
<div class="post" id="<%= idVal %>">
<div class="banner">
<img class="banner-img" />
</div>
<div class="title">
<h1 class="title-text"><%= title %></h1>
</div>
</div>
- Now for writing the blog we have another file.
<%- include("partials/nav_bar.ejs") %>
<div class="content">
<% if(locals.content && locals.title){%>
<% var postId= id %>
<form action="/submit?new=0&id=<%= postId%>" method="POST" class="new-post">
<div class="inp">
<textarea
class="text blog-title"
type="text"
name="title"
placeholder="Title"
onkeyup="adjustHeight(this)"
><%= title %></textarea>
</div>
<div class="text-body inp">
<textarea
class="text body-text"
type="text"
name="content"
placeholder="Enter text here"
onkeyup="adjustHeight(this)"
><%= content %></textarea>
</div>
<div class="submit-btn inp">
<input class="publish radio-canada-big-font btn" type="submit" value="Publish" />
</div>
</form>
<% }else{ %>
<form action="/submit?new=1" method="POST" class="new-post">
<div class="inp">
<textarea
class="text blog-title"
type="text"
name="title"
placeholder="Title"
onkeyup="adjustHeight(this)"
></textarea>
</div>
<div class="text-body inp">
<textarea
class="text body-text"
type="text"
name="content"
placeholder="Enter text here"
onkeyup="adjustHeight(this)"
></textarea>
</div>
<div class="submit-btn inp">
<input class="publish radio-canada-big-font btn" type="submit" value="Publish" />
</div>
</form>
<% } %>
</div>
<%- include("partials/footer.ejs") %>
We will be using this file in two ways one for editing and one for writing.
We simply check if the title and content exists and if they do, they will already be in the text area.
And when you submit, it was edited it doesn't add it to the blogs it just changes the existing blog, else it will add a new blog to the list.
Now for viewing the blog, this is quite simple as you just have to print the title and content.
<%- include("nav_bar.ejs") %> <% var postId=id %>
<% var url="/edit?postId="+postId %>
<div class="the-blog">
<div class="blog-content">
<h1 class="blog-title"><%= title %></h1>
<p class="body-text"><%= content %></p>
</div>
<div class="edit btn"><a href="<%= url %>">Edit</a></div>
</div>
<%- include("footer.ejs") %>
Backend
The backend code is written in javasrcipt with node and express.
requests to handle :-
get /
post /submit
get /writing
get /edit
get /post
GET / :-
For the this request i simpy render the feed body and give the list of titles and the numbers as parameters.
app.get("/", (req, res) => {
res.render("index.ejs", {
feed: numberOfSubmits,
title: titles,
});
});
POST /submit
For this i check if it is a a new post or an edited post based on a query parameter and append to the list of titles and content if it is new and edit the existing one if it is old.
app.post("/submit", (req, res) => {
var newPost = req.query.new;
if (newPost == 1) {
numberOfSubmits++;
titles.push(req.body.title);
contents.push(req.body.content);
} else {
var postId = req.query.id;
titles[postId] = req.body.title;
contents[postId] = req.body.content;
}
res.redirect("/");
});
GET /writing
For this one we simply render the body.
app.get("/writing", (req, res) => {
res.render("new_blog.ejs");
});
GET /edit
Here we render the same page as writing but we also provide the title and content of the blog to be edited.
app.get("/edit", (req, res) => {
var editNumber = req.query.postId;
res.render("new_blog.ejs", {
title: titles[editNumber],
content: contents[editNumber],
id: editNumber,
});
});
GET /post
For this we render a page to view the title and content of the blog clicked on.
app.get("/post", (req, res) => {
var post = req.query.post;
res.render("partials/blog.ejs", {
title: titles[post],
content: contents[post],
id: post,
});
});
Conclusion
So a very basic blog site is complete.
It still has a lot of drawbacks that can be fixed :-
Use a database
Make the darkmode slider functional
login and accounts..
So.. ye lot to learn but progress made.
The full code is here -> https://github.com/P-M-Manmohan/Blog-site
GitHub -> https://github.com/P-M-Manmohan
LinkedIn -> https://www.linkedin.com/in/manmohan-p-m-78618323a/