socials, more share options, bug fixes

faisalnjs · Oct 13, 2023 · ac06605 · ac06605
1 parent df5e65f
commit ac06605
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 17 deletions.
diff --git a/.gitignore_global b/.gitignore_global
@@ -0,0 +1,2 @@
+node_modules
+.vscode
diff --git a/frontend/pages/article.ejs b/frontend/pages/article.ejs
@@ -35,7 +35,12 @@
 			</div>
 			<div class="right">
 				<div class="icons">
-					<i class="fas fa-link" onClick="copyLink();"></i>
+					<i class="fas fa-copy" onClick="copyLink();"></i>
+					<i class="fa-brands fa-facebook" onClick="shareToFacebook();"></i>
+					<i class="fa-brands fa-x-twitter" onClick="shareToTwitter();"></i>
+					<i class="fa-brands fa-whatsapp" onClick="shareToWhatsapp();"></i>
+					<i class="fa-brands fa-telegram" onClick="shareToTelegram();"></i>
+					<i class="fa-brands fa-line" onClick="shareToLine();"></i>
 				</div>
 			</div>
 		</div>

diff --git a/frontend/pages/artwork.ejs b/frontend/pages/artwork.ejs
@@ -35,7 +35,12 @@
 			</div>
 			<div class="right">
 				<div class="icons">
-					<i class="fas fa-link" onClick="copyLink();"></i>
+					<i class="fas fa-copy" onClick="copyLink();"></i>
+					<i class="fa-brands fa-facebook" onClick="shareToFacebook();"></i>
+					<i class="fa-brands fa-x-twitter" onClick="shareToTwitter();"></i>
+					<i class="fa-brands fa-whatsapp" onClick="shareToWhatsapp();"></i>
+					<i class="fa-brands fa-telegram" onClick="shareToTelegram();"></i>
+					<i class="fa-brands fa-line" onClick="shareToLine();"></i>
 				</div>
 			</div>
 		</div>

diff --git a/frontend/pages/newspaper.ejs b/frontend/pages/newspaper.ejs
@@ -30,7 +30,12 @@
 			</div>
 			<div class="right">
 				<div class="icons">
-					<i class="fas fa-link" onClick="copyLink();"></i>
+					<i class="fas fa-copy" onClick="copyLink();"></i>
+					<i class="fa-brands fa-facebook" onClick="shareToFacebook();"></i>
+					<i class="fa-brands fa-x-twitter" onClick="shareToTwitter();"></i>
+					<i class="fa-brands fa-whatsapp" onClick="shareToWhatsapp();"></i>
+					<i class="fa-brands fa-telegram" onClick="shareToTelegram();"></i>
+					<i class="fa-brands fa-line" onClick="shareToLine();"></i>
 				</div>
 			</div>
 		</div>

diff --git a/frontend/pages/poll.ejs b/frontend/pages/poll.ejs
@@ -45,7 +45,12 @@
 			</div>
 			<div class="right">
 				<div class="icons">
-					<i class="fas fa-link" onClick="copyLink();"></i>
+					<i class="fas fa-copy" onClick="copyLink();"></i>
+					<i class="fa-brands fa-facebook" onClick="shareToFacebook();"></i>
+					<i class="fa-brands fa-x-twitter" onClick="shareToTwitter();"></i>
+					<i class="fa-brands fa-whatsapp" onClick="shareToWhatsapp();"></i>
+					<i class="fa-brands fa-telegram" onClick="shareToTelegram();"></i>
+					<i class="fa-brands fa-line" onClick="shareToLine();"></i>
 				</div>
 			</div>
 		</div>

diff --git a/frontend/pages/search.ejs b/frontend/pages/search.ejs
@@ -10,13 +10,20 @@
 	const filteredNewspapers = cms.newspapers.filter(newspaper => newspaper.title.toLowerCase().includes(query));
 	var tags = {};
 	for (article of cms.articles) {
-		for (tag of article.tags) {
-			if (!tags[tag]) {
-				tags[tag] = [];
+		if (article.tags) {
+			for (tag of article.tags) {
+				tag = tag.toLowerCase();
+				if (!tags[tag]) {
+					tags[tag] = [];
+				};
+				tags[tag].push(article);
 			};
-			tags[tag].push(article);
 		};
 	};
+	var sortedTagsObj = {};
+	for (tag of Object.keys(tags).sort()) {
+		sortedTagsObj[tag] = tags[tag];
+	};
 	const filteredTags = Object.keys(tags).filter(tag => tag.toLowerCase().includes(query));
 	const filteredPolls = cms.polls.filter(poll => {
 		const question = poll.question.toLowerCase();
@@ -61,7 +68,7 @@
 						<h3>Article: <%= article.title %></h3>
 					</a>
 					<% 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>
+					<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/partials/foot.ejs b/frontend/partials/foot.ejs
@@ -1,3 +1,6 @@
 <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/scripts.js"></script>
+<script src="<%- vars.domain %>/js/scripts.js"></script>
+<script>
+    const domain = '<%- vars.domain %>';
+</script>
diff --git a/frontend/partials/footer.ejs b/frontend/partials/footer.ejs
@@ -6,7 +6,7 @@
 			<div class="links"><%- include('links.ejs') %></div>
 		</div>
 		<div class="bottom">
-			<%- include('socials.ejs') %>
+			<div class="socials"><%- include('socials.ejs') %></div>
 			<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  -->

diff --git a/frontend/partials/head.ejs b/frontend/partials/head.ejs
@@ -14,7 +14,7 @@
 	<%- cms.layouts.find(layout=> layout.name==="Articles").css %>
 </style>
 <link rel="stylesheet" href="<%- vars.domain %>/css/styles.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

diff --git a/frontend/partials/header.ejs b/frontend/partials/header.ejs
@@ -2,6 +2,9 @@
 	<div class="announcement">
 		<a href="<%- vars.domain %>/newspapers/<%= cms.newspapers[cms.newspapers.length - 1].slug %>">Latest Newspaper</a>
 	</div>
+	<div class="socials">
+		<%- include('socials.ejs') %>
+	</div>
 	<div class="main <% if (title === '') { %>home<% } %>">
 		<a href="<%- vars.domain %>/">
 			<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].logo.path %>" alt="<%= cms.siteDetails[0].title %>">

diff --git a/frontend/partials/socials.ejs b/frontend/partials/socials.ejs
@@ -0,0 +1,3 @@
+<% cms.siteDetails[0].socials.sort((a, b) => a._o - b._o); for (item of cms.siteDetails[0].socials) { %>
+<a href="<%= item.url %>" title="<%= item.title %>"><i class="fas fa-<%= item.data.icon %>"></i></a>
+<% } %>
diff --git a/frontend/partials/suggested.ejs b/frontend/partials/suggested.ejs
@@ -1,13 +1,12 @@
-<% var article = article || poll || newspaper; var currentSlug = (article || []).slug;
-function ifYesterday(date) { 
+<% function ifYesterday(date) { 
 	var yesterday = new Date();
 	yesterday.setDate(yesterday.getDate() - 1);
 	return date.toDateString() === yesterday.toDateString();
 }; %>
 <div class="articles">
 	<h2>Suggested articles</h2>
 	<div class="grid">
-		<% for (article of cms.articles.filter(a => a.slug !== currentSlug).sort(() => Math.random() - 0.5).slice(0, 3)) { %>
+		<% for (article of cms.articles.filter(a => a.slug !== (article || []).slug).sort(() => Math.random() - 0.5).slice(0, 3)) { %>
 		<div class="article" <% if (article.images[0] != null) { %> style="background-image: url('<%- vars.asset_prefix %><%= article.images[0].path %>')" <% } %>>
 			<div class="inner">
 				<a href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">

diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css
@@ -174,6 +174,11 @@
 		width: unset !important;
 		gap: 30px !important;
 	}
+
+	.toTop {
+		bottom: 20px !important;
+		right: 20px !important;
+	}
 }
 
 :root {
@@ -257,7 +262,7 @@ header .announcement {
 	position: fixed;
 	top: 45px;
 	left: -75px;
-	rotate: -38deg;
+	rotate: -35deg;
 	background-color: var(--theme);
 	z-index: 100;
 }
@@ -266,6 +271,33 @@ header .announcement a {
 	color: var(--background);
 }
 
+header .socials {
+    position: fixed;
+    top: 150px;
+    left: 30px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(10px, 1fr));
+    gap: 10px;
+    justify-items: start;
+    align-items: start;
+}
+
+header .socials i {
+    border: 1px solid #ECECEC;
+    padding: 15px;
+    border-radius: 100%;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background);
+}
+
+header .socials a:nth-child(even) i {
+	margin-top: -30px;
+}
+
 header .main {
 	display: flex;
 	flex-direction: row;
@@ -603,8 +635,28 @@ header .main .search form input::placeholder {
     color: black;
 }
 
+/*.article-i .split .right .icons {
+	display: flex;
+	flex-direction: row-reverse;
+	gap: 10px;
+}*/
+
+.article-i .split .right .icons {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(10px, 1fr));
+	gap: 10px;
+}
+
 .article-i .split .right .icons i {
 	cursor: pointer;
+	font-size: 17.5px;
+    transition: 0.1s;
+}
+
+.article-i .split .right .icons i:hover {
+    color: var(--theme);
+    margin-top: -3px;
+    transition: 0.1s;
 }
 
 .article-i .images {
@@ -779,7 +831,7 @@ footer {
 	width: 100%;
 	background-size: cover;
 	background-position-y: center;
-	padding-top: 125px;
+	padding-top: 175px;
 }
 
 footer .inner {
@@ -835,12 +887,35 @@ footer .inner .bottom {
 	width: 75%;
 	color: var(--text);
 	font-size: 12px;
+    gap: 15px;
 }
 
 footer .inner .bottom a {
 	color: var(--text);
 }
 
+footer .inner .bottom p {
+	margin: 0;
+}
+
+footer .inner .bottom .socials {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+}
+
+footer .inner .bottom .socials i {
+    border: 1px solid var(--text);
+    padding: 15px;
+    border-radius: 100%;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .toTop {
 	background-color: var(--theme);
 	color: var(--background);

diff --git a/frontend/public/js/scripts.js b/frontend/public/js/scripts.js
@@ -23,6 +23,26 @@ function copyLink() {
     alert('Link copied!');
 };
 
+function shareToFacebook() {
+    window.open(`https://www.facebook.com/sharer/sharer.php?u=${domain}`, '_blank');
+};
+
+function shareToTwitter() {
+    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(window.location.href)}`, '_blank');
+};
+
+function shareToWhatsapp() {
+    window.open(`https://wa.me/?text=${encodeURIComponent(window.location.href)}`, '_blank');
+};
+
+function shareToTelegram() {
+    window.open(`https://telegram.me/share/url?url=${encodeURIComponent(window.location.href)}&text=${document.title.split(" |")[0]}`, '_blank');
+};
+
+function shareToLine() {
+    window.open(`https://line.me/R/share?text=${encodeURIComponent(window.location.href)}`, '_blank');
+};
+
 try {
     jQuery(".article-i .split .left .info h1").fitText(1.4);
 } catch { };