kopia lustrzana https://github.com/cloudflare/wildebeest
commit
b935d519bb
|
@ -0,0 +1,53 @@
|
||||||
|
// Important: The rules present in this file apply to dynamic content
|
||||||
|
// defined by the client (set using dangerouslySetInnerHTML)
|
||||||
|
// (thus wee cannot rely on Tailwind for such content)
|
||||||
|
|
||||||
|
.inner-html-content {
|
||||||
|
:global(a) {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--wildebeest-vibrant-color-400);
|
||||||
|
&.mention {
|
||||||
|
color: var(--wildebeest-vibrant-color-200);
|
||||||
|
}
|
||||||
|
&.hashtag {
|
||||||
|
color: var(--wildebeest-vibrant-color-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(p) {
|
||||||
|
margin-bottom: theme('spacing.4');
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.invisible) {
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ellipsis) {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 50%;
|
||||||
|
|
||||||
|
&:global(::after) {
|
||||||
|
content: '…';
|
||||||
|
}
|
||||||
|
|
||||||
|
@screen sm {
|
||||||
|
& {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.status-link) {
|
||||||
|
color: var(--wildebeest-vibrant-color-200);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { component$, useStylesScoped$ } from '@builder.io/qwik'
|
||||||
|
import styles from './HtmlContent.scss?inline'
|
||||||
|
|
||||||
|
export const HtmlContent = component$<{
|
||||||
|
html: string
|
||||||
|
}>(({ html }) => {
|
||||||
|
useStylesScoped$(styles)
|
||||||
|
|
||||||
|
return <div class="leading-normal inner-html-content" dangerouslySetInnerHTML={html} />
|
||||||
|
})
|
|
@ -1,19 +1,18 @@
|
||||||
import { component$, $, useStyles$ } from '@builder.io/qwik'
|
import { component$, $ } from '@builder.io/qwik'
|
||||||
import { Link, useNavigate } from '@builder.io/qwik-city'
|
import { Link, useNavigate } from '@builder.io/qwik-city'
|
||||||
import { formatTimeAgo } from '~/utils/dateTime'
|
import { formatTimeAgo } from '~/utils/dateTime'
|
||||||
import type { Account, MastodonStatus } from '~/types'
|
import type { Account, MastodonStatus } from '~/types'
|
||||||
import styles from '../../utils/innerHtmlContent.scss?inline'
|
|
||||||
import { MediaGallery } from '../MediaGallery.tsx'
|
import { MediaGallery } from '../MediaGallery.tsx'
|
||||||
import { useAccountUrl } from '~/utils/useAccountUrl'
|
import { useAccountUrl } from '~/utils/useAccountUrl'
|
||||||
import { getDisplayNameElement } from '~/utils/getDisplayNameElement'
|
import { getDisplayNameElement } from '~/utils/getDisplayNameElement'
|
||||||
import { StatusAccountCard } from '../StatusAccountCard/StatusAccountCard'
|
import { StatusAccountCard } from '../StatusAccountCard/StatusAccountCard'
|
||||||
|
import { HtmlContent } from '../HtmlContent/HtmlContent'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
status: MastodonStatus
|
status: MastodonStatus
|
||||||
}
|
}
|
||||||
|
|
||||||
export default component$((props: Props) => {
|
export default component$((props: Props) => {
|
||||||
useStyles$(styles)
|
|
||||||
const nav = useNavigate()
|
const nav = useNavigate()
|
||||||
|
|
||||||
const status = props.status.reblog ?? props.status
|
const status = props.status.reblog ?? props.status
|
||||||
|
@ -32,15 +31,13 @@ export default component$((props: Props) => {
|
||||||
<Link class="no-underline" href={statusUrl}>
|
<Link class="no-underline" href={statusUrl}>
|
||||||
<div class="text-wildebeest-500 flex items-baseline">
|
<div class="text-wildebeest-500 flex items-baseline">
|
||||||
<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
|
<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
|
||||||
<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
|
<span class="ml-2 text-sm hover:underline min-w-max">{formatTimeAgo(new Date(status.created_at))}</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div onClick$={handleContentClick} class="cursor-pointer">
|
||||||
onClick$={handleContentClick}
|
<HtmlContent html={status.content} />
|
||||||
class="leading-relaxed inner-html-content cursor-pointer"
|
</div>
|
||||||
dangerouslySetInnerHTML={status.content}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MediaGallery medias={status.media_attachments} />
|
<MediaGallery medias={status.media_attachments} />
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { component$, Slot, useStyles$ } from '@builder.io/qwik'
|
import { component$, Slot } from '@builder.io/qwik'
|
||||||
import { MastodonStatus, StatusContext } from '~/types'
|
import { MastodonStatus, StatusContext } from '~/types'
|
||||||
import Status from '~/components/Status'
|
import Status from '~/components/Status'
|
||||||
import { formatDateTime } from '~/utils/dateTime'
|
import { formatDateTime } from '~/utils/dateTime'
|
||||||
|
@ -9,10 +9,10 @@ import { DocumentHead, loader$ } from '@builder.io/qwik-city'
|
||||||
import { MediaGallery } from '~/components/MediaGallery.tsx'
|
import { MediaGallery } from '~/components/MediaGallery.tsx'
|
||||||
import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
|
import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
|
||||||
import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
|
import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
|
||||||
import styles from '../../../../utils/innerHtmlContent.scss?inline'
|
|
||||||
import { getTextContent } from 'wildebeest/backend/src/activitypub/objects'
|
import { getTextContent } from 'wildebeest/backend/src/activitypub/objects'
|
||||||
import { getDocumentHead } from '~/utils/getDocumentHead'
|
import { getDocumentHead } from '~/utils/getDocumentHead'
|
||||||
import { StatusAccountCard } from '~/components/StatusAccountCard/StatusAccountCard'
|
import { StatusAccountCard } from '~/components/StatusAccountCard/StatusAccountCard'
|
||||||
|
import { HtmlContent } from '~/components/HtmlContent/HtmlContent'
|
||||||
|
|
||||||
export const statusLoader = loader$<
|
export const statusLoader = loader$<
|
||||||
{ DATABASE: D1Database },
|
{ DATABASE: D1Database },
|
||||||
|
@ -46,15 +46,16 @@ export const statusLoader = loader$<
|
||||||
})
|
})
|
||||||
|
|
||||||
export default component$(() => {
|
export default component$(() => {
|
||||||
useStyles$(styles)
|
|
||||||
|
|
||||||
const loaderData = statusLoader.use().value
|
const loaderData = statusLoader.use().value
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="bg-wildebeest-700 p-4">
|
<div class="p-4">
|
||||||
<StatusAccountCard subText="acct" status={loaderData.status} />
|
<div class="mb-3">
|
||||||
<div class="leading-normal inner-html-content text-lg" dangerouslySetInnerHTML={loaderData.status.content} />
|
<StatusAccountCard subText="acct" status={loaderData.status} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<HtmlContent html={loaderData.status.content} />
|
||||||
|
|
||||||
<MediaGallery medias={loaderData.status.media_attachments} />
|
<MediaGallery medias={loaderData.status.media_attachments} />
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { $, component$, useStyles$ } from '@builder.io/qwik'
|
import { $, component$ } from '@builder.io/qwik'
|
||||||
import { loader$ } from '@builder.io/qwik-city'
|
import { loader$ } from '@builder.io/qwik-city'
|
||||||
import styles from '../../../utils/innerHtmlContent.scss?inline'
|
|
||||||
import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
|
import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
|
||||||
import type { MastodonStatus } from '~/types'
|
import type { MastodonStatus } from '~/types'
|
||||||
import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
|
import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
|
||||||
|
@ -35,8 +34,6 @@ export const statusesLoader = loader$<
|
||||||
})
|
})
|
||||||
|
|
||||||
export default component$(() => {
|
export default component$(() => {
|
||||||
useStyles$(styles)
|
|
||||||
|
|
||||||
const { accountId, statuses } = statusesLoader.use().value
|
const { accountId, statuses } = statusesLoader.use().value
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,53 +0,0 @@
|
||||||
// Important: The rules present in this file apply to dynamic content
|
|
||||||
// defined by the client (set using dangerouslySetInnerHTML)
|
|
||||||
// (thus wee cannot rely on Tailwind for such content)
|
|
||||||
|
|
||||||
.inner-html-content {
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--wildebeest-vibrant-color-400);
|
|
||||||
}
|
|
||||||
a.mention {
|
|
||||||
color: var(--wildebeest-vibrant-color-200);
|
|
||||||
}
|
|
||||||
a.hashtag {
|
|
||||||
color: var(--wildebeest-vibrant-color-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: theme('spacing.4');
|
|
||||||
}
|
|
||||||
|
|
||||||
.invisible {
|
|
||||||
font-size: 0;
|
|
||||||
line-height: 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis::after {
|
|
||||||
content: "…";
|
|
||||||
}
|
|
||||||
|
|
||||||
@screen sm {
|
|
||||||
.ellipsis {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-link {
|
|
||||||
color: var(--wildebeest-vibrant-color-200);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
Ładowanie…
Reference in New Issue