Merge branch 'main' into querying-refactor

CONTRIBUTING.md

@@ -0,0 +1,65 @@
+# Contribution guidelines
+
+## Development environment
+
+### Prerequisites
+
+- PHP (version TBD)
+- `make`
+- `entr` to watch for file changes
+- `xdg-open` link handler to invoke browser
+- patience
+
+### Cloning or updating the repository
+
+Ensure the consistency of the `languages` submodule by using the following options:
+
+- `git clone --recurse-submodules <repository-url>`
+- `git pull --recurse-submodules`
+
+### Development
+
+Run at least once: `make fetch` to query servers. This can take around 5 minutes.
+
+Run when developing: `make dev` to watch for changes & serve HTML locally in browser.
+Does not respond to new files.
+
+See [`Makefile`](Makefile) for more details.
+
+### Running your own copy
+
+- point your webserver at the `output` folder
+- install systemd services from the `systemd` folder or an equivalent timer
+- `session_sudoers`: TBD
+
+## Code style guidelines
+
+### General
+
+**Indentation**: Tabs (4-wide)
+
+**Filename seperator**: Hyphen (`-`)
+
+### PHP
+
+**Identifier casing**: `snake_case` and `CONSTANT_CASE`
+
+**Comments and documentation**: TBD
+
+### HTML & CSS
+
+**Identifier casing**: `kebab-case`, occasional `snake_case`
+
+**Comments and documentation**: TBD
+
+### JavaScript
+
+**Identifier casing**: `camelCase` and `CONSTANT_CASE`, occasional `snake_case`
+
+**Comments and documentation**: [JSDoc](https://jsdoc.app/)
+
+## Contact
+
+- Web Development Session Community on [caliban.org](https://sog.caliban.org/)
+- Project lead, querying logic, deployment, community filtering: `someguy` on Session
+- Documentation, code quality, HTML generation, CSS, JS: `gravel` on Session

README.md

@@ -22,39 +22,34 @@ https://getsession.org/
 
 Currently this script crawls the following sites:
 
-- https://github.com/GNU-Linux-libre/Awesome-Session-Group-List
+- <https://github.com/GNU-Linux-libre/Awesome-Session-Group-List>
-- https://lokilocker.com/Mods/Session-Groups/wiki/Session-Open-Groups
+- <https://lokilocker.com/Mods/Session-Groups/wiki/Session-Open-Groups>
-- https://session.directory/
+- <https://session.directory/>
 
-Additionally, the following open community servers are polled:
+Additionally, a few other servers are hardcoded, see [querying logic](php/fetch-servers.php).
 
-- https://open.getsession.org
+### How does this work?
-- http://13.233.251.36:8081
 
-### Steps
+The [`update-listing.php`](php/update-listing.php) script invokes the following two PHP scripts: [`fetch-servers.php`](php/fetch-servers.php) to query available servers, and [`generate-html.php`](php/generate-html.php>) to generate the static HTML.
+
+The querying logic consists of these steps:
 
 1. Fetching source HTML: `get_html_from_known_sources()`
 1. Extracting Session invites from the HTML:
 `extract_join_links_from_html()` and `get_servers_from_join_links()`
 1. Making sure servers are online: `reduce_servers()`
 1. Querying the servers for all available rooms
-and normalize active user numbers: `query_servers_for_rooms()`
+and normalizing active user numbers: `query_servers_for_rooms()`
 1. De-duplicating servers based on public keys:
 `get_pubkeys_of_servers()` and `reduce_addresses_of_pubkeys()`
 1. Aggregating all server info & adding language data: `generate_info_arrays()`
-1. Generating static HTML content: `generateHTML()`
-
-### Legacy support
 
-Right now we fully support legacy SOGS servers, 
+Static HTML is generated from the [`sites`](sites) directory to the [`output`](output) directory, which additionally contains static assets. All contents of `sites` are invoked to produce a HTML page unless they are prefixed with a `+` sign.
-although this support is likely going to be dropped soon, 
-since those servers can not even be joined anymore with current Session clients.  
-Dropping legacy support will also increase maintainability.
 
 ### Work around bad routing to Chinese servers
 
 Depending on your location, it is possible for you to get really bad routing to
-SOGS servers behind the GFW. In this case, 
+SOGS servers behind the [GFW](https://en.wikipedia.org/wiki/Great_Firewall). In this case,
 the initial connection is still successful, but you'll never receive
 any actual content and the retrieval attempt will simply time out.
 This happens randomly. To make sure this won't affect the results, we simply
@@ -64,16 +59,17 @@ until we eventually get the content.
 The details can be seen in `curl_get_contents()`.
 
 ### Official repositories
-- https://github.com/mdPlusPlus/sessioncommunities.online
+
-- https://lokilocker.com/SomeGuy/sessioncommunities.online
+- GitHub: <https://github.com/mdPlusPlus/sessioncommunities.online>
+- Lokinet Gitea: <https://lokilocker.com/SomeGuy/sessioncommunities.online>
 
 If your favourite Session community is missing a language flag,
 you can issue a pull request here:
-- https://github.com/mdPlusPlus/sessioncommunities.online-languages/
 
+- <https://github.com/mdPlusPlus/sessioncommunities.online-languages/>
 
 ## Contact
 
 If you want to contact me, you can add me on Session via my
 [ONS](https://docs.oxen.io/using-the-oxen-blockchain/using-oxen-name-system):
-"someguy" (without the quotes)
+`someguy`.

languages

@@ -1 +1 @@
-Subproject commit 524ad983610b096ed09e721c20cba011dfbc7992
+Subproject commit f2aaed46ea2ef3a6ff03b6eee6f70c81cc20f069

output/js/constants.js

@@ -3,6 +3,7 @@
 // change in the foreseeable future.
 
 export const dom = {
+	/** @return {HTMLTableElement | null} */
 	tbl_communities: () => document.getElementById("tbl_communities"),
 	last_checked: () => document.getElementById("last_checked_value"),
 	qr_modal: (communityID) => document.getElementById(`modal_${communityID}`),
@@ -14,7 +15,7 @@ export const dom = {
 export const COLUMN = {
 	IDENTIFIER:   0,  LANGUAGE:     1,  NAME:         2,
 	DESCRIPTION:  3,  USERS:        4,  PREVIEW:      5,
-	QR_CODE:      6,  JOIN_URL:     7
+	QR_CODE:      6,  SERVER_ICON:  7,  JOIN_URL:     8
 };
 
 // Reverse enum.
@@ -33,7 +34,7 @@ export const ATTRIBUTES = {
 		ACTIVE: 'data-sort',
 		ASCENDING: 'data-sort-asc',
 		COLUMN: 'data-sorted-by',
-		COLUMN_LITERAL: 'sorted-by'
+		// COLUMN_LITERAL: 'sorted-by'
 	}
 };
 
@@ -41,20 +42,33 @@ export function columnAscendingByDefault(column) {
 	return column != COLUMN.USERS;
 }
 
-export function columnIsSortable(column) { return column != COLUMN.QR_CODE; }
+export function columnIsSortable(column) {
-
+	return ![
-export function columnNeedsCasefold(column) {
+		COLUMN.QR_CODE,
-	return [
+		COLUMN.PREVIEW,
-		COLUMN.IDENTIFIER,
+		// Join URL contents are not guaranteed to have visible text.
-		COLUMN.NAME,
+		COLUMN.JOIN_URL
-		COLUMN.DESCRIPTION
 	].includes(column);
 }
 
-export function columnIsNumeric(column) {
+/**
-	return [
+ * @type {Record<string, (el: HTMLTableCellElement) => any>}
-		COLUMN.USERS
+ */
-	].includes(column);
+const TRANSFORMATION = {
+	numeric: (el) => parseInt(el.innerText),
+	casefold: (el) => el.innerText.toLowerCase().trim(),
+	tokenData: (el) => el.getAttribute("data-token")
+}
+
+/**
+ * @type {Dictionary<number, (el: HTMLTableCellElement) => any>}
+ */
+export const COLUMN_TRANSFORMATION = {
+	[COLUMN.USERS]: TRANSFORMATION.numeric,
+	[COLUMN.IDENTIFIER]: TRANSFORMATION.casefold,
+	[COLUMN.NAME]: TRANSFORMATION.casefold,
+	[COLUMN.DESCRIPTION]: TRANSFORMATION.casefold,
+	[COLUMN.SERVER_ICON]: TRANSFORMATION.tokenData
 }
 
 /**

output/main.js

@@ -16,40 +16,24 @@
 // Import magic numbers and data
 import {
 	dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
-	columnAscendingByDefault, columnIsSortable, columnNeedsCasefold,
+	columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION, element
-	columnIsNumeric, element
 } from './js/constants.js';
 
 // Hidden communities for transparency.
 const filteredCommunities = {
 	tests: [
-		"2e9345+c7fb",  // TestRoom
-		"762ba9+c7fb",  // TesterRoom
-		"appletonv2+4264", // -
-		"b4d829+c7fb",  // Test
-		"e5853a+c7fb",  // testtest
 		"fishing+8e2e", // Example group from PySOGS documentation
 		"test+118d",    // Testing 1, 2, 3
-		"test+13f6",    // Testing room
+		"test+13f6",    // Testing room2
-		"test+c01b",    // Testing room
 		"test+fe93",    // 测试（Test)
 		"xyz+7908",     // XYZ Room
-		"xyz+efca",     // XYZ Room
 	],
 
 	offensive: [
-		"60fa60+c7fb",    // "N-word" Community
+		"AlexMed+e093",   // drug trading?
-		"ab1a4d+c7fb",    // zUnsensored Group (CSAM)
-		"AlexMed+e093",   //
 		"gore+e5e0",      // gore
-		"RU-STEROID+e093" //
+		"RU-STEROID+e093" // drug trading?
 	],
-
-	// These communities should be checked regularly
-	// in case they update their PySOGS version
-	legacy: [
-		"Ukraine+02bd"  // https://reccacon.com/view/room/Ukraine
-	]
 };
 
 // This can be achieved with `text-overflow: ellipsis` instead
@@ -62,12 +46,26 @@ const transformJoinURL = (join_link) => {
 	});
 }
 
-function onLoad(timestamp) {
+function getTimestamp() {
+	const timestampRaw =
+		document.querySelector('meta[name=timestamp]')
+		?.getAttribute('content');
+	if (!timestampRaw) return null;
+	const timestamp = parseInt(timestampRaw);
+	if (Number.isNaN(timestamp)) return null;
+	return timestamp;
+}
+
+function onLoad() {
+	const timestamp = getTimestamp();
+	if (timestamp !== null) {
 		setLastChecked(timestamp);
+	}
 	hideBadCommunities();
 	sortTable(COLUMN.NAME);
 	createJoinLinkButtons();
 	markSortableColumns();
+	addQRModalHandlers();
 }
 
 function displayQRModal(communityID) {
@@ -78,6 +76,25 @@ function hideQRModal(communityID) {
 	dom.qr_modal(communityID).style.display = "none";
 }
 
+function addQRModalHandlers() {
+	const rows = dom.tbl_communities()?.rows;
+	if (!rows) throw new Error("Rows not found");
+	for (const row of rows) {
+		if (row.querySelector('th')) continue;
+		const communityID = row.getAttribute('--data-identifier');
+		row.querySelector('.td_qr_code').addEventListener(
+			'click',
+			() => displayQRModal(communityID)
+		);
+		const closeButton =
+			dom.qr_modal(communityID).querySelector('.qr-code-modal-close');
+		closeButton.addEventListener(
+			'click',
+			() => hideQRModal(communityID)
+		);
+	}
+}
+
 function createJoinLinkButtons() {
 	const join_URLs = dom.join_urls();
 	Array.from(join_URLs).forEach((td_url) => {
@@ -90,7 +107,7 @@ function createJoinLinkButtons() {
 function hideBadCommunities() {
 	let numberOfHiddenCommunities = 0;
 
-	for (const category of ['tests', 'offensive', 'legacy']) {
+	for (const category of ['tests', 'offensive']) {
 		numberOfHiddenCommunities +=
 		  filteredCommunities[category]
 		    .map(hideElementByID)
@@ -193,21 +210,12 @@ function makeRowComparer(column, ascending) {
 	}
 
 	// Callback to obtain sortable content from cell text.
-	let contentToSortable = (text) => text.trim();
+	const columnToSortable = COLUMN_TRANSFORMATION[column] ?? ((el) => el.innerText.trim());
-
-	if (columnNeedsCasefold(column)) {
-		// Make certain columns sort regardless of casing.
-		contentToSortable = (text) => text.toLowerCase().trim();
-	}
-	else if (columnIsNumeric(column)) {
-		// Make certain columns sort on parsed numeric value instead of text.
-		contentToSortable = (text) => parseInt(text);
-	}
 
 	// Construct comparer using derived property to determine sort order.
 	const rowComparer = compareProp(
 		ascending ? compareAscending : compareDescending,
-		row => contentToSortable(row.children[column].innerText)
+		row => columnToSortable(row.children[column])
 	);
 
 	return rowComparer;
@@ -249,18 +257,27 @@ function setSortState(table, { ascending, column }) {
 	}
 	table.setAttribute(ATTRIBUTES.SORTING.ASCENDING, ascending);
 	table.setAttribute(ATTRIBUTES.SORTING.COLUMN, column);
-	// This can be used to style column headers in a consistent way, i.e.
+	
-	// #tbl_communities[data-sort-asc=true][sorted-by=name]::after #th_name, ...
+	// No way around this for brief CSS.
-	table.setAttribute(ATTRIBUTES.SORTING.COLUMN_LITERAL, COLUMN_LITERAL[column]);
+	const headers = table.querySelectorAll("th");
+	headers.forEach((th, colno) => {
+		th.removeAttribute(ATTRIBUTES.SORTING.ACTIVE);
+	});
+	headers[column].setAttribute(ATTRIBUTES.SORTING.ACTIVE, true);
 }
 
 // This is best done in JS, as it would require <noscript> styles otherwise.
 function markSortableColumns() {
 	const table = dom.tbl_communities();
-	for (const th of table.querySelectorAll('th')) {
+	const header_cells = table.querySelectorAll('th');
-		if (th.id.includes("qr_code")) continue;
+	for (let colno = 0; colno < header_cells.length; colno++) {
-		th.classList.add('sortable');
+		if (!columnIsSortable(colno)) continue;
-	}
+		header_cells[colno].classList.add('sortable');
+		header_cells[colno].addEventListener(
+			'click',
+			() => sortTable(colno)
+		)
+	};
 }
 
 /**
@@ -284,13 +301,7 @@ function sortTable(column) {
 	setSortState(table, { ascending, column });
 }
 
-// html.js for styling purposes
+// `html.js` selector for styling purposes
-window.document.documentElement.classList.add("js");
+document.documentElement.classList.add("js");
-
-// Crude way to export from module script due to inline event handlers.
-// Ideally, all handlers would be attached from JS via addEventListener.
-Object.assign(window, {
-	onLoad, sortTable, displayQRModal,
-	hideQRModal, copyToClipboard
-});
 
+document.addEventListener('DOMContentLoaded', () => onLoad());

output/styles2.css

@@ -2,10 +2,19 @@ html {
 	font-size: clamp(10px, 2vw, 18px);
 }
 
-html.js .noscript {
+html.js .noscript, .hidden {
 	display: none;
 }
 
+.clickable {
+	cursor: pointer;
+}
+
+.anchorstyle {
+	color: rgb(0, 102, 204);
+	text-decoration: underline;
+}
+
 /* Dead style */
 html:not(.js) .js-only {
 	display: none;
@@ -23,12 +32,62 @@ header {
 	flex-grow: 1;
 }
 
-#tbl_communities { width:100%; }
+#tbl_communities {
+	/* Browser defaults. */
+	--cell-padding-h: 1px;
+	--cell-padding-v: 1px;
+	width:100%;
+}
+
+#tbl_communities th {
+	white-space: nowrap;
+}
+
+#tbl_communities :is(th, td) {
+	padding: var(--cell-padding-v) var(--cell-padding-h);
+}
+
+#tbl_communities th.sortable {
+	position: relative;
+	padding-right: calc( 1.5em + var(--cell-padding-h) );
+}
+
+#tbl_communities th.sortable::after {
+	position: absolute;
+	right: 0.25em;
+	top: 50%;
+	transform: translateY(-50%);
+	/* content: "\25C7"; */ /* White diamond */
+	/* content: "\2195"; */ /* Up-down arrow */
+	/* content: "\25A1"; */ /* White square */
+	/* content: "\25B8"; */ /* Small right pointing triangle */
+	content: "\2B25"; /* Black medium diamond */
+	color: grey;
+}
+
+#tbl_communities[data-sort-asc=true] th[data-sort=true]::after {
+	content: "\25B2"; /* Black up pointing triangle */
+	color: initial;
+}
+
+#tbl_communities[data-sort-asc=false] th[data-sort=true]::after {
+	content: "\25BC"; /* Black up pointing triangle */
+	color: initial;
+}
+
+#toggle-show-room-ids:not(:checked) 
+~ #tbl_communities :is(#th_identifier, .td_identifier) { 
+	display: none;
+}
 
-/* Hide the identifier column before removal. */
+.td_identifier {
-#th_identifier { display: none; }
+	font-family: monospace;
-.td_identifier { display: none; font-family: monospace; }
+}
 
+.td_language {
+	text-align: center;
+	font-size: 1.25em;
+}
 .td_language:empty::after {
 	content: "\2753";
 }
@@ -45,6 +104,27 @@ header {
 
 .td_users       { text-align: right;  }
 .td_preview     { text-align: center; }
+.td_server_icon { text-align: center; }
+
+.td_server_icon-circle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2em;
+	height: 2em;
+	border-radius: 2em;
+	font-family: sans-serif;
+	margin: 0 auto;
+	color: white;
+	text-shadow: 0 0 0.5em #000;
+	box-shadow: 0 0 0.05em #777;
+}
+
+.td_server_icon-circle span {
+	position: relative;
+	top: 0.05em;
+}
+
 .td_join_url     {
 	font-family: monospace;
 	white-space: nowrap;
@@ -70,7 +150,7 @@ header {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	justify-content: space-between;
+	justify-content: space-around;
 }
 
 .copy_button     { font-size: inherit }
@@ -95,12 +175,17 @@ footer nav a {
 	white-space: nowrap;
 }
 
+label[for=toggle-show-room-ids]::after {
+	content: " (Off)"
+}
+
+#toggle-show-room-ids:checked
+~ footer label[for=toggle-show-room-ids]::after {
+	content: " (On)"
+}
+
 /* <Colors> */
 :root {
-	/*--session-classic-dark-green:      #31f196;*/
-	/*--session-classic-dark-gray-one:   #414141;*/
-	/*--session-classic-dark-gray-two:   #2d2d2d;*/
-	/*--session-classic-dark-gray-three: #1b1b1b;*/
 	--alternate-row-color:             #e8e8e8;
 }
 #tbl_communities th                 { background-color: lightgray; }
@@ -209,3 +294,4 @@ footer nav a {
 	to {bottom: 0; opacity: 0;}
 }
 
+

php/getenv.php

@@ -1,11 +1,22 @@
 <?php
 	$PROJECT_ROOT = dirname(__FILE__);
 	
+	(function(){
+		global $PROJECT_ROOT;
+
+		$root_previous = "";
+
 		while (!file_exists("$PROJECT_ROOT/.phpenv")) {
-		if ($PROJECT_ROOT == "/" || $PROJECT_ROOT == "") 
+			if (
+				$PROJECT_ROOT == "/" ||
+				$PROJECT_ROOT == "" ||
+				$PROJECT_ROOT == $root_previous
+			) 
 				throw new RuntimeException("Could not find .phpenv file.");
+			$root_previous = $PROJECT_ROOT;
 			$PROJECT_ROOT = dirname($PROJECT_ROOT);
 		}
+	})();
 
 	require_once "$PROJECT_ROOT/.phpenv";
 	

php/servers/known-servers.php

@@ -41,6 +41,9 @@
 		// Removed by request:
 		// "http://116.203.51.179",
 		// "http://bitcoincash.tokyo/",
+
+		// Removed out of decency:
+		// [redacted]
 	);
 
 	$KNOWN_PUBKEYS = array(

php/utils/servers-rooms.php

@@ -3,6 +3,7 @@
 	include_once "$PROJECT_ROOT/languages/language_flags.php";
 
 	class CommunityRoom implements JsonSerializable {
+		/** @var CommunityServer $server */
 		public readonly object $server;
 		public readonly ?int $active_users;
 		public readonly ?int $active_users_cutoff;
@@ -400,6 +401,10 @@
 			return url_get_base($this->base_url, include_scheme: false);
 		}
 
+		function get_base_url() {
+			return $this->base_url;
+		}
+
 		function get_pubkey() {
 			return $this->pubkey;
 		}

sites/+components/page-head.php

@@ -1,3 +1,11 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
+<meta name="keywords" content="Session, Community, Anonymous, Chat">
+<meta 
+    http-equiv="Content-Security-Policy" 
+    content="
+        script-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'none';
+        object-src 'none'; media-src 'none'; form-action 'none'; base-uri 'self';
+    "
+>

sites/+components/qr_modals.php

@@ -31,7 +31,7 @@
 <?php foreach ($rooms as $room): ?>
 	<div id="modal_<?=$room->get_room_identifier()?>" class="qr-code-modal">
 		<div class="qr-code-modal-content">
-			<span class="qr-code-modal-close" onclick='hideQRModal("<?=$room->get_room_identifier()?>")'>
+			<span class="qr-code-modal-close">
 				&times;
 			</span>
 			<img

sites/+components/tbl_communities.php

@@ -8,14 +8,16 @@
 
 	// Once handlers are attached in JS, this check ceases to be useful.
 	function column_sortable($id) {
-		return $id != "qr";
+		// Join URL contents are not guaranteed to have visible text.
+		return $id != "qr" && $id != "preview" && $id != "join_url";
 	}
 
 	function sort_onclick($colno) {
 		global $TABLE_COLUMNS;
 		$column = $TABLE_COLUMNS[$colno];
 		if (!column_sortable($column['id'])) return "";
-		return " onclick='sortTable($colno)'";
+		$name = $column['name'];
+		return " title='Click to sort by $name'";
 	}
 
 	$TABLE_COLUMNS = [
@@ -26,6 +28,7 @@
 		['id' => "users", 'name' => "Users"],
 		['id' => "preview", 'name' => "Preview"],
 		['id' => "qr", 'name' => "QR"],
+		['id' => "server_icon", 'name' => "Server"],
 		['id' => "join_url", 'name' => "Join URL"],
 	];
 ?>
@@ -39,16 +42,37 @@
 		</th>
 <?php endforeach; ?>
 	</tr>
-<?php foreach ($rooms as $room): ?>
+<?php foreach ($rooms as $id => $room): ?>
-	<tr id="<?=$room->get_room_identifier()?>">
+	<?php
-		<td class="td_identifier"><?=$room->get_room_identifier()?></td>
+		// TODO: Do not forget to rename this escape when merging!
-		<td class="td_language"><?=$room->language_flag?></td>
+		$token = $room->server->get_pubkey();
-		<td class="td_name"><?=$room->name?></td>
+		$icon_hue = hexdec($token[2] . $token[2]);
-		<td class="td_description"
+		$icon_color = "hsl($icon_hue, 80%, 50%)";
-			><?=$room->description?></td>
+
-		<td class="td_users"><?=$room->active_users?></td>
+		$hostname = $room->server->get_base_url();
-		<td class="td_preview">
+
-			<a href="<?=$room->get_preview_url()?>" target="_blank" rel="noopener noreferrer">
+		// Escape external input.
+		// Ternaries prevent passing null-equal strings, which produce warnings.
+		$id = htmlspecialchars($room->get_room_identifier());
+		$language = $room->language_flag ? htmlspecialchars($room->language_flag) : "";
+		$name = htmlspecialchars($room->name);
+		$desc = $room->description ? htmlspecialchars($room->description) : "";
+		$users = htmlspecialchars($room->active_users);
+		$preview_link = htmlspecialchars($room->get_preview_url());
+		$join_link = htmlspecialchars($room->get_invite_url());
+		// TODO: Do not forget to rename this escape when merging!
+		$token = htmlspecialchars($token);
+		$hostname = htmlspecialchars($hostname);
+	?>
+
+	<tr id="<?=$id?>" itemscope itemtype="https://schema.org/EntryPoint" --data-identifier="<?=$id?>">
+		<td class="td_identifier" itemprop="identifier"><?=$id?></td>
+		<td class="td_language"><?=$language?></td>
+		<td class="td_name" itemprop="name"><?=$name?></td>
+		<td class="td_description" itemprop="description"><?=$desc?></td>
+		<td class="td_users"><?=$users?></td>
+		<td class="td_preview" itemprop="url">
+			<a href="<?=$preview_link?>" target="_blank" rel="noopener noreferrer nofollow">
 				<?php if (str_starts_with($room->get_preview_url(), 'http://')): ?>
 					<span class="protocol-indicator protocol-http">HTTP</span>
 				<?php endif; ?>
@@ -61,15 +85,23 @@
 			<img
 				class="qr-code-icon"
 				src="qrcode-solid.svg"
-				onclick='displayQRModal("<?=$room->get_room_identifier()?>")'
 				alt="Pictogram of a QR code"
 			>
 		</td>
+		<td class="td_server_icon"
+			data-token="<?=$token?>"
+			title="<?=$hostname?> (<?=$token?>)"
+			item="image"
+		>
+			<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
+				<span><?=strtoupper($token[0] . $token[1])?></span>
+			</div>
+		</td>
 		<td class="td_join_url">
-			<div class="join_url_container" data-url="<?=$room->get_join_url()?>">
+			<div class="join_url_container" data-url="<?=$join_link?>">
-				<a class="join_url show-from-w5" title="<?=$room->get_join_url()?>"
+				<a class="join_url show-from-w5" title="<?=$join_link?>"
-					><?=truncate($room->get_join_url(), 32)?></a>
+					><?=truncate($join_link, 32)?></a>
-				<a class="noscript" href="<?=$room->get_join_url()?>"
+				<a class="noscript" href="<?=$join_link?>" rel="external nofollow"
 					>Copy link</a>
 			</div>
 		</td>

sites/+instructions/Finnish.txt

@@ -0,0 +1,12 @@
+Mobiililaitteella:
+
+- Napsauta Kopioi-nappia kopioidaksesi ryhmän URL-osoitteen.
+- Avaa Session, paina plussan painiketta ja valitse "Liity ryhmään" ("Join Community").
+- Liitä kopioitu URL-osoite "Syötä yhteisön URL-osoite"-kenttään, ja paina"Liity".
+
+
+Mobiililaitteella, kun tämä sivusto on auki tietokoneellasi:
+
+- Paina valitsemasi yhteisön QR-koodipainiketta tietokoneellasi.
+- Avaa Session, paina plussan painiketta ja valitse "Liity ryhmään" ("Join Community").
+- Valitse ylhäältä "Skannaa QR-koodi" ja skannaa puhelimen kameralla ryhmän QR-koodiin.

sites/+instructions/Russian.txt

@@ -0,0 +1,12 @@
+На мобильном девайсе:
+
+- Нажмите кнопку «Копировать», чтобы скопировать URL-адрес нужной группы.
+- Откройте Session, нажмите на кнопку с плюсом и выберите «Присоединиться к сообществу».
+- Вставьте скопированный URL-адрес в поле «Введите URL-адрес сообщества», и нажмите «Присоединиться».
+
+
+На мобильном девайсе, когда этот сайт открыт на вашем компьютере:
+
+- Нажмите кнопку QR-кода для выбранного сообщества на вашем компьютере.
+- Откройте Session, нажмите на кнопку с плюсом и выберите «Присоединиться к сообществу».
+- Выберите «Сканировать QR-код» наверху и наведите камеру телефона на QR-код. 

sites/index.php

@@ -16,17 +16,35 @@
 	<head>
 		<?php include "+components/page-head.php" ?>
 
+		<link rel="canonical" href="https://sessioncommunities.online/">
 		<link rel="stylesheet" href="styles2.css">
-		<script type="module" src="main.js"></script>
+		<script type="module" src="./main.js"></script>
 		<title>Self-updating list of active Session communities</title>
+		<meta name="description" content="
+			Directory of Session Open Groups — public chatrooms within Session Messenger.
+			Copy these Communities into the Session app
+			and talk anonymously about Privacy, Security, or Cryptocurrency.
+		">
+		<meta name="modified" content="<?=date("Y-m-d H:i:s", $timestamp)?>">
+		<meta property="og:title" content="Click here for Session Communities">
+		<meta
+			property="og:description"
+			content="<?=count($rooms_assoc)?> Communities and counting — updated every day!"
+		>
+		<meta property="og:url" content="https://sessioncommunities.online/">
+		<meta property="og:type" content="website">
+		<meta property="og:locale" content="en_US"/>
+		<meta name="timestamp" content="<?=$timestamp?>">
 	</head>
-	<body onload="onLoad(<?php echo $timestamp ?>)">
+	<body>
 		<header>
 			<div id="header-start"></div>
 			<div id="header-end">
 				<a
 					id="link-instructions"
 					target="_blank"
+					rel="help"
+					title="Mutli-language guide to joining communities using the site."
 					href="instructions.html"
 				>Instructions</a>
 			</div>
@@ -34,6 +52,8 @@
 			<h1 id="headline">Session Communities</h1>
 		<?php include "+components/qr_modals.php" ?>
 
+		<input type="checkbox" id="toggle-show-room-ids" class="hidden">
+
 		<?php include "+components/tbl_communities.php" ?>
 
 		<hr>
@@ -51,10 +71,16 @@
 			</p>
 			<p id="disclaimer">
 					This site is not affiliated with
-					<a href="https://optf.ngo">Oxen Privacy Tech Foundation</a>.
+					<a
+						href="https://optf.ngo"
+						target="_blank"
+					>Oxen Privacy Tech Foundation</a>.
 					<br>
 					Communities shown are fetched automatically from
-					various sources.
+					<a
+						href="https://github.com/mdPlusPlus/sessioncommunities.online#which-sources-are-crawled"
+						target="_blank"
+					>various sources</a>.
 					<br>
 					We make an attempt to hide communities containing
 					objectionable or illegal content, but
@@ -65,6 +91,16 @@
 				However, some interactive features are
 				only available with JS enabled.
 			</p>
+			<p>
+				<label
+					for="toggle-show-room-ids"
+					class="clickable anchorstyle"
+					tabindex="0"
+					title="Shows a column with community identifiers
+					for developers or language data contributors.">
+						Toggle room identifier display
+				</label>
+			</p>
 			<nav>
 				<a
 					href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
@@ -79,20 +115,32 @@
 				<a
 					href="https://github.com/oxen-io/session-pysogs"
 					target="_blank"
-					title="Information about running a community server"
+					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>
+			</nav>
+			<nav>
 				<a
 					href="https://github.com/mdPlusPlus/sessioncommunities.online"
 					target="_blank"
 					title="sessioncommunities.online repository on GitHub."
-				>Source Code & Contact</a>
+				>Source Code</a>
+				<a
+					href="https://lokilocker.com/someguy/sessioncommunities.online"
+					target="_blank"
+					title="sessioncommunities.online repository on Lokinet Gitea."
+				>Source Code (Mirror)</a>
+				<a
+					href="https://github.com/mdPlusPlus/sessioncommunities.online#contact"
+					target="_blank"
+					rel="author"
+					title="Information on how to contact the maintainer of sessioncommunities.online"
+				>Contact</a>
 			</nav>
 		</footer>
-
 		<div id="copy-snackbar">
 			Copied URL to clipboard. Paste into Session app to join
 		</div>

sites/instructions.php

@@ -1,12 +1,14 @@
 <?php
 	include_once "+getenv.php";
 	$instruction_files = glob("+instructions/*.txt");
+	function file_language($file) { return pathinfo($file)['filename']; }
 ?>
 <!DOCTYPE html>
 <html>
 	<head>
 		<?php include "+components/page-head.php" ?>
 
+		<link rel="canonical" href="https://sessioncommunities.online/instructions.php">
 		<link rel="stylesheet" href="css/instructions.css">
 		<style type="text/css">
 		<?php foreach ($instruction_files as $i => $file): ?>
@@ -16,12 +18,29 @@
 			}
 		<?php endforeach; ?>
 		</style>
+		<meta name="description" content="
+			Discover how to use the sessioncommunities.online website
+			to help you join Session Open Groups; available in <?php
+			// Print languages instructions are available in.
+			$languages = array_map('file_language', array_slice($instruction_files, 0, 10));
+			echo(join(", ", $languages));
+			?>. In short: Use the Copy button or scan the QR code!
+		">
+		<meta property="og:title" content="How to join Session Communities">
+		<meta property="og:description" content="Learn how to use sessioncommunities.online to join">
+		<meta property="og:url" content="https://sessioncommunities.online/instructions.php">
+		<meta property="og:type" content="article">
 	</head>
 	<body>
 		<header>
 			<h1>Instructions for joining Session Communities</h1>
 		</header>
 		<main>
+			<p>
+				<a href="/" title="Return to the Session Community listing">
+					Go back to Community list
+				</a>
+			</p>
 			Choose your language:
 			<?php foreach ($instruction_files as $i => $file): ?>
 			<br>
@@ -30,12 +49,13 @@
 				class="language-selection"
 				name="language"
 				type="radio"
+				<?=file_language($file) == 'English' ? 'checked="checked"' : ''?>
 			>
 			<label for="language-selection-<?=$i?>">
 				<?=
 					// Name of the language
 					// Can be later parsed from i.e. first line of file
-					pathinfo($file)['filename']
+					file_language($file);
 				?>
 			</label>
 			<?php endforeach; ?>