first attempt at a share link
All checks were successful
/ weblog.lol (push) Successful in 11s

This commit is contained in:
Gordon Pedersen 2024-05-10 17:08:16 +10:00
parent c2b35ba7a5
commit b6bd043b1e
4 changed files with 58 additions and 2 deletions

View file

@ -25,7 +25,7 @@
</aside> </aside>
<i data-emoji="{emoji}"></i> <i data-emoji="{emoji}"></i>
{body} {body}
<aside class="post-info"><a href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside> <aside class="post-info"><a class="status_url" href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a class="external_url" href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside>
<aside class="post-tags"> <aside class="post-tags">
{tags} {tags}
</aside> </aside>
@ -44,11 +44,18 @@
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js" crossorigin="anonymous"></script>
<script src="/share.js"></script>
<script> <script>
document.querySelectorAll('time:not(.dt-start):not(.dt-end)').forEach(time => { document.querySelectorAll('time:not(.dt-start):not(.dt-end)').forEach(time => {
const datetime = luxon.DateTime.fromISO(time.getAttribute('datetime')) const datetime = luxon.DateTime.fromISO(time.getAttribute('datetime'))
time.innerText = datetime.toRelative() time.innerText = datetime.toRelative()
}); });
document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
share(el.href)
})
})
</script> </script>
</body> </body>

View file

@ -0,0 +1,42 @@
/*/
Type: file
Content-Type: application/javascript
Title: Share script
Location: /share.js
/**/
const SUBSCRIBE_LINK_REL = 'http://ostatus.org/schema/1.0/subscribe'
function share(uri, handle) {
if(!handle){
handle = prompt("Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')", "@")
}
if(handle) {
const input = handle
handle = handle.trim().replace(/^@/,'')
const split = handle.split('@')
if(split.length == 2) {
const resource = `acct:${handle}`
const domain = split[1]
// look up remote user via webfinger
const url = `https://${domain}/.well-known/webfinger?resource=${resource}`
fetch(url, {headers: {
'Content-Type': 'application/activity+json'
}}).then(async result => {
const json = await result.json()
const subscribe = json.links.find(link => link.rel && link.rel == SUBSCRIBE_LINK_REL)
let template = subscribe.template
window.open(template.replace("{uri}", uri), '_blank').focus()
})
.catch(e => {
console.error(e)
throw `Sorry, we couldn't find an uri for ${input}.\n\nTry searching for "${uri}" on ${domain} (or in your fediverse client of choice)`
})
}
else {
throw 'Please enter your fediverse address in @user@domain.social format'
}
}
}

View file

@ -33,11 +33,18 @@ Title: Landing Page Template
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js" crossorigin="anonymous"></script>
<script src="/share.js"></script>
<script> <script>
document.querySelectorAll('time:not(.dt-start):not(.dt-end)').forEach(time => { document.querySelectorAll('time:not(.dt-start):not(.dt-end)').forEach(time => {
const datetime = luxon.DateTime.fromISO(time.getAttribute('datetime')) const datetime = luxon.DateTime.fromISO(time.getAttribute('datetime'))
time.innerText = datetime.toRelative() time.innerText = datetime.toRelative()
}); });
document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
share(el.href)
})
})
</script> </script>
</body> </body>

View file

@ -7,7 +7,7 @@ Title: Post Template
</aside> </aside>
<i data-emoji="{emoji}"></i> <i data-emoji="{emoji}"></i>
{body} {body}
<aside class="post-info"><a href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside> <aside class="post-info"><a class="status_url" href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a class="external_url" href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside>
<aside class="post-tags"> <aside class="post-tags">
{tags} {tags}
</aside> </aside>