mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 16:38:20 +01:00
feat: ✨ Markdown rendering improvements
This commit is contained in:
Jesse Wierzbinski
parent
8b22a22ae4
commit
e90ff9d508
|
|
@ -37,11 +37,13 @@ useListen("note:quote", async (note) => {
|
|||
useEvent("composer:quote", note);
|
||||
});
|
||||
useListen("composer:open", () => {
|
||||
open.value = true;
|
||||
if (tokenData.value)
|
||||
open.value = true;
|
||||
});
|
||||
useListen("composer:close", () => {
|
||||
open.value = false;
|
||||
});
|
||||
const client = useMegalodon();
|
||||
const tokenData = useTokenData();
|
||||
const instance = useInstance(client);
|
||||
</script>
|
||||
98
components/social-elements/notes/note-content.vue
Normal file
98
components/social-elements/notes/note-content.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div v-if="!collapsed">
|
||||
<NuxtLink :href="url" class="mt-6 block relative" aria-label="Link to note">
|
||||
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
|
||||
type="content">
|
||||
<div v-if="content"
|
||||
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
|
||||
v-html="content">
|
||||
</div>
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
|
||||
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
|
||||
:attachment="attachment" />
|
||||
</div>
|
||||
<div v-if="isQuote && note?.reblog" class="mt-4">
|
||||
<SocialElementsNotesNote :note="note?.reblog" :small="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
|
||||
<strong v-if="note?.sensitive" class="max-w-64">This note was tagged as containing sensitive
|
||||
content</strong>
|
||||
<!-- Spoiler text is it's specified -->
|
||||
<span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
|
||||
}}</span>
|
||||
<ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from '~/types/mastodon/status';
|
||||
|
||||
const props = defineProps<{
|
||||
content: string | null;
|
||||
note?: Status;
|
||||
loaded?: boolean;
|
||||
url: string;
|
||||
shouldHide?: boolean;
|
||||
isQuote?: boolean;
|
||||
}>();
|
||||
|
||||
const collapsed = ref(props.shouldHide);
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.content pre:has(code) {
|
||||
word-wrap: normal;
|
||||
background: transparent;
|
||||
background-color: #ffffff0d;
|
||||
border-radius: .25rem;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
margin-top: 1rem;
|
||||
overflow-x: auto;
|
||||
padding: .75rem 1rem;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
--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)
|
||||
}
|
||||
|
||||
.content pre code {
|
||||
display: block;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.content code:not(pre code)::after,
|
||||
.content code:not(pre code)::before {
|
||||
content: ""
|
||||
}
|
||||
|
||||
.content code:not(pre code) {
|
||||
border-radius: .25rem;
|
||||
padding: .25rem .5rem;
|
||||
word-wrap: break-word;
|
||||
background: transparent;
|
||||
background-color: #ffffff0d;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
margin-top: 1rem;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
--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)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,36 +13,11 @@
|
|||
</Skeleton>
|
||||
</div>
|
||||
<SocialElementsNotesHeader :note="note" :small="small" />
|
||||
<div v-if="!collapsed">
|
||||
<NuxtLink :href="url" class="mt-6 block relative" aria-label="Link to note">
|
||||
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
|
||||
type="content">
|
||||
<div v-if="content"
|
||||
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline content']"
|
||||
v-html="content">
|
||||
</div>
|
||||
</Skeleton>
|
||||
</NuxtLink>
|
||||
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
|
||||
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
|
||||
:attachment="attachment" />
|
||||
</div>
|
||||
<div v-if="isQuote && note?.reblog" class="mt-4">
|
||||
<SocialElementsNotesNote :note="note?.reblog" :small="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
|
||||
<strong v-if="note?.sensitive" class="max-w-64">This note was tagged as containing sensitive
|
||||
content</strong>
|
||||
<!-- Spoiler text is it's specified -->
|
||||
<span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
|
||||
}}</span>
|
||||
<ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
|
||||
</div>
|
||||
<SocialElementsNotesNoteContent :note="note" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
|
||||
:should-hide="shouldHide" />
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
|
||||
<div v-if="showInteractions"
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 *:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
|
||||
<Icon name="tabler:arrow-back-up"
|
||||
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
|
|
@ -132,8 +107,6 @@ const {
|
|||
reblogDisplayName,
|
||||
} = useNoteData(ref(props.note), client);
|
||||
|
||||
const collapsed = ref(shouldHide.value);
|
||||
|
||||
const { copy } = useClipboard();
|
||||
const numberFormat = (number = 0) =>
|
||||
new Intl.NumberFormat(undefined, {
|
||||
|
|
@ -141,34 +114,4 @@ const numberFormat = (number = 0) =>
|
|||
compactDisplay: "short",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(number);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content pre:has(code) {
|
||||
word-wrap: normal;
|
||||
background: transparent;
|
||||
background-color: #ffffff0d;
|
||||
border-radius: .25rem;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
margin-top: 1rem;
|
||||
overflow-x: auto;
|
||||
padding: .75rem 1rem;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
--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)
|
||||
}
|
||||
|
||||
.content pre code {
|
||||
display: block;
|
||||
padding: 0
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
},
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"dev": "nuxt dev --https --https.cert config/lysand-fe.localhost.pem --https.key config/lysand-fe.localhost-key.pem --host lysand-fe.localhost",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<SocialElementsNotesNote v-if="note" :note="note" />
|
||||
<div class="max-h-dvh min-h-dvh overflow-y-auto">
|
||||
<SocialElementsNotesNote v-if="note" :note="note" />
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue