diff --git a/frontend/pages/article.ejs b/frontend/pages/article.ejs index fd65a5c..b4fdee4 100644 --- a/frontend/pages/article.ejs +++ b/frontend/pages/article.ejs @@ -23,12 +23,12 @@

<%= article.title %>

<% if (article.description != null) { %>

<%= article.description.slice(0, 50) %>...

<% } %>
<%= pageviews %> Views
- <% if (article.tags != null) { %>

Tags: <% for (tag of article.tags) { %><%= toTitleCase(tag) %> <% } %>

<% } %> + <% if (article.tags != null) { %>

Tags: <% for (tag of article.tags) { %>#<%= tag.toLowerCase().replaceAll(" ", "-") %> <% } %>

<% } %>
-

By <% if ((article.author != "") && (article.author != null)) { %><%= article.author %><% } else { %><%= cms.siteDetails[0].title %> Writers, <%= cms.siteDetails[0].title %><% } %>

+

<% if ((article.author != "") && (article.author != null)) { %><%= article.author %><% } else { %><%= cms.siteDetails[0].title %> Writers, <%= cms.siteDetails[0].title %><% } %>

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' }) %><% } %>
<% if ((article._created != article._modified) && (date < (new Date(article._modified * 1000)))) { %>
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' }) %>
<% } } %>
@@ -42,9 +42,11 @@
<% if (article.images[0] != null) { %>
- <% for (image of article.images) { %> + <% for (image of article.images) { if (image._id === article.images[0]._id) { %> + data-title="<%= image.description %>"<% } %>><% if (image.description != "") { %>

<%= image.description %>

<% } %> + <% } else { %> data-title="<%= image.description %>"<% } %>><% if (image.description != "") { %>

<%= image.description %>

<% } %> - <% } %> + <% } } %>
<% } %> diff --git a/frontend/pages/tag.ejs b/frontend/pages/tag.ejs index 78b05ed..59a9921 100644 --- a/frontend/pages/tag.ejs +++ b/frontend/pages/tag.ejs @@ -3,10 +3,10 @@ <%- 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) { @@ -20,7 +20,7 @@ <%- include('../partials/header.ejs'); %>
@@ -32,7 +32,7 @@

<%= article.title %>

<%= article.description.slice(0, 50) %>...

-

<% if (article.tags != null) { %><%= article.tags[0] %> / <% } %><% 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' }) %><% } %>

+

<% if (article.tags != null) { %>"><%= article.tags[0] %> / <% } %><% 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' }) %><% } %>

<% }); } else { %>No articles found<% } %> diff --git a/frontend/pages/tags.ejs b/frontend/pages/tags.ejs index 34ae1ac..c0ae9e5 100644 --- a/frontend/pages/tags.ejs +++ b/frontend/pages/tags.ejs @@ -6,11 +6,12 @@ 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] = []; }; @@ -18,6 +19,11 @@ }; }; }; + 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(); @@ -37,8 +43,8 @@ <% if (Object.keys(tags).length != 0) { for (tag in tags) { %>
- -

<%= toTitleCase(tag) %>

+ "> +

<%= tag.toLowerCase().replaceAll(" ", "-") %>

<%- tags[tag].length %> Article<% if (tags[tag].length != 1) { %>s<% } %>

diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css index 317d0bd..e3773a7 100644 --- a/frontend/public/css/styles.css +++ b/frontend/public/css/styles.css @@ -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; @@ -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; } @@ -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; } @@ -576,13 +591,14 @@ 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; @@ -590,6 +606,10 @@ header .main .search form input::placeholder { display: flex; } +.article-i .image:first-of-type img { + width: 100%; +} + .article-i .image h2 { position: absolute; bottom: 0px; diff --git a/index.js b/index.js index fdaaa82..6785712 100644 --- a/index.js +++ b/index.js @@ -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) => {