mary.my.id / anartia
JavaScript-optional public web frontend for Bluesky anartia.kelinci.net
sveltekit atcute bluesky typescript svelte
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: og tags on feeds

Mary 545e7bc8 ac1ed6b2

+45
+4
src/routes/(app)/[actor=didOrHandle]/feeds/[rkey=rkey]/+page.svelte
··· 10 10 import PageListing from '$lib/components/page/page-listing.svelte'; 11 11 import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte'; 12 12 13 + import FeedMetaTags from './components/feed-meta-tags.svelte'; 14 + 13 15 const { data }: PageProps = $props(); 14 16 15 17 const rkey = $derived(parseAtUri(data.feed.uri).rkey); ··· 24 26 <link rel="canonical" href="https://bsky.app/profile/{data.feed.creator.did}/feed/{rkey}" /> 25 27 <link rel="alternate" href={data.feed.uri} /> 26 28 </svelte:head> 29 + 30 + <FeedMetaTags feed={data.feed} /> 27 31 28 32 <PageListing subject="timeline" {rootUrl} {nextUrl}> 29 33 {#each data.timeline.items as item (item.id)}
+41
src/routes/(app)/[actor=didOrHandle]/feeds/[rkey=rkey]/components/feed-meta-tags.svelte
··· 1 + <script lang="ts"> 2 + import type { AppBskyFeedDefs } from '@atcute/client/lexicons'; 3 + 4 + import { PUBLIC_APP_NAME, PUBLIC_APP_URL } from '$env/static/public'; 5 + 6 + import { parseAtUri } from '$lib/types/at-uri'; 7 + 8 + interface Props { 9 + feed: AppBskyFeedDefs.GeneratorView; 10 + } 11 + 12 + const { feed }: Props = $props(); 13 + 14 + const uri = $derived(parseAtUri(feed.uri)); 15 + 16 + const description = $derived.by(() => { 17 + const desc = feed.description?.trim(); 18 + 19 + let str = ''; 20 + 21 + str += `Feed by @${feed.creator.handle}`; 22 + 23 + if (desc) { 24 + str += `\n\n${desc}`; 25 + } 26 + 27 + return str; 28 + }); 29 + </script> 30 + 31 + <svelte:head> 32 + <meta property="og:site_name" content={PUBLIC_APP_NAME} /> 33 + <meta property="twitter:card" content="summary" /> 34 + <meta property="og:url" content="{PUBLIC_APP_URL}/{uri.repo}/feeds/{uri.rkey}" /> 35 + <meta property="og:title" content={feed.displayName.trim()} /> 36 + <meta property="og:description" content={description} /> 37 + 38 + {#if feed.avatar} 39 + <meta property="og:image" content={feed.avatar.replace('@jpeg', '@png')} /> 40 + {/if} 41 + </svelte:head>