From ab691dadc93510a1ae83221148e2e679fa4533db Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.cf>
Date: Tue, 10 Oct 2023 18:08:37 -0400
Subject: [PATCH] bug fixes, force shorter description, image popups

---
 frontend/pages/article.ejs      |  4 ++--
 frontend/pages/articles.ejs     |  2 +-
 frontend/pages/index.ejs        |  2 +-
 frontend/pages/search.ejs       |  2 +-
 frontend/pages/tag.ejs          |  2 +-
 frontend/partials/foot.ejs      |  3 ++-
 frontend/partials/footer.ejs    |  1 +
 frontend/partials/head.ejs      |  3 ++-
 frontend/partials/suggested.ejs |  2 +-
 frontend/public/css/styles.css  | 18 +++++++++++++++++-
 10 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/article.ejs b/frontend/pages/article.ejs
index 6615cc7..fd65a5c 100644
--- a/frontend/pages/article.ejs
+++ b/frontend/pages/article.ejs
@@ -21,7 +21,7 @@
 			<div class="left">
 				<div class="info">
 					<h1><%= article.title %></h1>
-					<% if (article.description != null) { %><h3><%= article.description.slice(0, 97) %>...</h3><% } %>
+					<% 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><% } %>
 				</div>
@@ -43,7 +43,7 @@
 		<% if (article.images[0] != null) { %>
 		<div class="images">
 			<% for (image of article.images) { %>
-			<div class="image" style="background-image: url('<%- vars.asset_prefix %><%= image.path %>');<% if ((image.height / image.width) >= 1.25) { %> width: <%= image.width %>px;<% } %>"><% if (image.description != "") { %><h2><%= image.description %></h2><% } %></div>
+			<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>
 		<% } %>
diff --git a/frontend/pages/articles.ejs b/frontend/pages/articles.ejs
index 3eb56d7..77711ab 100644
--- a/frontend/pages/articles.ejs
+++ b/frontend/pages/articles.ejs
@@ -24,7 +24,7 @@
 					<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 						<h3><%= article.title %></h3>
 					</a>
-					<% if (article.description != null) { %><h4><%= article.description.slice(0, 97) %>...</h4><% } %>
+					<% if (article.description != null) { %><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.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>
 			</div>
diff --git a/frontend/pages/index.ejs b/frontend/pages/index.ejs
index 988cd0b..2796965 100644
--- a/frontend/pages/index.ejs
+++ b/frontend/pages/index.ejs
@@ -43,7 +43,7 @@
 					<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 						<h3><%= article.title %></h3>
 					</a>
-					<% if (article.description != null) { %><h4><%= article.description.slice(0, 97) %>...</h4><% } %>
+					<% if (article.description != null) { %><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.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>
 			</div>
diff --git a/frontend/pages/search.ejs b/frontend/pages/search.ejs
index 417eee7..b5220ac 100644
--- a/frontend/pages/search.ejs
+++ b/frontend/pages/search.ejs
@@ -60,7 +60,7 @@
 					<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 						<h3>Article: <%= article.title %></h3>
 					</a>
-					<% if (article.description != null) { %><h4><%= article.description.slice(0, 97) %>...</h4><% } %>
+					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
 					<p><% if (tags != null) { %><a href="<%- vars.domain %>/tags/<%= article.tags[0].toLowerCase() %>"><%= article.tags[0] %></a> / <% } %><% 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>
 			</div>
diff --git a/frontend/pages/tag.ejs b/frontend/pages/tag.ejs
index 39b6513..78b05ed 100644
--- a/frontend/pages/tag.ejs
+++ b/frontend/pages/tag.ejs
@@ -31,7 +31,7 @@
 					<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 						<h3><%= article.title %></h3>
 					</a>
-					<h4><%= article.description.slice(0, 97) %>...</h4>
+					<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>
 				</div>
 			</div>
diff --git a/frontend/partials/foot.ejs b/frontend/partials/foot.ejs
index 54c83a7..9b8a2c2 100644
--- a/frontend/partials/foot.ejs
+++ b/frontend/partials/foot.ejs
@@ -2,4 +2,5 @@
     var domain = "<%- vars.domain %>";
     var page = window.location.toString().split(`${domain}`)[1].split("?")[0];
 </script>
-<script src="<%- vars.domain %>/js/scripts.js"></script>
\ No newline at end of file
+<script src="<%- vars.domain %>/js/scripts.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js" integrity="sha512-U9dKDqsXAE11UA9kZ0XKFyZ2gQCj+3AwZdBMni7yXSvWqLFEj8C1s7wRmWl9iyij8d5zb4wm56j4z/JVEwS77g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
\ No newline at end of file
diff --git a/frontend/partials/footer.ejs b/frontend/partials/footer.ejs
index 8ac7110..ecb4be9 100644
--- a/frontend/partials/footer.ejs
+++ b/frontend/partials/footer.ejs
@@ -9,6 +9,7 @@
 			<%- include('socials.ejs') %>
 			<p>&copy; <%= cms.siteDetails[0].title %> <%= cms.siteDetails[0].est %> - <%= new Date().getFullYear() %> | <a href="<%- vars.domain %>/admin">Admin<a href="https://dangoweb.com/?from=<%= cms.siteDetails[0].title.toLowerCase().replaceAll(' ', '-') %>" style="display: none;"> (Host)</a></a> | <%- vars.environment.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %> Version | <%= pageviews %> Views</p>
 			<p>We use cookies for analytics and security.</p>
+			<!-- We use "Lightbox2" by  -->
 		</div>
 	</div>
 </footer>
diff --git a/frontend/partials/head.ejs b/frontend/partials/head.ejs
index 5cd92a3..8b7103f 100644
--- a/frontend/partials/head.ejs
+++ b/frontend/partials/head.ejs
@@ -28,4 +28,5 @@
 	gtag('js', new Date());
 
 	gtag('config', 'G-VB8PCR81YJ');
-</script>
\ No newline at end of file
+</script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
\ No newline at end of file
diff --git a/frontend/partials/suggested.ejs b/frontend/partials/suggested.ejs
index 4fe6c5d..95f7d98 100644
--- a/frontend/partials/suggested.ejs
+++ b/frontend/partials/suggested.ejs
@@ -13,7 +13,7 @@ function ifYesterday(date) {
 				<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 					<h3><%= article.title %></h3>
 				</a>
-				<% if (article.description != null) { %><h4><%= article.description.slice(0, 97) %>...</h4><% } %>
+				<% if (article.description != null) { %><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.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>
 		</div>
diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css
index f8a3dda..1bef2fe 100644
--- a/frontend/public/css/styles.css
+++ b/frontend/public/css/styles.css
@@ -407,7 +407,8 @@ header .main .search form input::placeholder {
     justify-content: flex-end;
 	background-color: var(--background);
     background-size: cover;
-    background-position: bottom;
+    background-position-x: center;
+	background-position-y: -100px;
 	border-bottom: 4px solid #ececec;
 	transition: 0.25s;
 	padding-top: 150px;
@@ -558,6 +559,8 @@ header .main .search form input::placeholder {
 
 .article-i .image:first-of-type {
 	height: 60vh;
+	background-size: contain;
+	background-repeat: no-repeat;
 	grid-column-start: 1;
 	grid-column-end: 3;
 	display: flex;
@@ -596,6 +599,10 @@ header .main .search form input::placeholder {
 	text-decoration: underline;
 }
 
+.article-i .content img {
+	width: 100%;
+}
+
 .article-i object {
 	height: 100vh;
 }
@@ -810,4 +817,13 @@ footer .inner .bottom a {
 .articles.searchResults .grid .article .inner {
 	width: 100%;
     gap: 0px;
+}
+
+.lb-outerContainer {
+    width: 90vw !important;
+}
+
+.lightbox .lb-image {
+    width: 100% !important;
+    height: unset !important;
 }
\ No newline at end of file