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

Shrink HTML size I

Browse Source
dev
gravel 6 months ago
parent 4077e664cd
commit 740c5c1675
Signed by: gravel
GPG Key ID: C0538F3C906B308F
11 changed files with 109 additions and 86 deletions
Show Stats Download Patch File Download Diff File

22
output/css/banner.css
Unescape Escape View File

@ -0,0 +1,22 @@
.banner {
position: relative;
margin: 0 1rem 1rem;
border-left: var(--primary-color) 1rem solid;
padding: 1rem;
text-align: center;
}
.banner-title {
font-size: 1.5rem;
}
.banner-subtitle {
font-size: 1.25rem;
}
.banner-note {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
}

32
output/index.css
Unescape Escape View File

@ -124,23 +124,23 @@ html.js .noscript, .hidden {
100% { }
}
.room-label, .sample-search {
.tag, .sample-search {
color: black;
}
.room-label-view-main {
.tag-view-main {
opacity: 0.75;
}
.room-label-user, .sample-search-tag {
.tag-user, .sample-search-tag {
background-color: greenyellow;
}
.room-label-reserved, .sample-search-tag-reserved {
.tag-reserved, .sample-search-tag-reserved {
background-color: yellow;
}
.room-label-warning {
.tag-warning {
background-color: pink;
}
@ -152,7 +152,7 @@ html.js .noscript, .hidden {
background-color: whitesmoke;
}
.room-label-view-main:not(.room-label-highlighted) {
.tag-view-main:not(.tag-highlighted) {
background-color: transparent;
color: var(--primary-color);
}
@ -259,7 +259,7 @@ header {
white-space: nowrap;
}
.tbl_communities__th, .tbl_communities__td {
.tbl_communities__th, .tbl_cell {
padding: var(--cell-padding-v) var(--cell-padding-h);
}
@ -424,6 +424,12 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
padding: var(--cell-padding-small) !important;
}
.qr-code-icon {
width: 36px;
height: 41px;
background-image: url('qrcode-solid.svg')
}
.td_server_icon {
text-align: center;
padding: var(--cell-padding-small) !important;
@ -701,35 +707,35 @@ aside > details[open] > summary:after{
}
/* Responsive properties */
.room-label-view-main:nth-of-type(5) ~ .room-label {
.tag-view-main:nth-of-type(5) ~ .tag {
display: none;
}
@media (max-width: 1600px) {
.room-label-view-main:nth-of-type(4) ~ .room-label {
.tag-view-main:nth-of-type(4) ~ .tag {
display: none;
}
}
@media (max-width: 1500px) {
.room-label-view-main:nth-of-type(3) ~ .room-label {
.tag-view-main:nth-of-type(3) ~ .tag {
display: none;
}
}
@media (max-width: 1400px) {
.room-label-view-main:nth-of-type(2) ~ .room-label {
.tag-view-main:nth-of-type(2) ~ .tag {
display: none;
}
}
@media (max-width: 1200px) {
.room-label-view-main:nth-of-type(1) ~ .room-label {
.tag-view-main:nth-of-type(1) ~ .tag {
display: none;
}
}
.room-label-view-main:not(.room-label-showcased) {
.tag-view-main:not(.tag-showcased) {
display: none;
}

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

@ -141,6 +141,7 @@ export const dom = {
row_info: (row) => {
const identifier = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
const dateCreated = RoomInfo.getRoomCreationDate(identifier);
const [icon, iconSafety] = row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON).split(":");
/** @type {string[]} */
return {
language_flag: RoomInfo.getRoomLanguageFlag(identifier),
@ -154,9 +155,9 @@ export const dom = {
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),
icon: icon,
has_icon: icon.trim() != "",
icon_safety: parseInt(iconSafety),
date_created: dateCreated,
creation_datestring: dateCreated.toLocaleDateString(undefined, {dateStyle: "medium"})
};
@ -168,7 +169,6 @@ export const dom = {
details_modal_tag_container: () => document.getElementById('details-modal-room-tags'),
details_modal_qr_code: () => document.getElementById('details-modal-qr-code'),
details_modal_room_icon: () => document.getElementById('details-modal-community-icon'),
join_urls: () => document.getElementsByClassName("join_url_container"),
servers_hidden: () => document.getElementById("servers_hidden"),
snackbar: () => document.getElementById("copy-snackbar"),
qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
@ -216,7 +216,6 @@ export const ATTRIBUTES = {
PUBLIC_KEY: 'data-pubkey',
STAFF_DATA: 'data-staff',
ROOM_ICON: 'data-icon',
ROOM_ICON_SAFETY: 'data-icon-safe',
DATE_CREATED: 'data-created'
},
SORTING: {
@ -321,6 +320,6 @@ export const element = new Proxy({}, {
}
});
export const unreachable = () => { throw new Error("Unreachable"); };
export const unreachable = (error = "") => { throw new Error(error || "Unreachable"); };
export const workOnMainThread = () => new Promise(resolve => setTimeout(resolve, 0));

25
output/main.js
Unescape Escape View File

@ -60,12 +60,20 @@ let shownCommunityId = "";
* @param {string} join_link
* @returns {HTMLElement}
*/
const transformJoinURL = (join_link) => {
const transformJoinURL = () => {
return element.button({
textContent: "Copy",
className: "copy_button",
title: "Click here to copy the join URL",
onclick: () => copyToClipboard(join_link)
onclick: function () {
if (!(this instanceof HTMLButtonElement)) throw new Error("Not a button");
copyToClipboard(
dom.row_info(
this.closest(".room-row")
?? unreachable("No row parent found for button")
).join_link
);
}
});
}
@ -183,7 +191,7 @@ async function onLoad() {
*/
const tagBody = ({text, type, description = ""}, inMainView = false) => element.span({
textContent: text.slice(0, 16),
className: `room-label room-label-view-${inMainView ? 'main' : 'secondary'} room-label-${type} badge`,
className: `tag tag-view-${inMainView ? 'main' : 'secondary'} tag-${type} badge`,
title: description || `Tag: ${text}`
});
@ -381,7 +389,7 @@ function preloadImages() {
rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.IDENTIFIER)
);
const icons = rows.map(
rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.ROOM_ICON)
rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.ROOM_ICON)?.split(":")?.[0]
)
for (const identifier of identifiers) {
const image = new Image();
@ -403,11 +411,12 @@ function preloadImages() {
* Places join link buttons in the Community rows.
*/
function createJoinLinkButtons() {
const join_URLs = dom.join_urls();
Array.from(join_URLs).forEach((td_url) => {
communityFullRowCache.forEach(({row, identifier}) => {
// Data attributes are more idiomatic and harder to change by accident in the DOM.
const join_link = td_url.getAttribute('data-url');
td_url.append(transformJoinURL(join_link)); // add interactive content
const container = row.querySelector('.join_url_container') ?? unreachable();
container.append(
transformJoinURL()
); // add interactive content
});
}

4
php/generate-html.php
Unescape Escape View File

@ -62,6 +62,10 @@
exit(255);
}
if (str_ends_with($docpath, ".html")) {
$output = preg_replace("/^\\s+/", "", $output);
}
file_put_contents($docpath, join("\n", $output));
}

8
php/servers/servers-rooms.php
Unescape Escape View File

@ -707,6 +707,14 @@
function get_room_tags(): array {
return [...$this->get_derived_tags(), ...$this->get_user_tags()];
}
function get_showcased_room_tags(): array {
$tags = array_values(array_filter(
$this->get_room_tags(),
function($tag) {return CommunityTag::is_showcased_tag($tag->text);}
));
return array_slice($tags, 0, 3);
}
}
/**

6
php/servers/tags.php
Unescape Escape View File

@ -204,12 +204,12 @@
*/
public function get_tag_classname(): string {
$tag_type = $this->get_tag_type();
$classname = "room-label-$tag_type";
$classname = "tag-$tag_type";
if (CommunityTag::is_showcased_tag($this->text)) {
$classname .= " room-label-showcased";
$classname .= " tag-showcased";
}
if (CommunityTag::is_highlighted_tag($this->text)) {
$classname .= " room-label-highlighted";
$classname .= " tag-highlighted";
}
return $classname;
}

9
php/utils/utils.php
Unescape Escape View File

@ -39,9 +39,12 @@
* or original string if not longer.
*/
function truncate(string $str, int $len) {
return (strlen($str) > $len + 3)
? substr($str, 0, $len).'...'
: $str;
$decoded = html_entity_decode($str);
$truncated = (mb_strlen($decoded) > $len + 3)
? mb_substr($decoded, 0, $len).'...'
: $decoded;
if ($decoded != $str) return html_sanitize($truncated);
return $truncated;
}
function make_curl_handle(string $url, $curlopts = []) {

24
sites/+components/issue-banner.php
Unescape Escape View File

@ -1,27 +1,3 @@
<style>
.banner {
position: relative;
margin: 0 1rem 1rem;
border-left: var(--primary-color) 1rem solid;
padding: 1rem;
text-align: center;
}
.banner-title {
font-size: 1.5rem;
}
.banner-subtitle {
font-size: 1.25rem;
}
.banner-note {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
}
</style>
<div class="banner">
<span class="banner-note">
news banner

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

@ -66,6 +66,7 @@
$id = html_sanitize($room->get_room_identifier());
$language = html_sanitize($room->get_language_flag());
$name = html_sanitize($room->name);
$name_trunc = truncate($name, 16);
$desc = html_sanitize($room->description);
$users = html_sanitize($room->active_users);
$users_cutoff = html_sanitize($room->format_user_cutoff_period());
@ -93,71 +94,65 @@
itemscope
itemtype="https://schema.org/EntryPoint"
data-id="<?=$id?>"
data-icon='<?=room_icon($room, '64x64')?>'
data-icon-safe='<?=$room->icon_safety()?>'
data-icon='<?=room_icon($room, '64x64')?>:<?=$room->icon_safety()?>'
>
<td class="td_language tbl_communities__td" title="Language flag for '<?=$name?>'"><?=$language?></td>
<td class="td_name tbl_communities__td">
<td class="td_language tbl_cell" title="Language flag for '<?=$name_trunc?>'"><?=$language?></td>
<td class="td_name tbl_cell">
<a
href="<?=$preview_link?>"
class="td_name-inner"
target="_blank"
title="Click here to preview '<?=$name?>'"
title="Click here to preview '<?=$name_trunc?>'"
rel="noopener noreferrer external nofollow"
itemprop="name"
><?=
$name
?></a>
<span class="room-labels-container">
<?php foreach ($room->get_room_tags() as $tag): if (CommunityTag::is_showcased_tag($tag->text)): ?>
<span><?php /* class="tags-container" */ ?>
<?php foreach ($room->get_showcased_room_tags() as $tag): ?>
<span
class="room-label room-label-view-main <?=$tag->get_tag_classname()?> badge"
class="tag tag-view-main <?=$tag->get_tag_classname()?> badge"
title="<?=$tag->get_description_sanitized()?>"
><?=
truncate($tag->get_text_sanitized(), 16)
?></span>
<?php endif; endforeach; ?>
<?php endforeach; ?>
</span>
</td>
<!--noindex--><td
class="td_description tbl_communities__td noindex robots-noindex robots-nocontent"
title="Description for '<?=$name?>'"
class="td_description tbl_cell noindex robots-noindex robots-nocontent"
title="Description for '<?=$name_trunc?>'"
itemprop="description"
><?=$desc?></td><!--/noindex-->
<td
class="td_users tbl_communities__td"
title="'<?=$name?>' has had <?=$users?> active users in the last <?=$users_cutoff?>."
class="td_users tbl_cell"
title="'<?=$name_trunc?>' has had <?=$users?> active users in the last <?=$users_cutoff?>."
><?=$users?></td>
<td class="td_preview tbl_communities__td">
<td class="td_preview tbl_cell">
<a
href="<?=$preview_link?>"
class="protocol-indicator__parent"
title="Click here to preview '<?=$name?>'"
title="Click here to preview '<?=$name_trunc?>'"
target="_blank"
rel="noopener noreferrer external nofollow"
>
<span class="protocol-indicator"></span>
</a>
</td>
<td class="td_qr_code tbl_communities__td">
<td class="td_qr_code tbl_cell">
<a
class="qr-code-button"
href="<?=room_qr_code($room)?>"
target="_blank"
>
<img
<div
class="qr-code-icon"
width="36"
height="41"
src="qrcode-solid.svg"
alt="QR code pictogram linking to '<?=$name?>' Community QR code"
title="Click here to view the details for '<?=$name?>'"
>
title="Click here to view details for '<?=$name_trunc?>'"
></div>
</a>
</td>
<td class="td_server_icon tbl_communities__td"
<td class="td_server_icon tbl_cell"
title="Host: <?=$hostname?>"
item="image"
>
<?php if (empty($server_icon)): ?>
<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
@ -167,16 +162,16 @@
<div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div>
<?php endif; ?>
</td>
<td class="td_join_url tbl_communities__td">
<div class="join_url_container" data-url="<?=$join_link?>">
<td class="td_join_url tbl_cell">
<div class="join_url_container">
<span class="join_url show-from-w5"
><?=truncate($join_link, 32)?></span>
<a
class="noscript"
title="Right click and copy this link to join '<?=$name?>'."
href="<?=$join_link?>"
title="Right click and copy this link to join '<?=$name_trunc?>'."
rel="external nofollow"
>Copy this<span class="hidden">link to join '<?=$name?>'.</span></a>
>Copy this<span class="hidden">link to join '<?=$name_trunc?>'.</span></a>
</div>
</td>
</tr>

1
sites/index.php
Unescape Escape View File

@ -37,6 +37,7 @@
<link rel="canonical" href="<?=$SITE_CANONICAL_URL?>/">
<link rel="stylesheet" href="/index.css?<?=md5_file("$DOCUMENT_ROOT/index.css")?>">
<link rel="stylesheet" href="/css/banner.css?<?=md5_file("$DOCUMENT_ROOT/css/banner.css")?>">
<script type="module" src="/main.js?<?=md5_file("$DOCUMENT_ROOT/main.js")?>"></script>
<link rel="modulepreload" href="/js/util.js?<?=md5_file("$DOCUMENT_ROOT/js/util.js")?>">
<link rel="preload" href="/servers.json" as="fetch" crossorigin="anonymous"/>

Write Preview
Loading…
Cancel
Save