gravel
/
sessioncommunities.online
mirror of https://codeberg.org/gravel/sessioncommunities.online
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

optimize dom size & json delivery

Browse Source
dev
gravel 2 years ago
parent cf8c91f492
commit 1d73a38120
Signed by: gravel
GPG Key ID: C0538F3C906B308F
7 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File

2
output/index.css
Unescape Escape View File

@ -348,7 +348,7 @@ header {
content: "\2753";
}
.td_description {
html.js .td_description {
position: relative;
overflow: hidden;
text-overflow: ellipsis;

38
output/js/util.js
Unescape Escape View File

@ -65,6 +65,16 @@ export class RoomInfo {
const { admins = [], moderators = [] } = room;
return [...new Set([...admins, ...moderators])];
}
static getRoomPublicKey(identifier) {
const server = _RoomInfo.getRoomServer(identifier);
return server.pubkey;
}
static getRoomCreationDate(identifier) {
const room = _RoomInfo.getRoom(identifier);
return new Date(row.created * 1000);
}
}
export const dom = {
@ -73,9 +83,13 @@ export const dom = {
tbl_communities_content_rows:
() => Array.from(dom.tbl_communities()?.rows)?.filter(row => !row.querySelector('th')),
community_row: (communityID) => document.querySelector(`.room-row[${ATTRIBUTES.ROW.IDENTIFIER}="${communityID}"]`),
/**
* @param {HTMLTableRowElement} row
*/
row_info: (row) => {
const dateCreated = new Date(row.getAttribute(ATTRIBUTES.ROW.DATE_CREATED) * 1000);
const joinLink = row.querySelector('.td_join_url a[href]').getAttribute('href');
const identifier = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
const joinURL = new URL(joinLink);
/** @type {string[]} */
return {
language_flag: row.querySelector('.td_language').textContent.trim(),
@ -83,16 +97,16 @@ export const dom = {
description: row.querySelector('.td_description').textContent.trim(),
users: parseFloat(row.querySelector('.td_users').textContent.trim()),
preview_link: row.querySelector('.td_preview a[href]').getAttribute('href'),
join_link: row.querySelector('.td_join_url a[href]').getAttribute('href'),
join_link: joinLink,
identifier,
hostname: row.getAttribute(ATTRIBUTES.ROW.HOSTNAME),
public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
hostname: `${joinURL.protocol}//${joinURL.host}`,
public_key: RoomInfo.getRoomPublicKey(identifier),
staff: RoomInfo.getRoomStaff(identifier),
tags: RoomInfo.getRoomTags(identifier),
icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON),
has_icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON).trim() != "",
icon_safety: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON_SAFETY),
date_created: dateCreated,
date_created: RoomInfo.getRoomCreationDate(identifier),
creation_datestring: dateCreated.toLocaleDateString(undefined, {dateStyle: "medium"})
};
},
@ -146,9 +160,8 @@ export const COMPARISON = {
export const ATTRIBUTES = {
ROW: {
TAGS: 'data-tags',
IDENTIFIER: 'data-identifier',
IDENTIFIER: 'data-id',
PUBLIC_KEY: 'data-pubkey',
HOSTNAME: 'data-hostname',
STAFF_DATA: 'data-staff',
ROOM_ICON: 'data-icon',
ROOM_ICON_SAFETY: 'data-icon-safe',
@ -220,23 +233,24 @@ export function columnIsSortable(column) {
}
/**
* @type {Record<string, (el: HTMLTableCellElement) => any>}
* @type {Record<string, (el: HTMLTableCellElement, row: HTMLTableRowElement) => any>}
*/
const TRANSFORMATION = {
numeric: (el) => parseInt(el.innerText),
casefold: (el) => el.innerText.toLowerCase().trim(),
getSortKey: (el) => el.getAttribute("data-sort-by")
getName: (_, row) => dom.row_info(row).name.toLowerCase(),
getRoomPublicKey: (_, row) => dom.row_info(row).public_key
}
/**
* @type {Dictionary<number, (el: HTMLTableCellElement) => any>}
* @type {Dictionary<number, (el: HTMLTableCellElement, row: HTMLTableRowElement) => any>}
*/
export const COLUMN_TRANSFORMATION = {
[COLUMN.USERS]: TRANSFORMATION.numeric,
[COLUMN.IDENTIFIER]: TRANSFORMATION.casefold,
[COLUMN.NAME]: TRANSFORMATION.getSortKey,
[COLUMN.NAME]: TRANSFORMATION.getName,
[COLUMN.DESCRIPTION]: TRANSFORMATION.casefold,
[COLUMN.SERVER_ICON]: TRANSFORMATION.getSortKey
[COLUMN.SERVER_ICON]: TRANSFORMATION.getRoomPublicKey
}
/**

15
output/main.js
Unescape Escape View File

@ -136,13 +136,10 @@ async function onLoad() {
setLastChecked(timestamp);
}
hideBadCommunities();
// Sort by server to show off new feature & align colors.
sortTable(COLUMN.SERVER_ICON);
initializeSearch();
createJoinLinkButtons();
markSortableColumns();
addQRModalHandlers();
addServerIconInteractions();
addSearchInteractions();
preloadImages();
setInterval(() => {
@ -159,6 +156,7 @@ async function onLoad() {
})
await RoomInfo.fetchRooms();
reactToURLParameters();
addServerIconInteractions();
}
/**
@ -463,18 +461,19 @@ function setLastChecked(last_checked) {
const time_passed_in_minutes =
Math.floor(time_passed_in_seconds / 60); // time in minutes, rounded down
const timestamp_element = dom.last_checked();
timestamp_element.innerText = `${time_passed_in_minutes} minutes ago`;
if (!timestamp_element) throw new Error("Expected to find timestamp element");
timestamp_element.innerText = `${time_passed_in_minutes} minutes ago`;
}
// TODO: Move info into dynamic modal.
function addServerIconInteractions() {
const rows = dom.tbl_communities_content_rows();
for (const row of rows) {
const hostname = row.getAttribute(ATTRIBUTES.ROW.HOSTNAME);
const publicKey = row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY);
const { hostname, public_key } = dom.row_info(row);
const serverIcon = row.querySelector('.td_server_icon');
if (!serverIcon) continue;
serverIcon.addEventListener('click', () => {
alert(`Host: ${hostname}\n\nPublic key:\n${publicKey}`);
alert(`Host: ${hostname}\n\nPublic key:\n${public_key}`);
});
}
}
@ -582,7 +581,7 @@ function makeRowComparer(column, ascending) {
// Construct comparer using derived property to determine sort order.
const rowComparer = compareProp(
ascending ? compareAscending : compareDescending,
row => columnToSortable(row.children[column])
row => columnToSortable(row.children[column], row)
);
return rowComparer;

5
sites/+components/communities-json-ld.php
Unescape Escape View File

@ -27,11 +27,6 @@
'target' => "$SITE_CANONICAL_URL/#q={search_term_string}",
'query-input' => 'required name=search_term_string'
),
'mentions' => array_map(function (CommunityRoom $room) {
return array(
'@id' => $room->get_join_url()
);
}, $rooms),
);
?>

2
sites/+components/qr-modals.php
Unescape Escape View File

@ -104,7 +104,7 @@
<button
id="details-modal-copy-room-id"
class="themed-button"
data-hydrate-with="identifier:data-identifier"
data-hydrate-with="identifier:data-id"
title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
>
Copy ID

34
sites/+components/tbl-communities.php
Unescape Escape View File

@ -59,8 +59,7 @@
$icon_hue = hexdec($pubkey[2] . $pubkey[2]);
$icon_color = "hsl($icon_hue, 80%, 50%)";
$server_icon = server_icon($room->server, '64x64');
$hostname = $room->server->get_base_url();
$pubkey_shorthand = strtoupper($pubkey[0] . $pubkey[1]);
$id = html_sanitize($room->get_room_identifier());
$language = html_sanitize($room->get_language_flag());
@ -72,23 +71,23 @@
$join_link = html_sanitize($room->get_join_url());
$pubkey = html_sanitize($pubkey);
$hostname = html_sanitize($hostname);
/**
* Note on refactoring:
* Icon is hard to move to JSON because it'd have to be generated by fetching code
* Icon safety is depended on by CSS styles
*/
?>
<tr class="room-row"
itemscope
itemtype="https://schema.org/EntryPoint"
itemid="<?=$join_link?>"
data-identifier="<?=$id?>"
data-pubkey="<?=$pubkey?>"
data-hostname="<?=$hostname?>"
data-id="<?=$id?>"
data-icon='<?=room_icon($room, '64x64')?>'
data-icon-safe='<?=$room->icon_safety()?>'
data-created='<?=html_sanitize($room->created)?>'
>
<td class="td_language tbl_communities__td" title="Language flag for '<?=$name?>'"><?=$language?></td>
<td class="td_name tbl_communities__td"
data-sort-by="<?=strtolower($name)?>"
>
<td class="td_name tbl_communities__td">
<a
href="<?=$preview_link?>"
class="td_name-inner"
@ -99,7 +98,7 @@
><?=
$name
?></a>
<span class="room-labels-container noindex robots-noindex robots-nocontent"><!--noindex-->
<span class="room-labels-container">
<?php foreach ($room->get_room_tags() as $tag): if (CommunityTag::is_showcased_tag($tag->text)): ?>
<span
class="room-label room-label-view-main <?=$tag->get_tag_classname()?> badge"
@ -108,13 +107,11 @@
truncate($tag->get_text_sanitized(), 16)
?></span>
<?php endif; endforeach; ?>
<!--/noindex--></span>
</span>
</td>
<!--noindex--><td
class="td_description tbl_communities__td noindex robots-noindex robots-nocontent"
title="Description for '<?=$name?>':
<?=$desc?>"
title="Description for '<?=$name?>'"
itemprop="description"
><?=$desc?></td><!--/noindex-->
<td
@ -149,13 +146,12 @@
</a>
</td>
<td class="td_server_icon tbl_communities__td"
data-sort-by="<?=$pubkey?>"
title="Host: <?=$hostname?> (<?=$pubkey?>)"
title="Host: <?=$hostname?>"
item="image"
>
<?php if (empty($server_icon)): ?>
<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
<span class="td_server_icon-text"><?=strtoupper($pubkey[0] . $pubkey[1])?></span>
<span class="td_server_icon-text"><?=$pubkey_shorthand?></span>
</div>
<?php else: ?>
<div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div>
@ -163,7 +159,7 @@
</td>
<td class="td_join_url tbl_communities__td">
<div class="join_url_container" data-url="<?=$join_link?>">
<span class="join_url show-from-w5" title="<?=$join_link?>"
<span class="join_url show-from-w5"
><?=truncate($join_link, 32)?></span>
<a
class="noscript"

1
sites/index.php
Unescape Escape View File

@ -38,6 +38,7 @@
<link rel="stylesheet" href="/index.css">
<script type="module" src="/main.js"></script>
<link rel="modulepreload" href="/js/util.js">
<link rel="preload" href="/servers.json" as="fetch" crossorigin="anonymous"/>
<link rel="help" href="/instructions">
<title>Session Communities — sessioncommunities.online</title>
<meta name="description" content="Public Session Group list — updated daily! <?php

Write Preview
Loading…
Cancel
Save