Skip to content

Commit

Permalink
improve tagging
Browse files Browse the repository at this point in the history
  • Loading branch information
@faisalnjs
faisalnjs committed Oct 11, 2023
1 parent 2a8fa35 commit 969e471
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 13 deletions.
10 changes: 6 additions & 4 deletions frontend/pages/article.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
<h1><%= article.title %></h1>
<% if (article.description != null) { %><h3><%= article.description.slice(0, 50) %>...</h3><% } %>
<h5><%= pageviews %> Views</h5>
<% if (article.tags != null) { %><p>Tags: <% for (tag of article.tags) { %><a href="<%- vars.domain %>/tags/<%= tag %>"><%= toTitleCase(tag) %></a> <% } %></p><% } %>
<% if (article.tags != null) { %><p>Tags: <% for (tag of article.tags) { %><a href="<%- vars.domain %>/tags/<%= tag %>">#<%= tag.toLowerCase().replaceAll(" ", "-") %></a> <% } %></p><% } %>
</div>
<div class="author">
<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].favicon.path %>" />
<div class="info">
<h4>By <% if ((article.author != "") && (article.author != null)) { %><%= article.author %><% } else { %><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> Writers, <a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a><% } %></h4>
<h4><% if ((article.author != "") && (article.author != null)) { %><%= article.author %><% } else { %><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> Writers, <a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a><% } %></h4>
<h5>Published <% 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' }) %><% } %></h5>
<% if ((article._created != article._modified) && (date < (new Date(article._modified * 1000)))) { %><h5>Edited <% var date = new Date(article._modified * 1000); if (date.isToday()) { %>today<% } else if (ifYesterday(date)) { %>yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %></h5><% } } %>
</div>
Expand All @@ -42,9 +42,11 @@
</div>
<% if (article.images[0] != null) { %>
<div class="images">
<% for (image of article.images) { %>
<% for (image of article.images) { if (image._id === article.images[0]._id) { %>
<a class="image" href="<%- vars.asset_prefix %><%= image.path %>" data-lightbox="<%= image._id %>"<% if (image.description != "") { %> data-title="<%= image.description %>"<% } %>><img src="<%- vars.asset_prefix %><%= image.path %>" /><% if (image.description != "") { %><h2><%= image.description %></h2><% } %></a>
<% } else { %>
<a class="image" style="background-image: url('<%- vars.asset_prefix %><%= image.path %>');<% if ((image.height / image.width) >= 1.25) { %> width: <%= image.width %>px;<% } %>" href="<%- vars.asset_prefix %><%= image.path %>" data-lightbox="<%= image._id %>"<% if (image.description != "") { %> data-title="<%= image.description %>"<% } %>><% if (image.description != "") { %><h2><%= image.description %></h2><% } %></a>
<% } %>
<% } } %>
</div>
<% } %>
<style>.article-i .content:before { content: '(<% if ((article.author != "") && (article.author != null)) { %><%- article.author %><% } else { %><%= cms.siteDetails[0].title %> Writers<% } %>) — ' }</style>
Expand Down
8 changes: 4 additions & 4 deletions frontend/pages/tag.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<head>
<%- include('../partials/head.ejs'); %>
<% const filteredArticles = cms.articles.filter(article => {
if (article.tags == null) {
if (article.tags === null) {
return false;
} else {
return article.tags.includes(tag);
return article.tags.map(tag => tag.toLowerCase().replaceAll(" ", "-")).includes(tag.toLowerCase().replaceAll(" ", "-"));
};
});
function ifYesterday(date) {
Expand All @@ -20,7 +20,7 @@
<%- include('../partials/header.ejs'); %>
<div class="banner" style="background-image: url('<%- vars.asset_prefix %><%= cms.siteDetails[0].background.path %>');">
<i class="fa-solid fa-tag"></i>
<h1>Articles with tag '<%- tag %>'</h1>
<h1>#<%- tag %></h1>
<h3><%- filteredArticles.length %> Articles</h3>
</div>
<div class="articles">
Expand All @@ -32,7 +32,7 @@
<h3><%= article.title %></h3>
</a>
<h4><%= article.description.slice(0, 50) %>...</h4>
<p><% if (article.tags != null) { %><a href="<%- vars.domain %>/tags/<%= article.tags[0].toLowerCase() %>"><%= article.tags[0] %></a> / <% } %><% var date = new Date(article._created * 1000); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></p>
<p><% if (article.tags != null) { %><a href="<%- vars.domain %>/tags/<%= article.tags[0].toLowerCase().replaceAll(" ", "-") %>"><%= article.tags[0] %></a> / <% } %><% var date = new Date(article._created * 1000); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></p>
</div>
</div>
<% }); } else { %>No articles found<% } %>
Expand Down
12 changes: 9 additions & 3 deletions frontend/pages/tags.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,24 @@
var yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
return date.toDateString() === yesterday.toDateString();
}
};
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 = {};
for (tag of Object.keys(tags).sort()) {
sortedTagsObj[tag] = tags[tag];
};
tags = sortedTagsObj;
function toTitleCase(str) {
return str.replace(/\b\w+/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
Expand All @@ -37,8 +43,8 @@
<% if (Object.keys(tags).length != 0) { for (tag in tags) { %>
<div class="article" style="padding-top: 0;">
<div class="inner">
<a href="<%- vars.domain %>/tags/<%= tag %>">
<h3><%= toTitleCase(tag) %></h3>
<a href="<%- vars.domain %>/tags/<%= tag.toLowerCase().replaceAll(" ", "-") %>">
<h3><%= tag.toLowerCase().replaceAll(" ", "-") %></h3>
</a>
<p><%- tags[tag].length %> Article<% if (tags[tag].length != 1) { %>s<% } %></p>
</div>
Expand Down
22 changes: 21 additions & 1 deletion frontend/public/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@media screen and (max-width: 1400px) {
header .main {
flex-direction: column !important;
}
}

@media screen and (max-width: 1200px) {
.hero {
display: flex !important;
Expand Down Expand Up @@ -71,6 +77,10 @@
right: unset !important;
}

header .main .search form input {
width: 25vw !important;
}

header .main .search form input:hover, header .main .search form input:focus {
width: 50vw !important;
}
Expand Down Expand Up @@ -563,6 +573,11 @@ header .main .search form input::placeholder {
margin: 0;
}

.article-i .split .left .author .info h4 {
font-weight: 600;
color: black;
}

.article-i .split .right .icons i {
cursor: pointer;
}
Expand All @@ -576,20 +591,25 @@ header .main .search form input::placeholder {

.article-i .image {
height: 30vh;
width: 100% !important;
background-size: cover;
background-position: center;
position: relative;
}

.article-i .image:first-of-type {
height: 60vh;
height: unset;
background-size: contain;
background-repeat: no-repeat;
grid-column-start: 1;
grid-column-end: 3;
display: flex;
}

.article-i .image:first-of-type img {
width: 100%;
}

.article-i .image h2 {
position: absolute;
bottom: 0px;
Expand Down
2 changes: 1 addition & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ async function startApp() {

app.get('/tags/:tag', async (req, res) => {
await allRoutes(req, res);
res.render('tag', { vars: defaults, title: `#${req.params.tag.toLowerCase()}`, cms, pageviews: req.pageViews, tag: req.params.tag.toLowerCase() });
res.render('tag', { vars: defaults, title: `#${req.params.tag.toLowerCase().replaceAll(" ", "-")}`, cms, pageviews: req.pageViews, tag: req.params.tag });
});

app.get('/polls', async (req, res) => {
Expand Down

0 comments on commit 969e471

Please sign in to comment.