kopia lustrzana https://github.com/cloudflare/wildebeest
121 wiersze
3.8 KiB
TypeScript
121 wiersze
3.8 KiB
TypeScript
import { component$, Slot } from '@builder.io/qwik'
|
|
import { MastodonStatus, StatusContext } from '~/types'
|
|
import Status from '~/components/Status'
|
|
import { formatDateTime } from '~/utils/dateTime'
|
|
import { formatRoundedNumber } from '~/utils/numbers'
|
|
import * as statusAPI from 'wildebeest/functions/api/v1/statuses/[id]'
|
|
import * as contextAPI from 'wildebeest/functions/api/v1/statuses/[id]/context'
|
|
import { Link, loader$ } from '@builder.io/qwik-city'
|
|
import StickyHeader from '~/components/StickyHeader/StickyHeader'
|
|
import { Avatar } from '~/components/avatar'
|
|
import { MediaGallery } from '~/components/MediaGallery.tsx'
|
|
import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
|
|
|
|
export const statusLoader = loader$<
|
|
{ DATABASE: D1Database },
|
|
Promise<{ status: MastodonStatus; context: StatusContext }>
|
|
>(async ({ request, html, platform, params }) => {
|
|
const domain = new URL(request.url).hostname
|
|
const statusResponse = await statusAPI.handleRequest(platform.DATABASE, params.statusId, domain)
|
|
const statusText = await statusResponse.text()
|
|
if (!statusText) {
|
|
throw html(404, getNotFoundHtml())
|
|
}
|
|
const contextResponse = await contextAPI.handleRequest(domain, platform.DATABASE, params.statusId)
|
|
const contextText = await contextResponse.text()
|
|
const context = JSON.parse(contextText ?? null) as StatusContext | null
|
|
if (!context) {
|
|
throw new Error(`No context present for status with ${params.statusId}`)
|
|
}
|
|
return { status: JSON.parse(statusText), context }
|
|
})
|
|
|
|
export default component$(() => {
|
|
const { status, context } = statusLoader.use().value
|
|
|
|
return (
|
|
<>
|
|
<StickyHeader>
|
|
<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
|
|
<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
|
|
<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
|
|
<span class="hover:underline">Back</span>
|
|
</Link>
|
|
</div>
|
|
</StickyHeader>
|
|
<div class="bg-wildebeest-700 p-4">
|
|
<AccountCard status={status} />
|
|
<div class="leading-normal status-content text-lg" dangerouslySetInnerHTML={status.content} />
|
|
|
|
<MediaGallery medias={status.media_attachments} />
|
|
|
|
<InfoTray status={status} />
|
|
</div>
|
|
<div>
|
|
{context.descendants.map((status) => {
|
|
return <Status status={status} />
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export const AccountCard = component$<{ status: MastodonStatus }>(({ status }) => {
|
|
const accountUrl = `/@${status.account.username}`
|
|
|
|
return (
|
|
<div class="flex">
|
|
<Avatar primary={status.account} secondary={null} />
|
|
<div class="flex flex-col">
|
|
<div class="p-1">
|
|
<Link href={accountUrl} class="no-underline">
|
|
{status.account.display_name}
|
|
</Link>
|
|
</div>
|
|
<div class="p-1 text-wildebeest-400">@{status.account.acct}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export const InfoTray = component$<{ status: MastodonStatus }>(({ status }) => {
|
|
return (
|
|
<div class="text-wildebeest-500 mt-4 text-sm">
|
|
<Info href={status.url}>
|
|
<span>{formatDateTime(status.created_at)}</span>
|
|
</Info>
|
|
<span class="ml-3"> · </span>
|
|
<span>
|
|
<i class="fa fa-globe mx-3 w-4 inline-block" />
|
|
<span>Web</span>
|
|
</span>
|
|
<span class="ml-3"> · </span>
|
|
<Info href={status.url ? `${status.url}/reblogs` : null}>
|
|
<i class="fa fa-retweet mx-3 w-4 inline-block" />
|
|
<span>{formatRoundedNumber(status.reblogs_count)}</span>
|
|
</Info>
|
|
<span class="ml-3"> · </span>
|
|
<Info href={status.url ? `${status.url}/favourites` : null}>
|
|
<i class="fa fa-star mx-3 w-4 inline-block" />
|
|
<span>{formatRoundedNumber(status.favourites_count)}</span>
|
|
</Info>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export const Info = component$<{ href: string | null }>(({ href }) => {
|
|
return (
|
|
<>
|
|
{!href ? (
|
|
<span>
|
|
<Slot />
|
|
</span>
|
|
) : (
|
|
<a href={href} class="no-underline">
|
|
<Slot />
|
|
</a>
|
|
)}
|
|
</>
|
|
)
|
|
})
|