@ryanatkn/fuz_mastodon

fuz_mastodon

Mastodon components and helpers for Svelte, SvelteKit, and Fuz 🦣

mastodon.fuz.dev

npm i -D @ryanatkn/fuz_mastodon

⚠️ This project is still early, and its APIs will change.

import Toot from '@ryanatkn/fuz_mastodon/Toot.svelte';

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	initial_autoload
	include_replies
	reply_filter={(item) => (
		{type: 'favourited_by', favourited_by: [item.account.acct]}
	)}
	settings_storage_key="example_1"
	cache={cache?.data}
/>

Allowlisting replies with custom rules

By default, no replies are included. You can opt into including replies with include_replies and customize them with reply_filter.

Allow all

Adding include_replies enables all replies by default.

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
/>

This is the default value for reply_filter. It does nothing here but it's shown for clarity.

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={() => (
		{type: 'custom', should_include: () => true}
	)}
/>

Allow if favourited by specific accounts

You can provide a list of names whose favourites cause the reply to be shown.

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={() => (
		{type: 'favourited_by', favourited_by: ['username1', 'user2']}
	)},
/>

Allow if favourited by the root status author

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={(item) => (
		{type: 'favourited_by', favourited_by: [item.account.acct]}
	)},
/>

Allow with a mimimum number of favourites

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={() => (
		{type: 'minimum_favourites', minimum_favourites: 3}
	)},
/>

Allow on custom conditions

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={() => (
		{
			type: 'custom',
			should_include: (item, root_status, status_context) => {
				/* return boolean */
			})
		}
	)},
/>

Allow on multiple conditions

Replies are included if any filter passes.

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={(item) => [
		{type: 'favourited_by', favourited_by: ['trusted', 'tasteful']},
		{type: 'minimum_favourites', minimum_favourites: 10},
		{type: 'custom', should_include: () => Math.random() > 0.5)}
	]},
/>

Allow none

Simply omit include_replies:

<Toot	url="https://hci.social/@ryanatkn/111491794208793604" />

Or pass null or undefined or [] for reply_filter:

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={null}
/>

Or return no filters (null or undefined or []):

<Toot
	url="https://hci.social/@ryanatkn/111491794208793604"
	include_replies
	reply_filter={() => null}
/>