Skip to content

Commit

Permalink
sidebar, required comment & poll fields, bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@faisalnjs
faisalnjs committed Oct 18, 2023
1 parent ed0aaf7 commit 09f7ab6
Show file tree
Hide file tree
Showing 9 changed files with 138 additions and 35 deletions.
6 changes: 3 additions & 3 deletions frontend/pages/article.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@
<form action="" method="post" class="new">
<h3>New comment:</h3>
<input name="id" value="<%= article._id %>" hidden>
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="email" placeholder="Your Email">
<input name="content" type="text" placeholder="Your Comment">
<input name="name" type="text" placeholder="Your Name" required>
<input name="email" type="email" placeholder="Your Email" required>
<input name="content" type="text" placeholder="Your Comment" required>
<button>Post Comment</button>
</form>
<% if (comments.length > 0) { %>
Expand Down
6 changes: 3 additions & 3 deletions frontend/pages/artwork.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@
<form action="" method="post" class="new">
<h3>New comment:</h3>
<input name="id" value="<%= artwork._id %>" hidden>
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="email" placeholder="Your Email">
<input name="content" type="text" placeholder="Your Comment">
<input name="name" type="text" placeholder="Your Name" required>
<input name="email" type="email" placeholder="Your Email" required>
<input name="content" type="text" placeholder="Your Comment" required>
<button>Post Comment</button>
</form>
<% if (comments.length > 0) { %>
Expand Down
6 changes: 3 additions & 3 deletions frontend/pages/newspaper.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,9 @@
<form action="" method="post" class="new">
<h3>New comment:</h3>
<input name="id" value="<%= newspaper._id %>" hidden>
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="email" placeholder="Your Email">
<input name="content" type="text" placeholder="Your Comment">
<input name="name" type="text" placeholder="Your Name" required>
<input name="email" type="email" placeholder="Your Email" required>
<input name="content" type="text" placeholder="Your Comment" required>
<button>Post Comment</button>
</form>
<% if (comments.length > 0) { %>
Expand Down
10 changes: 5 additions & 5 deletions frontend/pages/poll.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@
<form action="" method="post" class="new">
<h3>Cast your vote!</h3>
<input name="id" value="<%= poll._id %>" hidden>
<input name="name" type="text" placeholder="Your Name">
<select name="answer">
<input name="name" type="text" placeholder="Your Name" required>
<select name="answer" required>
<% for (answer of poll.answers) { %><option value="<%= answer %>"><%= answer %></option><% } %>
</select>
<button>Submit answer</button>
Expand All @@ -78,9 +78,9 @@
<form action="" method="post" class="new">
<h3>New comment:</h3>
<input name="id" value="<%= poll._id %>" hidden>
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="email" placeholder="Your Email">
<input name="content" type="text" placeholder="Your Comment">
<input name="name" type="text" placeholder="Your Name" required>
<input name="email" type="email" placeholder="Your Email" required>
<input name="content" type="text" placeholder="Your Comment" required>
<button>Post Comment</button>
</form>
<% if (comments.length > 0) { %>
Expand Down
29 changes: 16 additions & 13 deletions frontend/pages/tag.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,24 @@
<h1>#<%- tag %></h1>
<h3><%- filteredArticles.length %> Articles</h3>
</div>
<div class="articles">
<div class="grid">
<% if (filteredArticles.length != 0) { const articles = filteredArticles.sort((a, b) => b._created - a._created); for (let i = 0; i < articles.length; i++) { const article = articles[i]; %>
<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>" title="<%= article.title %>">
<div class="inner">
<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %><% } } else { %> "<% } %> />
<h3><%= article.title %></h3>
<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
</div>
</a>
<% } } else { %>No articles found<% } %>
<div class="split">
<div class="articles">
<div class="grid">
<% if (filteredArticles.length != 0) { const articles = filteredArticles.sort((a, b) => b._created - a._created); for (let i = 0; i < articles.length; i++) { const article = articles[i]; %>
<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>" title="<%= article.title %>">
<div class="inner">
<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>" <% } %><% } } else { %> "<% } %> />
<h3><%= article.title %></h3>
<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
</div>
</a>
<% } } else { %>No articles found<% } %>
</div>
</div>
<%- include('../partials/sidebar.ejs'); %>
</div>
<%- include('../partials/footer.ejs'); %>
<%- include('../partials/footer.ejs'); %>
</body>
<%- include('../partials/foot.ejs'); %>
Expand Down
35 changes: 35 additions & 0 deletions frontend/partials/sidebar.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div class="sidebar">
<h3>Recent Articles</h3>
<ul>
<% for (let i = 0; i < 5 && i < cms.articles.length; i++) { %>
<li><a href="<%- vars.domain %>/articles/<%= new Date(cms.articles[i].date).getFullYear() %>/<%= cms.articles[i].slug %>"><%= cms.articles[i].title %></a></li>
<% } %>
</ul>
<% var tags = {};
for (article of cms.articles) {
if (article.tags) {
for (tag of article.tags) {
tag = tag.toLowerCase();
if (!tags[tag]) {
tags[tag] = [];
};
tags[tag].push(article);
};
};
};
var sortedTagsObj = {};
Object.keys(tags).sort(function(a, b) {
return tags[b].length - tags[a].length;
}).forEach(function(key) {
sortedTagsObj[key] = tags[key];
});
tags = sortedTagsObj;
if (Object.keys(tags).length != 0) { %>
<h3>Popular Tags</h3>
<ul>
<% for (let i = 0; i < Object.keys(tags).length; i++) { const tag = Object.keys(tags)[i]; %>
<li><a href="<%- vars.domain %>/tags/<%= tag.toLowerCase().replaceAll(" ", "-") %>">#<%= tag.toLowerCase().replaceAll(" ", "-") %> (<%= tags[tag].length %>)</a></li>
<% } %>
</ul>
<% } %>
</div>
72 changes: 67 additions & 5 deletions frontend/public/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -621,6 +621,7 @@ header .main .search form input::placeholder {
.articles .grid .article img {
width: 100%;
height: 200px;
box-shadow: var(--theme) 0px 1px 4px;
transition: 0.5s;
}

Expand Down Expand Up @@ -690,6 +691,7 @@ header .main .search form input::placeholder {
}

.article-i .image, .article-i img {
box-shadow: var(--theme) 0px 1px 4px;
transition: 0.5s;
}

Expand Down Expand Up @@ -876,6 +878,7 @@ header .main .search form input::placeholder {

.article-i .new {
display: flex;
align-items: center;
gap: 10px;
}

Expand All @@ -887,15 +890,15 @@ header .main .search form input::placeholder {
.article-i .new input,
.article-i .new select {
border: 1px solid var(--theme);
border-radius: 5px;
padding: 5px 10px;
border-radius: 1px;
padding: 10px 15px;
}

.article-i .new button {
background-color: var(--theme);
border: 1px solid var(--theme);
border-radius: 5px;
padding: 5px 10px;
border-radius: 1px;
padding: 10px 15px;
color: var(--background);
cursor: pointer;
}
Expand All @@ -914,7 +917,7 @@ header .main .search form input::placeholder {

.article-i .comments .comment {
border: 1px solid var(--theme);
border-radius: 5px;
border-radius: 1px;
display: flex;
flex-direction: column;
gap: 2px;
Expand Down Expand Up @@ -1037,6 +1040,13 @@ footer .inner .bottom .socials i {
align-items: center;
justify-content: center;
font-size: 20px;
transition: 0.5s;
}

footer .inner .bottom .socials i:hover {
background-color: var(--background);
color: var(--text);
transition: 0.5s;
}

.toTop {
Expand Down Expand Up @@ -1126,3 +1136,55 @@ footer .inner .bottom .socials i {
max-width: 1000px;
box-shadow: var(--theme) 0px 0px 30px 0px;
}

.split {
width: 100%;
display: flex;
flex-direction: row;
}

.split .articles .grid {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-areas: ". ." !important;
}

.split .articles .grid .article {
padding: 50px 50px !important;
border: none !important;
border-bottom: 1px solid var(--text) !important;
}

.split articles .grid .article:nth-child(odd) {
border-right: 1px solid var(--text) !important;
}

.split .articles .grid .article:nth-last-child(-n + 2) {
border-bottom: none !important;
}

.split .sidebar {
width: 30%;
display: flex;
flex-direction: column;
padding: 15px 30px;
}

.split .sidebar * {
margin: 0;
}

.split .sidebar h3 {
font-size: 20px;
font-weight: bold;
margin: 20px 0 10px 0;
}

.split .sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.split .sidebar ul li {
margin: 10px 0;
}
5 changes: 3 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ app.use(rateLimit({
max: 15,
skip: (req, res) => {
return req.ip !== undefined;
}
},
message: "Too many requests from this IP, please try again in a minute."
}));
app.use((req, res, next) => {
if (req.method === 'GET') {
Expand Down Expand Up @@ -138,7 +139,7 @@ async function startApp() {
} else if (req.session.cookiesDenied === true) {
res.clearCookie("sessionid");
req.session.destroy();
res.send("You have denied cookies. If you would like to re-enable cookies, click <a href='/enablecookies'>here</a>.");
res.send("You have denied cookies. If you would like to re-enable cookies, click <a href='/enablecookies'>here</a> or force reload the page.");
return false;
} else {
return;
Expand Down
4 changes: 3 additions & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# The Southern Bell Website

[![Total Time](https://wakatime.com/badge/user/074621a8-639e-4f3e-b6d9-f23b6bb481a9/project/2b675577-fc77-4320-ad6f-c728de7ad7bc.svg)](https://wakatime.com/@OGFaisalN/projects/uapnosftrk)
All - [![Total Time](https://wakatime.com/badge/user/074621a8-639e-4f3e-b6d9-f23b6bb481a9/project/2b675577-fc77-4320-ad6f-c728de7ad7bc.svg)](https://wakatime.com/@OGFaisalN/projects/uapnosftrk)
Production - ![Deploy Node.js App](https://github.com/OGFaisalN/Southern-Bell/actions/workflows/main.yml/badge.svg?branch=prod)
Development - ![Deploy Node.js App](https://github.com/OGFaisalN/Southern-Bell/actions/workflows/main.yml/badge.svg?branch=dev)

CMS - /admin

0 comments on commit 09f7ab6

Please sign in to comment.