fast no reload page loading, new loader, theme upgrades

faisalnjs · Oct 19, 2024 · 59a39c1 · 59a39c1
1 parent af6ee5c
commit 59a39c1
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 139 deletions.
diff --git a/frontend/pages/index.ejs b/frontend/pages/index.ejs
@@ -7,33 +7,34 @@
 		yesterday.setDate(yesterday.getDate() - 1);
 		return date.toDateString() === yesterday.toDateString();
 	}; %>
-	<% if (cms.newspapers[cms.newspapers.length - 1]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 1].image.path %>"><% } %>
-	<% if (cms.newspapers[cms.newspapers.length - 2]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 2].image.path %>"><% } %>
-	<% if (cms.newspapers[cms.newspapers.length - 3]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 3].image.path %>"><% } %>
+	<% cms.newspapers = cms.newspapers.sort((a, b) => new Date(b.date) - new Date(a.date)); %>
+	<% if (cms.newspapers[0]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[0].image.path %>"><% } %>
+	<% if (cms.newspapers[1]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[1].image.path %>"><% } %>
+	<% if (cms.newspapers[2]) { %><link rel="preload" as="image" href="<%= vars.asset_prefix %><%= cms.newspapers[2].image.path %>"><% } %>
 	<% if (cms.articles.length > 0) { for (let i = 0; i < 3 && i < cms.articles.length; i++) { const article = cms.articles.sort((a, b) => new Date(b.date) - new Date(a.date)).filter(article => !article.unlisted)[i]; if (article.images[0] != null) { %><link rel="preload" as="image" href="<%- vars.asset_prefix %><%= article.images[0].path %>"><% }}} %>
 	<% if (cms.artworks.length > 0) { for (let i = 0; i < 3 && i < cms.artworks.length; i++) { const article = cms.artworks.sort((a, b) => new Date(b.date) - new Date(a.date)).filter(article => !article.unlisted)[i]; if (article.images[0] != null) { %><link rel="preload" as="image" href="<%- vars.asset_prefix %><%= article.images[0].path %>"><% }}} %>
 </head>
 
 <body>
 	<%- include('../partials/header.ejs'); %>
-	<div class="hero<% if (!cms.newspapers[cms.newspapers.length - 2]) { %> onlyOne" style="grid-template-columns: 100% 0.7fr;<% } %>">
-		<a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[cms.newspapers.length - 1].slug %>" class="newspaper" <% if (cms.newspapers[cms.newspapers.length - 1].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 1].image.path %>')" <% } %> title="<%= cms.newspapers[cms.newspapers.length - 1].title %>">
+	<div class="hero<% if (!cms.newspapers[1]) { %> onlyOne" style="grid-template-columns: 100% 0.7fr;<% } %>">
+		<a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[0].slug %>" class="newspaper" <% if (cms.newspapers[0].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[0].image.path %>')" <% } %> title="<%= cms.newspapers[0].title %>">
 			<div>
-				<h2><%= cms.newspapers[cms.newspapers.length - 1].title %></h2>
-				<h4><% var date = new Date(cms.newspapers[cms.newspapers.length - 1].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
+				<h2><%= cms.newspapers[0].title %></h2>
+				<h4><% var date = new Date(cms.newspapers[0].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
 			</div>
 		</a>
 		<div class="side">
-			<% if (cms.newspapers[cms.newspapers.length - 2]) { %><a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[cms.newspapers.length - 2].slug %>" class="newspaper" <% if (cms.newspapers[cms.newspapers.length - 2].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 2].image.path %>')" <% } %> title="<%= cms.newspapers[cms.newspapers.length - 2].title %>">
+			<% if (cms.newspapers[1]) { %><a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[1].slug %>" class="newspaper" <% if (cms.newspapers[1].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[1].image.path %>')" <% } %> title="<%= cms.newspapers[1].title %>">
 				<div>
-					<h2><%= cms.newspapers[cms.newspapers.length - 2].title %></h2>
-					<h4><% var date = new Date(cms.newspapers[cms.newspapers.length - 2].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
+					<h2><%= cms.newspapers[1].title %></h2>
+					<h4><% var date = new Date(cms.newspapers[1].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
 				</div>
 			</a><% } %>
-			<% if (cms.newspapers[cms.newspapers.length - 3]) { %><a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[cms.newspapers.length - 3].slug %>" class="newspaper" <% if (cms.newspapers[cms.newspapers.length - 3].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[cms.newspapers.length - 3].image.path %>')" <% } %> title="<%= cms.newspapers[cms.newspapers.length - 3].title %>">
+			<% if (cms.newspapers[2]) { %><a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[2].slug %>" class="newspaper" <% if (cms.newspapers[2].image != null) { %> style="background-image: url('<%= vars.asset_prefix %><%= cms.newspapers[2].image.path %>')" <% } %> title="<%= cms.newspapers[2].title %>">
 				<div>
-					<h2><%= cms.newspapers[cms.newspapers.length - 3].title %></h2>
-					<h4><% var date = new Date(cms.newspapers[cms.newspapers.length - 3].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
+					<h2><%= cms.newspapers[2].title %></h2>
+					<h4><% var date = new Date(cms.newspapers[2].date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h4>
 				</div>
 			</a><% } %>
 		</div>

diff --git a/frontend/pages/poll.ejs b/frontend/pages/poll.ejs
@@ -2,7 +2,6 @@
 
 <head>
 	<%- include('../partials/head.ejs'); %>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
 	<% function ifYesterday(date) { 
 		var yesterday = new Date();
 		yesterday.setDate(yesterday.getDate() - 1);
@@ -59,6 +58,72 @@
 			<div class="results">
 				<canvas id="<%= poll.slug %>-chart" style="width: 100%;"></canvas>
 				<canvas id="<%= poll.slug %>-chart-pie" style="width: 100%;"></canvas>
+				<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+				<script>
+					barColors = ["#FF4136", "#2ECC40", "#0074D9", "#FF851B", "#B10DC9", "#FFDC00", "#7FDBFF", "#39CCCC", "#3D9970", "#85144b", "#F012BE", "#01FF70", "#FF4136", "#2ECC40", "#0074D9", "#FF851B", "#B10DC9", "#FFDC00", "#7FDBFF", "#39CCCC"];
+					new Chart("<%= poll.slug %>-chart", {
+						type: "bar",
+						data: {
+							labels: <%- JSON.stringify(poll.answers) %>,
+							datasets: [{
+								backgroundColor: barColors,
+								data: <%- JSON.stringify(answerCount) %>
+							}]
+						},
+						options: {
+							legend: {
+								display: false
+							},
+							title: {
+								display: true,
+								text: '<%= poll.question %>'
+							},
+							scales: {
+								yAxes: [{
+									ticks: {
+										beginAtZero: true,
+										userCallback: function(label, index, labels) {
+											if (Math.floor(label) === label) {
+												return label;
+											}
+										},
+									}
+								}],
+							},
+						}
+					});
+					new Chart("<%= poll.slug %>-chart-pie", {
+						type: "pie",
+						data: {
+							labels: <%- JSON.stringify(poll.answers) %>,
+							datasets: [{
+								backgroundColor: barColors,
+								data: <%- JSON.stringify(answerCount) %>
+							}]
+						},
+						options: {
+							legend: {
+								display: false
+							},
+							title: {
+								display: true,
+								text: '<%= poll.question %>'
+							},
+							scales: {
+								yAxes: [{
+									ticks: {
+										beginAtZero: true,
+										userCallback: function(label, index, labels) {
+											if (Math.floor(label) === label) {
+												return label;
+											}
+										},
+									}
+								}],
+							},
+						}
+					});
+				</script>
 			</div>
 			<br />
 			<div class="vote">
@@ -79,70 +144,5 @@
 	<%- include('../partials/footer.ejs'); %>
 </body>
 <%- include('../partials/foot.ejs'); %>
-<script>
-	const barColors = ["#FF4136", "#2ECC40", "#0074D9", "#FF851B", "#B10DC9", "#FFDC00", "#7FDBFF", "#39CCCC", "#3D9970", "#85144b", "#F012BE", "#01FF70", "#FF4136", "#2ECC40", "#0074D9", "#FF851B", "#B10DC9", "#FFDC00", "#7FDBFF", "#39CCCC"];
-	new Chart("<%= poll.slug %>-chart", {
-		type: "bar",
-		data: {
-			labels: <%- JSON.stringify(poll.answers) %>,
-			datasets: [{
-				backgroundColor: barColors,
-				data: <%- JSON.stringify(answerCount) %>
-			}]
-		},
-		options: {
-			legend: {
-				display: false
-			},
-			title: {
-				display: true,
-				text: '<%= poll.question %>'
-			},
-			scales: {
-				yAxes: [{
-					ticks: {
-						beginAtZero: true,
-						userCallback: function(label, index, labels) {
-							if (Math.floor(label) === label) {
-								return label;
-							}
-						},
-					}
-				}],
-			},
-		}
-	});
-	new Chart("<%= poll.slug %>-chart-pie", {
-		type: "pie",
-		data: {
-			labels: <%- JSON.stringify(poll.answers) %>,
-			datasets: [{
-				backgroundColor: barColors,
-				data: <%- JSON.stringify(answerCount) %>
-			}]
-		},
-		options: {
-			legend: {
-				display: false
-			},
-			title: {
-				display: true,
-				text: '<%= poll.question %>'
-			},
-			scales: {
-				yAxes: [{
-					ticks: {
-						beginAtZero: true,
-						userCallback: function(label, index, labels) {
-							if (Math.floor(label) === label) {
-								return label;
-							}
-						},
-					}
-				}],
-			},
-		}
-	});
-</script>
 
 </html>
diff --git a/frontend/partials/foot.ejs b/frontend/partials/foot.ejs
@@ -1,6 +1,7 @@
 <script src="<%- vars.domain %>/js/lightbox-plus-jquery.min.js"></script>
 <script src="<%- vars.domain %>/js/jquery.fittext.js"></script>
 <script src="<%- vars.domain %>/js/splide.min.js"></script>
+<script src="<%- vars.domain %>/js/pjax.min.js"></script>
 <script src="<%- vars.domain %>/js/scripts.js"></script>
 <script>
 	const domain = '<%- vars.domain %>';

diff --git a/frontend/partials/footer.ejs b/frontend/partials/footer.ejs
@@ -1,3 +1,4 @@
+</div>
 <% if (cms.siteDetails[0].advertisement != null) { %><div class="advertisement noMobile"><a href="<%= cms.siteDetails[0]['advertisement-link'] %>" title="Advertisement"><img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].advertisement.path %>" alt="Advertisement" /></a></div><% } %>
 <% if (cms.siteDetails[0]['advertisement-mobile'] != null) { %><div class="advertisement mobileOnly" style="display: none;"><a href="<%= cms.siteDetails[0]['advertisement-link'] %>" title="Advertisement"><img src="<%- vars.asset_prefix %><%= cms.siteDetails[0]['advertisement-mobile'].path %>" alt="Advertisement" /></a></div><% } %>
 <footer style="background-image: url('<%- vars.asset_prefix %><%= cms.siteDetails[0].background.path %>');">
@@ -10,11 +11,11 @@
 		</div>
 		<div class="bottom">
 			<div class="socials"><%- include('socials.ejs') %></div>
-			<p class="noMobile">&copy; <%= cms.siteDetails[0].title %> <%= cms.siteDetails[0].est %> - <%= new Date().getFullYear() %> | <a href="<%- vars.domain %>/admin" title="Open administrator view">Admin</a> <b onClick="alert('-- Hosting --\nHost: Dango Web Solutions (https://dangoweb.com/)\nRefer: https://dangoweb.com/?from=southern-bell\nPlan: Educational Unlimited\nExpiry: June 2025\nOn Expiry: Nothing\n\n-- License --\nType: DWS (Private)\nLicensed To: <%= cms.siteDetails[0].title %>\nLicense: License; Copyright (c) 2024 Dango Web Solutions; See https://dangoweb.com/legal for full terms.; The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n-- CMS --\nValid: True\nEnvironment: southern-bell@dangoweb\nPaid by: Faisal N: 0 Months Unpaid')">(Licensed)</b> | <% if (vars.environment != "production") { %><%- vars.environment.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %> Version<% } else { %><a href="https://faisaln.com/">Faisal N</a><% } %> | <%= pageviews %> Views</p>
+			<p class="noMobile" live-pageviews>&copy; <%= cms.siteDetails[0].title %> <%= cms.siteDetails[0].est %> - <%= new Date().getFullYear() %> | <a href="<%- vars.domain %>/admin" title="Open administrator view">Admin</a> <b onClick="alert('-- Hosting --\nHost: Dango Web Solutions (https://dangoweb.com/)\nRefer: https://dangoweb.com/?from=southern-bell\nPlan: Educational Unlimited\nExpiry: June 2025\nOn Expiry: Nothing\n\n-- License --\nType: DWS (Private)\nLicensed To: <%= cms.siteDetails[0].title %>\nLicense: License; Copyright (c) 2024 Dango Web Solutions; See https://dangoweb.com/legal for full terms.; The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n-- CMS --\nValid: True\nEnvironment: southern-bell@dangoweb\nPaid by: Faisal N: 0 Months Unpaid')">(Licensed)</b> | <% if (vars.environment != "production") { %><%- vars.environment.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %> Version<% } else { %><a href="https://faisaln.com/">Faisal N</a><% } %> | <%= pageviews %> Views</p>
 			<p class="noMobile">We use cookies for analytics and security. <a href="<%- vars.domain %>/denycookies" title="Deny cookies">Click here to deny cookies and leave.</a></p>
 			<p class="mobileOnly">&copy; <%= cms.siteDetails[0].title %> <%= cms.siteDetails[0].est %> - <%= new Date().getFullYear() %></p>
 			<a class="mobileOnly" href="<%- vars.domain %>/admin" title="Open administrator view">Admin</a>
-			<p class="mobileOnly"><%= pageviews %> Views</p>
+			<p class="mobileOnly" live-pageviews><%= pageviews %> Views</p>
 			<a class="mobileOnly" href="<%- vars.domain %>/denycookies" title="Deny cookies">Click to deny cookies.</a>
 			<p class="mobileOnly"><% if (vars.environment != "production") { %><%- vars.environment.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %> Version<% } else { %><a href="https://faisaln.com/">Faisal N</a><% } %></p>
 			<!-- We use "Lightbox2" by Lokesh Dhakar -->

diff --git a/frontend/partials/head.ejs b/frontend/partials/head.ejs
@@ -46,4 +46,5 @@
 	gtag('config', 'G-VB8PCR81YJ');
 </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" />
-<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
+<link rel="preload" as="image" href="<%- vars.asset_prefix %><%= cms.siteDetails[0].logo.path %>">
diff --git a/frontend/partials/header.ejs b/frontend/partials/header.ejs
@@ -1,8 +1,8 @@
 <header>
-	<% if (title === cms.newspapers[cms.newspapers.length - 1].title) { %>
+	<% sortedNews = cms.newspapers.sort((a, b) => new Date(b.date) - new Date(a.date)); if (title === sortedNews[0].title) { %>
 	<div class="announcement">Latest Newspaper</div>
 	<% } else { %>
-	<div class="alert"><a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[cms.newspapers.length - 1].slug %>" title="Latest Newspaper">Latest — <%= cms.newspapers[cms.newspapers.length - 1].title %></a></div>
+	<div class="alert"><a href="<%- vars.domain %>/newspapers/<%= sortedNews[0].slug %>" title="Latest Newspaper">Latest — <%= sortedNews[0].title %></a></div>
 	<br />
 	<br />
 	<% } %>
@@ -25,19 +25,4 @@
 		</div>
 	</div>
 </header>
-<% if (cms.siteDetails[0].loader.enabled) { %>
-<% if (cms.siteDetails[0].loader.text) { %>
-<style>
-	.loader.text {
-		section#\32::before {
-			content: "Loading <%= cms.siteDetails[0].title %>...";
-		}
-	}
-</style>
-<% } %>
-<div class="loader <% if (cms.siteDetails[0].loader.logo) { %>bordered<% } %> <% if (cms.siteDetails[0].loader.text) { %>text<% } %>">
-	<section id="1"></section>
-	<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].logo.path %>" alt="<%= cms.siteDetails[0].title %>">
-	<section id="2"></section>
-</div>
-<% } %>
+<div class="pcontent">
diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css
@@ -150,13 +150,13 @@ header .main {
 	justify-content: space-between;
 	gap: 5px;
 	width: 75%;
-	padding: 50px 0 20px 0;
+	padding: 40px 0 20px 0;
 	border-bottom: 1px solid lightgray;
 }
 
 header .main.home {
 	flex-direction: column !important;
-	padding-top: 80px;
+	padding-top: 65px;
 }
 
 header .main a {
@@ -366,6 +366,51 @@ header .alert a {
 	}
 }
 
+.pcontent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    width: -webkit-fill-available;
+}
+
+.Animated {
+    animation-duration: 0.75s;
+    animation-fill-mode: both;
+}
+
+.Animate--fadeIn {
+    animation-name: fadeIn;
+}
+
+.Animate--fadeOut {
+    animation-name: fadeOut;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.loading {
+    position: fixed;
+    top: 7.5px;
+    right: 7.5px;
+    height: 25px;
+    width: 25px;
+    z-index: 101;
+}
+
+body:has(.alert) .loading {
+    filter: invert(1);
+}
+
 .hero {
 	display: grid;
 	grid-template-columns: 1.3fr 0.7fr;
@@ -1293,6 +1338,11 @@ footer .inner .bottom .socials i:hover {
 		max-width: 70vw;
 	}
 
+	header .main .logo {
+		flex-direction: column;
+		gap: 15px;
+	}
+
 	header .main .links,
 	footer .inner .top .links {
 		display: grid !important;
@@ -1414,4 +1464,4 @@ footer .inner .bottom .socials i:hover {
 	.images .splide__slide img {
 		max-height: 400px;
 	}
-}
+}
diff --git a/frontend/public/images/loading.png b/frontend/public/images/loading.png
diff --git a/frontend/public/js/pjax.min.js b/frontend/public/js/pjax.min.js