mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: 🎨 Refactor notes, event system and timelines
This commit is contained in:
Jesse Wierzbinski
parent
7461478170
commit
0f214b6a17
18 changed files with 266 additions and 188 deletions
16
composables/EventBus.ts
Normal file
16
composables/EventBus.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import mitt from "mitt";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
|
||||
type ApplicationEvents = {
|
||||
"note:reply": Status;
|
||||
"note:delete": Status;
|
||||
"note:edit": Status;
|
||||
"composer:open": undefined;
|
||||
"composer:send": Status;
|
||||
"composer:close": undefined;
|
||||
};
|
||||
|
||||
const emitter = mitt<ApplicationEvents>();
|
||||
|
||||
export const useEvent = emitter.emit;
|
||||
export const useListen = emitter.on;
|
||||
66
composables/NoteData.ts
Normal file
66
composables/NoteData.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import type { Mastodon } from "megalodon";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
|
||||
export const useNoteData = (
|
||||
noteProp: MaybeRef<Status | undefined>,
|
||||
client: Ref<Mastodon | null>,
|
||||
) => {
|
||||
const renderedNote = computed(
|
||||
() => toValue(noteProp)?.reblog ?? toValue(noteProp),
|
||||
);
|
||||
const isReblog = computed(() => !!toValue(noteProp)?.reblog);
|
||||
const shouldHide = computed(
|
||||
() =>
|
||||
renderedNote.value?.sensitive ||
|
||||
!!renderedNote.value?.spoiler_text ||
|
||||
false,
|
||||
);
|
||||
const mentions = useResolveMentions(
|
||||
renderedNote.value?.mentions ?? [],
|
||||
client.value,
|
||||
);
|
||||
const content = useParsedContent(
|
||||
renderedNote.value?.content ?? "",
|
||||
renderedNote.value?.emojis ?? [],
|
||||
mentions,
|
||||
);
|
||||
const loaded = computed(() => content.value !== null);
|
||||
|
||||
const reblogDisplayName = useParsedContent(
|
||||
renderedNote.value?.account.display_name ?? "",
|
||||
renderedNote.value?.account.emojis ?? [],
|
||||
);
|
||||
const reblog = computed(() =>
|
||||
isReblog.value && renderedNote.value
|
||||
? {
|
||||
avatar: renderedNote.value.account.avatar,
|
||||
acct: renderedNote.value.account.acct,
|
||||
}
|
||||
: null,
|
||||
);
|
||||
|
||||
const url = computed(
|
||||
() => `/@${renderedNote.value?.account.acct}/${renderedNote.value?.id}`,
|
||||
);
|
||||
|
||||
const remove = async () => {
|
||||
const result = await client.value?.deleteStatus(
|
||||
renderedNote.value?.id ?? "",
|
||||
);
|
||||
|
||||
if (result?.data) {
|
||||
useEvent("note:delete", result.data);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
loaded,
|
||||
note: renderedNote,
|
||||
content,
|
||||
reblog,
|
||||
reblogDisplayName,
|
||||
shouldHide,
|
||||
url,
|
||||
remove,
|
||||
};
|
||||
};
|
||||
|
|
@ -12,76 +12,84 @@ import MentionComponent from "../components/social-elements/notes/mention.vue";
|
|||
export const useParsedContent = (
|
||||
content: string,
|
||||
emojis: Emoji[],
|
||||
mentions: Account[],
|
||||
mentions: MaybeRef<Account[]> = ref([]),
|
||||
): Ref<string | null> => {
|
||||
const result = ref(null as string | null);
|
||||
|
||||
(async () => {
|
||||
const contentHtml = document.createElement("div");
|
||||
contentHtml.innerHTML = content;
|
||||
watch(
|
||||
mentions,
|
||||
async () => {
|
||||
const contentHtml = document.createElement("div");
|
||||
contentHtml.innerHTML = content;
|
||||
|
||||
// Replace emoji shortcodes with images
|
||||
const paragraphs = contentHtml.querySelectorAll("p");
|
||||
// Replace emoji shortcodes with images
|
||||
const paragraphs = contentHtml.querySelectorAll("p");
|
||||
|
||||
for (const paragraph of paragraphs) {
|
||||
paragraph.innerHTML = paragraph.innerHTML.replace(
|
||||
/:([a-z0-9_-]+):/g,
|
||||
(match, emoji) => {
|
||||
const emojiData = emojis.find((e) => e.shortcode === emoji);
|
||||
if (!emojiData) {
|
||||
return match;
|
||||
}
|
||||
const image = document.createElement("img");
|
||||
image.src = emojiData.url;
|
||||
image.alt = `:${emoji}:`;
|
||||
image.title = emojiData.shortcode;
|
||||
image.className =
|
||||
"h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
|
||||
return image.outerHTML;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Replace links containing mentions with interactive mentions
|
||||
const links = contentHtml.querySelectorAll("a");
|
||||
|
||||
for (const link of links) {
|
||||
const mention = mentions.find(
|
||||
(m) => link.textContent === `@${m.acct}`,
|
||||
);
|
||||
if (!mention) {
|
||||
continue;
|
||||
for (const paragraph of paragraphs) {
|
||||
paragraph.innerHTML = paragraph.innerHTML.replace(
|
||||
/:([a-z0-9_-]+):/g,
|
||||
(match, emoji) => {
|
||||
const emojiData = emojis.find(
|
||||
(e) => e.shortcode === emoji,
|
||||
);
|
||||
if (!emojiData) {
|
||||
return match;
|
||||
}
|
||||
const image = document.createElement("img");
|
||||
image.src = emojiData.url;
|
||||
image.alt = `:${emoji}:`;
|
||||
image.title = emojiData.shortcode;
|
||||
image.className =
|
||||
"h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
|
||||
return image.outerHTML;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const renderedMention = h(MentionComponent);
|
||||
renderedMention.props = {
|
||||
account: mention,
|
||||
};
|
||||
// Replace links containing mentions with interactive mentions
|
||||
const links = contentHtml.querySelectorAll("a");
|
||||
|
||||
link.outerHTML = await renderToString(renderedMention);
|
||||
}
|
||||
for (const link of links) {
|
||||
const mention = toValue(mentions).find(
|
||||
(m) => link.textContent === `@${m.acct}`,
|
||||
);
|
||||
if (!mention) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Highlight code blocks
|
||||
const codeBlocks = contentHtml.querySelectorAll("pre code");
|
||||
for (const codeBlock of codeBlocks) {
|
||||
const code = codeBlock.textContent;
|
||||
if (!code) {
|
||||
continue;
|
||||
const renderedMention = h(MentionComponent);
|
||||
renderedMention.props = {
|
||||
account: mention,
|
||||
};
|
||||
|
||||
link.outerHTML = await renderToString(renderedMention);
|
||||
}
|
||||
const newCode = (await getShikiHighlighter()).highlight(code, {
|
||||
lang: codeBlock.getAttribute("class")?.replace("language-", ""),
|
||||
});
|
||||
|
||||
// Replace parent pre tag with highlighted code
|
||||
const parent = codeBlock.parentElement;
|
||||
if (!parent) {
|
||||
continue;
|
||||
// Highlight code blocks
|
||||
const codeBlocks = contentHtml.querySelectorAll("pre code");
|
||||
for (const codeBlock of codeBlocks) {
|
||||
const code = codeBlock.textContent;
|
||||
if (!code) {
|
||||
continue;
|
||||
}
|
||||
const newCode = (await getShikiHighlighter()).highlight(code, {
|
||||
lang: codeBlock
|
||||
.getAttribute("class")
|
||||
?.replace("language-", ""),
|
||||
});
|
||||
|
||||
// Replace parent pre tag with highlighted code
|
||||
const parent = codeBlock.parentElement;
|
||||
if (!parent) {
|
||||
continue;
|
||||
}
|
||||
parent.outerHTML = newCode;
|
||||
}
|
||||
parent.outerHTML = newCode;
|
||||
}
|
||||
|
||||
result.value = contentHtml.innerHTML;
|
||||
})();
|
||||
result.value = contentHtml.innerHTML;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,19 +2,24 @@ import type { Mastodon } from "megalodon";
|
|||
import type { Account } from "~/types/mastodon/account";
|
||||
import type { Mention } from "~/types/mastodon/mention";
|
||||
|
||||
export const useResolveMentions = async (
|
||||
export const useResolveMentions = (
|
||||
mentions: Mention[],
|
||||
client: Mastodon | null,
|
||||
): Promise<Ref<Account[]>> => {
|
||||
): Ref<Account[]> => {
|
||||
if (!client) {
|
||||
return ref([]);
|
||||
}
|
||||
return ref(
|
||||
await Promise.all(
|
||||
|
||||
const output = ref<Account[]>([]);
|
||||
|
||||
(async () => {
|
||||
output.value = await Promise.all(
|
||||
mentions.map(async (mention) => {
|
||||
const response = await client.getAccount(mention.id);
|
||||
return response.data;
|
||||
}),
|
||||
),
|
||||
);
|
||||
);
|
||||
})();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue