grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
add OGMeta to all feed and utility pages
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+16
+2
app/routes/+page.svelte
+2
app/routes/+page.svelte
···
6
6
import StoryViewer from '$lib/components/organisms/StoryViewer.svelte'
7
7
import StoryCreate from '$lib/components/molecules/StoryCreate.svelte'
8
8
import { recentFeedQuery } from '$lib/queries'
9
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
9
10
10
11
const feed = createQuery(() => recentFeedQuery())
11
12
···
31
32
}
32
33
</script>
33
34
35
+
<OGMeta title="grain" />
34
36
<FeedTabs />
35
37
<StoryStrip onCreateStory={openCreate} onViewStory={openViewer} />
36
38
{#if feed.isLoading}
+2
app/routes/camera/[name]/+page.svelte
+2
app/routes/camera/[name]/+page.svelte
···
5
5
import { createQuery } from '@tanstack/svelte-query'
6
6
import { cameraFeedQuery } from '$lib/queries'
7
7
import { isAuthenticated } from '$lib/stores'
8
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
8
9
9
10
let { data } = $props()
10
11
···
12
13
const feed = createQuery(() => cameraFeedQuery(camera))
13
14
</script>
14
15
16
+
<OGMeta title="{camera} - grain" />
15
17
<DetailHeader label={camera}>
16
18
{#snippet actions()}
17
19
{#if $isAuthenticated}
+2
app/routes/create/+page.svelte
+2
app/routes/create/+page.svelte
···
9
9
import { latLonToH3 } from '$lib/utils/h3'
10
10
import { X, LoaderCircle } from 'lucide-svelte'
11
11
import DetailHeader from '$lib/components/molecules/DetailHeader.svelte'
12
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
12
13
import Button from '$lib/components/atoms/Button.svelte'
13
14
import Field from '$lib/components/atoms/Field.svelte'
14
15
import { includeExif } from '$lib/preferences'
···
203
204
}
204
205
</script>
205
206
207
+
<OGMeta title="Create - grain" />
206
208
<div class="create-page">
207
209
<DetailHeader
208
210
label={step === 3 ? 'Add image descriptions' : 'Create a gallery'}
+2
app/routes/feeds/+page.svelte
+2
app/routes/feeds/+page.svelte
···
3
3
import PinButton from '$lib/components/atoms/PinButton.svelte'
4
4
import { pinnedFeeds, DEFAULT_PINNED, feedIcon } from '$lib/preferences'
5
5
import { isAuthenticated } from '$lib/stores'
6
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
6
7
7
8
const coreIds = new Set(DEFAULT_PINNED.map((f) => f.id))
8
9
const customFeeds = $derived($pinnedFeeds.filter((f) => !coreIds.has(f.id)))
9
10
</script>
10
11
12
+
<OGMeta title="My Feeds - grain" />
11
13
<DetailHeader label="My Feeds" />
12
14
13
15
<div class="feeds-page">
+2
app/routes/feeds/following/+page.svelte
+2
app/routes/feeds/following/+page.svelte
···
4
4
import FeedTabs from '$lib/components/molecules/FeedTabs.svelte'
5
5
import { followingFeedQuery } from '$lib/queries'
6
6
import { viewer } from '$lib/stores'
7
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
7
8
8
9
const feed = createQuery(() => followingFeedQuery($viewer?.did ?? ''))
9
10
</script>
10
11
12
+
<OGMeta title="Following - grain" />
11
13
<FeedTabs />
12
14
{#if !$viewer?.did}
13
15
<div class="empty">Log in to see galleries from people you follow.</div>
+2
app/routes/location/[h3]/+page.svelte
+2
app/routes/location/[h3]/+page.svelte
···
6
6
import { createQuery } from '@tanstack/svelte-query'
7
7
import { locationFeedQuery } from '$lib/queries'
8
8
import { isAuthenticated } from '$lib/stores'
9
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
9
10
10
11
let { data } = $props()
11
12
···
14
15
const feed = createQuery(() => locationFeedQuery(h3Index))
15
16
</script>
16
17
18
+
<OGMeta title="{name} - grain" />
17
19
<DetailHeader label={name}>
18
20
{#snippet actions()}
19
21
{#if $isAuthenticated}
+2
app/routes/search/+page.svelte
+2
app/routes/search/+page.svelte
···
8
8
import { truncDid } from '$lib/utils'
9
9
import { page } from '$app/state'
10
10
import { searchGalleriesQuery, searchProfilesQuery } from '$lib/queries'
11
+
import OGMeta from '$lib/components/atoms/OGMeta.svelte'
11
12
12
13
const query = $derived(page.url.searchParams.get('q') || '')
13
14
const activeTab = $derived(
···
19
20
const people = createQuery(() => ({ ...searchProfilesQuery(query), enabled: activeTab === 'people' && !!query }))
20
21
</script>
21
22
23
+
<OGMeta title="Search - grain" />
22
24
<DetailHeader label='"{query}"' />
23
25
24
26
<div class="search-tabs">