Merge branch 'main' of lokilocker.com:SomeGuy/sessioncommunities.online

output/css/instructions.css

@@ -0,0 +1,20 @@
+header {
+  text-align: center;
+}
+
+#instructions {
+  padding: 1em;
+}
+
+.instructions {
+  display: none;
+  /* Inconsistent with rest of content */
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 1.25em;
+  line-height: 1.5;
+  padding: 2em;
+  background-color: silver;
+  border: 2px solid black;
+  border-radius: 1em;
+}

output/js/constants.js

@@ -4,10 +4,10 @@
 
 export const dom = {
 	tbl_communities: () => document.getElementById("tbl_communities"),
-	td_last_checked: () => document.getElementById("td_last_checked"),
+	last_checked: () => document.getElementById("last_checked_value"),
 	qr_modal: (communityID) => document.getElementById(`modal_${communityID}`),
 	join_urls: () => document.getElementsByClassName("td_join_url"),
-	td_summary: () => document.getElementById("td_summary"),
+	servers_hidden: () => document.getElementById("servers_hidden"),
 	snackbar: () => document.getElementById("copy-snackbar")
 }
 

output/main.js

@@ -92,9 +92,8 @@ function hideBadCommunities() {
 		    .reduce((a, b) => a + b);
 	}
 
-	// Not ideal. Separate element should be allocated for content.
-	const summary = dom.td_summary();
-	summary.innerText += ` (${numberOfHiddenCommunities} hidden)`;
+	const summary = dom.servers_hidden();
+	summary.innerText = `(${numberOfHiddenCommunities} hidden)`;
 }
 
 /**
@@ -131,9 +130,8 @@ function setLastChecked(last_checked) {
 	const time_passed_in_seconds = seconds_now - last_checked;
 	const time_passed_in_minutes =
 		Math.floor(time_passed_in_seconds / 60); // time in minutes, rounded down
-	const timestamp_element = dom.td_last_checked();
-	timestamp_element.innerText =
-		`Last checked ${time_passed_in_minutes} minutes ago.`;
+	const timestamp_element = dom.last_checked();
+	timestamp_element.innerText =	`${time_passed_in_minutes} minutes`;
 }
 
 /**

output/styles2.css

@@ -1,4 +1,14 @@
-#headline        { text-align: center; }
+header {
+  display: flex;
+  direction: row;
+  /* Push items as far apart as possible */
+  justify-content: space-between;
+}
+
+#headline {
+  text-align: center;
+  flex-grow: 1;
+}
 
 #tbl_communities { width:100%; }
 
@@ -19,11 +29,23 @@
 
 .copy_button     {  }
 
-#tbl_footer      { width:100%; }
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+}
 
-#td_summary      { text-align: center; }
-#td_last_checked { text-align: center; }
+footer p {
+  width: 75%;
+  margin: .5em;
+  text-align: center;
+}
 
+footer nav a {
+  margin: 0 .5ch;
+}
 
 /* <Colors> */
 :root {

php/generate-html.php

@@ -26,7 +26,9 @@
 		// This works? Yes, yes it does.
 		// We do this to isolate the environment and include-once triggers,
 		// otherwise we could include the documents in an ob_* wrapper.
-		$document = `php $phppath`; // should be identical to shell_exec("php $phppath")
+		
+		// Same as shell_exec, except we don't have to escape quotes.
+		$document = `cd "$TEMPLATES_ROOT"; php $phppath`;
 		
 		file_put_contents($docpath, $document);
 	}

sites/+components/page-head.php

@@ -0,0 +1,2 @@
+<meta charset="UTF-8">
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

sites/+instructions/English.txt

@@ -0,0 +1,13 @@
+On mobile:
+
+
+- Click the Copy button to copy the Join URL.
+- Open Session, tap the plus button and choose "Join Community".
+- Tap the "Enter Community URL" field, paste your URL and tap "Join".
+
+
+On mobile, with this site open on your PC:
+
+- Click the QR Code button for your chosen community on your PC.
+- Open Session, tap the plus button and choose "Join Community".
+- Choose "Scan QR Code" at the top and point your phone camera at the QR code. 

sites/+instructions/Esperanto.txt

@@ -0,0 +1,5 @@
+Ĉe poŝtelefono:
+
+- Klaki sur la butono "Copy" por kopii la kuniĝa ligilo.
+- Malfermi Session-on, frapeti sur la plus-a butono kaj elekti "Kuniĝi komunumon".
+- Frapeti sur "Entajpi komunuma liĝilo", elpoŝigi via ligilo kaj frapeti sur "Kuniĝi".

sites/index.php

@@ -11,29 +11,84 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta charset="UTF-8">
-		<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
+		<?php include "+components/page-head.php" ?>
+
 		<link rel="stylesheet" href="styles2.css">
 		<script type="module" src="main.js" defer></script>
 		<title>Self-updating list of active Session communities</title>
 	</head>
 	<body onload="onLoad(<?php echo $timestamp ?>)">
-		<h1 id="headline">Session Communities</h1>
+		<header>
+			<div id="header-start"></div>
+			<div id="header-end">
+				<a
+					id="link-instructions"
+					target="_blank"
+					href="instructions.html"
+				>Instructions</a>
+			</div>
+		</header>
+			<h1 id="headline">Session Communities</h1>
 		<?php include "+components/qr_modals.php" ?>
 
 		<?php include "+components/tbl_communities.php" ?>
 
-		<table id="tbl_footer">
-			<tr>
-				<td id="td_summary">
-					<?=count($rooms_assoc)?> unique Session Communities 
-					on <?=count_servers($rooms_assoc)?> servers have been found.
-				</td>
-			</tr>
-			<tr>
-				<td id="td_last_checked">Last checked X minutes ago.</td>
-			</tr>
-		</table>
+		<hr>
+
+		<footer>
+			<p id="server_summary">
+				<?=count($rooms_assoc)?> unique Session Communities
+				on <?=count_servers($rooms_assoc)?> servers have been found.
+				<span id="servers_hidden">(None hidden as JS is off)</span>
+			</p>
+			<p id="last_checked">
+				Last checked <span id="last_checked_value"></span> ago.
+			</p>
+			<p id="disclaimer">
+					This site is not affiliated with
+					<a href="https://optf.ngo">Oxen Tech Privacy Foundation</a>.
+					<br>
+					Communities shown are fetched automatically from
+					various sources.
+					<br>
+					We make an attempt to hide communities containing
+					objectionable or illegal content, but
+					you should still proceed with caution.
+			</p>
+			<noscript>
+				<p>
+					This site works fine without JavaScript.
+					However, some interactive features are
+					only available with JS enabled.
+				</p>
+			</noscript>
+			<nav>
+				<a
+					href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
+					target="_blank"
+					title="Closed groups curated by community moderators"
+				>Closed Groups</a>
+				<a
+					href="https://session.directory/"
+					target="_blank"
+					title="User-submitted closed groups, communities and user profiles. Not safe for work."
+				>session.directory</a>
+				<a
+					href="https://github.com/oxen-io/session-pysogs"
+					target="_blank"
+					title="Information about running a community server"
+				>Host Your Own Community</a>
+				<a
+					href="https://getsession.org/terms-of-service"
+					target="_blank"
+				>Session Terms Of Service</a>
+				<a
+					href="https://github.com/mdPlusPlus/sessioncommunities.online"
+					target="_blank"
+					title="sessioncommunities.online repository on GitHub."
+				>Source Code & Contact</a>
+			</nav>
+		</footer>
 
 		<div id="copy-snackbar">
 			Copied URL to clipboard. Paste into Session app to join

sites/instructions.php

@@ -0,0 +1,63 @@
+<?php
+	include_once "+getenv.php";
+	$instruction_files = glob("+instructions/*.txt");
+?>
+<!DOCTYPE html>
+<html>
+	<head>
+		<?php include "+components/page-head.php" ?>
+
+		<link rel="stylesheet" href="css/instructions.css">
+		<style type="text/css">
+		<?php foreach ($instruction_files as $i => $file): ?>
+			#language-selection-<?=$i?>:checked ~ 
+			#instructions #instructions-<?=$i?> {
+				display: block;
+			}
+		<?php endforeach; ?>
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>Instructions for joining Session Communities</h1>
+		</header>
+		<main>
+			Choose your language:
+			<?php foreach ($instruction_files as $i => $file): ?>
+			<br>
+			<input 
+				id="language-selection-<?=$i?>"
+				class="language-selection"
+				name="language"
+				type="radio"
+			>
+			<label for="language-selection-<?=$i?>">
+				<?=
+					// Name of the language
+					// Can be later parsed from i.e. first line of file
+					pathinfo($file)['filename']
+				?>
+			</label>
+			<?php endforeach; ?>
+			
+			
+			<article id="instructions">
+			<?php foreach ($instruction_files as $i => $file): ?>
+			<section id="instructions-<?=$i?>" class="instructions"><?php
+				// Sanitization as second layer of protection
+				// for user-submitted instruction files.
+				// Should not ever have to be used.
+				$content = trim(file_get_contents($file));
+				$content = htmlentities($content);
+				// Minimal formatting so that contributions are easier
+				$content = str_replace("\n-", "\n\n•", $content);
+				$content = str_replace("\n\n\n", "<br><br>", $content);
+				$content = str_replace("\n\n", "<br>", $content);
+				echo $content;
+			?>
+			</section>
+			<?php endforeach; ?>
+			</article>
+		</main>
+	</body>
+</html>