bridgy-fed
bridgy-fed copied to clipboard
add a "remote follow" page
mastodon/pixelfed instances provide a "Remote Follow" page, where people can add their remote instances in order for the local instance to forward the subscription request.
I'm trying to find any documentation on it. Example: https://mastodon.social/users/petermolnar/remote_follow is a page to follow [email protected] with the instance typed in the box that shows after "proceed to follow" .
Hi, i also already looked for doc but I didn't find anything about it. It looks like @aaronpk implemented this here on his amazing website maybe he could help us.
interesting! took me a couple tries to understand the request, but i get it now. not a priority for me, but i'd probably accept a PR. feel free to tackle it if you're interested!
alternatively, you could link to your site's profile in any instance you choose, eg https://mastodon.technology/web/accounts/52904 is my snarfed.org bridgy fed profile. you can find it by searching for eg @[email protected]
in Mastodon while logged in as a normal account. users could then click Follow there and use mastodon's page directly.
I implemented a Remote Follow button on my personal blog. Maybe this will help? not really sure how to put it in Bridgy Fed though. Source / Demo
<script lang="ts">
import IconPaperAirplane from '~icons/heroicons-outline/paper-airplane'
let status: string = ''
let statusText: string = ''
let input: string = ''
const follow = async (event: Event, account = new FormData(event.target as HTMLFormElement).get('account') as string) =>
await fetch(
account.startsWith('@')
? `https://${account.split('@')[2]}/.well-known/webfinger?resource=acct:${account.slice(1)}`
: `https://${account.split('@')[1]}/.well-known/webfinger?resource=acct:${account}`,
{
headers: { Accept: 'application/jrd+json' }
}
)
.then(res => {
if (res.ok) {
status = 'success'
return res.json()
} else {
status = 'error'
statusText = res.status + res.statusText
throw Error(res.status + res.statusText)
}
})
.then(
({ links }) => links.find((link: { rel: string }) => link.rel === 'http://ostatus.org/schema/1.0/subscribe').template
)
.then(template => (window.location.href = template.replace('{uri}', `[email protected]`)))
.catch(error => console.error(error))
$: if (input)
input.length < 5 ? (status = '') : input.includes('@') && input.includes('.') ? (status = 'success') : (status = 'warning')
</script>
<label for="remote-follow" class="btn modal-button normal-case mt-4 gap-2">
<IconUserAdd />
Remote follow
</label>
<input type="checkbox" id="remote-follow" class="modal-toggle" />
<label for="remote-follow" class="modal modal-bottom sm:modal-middle cursor-pointer">
<div class="modal-box relative" for="">
<form on:submit|preventDefault={follow} class="form-control gap-2">
<div class="label py-0">
<span class="label-text">Your fediverse account ID:</span>
</div>
<label class="input-group">
<input
bind:value={input}
type="text"
id="account"
name="account"
placeholder="[email protected]"
class:input-success={status === 'success'}
class:input-warning={status === 'warning'}
class:input-error={status === 'error'}
class="input input-bordered transition-all flex-1" />
<button type="submit" class="btn btn-square">
<IconPaperAirplane class="h-6 w-6 rotate-90" />
</button>
</label>
{#if statusText}
<div class="label py-0">
<span class="label-text-alt text-error">
{statusText}{#if statusText === '404'}: Couldn't find user{/if}
</span>
</div>
{/if}
</form>
</div>
</label>
Fun, thanks! Bridgy Fed is pretty different, we couldn't add this directly, but it's great to have another example.
@gregorlove had this useful summary:
Build the webfinger URL for the account that wants to subscribe; fetch the JSON; look for rel:http://ostatus.org/schema/1.0/subscribe; get the 'template' from the same object as that rel and that is the subscribe template url...
e.g. indieweb.social's template is: https://indieweb.social/authorize_interaction?uri={uri}
replace {uri} with your @-@ and redirect to the result
So: https://indieweb.social/[email protected], presumably
No idea how fragile that is / if every mastodon uses that same rel? :shrug:
Actually implementing this will take some in depth, full stack, cross site research and design! It's not something I plan to prioritize personally in the near future, but I'd love to see someone else drive the design and implementation, and I'd happily review proposals and merge PRs.
@sebastiangreger has the best remote follow UI and complete fediverse profile on his web site, formatted like Mastodon/Twitter. Really good inspiration here. https://sebastiangreger.net/@sebastiangreger
More: https://sebastiangreger.net/2022/11/this-website-now-on-fediverse
This is also useful, and confirms @gregorlove's instructions above: https://socialhub.activitypub.rocks/t/what-is-the-current-spec-for-remote-follow/2020
Done! All BF user pages now have a small remote follow UI, eg https://fed.brid.gy/user/snarfed.org