forked from CWAD/circlewithadot.net
First commit
This commit is contained in:
190
services/aprelay.html
Normal file
190
services/aprelay.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ActivityPub Relay — circlewithadot.net</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="../style.css?v=20250831" rel="stylesheet" />
|
||||
<style>
|
||||
/* Relay-only CSS */
|
||||
.relay-wrap {
|
||||
max-width: 860px;
|
||||
margin: 0 auto 60px;
|
||||
padding: 0 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.relay-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin: 16px 0 10px;
|
||||
}
|
||||
.relay-header h1 {
|
||||
font-size: 44px;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.relay-sub {
|
||||
color: #9aa0a6;
|
||||
margin: 0 0 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* logo next to header */
|
||||
.relay-logo {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.relay-card {
|
||||
background: #121214;
|
||||
border: 1px solid #1d1f21;
|
||||
border-radius: 14px;
|
||||
padding: 22px;
|
||||
box-shadow: 0 14px 40px rgba(0,0,0,.45);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.copy-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin: 10px 0 4px;
|
||||
}
|
||||
.copyable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #0f0f10;
|
||||
border: 1px solid #26282a;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
user-select: all;
|
||||
word-break: break-all;
|
||||
}
|
||||
.copyable:hover {
|
||||
border-color: #34373a;
|
||||
}
|
||||
.copyable:focus-visible {
|
||||
outline: 2px solid #e53935;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: #9aa0a6;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
margin-top: 14px;
|
||||
color: #9aa0a6;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<script src="aprelay.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<a class="brand" href="../index.html">
|
||||
<img class="brand-logo" src="../images/cwad_logo.png" alt="Circle With A Dot logo" />
|
||||
<span class="brand-name">CIRCLE WITH A DOT</span>
|
||||
</a>
|
||||
</header>
|
||||
<main class="relay-wrap">
|
||||
<header class="relay-header">
|
||||
<img class="relay-logo" src="../images/aprelay_logo.png" alt="ActivityPub Relay logo" width="80" height="80">
|
||||
<div>
|
||||
<h1>ActivityPub Relay</h1>
|
||||
<p class="relay-sub">Location: US East</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="relay-card">
|
||||
<p><strong>Mastodon & Misskey users</strong></p>
|
||||
<div class="copy-list">
|
||||
<span
|
||||
class="copyable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-copy="https://relay-us-east.circlewithadot.net/inbox"
|
||||
>
|
||||
https://relay-us-east.circlewithadot.net/inbox
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p style="margin-top:14px;"><strong>Pleroma users</strong></p>
|
||||
<div class="copy-list">
|
||||
<span
|
||||
class="copyable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-copy="https://relay-us-east.circlewithadot.net/actor"
|
||||
>
|
||||
https://relay-us-east.circlewithadot.net/actor
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="note">Click any box to copy to your clipboard.</p>
|
||||
|
||||
<div id="relay-stats" class="stats" aria-live="polite">
|
||||
Connected instances: <span id="instances">–</span><br />
|
||||
Jobs (last five minutes): <span id="jobs">–</span><br />
|
||||
Last update: <span id="updated">–</span><br />
|
||||
<br />
|
||||
Built using <a href="https://github.com/yukimochi/Activity-Relay" target="blank">Activity-Relay</a><br />
|
||||
<br >
|
||||
Only the above mentioned services are *officially* supported. Friendica and other instances may or may not work.
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<p class="stats">
|
||||
JavaScript is disabled. Copy the relay URLs above. Live stats require
|
||||
JavaScript.
|
||||
</p>
|
||||
</noscript>
|
||||
</section>
|
||||
|
||||
<footer class="site-footer" role="contentinfo">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-left">
|
||||
<a
|
||||
href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="footer-text"
|
||||
>
|
||||
BY-NC-SA 4.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-center">
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Copyleft"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="footer-icon"
|
||||
aria-label="Copyleft (learn more)"
|
||||
>
|
||||
<img src="../images/cl.png" alt="Copyleft" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-right footer-links">
|
||||
<a href="../LICENSE">License</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>
|
||||
Mastodon</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
66
services/aprelay.js
Normal file
66
services/aprelay.js
Normal file
@@ -0,0 +1,66 @@
|
||||
/* @licstart Copyleft (🄯) 2025 James Osborne — AGPLv3+ @licend */
|
||||
'use strict';
|
||||
|
||||
/* ===== Copy-to-clipboard handler ===== */
|
||||
document.addEventListener('click', (e) => {
|
||||
const el = e.target.closest('.copyable');
|
||||
if (!el) return;
|
||||
|
||||
const text = el.dataset.copy ?? '';
|
||||
const copyPromise =
|
||||
(navigator.clipboard && window.isSecureContext)
|
||||
? navigator.clipboard.writeText(text)
|
||||
: (async () => {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.opacity = '0';
|
||||
ta.style.left = '-9999px';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand('copy'); } catch {}
|
||||
ta.remove();
|
||||
})();
|
||||
|
||||
Promise.resolve(copyPromise).then(() => {
|
||||
el.dataset._orig ??= el.textContent || '';
|
||||
el.textContent = `${el.dataset._orig} (copied!)`;
|
||||
setTimeout(() => { el.textContent = el.dataset._orig; }, 1500);
|
||||
});
|
||||
});
|
||||
|
||||
/* ===== Stats loader ===== */
|
||||
async function loadStats() {
|
||||
const endpoints = [
|
||||
'/relay-stats.json', // same-origin first (no CORS)
|
||||
'https://relay-us-east.circlewithadot.net/relay-stats.json',
|
||||
];
|
||||
|
||||
for (const url of endpoints) {
|
||||
try {
|
||||
const r = await fetch(url, { cache: 'no-store' });
|
||||
if (!r.ok) continue;
|
||||
|
||||
const d = await r.json();
|
||||
const set = (id, val) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = val;
|
||||
};
|
||||
|
||||
set('instances', d.instances ?? '–');
|
||||
// accept either jobs_5min (new) or jobs_per_min (old)
|
||||
set('jobs', (d.jobs_5min ?? d.jobs_per_min ?? '–'));
|
||||
set('updated', d.updated ? new Date(d.updated).toLocaleString() : '–');
|
||||
return;
|
||||
} catch (e) {
|
||||
console.warn('[relay stats] fetch failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
const box = document.getElementById('relay-stats');
|
||||
if (box) box.textContent = 'Stats unavailable';
|
||||
}
|
||||
|
||||
loadStats();
|
||||
setInterval(loadStats, 300000);
|
||||
|
||||
Reference in New Issue
Block a user