[Discord] Added image loading button for extra privacy

assets/scss/plugin/discordinvite.scss

@@ -81,20 +81,31 @@
 				}
 			}
 		}
+	}
+}
 
-		.invitebutton{
-			color: white;
-			padding: 14px 35px;
-			min-width: 100px;
-			flex-grow: 1;
-			border-radius: 6px;
-			text-align: center;
-			background-color: #2d7d46;
-			transition: background-color .17s ease,color .17s ease;
-		}
+.invitebutton {
+	color: white;
+	padding: 14px 35px;
+	min-width: 100px;
+	flex-grow: 1;
+	border-radius: 6px;
+	text-align: center;
+	background-color: #2d7d46;
+	transition: background-color .17s ease,color .17s ease;
+	cursor: pointer;
+}
 
-		.invitebutton:hover{
-			background-color: #215b32;
-		}
+.invitebutton:hover{
+	background-color: #215b32;
+}
+
+.load-discordinvite {
+	.invitebutton {
+		margin-right: 10px;
 	}
+	margin-bottom: 10px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }

content/discord/_index.md

@@ -5,11 +5,13 @@ alt: "Discord-Image"
 description: "A short list of all discord servers"
 weight: 06000000
 ---
+{{<load-discordinvite>}}
 
 The main Minecraft TAS Server:
 {{<discordinvite "jGhNxpd">}}
 
 ## Other related discords
+
 For all things TASing and the home of TASBot:
 {{<discordinvite "73SXrea">}}
 Our RTA colleagues. You can also find more info on their website: [minecraftspeedrunning.com](https://minecraftspeedrunning.com)

layouts/shortcodes/discordinvite.html

@@ -1,78 +1,22 @@
-<div class=invite id="invite-{{.Get 0}}">
+<div class="invite" invite-url="{{.Get 0}}">
+	<img class = "splash" style = "display: none;"></img>
 	<div class="bottom-section">
 		<div class="guild-wrapper">
+			<img class = "server-icon" src="/discordinvite/missing.png"></img>
 			<div class="title-wrapper">
-				<strong class="discord-title"></strong>
+				<strong class="discord-title">https://discord.gg/{{.Get 0}}</strong>
 				<div>
 					<div>
 						<i class="discord-indic__online"></i>
-						<p class="discord-online"></p>
+						<p class="discord-online">???</p>
 					</div>
 					<div>
 						<i class="discord-indic__offline"></i>
-						<p class="discord-member"></p>
+						<p class="discord-member">???</p>
 					</div>
 				</div>
 			</div>
 		</div>
 		<a class="invitebutton" href="https://discord.gg/{{.Get 0}}">Join</a>
 	</div>
 </div>
-
-<script>
-	function loadInvite(invite){
-		let url = 'https://discord.com/api/v10/invites/{{.Get 0}}?with_counts=true';
-		fetch(url)
-			.then(response => response.json())
-			.then(json => {
-				let inviteElement = document.getElementById("invite-"+invite);
-				if(json.code==10006){
-					let discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
-					discordTitle.innerHTML=json.message;
-					return;
-				}
-
-				//Create Element
-				let icon = document.createElement("img");
-				let splash = document.createElement("img");
-
-				//Getting guild things
-				let id = json.guild.id;
-				let gicon = json.guild.icon;
-				let gsplash = json.guild.splash;
-				let name = json.guild.name;
-				let onlinecount = json.approximate_presence_count.toLocaleString();
-				let membercount = json.approximate_member_count.toLocaleString();
-
-				let fileExtension=".png";
-				if(gicon.includes("a_")){
-					fileExtension=".gif";
-				}
-
-				icon.src = "https://cdn.discordapp.com/icons/" + id + "/" + gicon + fileExtension + "?size=128";
-
-
-				let discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
-				let discordOnline=inviteElement.getElementsByClassName("discord-online")[0];
-				let discordMembers=inviteElement.getElementsByClassName("discord-member")[0];
-
-				discordTitle.innerHTML=name;
-				discordOnline.innerHTML=onlinecount+" Online";
-				discordMembers.innerHTML=membercount+" Members"
-
-
-				icon.classList.add("server-icon");
-
-				splash.classList.add("splash");
-
-				if(gsplash!=null){
-					splash.src = "https://cdn.discordapp.com/splashes/"+ id +"/"+gsplash+".png?size=480"
-					inviteElement.prepend(splash);
-				}
-
-				inviteElement.getElementsByTagName("div")[0].getElementsByTagName("div")[0].prepend(icon);
-			});
-		}
-
-	loadInvite("{{.Get 0}}");
-</script>

layouts/shortcodes/load-discordinvite.html

@@ -0,0 +1,7 @@
+<div class="load-discordinvite">
+	<div class="invitebutton" id="load-invite-button">
+		Load images
+	</div>
+	<strong>By clicking this button, you will connect to the discord servers to download the images for the invites. This might be giving you cookies!</strong>
+</div>
+<script src="/js/load-discordinvites.js"></script>

static/js/load-discordinvites.js

@@ -0,0 +1,65 @@
+
+document.getElementById("load-invite-button").addEventListener("click", function (e){
+	loadAllInvites();
+	document.getElementById("load-invite-button").parentElement.style="display: none";
+})
+
+function loadAllInvites(){
+	const invites = document.getElementsByClassName("invite");
+	for(const element of invites){
+		const url = element.getAttribute("invite-url");
+		loadInvite(url, element);
+	}
+}
+
+/**
+ * 
+ * @param {string} inviteUrl
+ * @param {HTMLElement} inviteElement
+ */
+function loadInvite(inviteUrl, inviteElement){
+	const url = 'https://discord.com/api/v10/invites/'+inviteUrl+'?with_counts=true';
+	fetch(url)
+		.then(response => response.json())
+		.then(json => {
+			if(json.code==10006){
+				const discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
+				discordTitle.innerHTML=json.message;
+				return;
+			}
+
+			//Create Element
+			const icon = inviteElement.getElementsByClassName("server-icon")[0];
+			const splash = inviteElement.getElementsByClassName("splash")[0];
+
+			//Getting guild things
+			const id = json.guild.id;
+			const gicon = json.guild.icon;
+			const gsplash = json.guild.splash;
+			const name = json.guild.name;
+			const onlinecount = json.approximate_presence_count.toLocaleString();
+			const membercount = json.approximate_member_count.toLocaleString();
+
+			let fileExtension=".png";
+			if(gicon.includes("a_")){
+				fileExtension=".gif";
+			}
+
+			icon.src = "https://cdn.discordapp.com/icons/" + id + "/" + gicon + fileExtension + "?size=128";
+
+
+			const discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
+			const discordOnline=inviteElement.getElementsByClassName("discord-online")[0];
+			const discordMembers=inviteElement.getElementsByClassName("discord-member")[0];
+
+			discordTitle.innerHTML=name;
+			discordOnline.innerHTML=onlinecount+" Online";
+			discordMembers.innerHTML=membercount+" Members"
+
+
+			if(gsplash!=null){
+				splash.src = "https://cdn.discordapp.com/splashes/"+ id +"/"+gsplash+".png?size=480"
+				splash.style = "display: block";
+			}
+		});
+	}