mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
feat: ✨ Add CW rendering
This commit is contained in:
Jesse Wierzbinski
parent
80ad22c395
commit
7372882905
|
|
@ -203,6 +203,7 @@ const submit = async () => {
|
|||
});
|
||||
|
||||
useEvent("composer:send-edit", data);
|
||||
useEvent("composer:close");
|
||||
} else {
|
||||
const { data } = await client.value.postStatus(state.content, {
|
||||
content_type: state.contentType,
|
||||
|
|
|
|||
|
|
@ -1,22 +1,35 @@
|
|||
<template>
|
||||
<div ref="container" :class="['overflow-y-hidden relative duration-200']" :style="{
|
||||
maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`
|
||||
<Alert variant="warning" v-if="sensitive || contentWarning"
|
||||
class="mb-4 py-2 px-4 grid grid-cols-[auto,1fr,auto] gap-2 items-center [&>svg~*]:pl-0 [&>svg+div]:translate-y-0 [&>svg]:static">
|
||||
<AlertTitle class="sr-only">Sensitive content</AlertTitle>
|
||||
<div>
|
||||
<TriangleAlert class="size-4" />
|
||||
</div>
|
||||
<AlertDescription>
|
||||
{{ contentWarning || "This content is sensitive" }}
|
||||
</AlertDescription>
|
||||
<Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? "Show" : "Hide" }}</Button>
|
||||
</Alert>
|
||||
|
||||
<div ref="container" :class="cn('overflow-y-hidden relative duration-200', blurred && 'blur-md')" :style="{
|
||||
maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`,
|
||||
}">
|
||||
<div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]"
|
||||
v-html="content" v-render-emojis="emojis">
|
||||
</div>
|
||||
<div :class="[
|
||||
'prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline',
|
||||
$style.content,
|
||||
]" v-html="content" v-render-emojis="emojis"></div>
|
||||
<div v-if="isOverflowing && collapsed"
|
||||
class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b">
|
||||
</div>
|
||||
class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b"></div>
|
||||
<Button v-if="isOverflowing" @click="collapsed = !collapsed"
|
||||
class="absolute bottom-2 right-1/2 translate-x-1/2">{{
|
||||
collapsed ? `Show more${plainContent ? ` • ${formattedCharacterCount
|
||||
} characters` : ""
|
||||
}` : "Show less"
|
||||
collapsed
|
||||
? `Show more${plainContent ? ` • ${formattedCharacterCount} characters` : ""
|
||||
}`
|
||||
: "Show less"
|
||||
}}</Button>
|
||||
</div>
|
||||
|
||||
<Attachments v-if="attachments.length > 0" :attachments="attachments" />
|
||||
<Attachments v-if="attachments.length > 0" :attachments="attachments" :class="blurred && 'blur-xl'" />
|
||||
|
||||
<div v-if="quote" class="mt-4 rounded border overflow-hidden">
|
||||
<Note :note="quote" :hide-actions="true" :small-layout="true" />
|
||||
|
|
@ -24,20 +37,27 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Attachment, Emoji, Status } from "@versia/client/types";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { TriangleAlert } from "lucide-vue-next";
|
||||
import { Button, buttonVariants } from "~/components/ui/button";
|
||||
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
|
||||
import { Card, CardHeader } from "../ui/card";
|
||||
import Attachments from "./attachments.vue";
|
||||
import Note from "./note.vue";
|
||||
|
||||
const { content, plainContent } = defineProps<{
|
||||
const { content, plainContent, sensitive, contentWarning } = defineProps<{
|
||||
plainContent?: string;
|
||||
content: string;
|
||||
quote?: NonNullable<Status["quote"]>;
|
||||
emojis: Emoji[];
|
||||
attachments: Attachment[];
|
||||
sensitive: boolean;
|
||||
contentWarning?: string;
|
||||
}>();
|
||||
const container = ref<HTMLDivElement | null>(null);
|
||||
const collapsed = ref(true);
|
||||
const blurred = ref(sensitive || !!contentWarning);
|
||||
|
||||
// max-h-72 is 18rem
|
||||
const remToPx = (rem: number) =>
|
||||
|
|
@ -63,11 +83,11 @@ const formattedCharacterCount = characterCount
|
|||
word-wrap: normal;
|
||||
background: transparent;
|
||||
background-color: #ffffff0d;
|
||||
border-radius: .25rem;
|
||||
border-radius: 0.25rem;
|
||||
hyphens: none;
|
||||
margin-top: 1rem;
|
||||
overflow-x: auto;
|
||||
padding: .75rem 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
|
|
@ -75,25 +95,26 @@ const formattedCharacterCount = characterCount
|
|||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-color: hsla(0, 0%, 100%, .1)
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
|
||||
var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-color: hsla(0, 0%, 100%, 0.1);
|
||||
}
|
||||
|
||||
.content pre code {
|
||||
display: block;
|
||||
padding: 0
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content code:not(pre code)::after,
|
||||
.content code:not(pre code)::before {
|
||||
content: ""
|
||||
content: "";
|
||||
}
|
||||
|
||||
.content ol li input[type=checkbox],
|
||||
.content ul li input[type=checkbox] {
|
||||
border-radius: .25rem;
|
||||
.content ol li input[type="checkbox"],
|
||||
.content ul li input[type="checkbox"] {
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0;
|
||||
vertical-align: middle;
|
||||
--tw-text-opacity: 1;
|
||||
|
|
@ -101,8 +122,8 @@ const formattedCharacterCount = characterCount
|
|||
}
|
||||
|
||||
.content code:not(pre code) {
|
||||
border-radius: .25rem;
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
word-wrap: break-word;
|
||||
background: transparent;
|
||||
background-color: #ffffff0d;
|
||||
|
|
@ -112,7 +133,8 @@ const formattedCharacterCount = characterCount
|
|||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-color: hsla(0, 0%, 100%, .1)
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
|
||||
var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-color: hsla(0, 0%, 100%, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<CardContent>
|
||||
<Content :content="noteToUse.content" :quote="note.quote ?? undefined"
|
||||
:attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined"
|
||||
:emojis="noteToUse.emojis" />
|
||||
:emojis="noteToUse.emojis" :sensitive="noteToUse.sensitive" :content-warning="noteToUse.spoiler_text" />
|
||||
</CardContent>
|
||||
<CardFooter v-if="!hideActions" class="p-4 pt-0">
|
||||
<Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ export const alertVariants = cva(
|
|||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
warning:
|
||||
"border-warning/50 text-warning dark:border-warning [&>svg]:text-warning",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@
|
|||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--warning: 40, 100%, 50%;
|
||||
--warning-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
|
@ -75,6 +78,9 @@
|
|||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--warning: 40 100% 50%;
|
||||
--warning-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 240 4.9% 83.9%;
|
||||
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
|
|
|
|||
|
|
@ -49,6 +49,10 @@ export default (<Config>{
|
|||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: "hsl(var(--warning))",
|
||||
foreground: "hsl(var(--warning-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
|
|
|
|||
Loading…
Reference in a new issue