add wip html parser

package.json

@@ -13,10 +13,13 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
+		"@fontsource/fira-sans": "^5.0.18",
 		"@tabler/icons-vue": "^2.44.0",
 		"axios": "^1.6.2",
+		"domhandler": "^5.0.3",
 		"flowbite": "^2.2.1",
 		"flowbite-vue": "^0.1.2",
+		"htmlparser2": "^9.0.0",
 		"pinia": "^2.1.7",
 		"sass": "^1.69.5",
 		"swrv": "^1.0.4",
@@ -30,6 +33,7 @@
 		"@tsconfig/node18": "^18.2.2",
 		"@types/node": "^18.19.3",
 		"@vitejs/plugin-vue": "^4.5.2",
+		"@vitejs/plugin-vue-jsx": "^3.1.0",
 		"@vue/eslint-config-prettier": "^8.0.0",
 		"@vue/eslint-config-typescript": "^12.0.0",
 		"@vue/tsconfig": "^0.5.0",

src/App.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import "@fontsource/fira-sans/400.css";
+import "@fontsource/fira-sans/700.css";
+
 import { RouterView } from "vue-router";
 </script>
 

src/components/HTMLContent.tsx

@@ -0,0 +1,42 @@
+import * as htmlparser2 from "htmlparser2";
+
+import type { Mention, Tag } from "@/lib/api/entities/activity";
+import type { CustomEmoji } from "@/lib/api/entities/custom_emoji";
+import { Text, type ChildNode, Element } from "domhandler";
+
+interface Props {
+	content: string;
+	emoji: CustomEmoji[];
+	tags?: Tag[];
+	mentions?: Mention[];
+}
+
+const parser = new DOMParser();
+
+export default function HTMLContent(props: Props) {
+	let { content } = props;
+	// emoji are always in their shortcode form
+	props.emoji.forEach((emoji) => {
+		content = content.replace(new RegExp(`:${emoji.shortcode}:`, "g"), customEmojiElement(emoji));
+	});
+
+	const dom = htmlparser2.parseDocument(content);
+	const elements = parseElement(dom.children);
+
+	console.log(dom);
+
+	return elements;
+}
+
+const customEmojiElement = (emoji: CustomEmoji) => {
+	const elem = document.createElement("x-emoji");
+	elem.setAttribute("emoji", emoji.shortcode);
+	return elem.outerHTML;
+};
+
+function parseElement(elems: ChildNode[]) {
+	const out = [];
+	for (const elem of elems) {
+		if (elem instanceof Text) out.push(<>{elem.data}</>);
+	}
+}

src/components/VulEmoji.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { CustomEmoji } from "@/lib/api/entities/custom_emoji";
+
+defineProps<{ emoji: CustomEmoji }>();
+</script>
+
+<template>
+	<img class="inline-emoji" :src="emoji.url" :alt="emoji.shortcode" />
+</template>

src/components/status/VulStatus.vue

@@ -1,71 +1,16 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import type Activity from "@/lib/api/entities/activity";
-import { IconWorld, IconHome, IconLock, IconMail } from "@tabler/icons-vue";
+import VulStatusInfo from "./VulStatusInfo.vue";
+import VulStatusContent from "./VulStatusContent.vue";
+import VulStatusButtons from "./VulStatusButtons.vue";
 
-const { t } = useI18n();
 defineProps<{ status: Activity }>();
-
-const statusScopeKey = ({ visibility }: Activity) => {
-	switch (visibility) {
-		case "direct":
-			return "status.visibility.directMessage";
-		case "private":
-			return "status.visibility.followersOnly";
-		case "unlisted":
-			return "status.visibility.unlisted";
-		case "public":
-			return "status.visibility.public";
-	}
-};
-
-const statusScopeIcon = ({ visibility }: Activity) => {
-	switch (visibility) {
-		case "direct":
-			return IconMail
-		case "private":
-			return IconLock
-		case "unlisted":
-			return IconHome
-		case "public":
-			return IconWorld
-	}
-}
 </script>
 
 <template>
-	<div class="flex flex-row">
+	<div class="flex flex-col m-2">
-		<div class="flex flex-row flex-grow">
+		<VulStatusInfo :status="status" />
-			<RouterLink :to="`/@${status.account.acct}`">
+		<VulStatusContent :status="status" />
-				<img
+		<VulStatusButtons :status="status" />
-					class="rounded-full m-2"
-					:src="status.account.avatar"
-					width="64"
-					:alt="t('status.avatar', { name: status.account.acct })"
-					:title="t('status.avatar', { name: status.account.acct })"
-				/>
-			</RouterLink>
-			<div class="flex flex-col my-1">
-				<h2 className="text-lg font-bold">
-					<RouterLink :to="`/@${status.account.acct}`">
-						{{ status.account.display_name }}
-					</RouterLink>
-				</h2>
-				<h3 className="text-base font-light">
-					<RouterLink :to="`/@${status.account.acct}`"> @{{ status.account.acct }} </RouterLink>
-				</h3>
-			</div>
-		</div>
-		<div class="my-1 flex flex-row">
-			<span>
-				<span :title="t(statusScopeKey(status))" aria-hidden="true">
-					<component :is="statusScopeIcon(status)" />
-				</span>
-				<span class="sr-only">{{ t(statusScopeKey(status)) }}</span>
-			</span>
-			<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`">
-				{humanizeDuration(time)}
-			</RouterLink>
-		</div>
 	</div>
 </template>

src/components/status/VulStatusButtons.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { IconDotsVertical, IconMessage, IconPlus, IconQuote, IconRepeat, IconStar } from "@tabler/icons-vue";
+import type Activity from "@/lib/api/entities/activity";
+
+defineProps<{ status: Activity }>();
+</script>
+
+<template>
+	<div class="flex">
+		<ul class="flex space-x-4">
+			<li>
+				<span v-if="status.replies_count">{{ status.replies_count }}</span>
+				<IconMessage class="inline" />
+			</li>
+			<li>
+				<span v-if="status.reblogs_count">{{ status.reblogs_count }}</span>
+				<IconRepeat class="inline" />
+			</li>
+			<li>
+				<IconQuote class="inline" />
+			</li>
+			<li>
+				<span v-if="status.favourites_count">{{ status.favourites_count }}</span>
+				<IconStar class="inline" />
+			</li>
+			<li>
+				<IconPlus class="inline" />
+			</li>
+			<li>
+				<IconDotsVertical class="inline" />
+			</li>
+		</ul>
+	</div>
+</template>

src/components/status/VulStatusContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type Activity from "@/lib/api/entities/activity";
+import { FwbButton } from "flowbite-vue";
+import HTMLContent from "../HTMLContent";
+
+const { status } = defineProps<{ status: Activity }>();
+
+const { t } = useI18n();
+
+const isCollapsed = ref(!!status.spoiler_text);
+</script>
+
+<template>
+	<div class="flex flex-col">
+		<div v-if="status.spoiler_text">
+			<strong v-html="status.spoiler_text"></strong>
+			<FwbButton class="mx-2" color="alternative" size="sm" @click="() => (isCollapsed = !isCollapsed)">
+				{{
+					isCollapsed
+						? t("status.showContent", { count: status.content?.length || 0 })
+						: t("status.hideContent", { count: status.content?.length || 0 })
+				}}
+			</FwbButton>
+		</div>
+		<div v-if="!isCollapsed" v-html="status.content || 'N/A'"></div>
+		<HTMLContent
+			v-if="!isCollapsed && status.content"
+			:content="status.content"
+			:emoji="status.emojis"
+			:tags="status.tags"
+			:mentions="status.mentions"
+		/>
+	</div>
+</template>

src/components/status/VulStatusInfo.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import type Activity from "@/lib/api/entities/activity";
+import { IconWorld, IconHome, IconLock, IconMail } from "@tabler/icons-vue";
+
+const { t } = useI18n();
+defineProps<{ status: Activity }>();
+
+const statusScopeKey = ({ visibility }: Activity) => {
+	switch (visibility) {
+		case "direct":
+			return "status.visibility.directMessage";
+		case "private":
+			return "status.visibility.followersOnly";
+		case "unlisted":
+			return "status.visibility.unlisted";
+		case "public":
+			return "status.visibility.public";
+	}
+};
+
+const statusScopeIcon = ({ visibility }: Activity) => {
+	switch (visibility) {
+		case "direct":
+			return IconMail;
+		case "private":
+			return IconLock;
+		case "unlisted":
+			return IconHome;
+		case "public":
+			return IconWorld;
+	}
+};
+</script>
+
+<template>
+	<div class="flex flex-row">
+		<div class="flex flex-row flex-grow">
+			<RouterLink :to="`/@${status.account.acct}`">
+				<img
+					class="rounded-full m-2"
+					:src="status.account.avatar"
+					width="64"
+					:alt="t('status.avatar', { name: status.account.acct })"
+					:title="t('status.avatar', { name: status.account.acct })"
+				/>
+			</RouterLink>
+			<div class="flex flex-col my-1">
+				<h2 className="text-lg font-bold">
+					<RouterLink :to="`/@${status.account.acct}`">
+						{{ status.account.display_name }}
+					</RouterLink>
+				</h2>
+				<h3 className="text-base font-light">
+					<RouterLink :to="`/@${status.account.acct}`"> @{{ status.account.acct }} </RouterLink>
+				</h3>
+			</div>
+		</div>
+		<div class="my-1 flex flex-row">
+			<span>
+				<span :title="t(statusScopeKey(status))" aria-hidden="true">
+					<component :is="statusScopeIcon(status)" />
+				</span>
+				<span class="sr-only">{{ t(statusScopeKey(status)) }}</span>
+			</span>
+			<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`"> {humanizeDuration(time)} </RouterLink>
+		</div>
+	</div>
+</template>

src/lib/api/entities/activity.ts

@@ -1,4 +1,5 @@
 import type { Account } from "./account";
+import type { CustomEmoji } from "./custom_emoji";
 
 export default interface Activity {
 	id: string;
@@ -9,6 +10,9 @@ export default interface Activity {
 	content: string | null;
 	spoiler_text: string | null;
 	visibility: "public" | "unlisted" | "private" | "direct";
+	mentions: Mention[];
+	tags: Tag[];
+	emojis: CustomEmoji[];
 
 	reblogs_count: number;
 	favourites_count: number;
@@ -23,3 +27,15 @@ export interface ActivityAkkomaSource {
 	content: string;
 	mediaType: string;
 }
+
+export interface Mention {
+	id: string;
+	username: string;
+	url: string;
+	acct: string;
+}
+
+export interface Tag {
+	name: string;
+	url: string;
+}

src/locale/en.pirate.yaml

@@ -1,8 +1,8 @@
 status:
   avatar: "{name}'s mugshot"
   characterCount: "{count} character | {count} characters"
-  showContent: "Show treasure ({@:status.characterCount})"
+  showContent: "Show treasure (@:status.characterCount)"
-  hideContent: "Hide treasure ({@:status.characterCount})"
+  hideContent: "Hide treasure (@:status.characterCount)"
   visibility:
     directMessage: Direct bottle
     followersOnly: Only shown to their mateys

src/locale/en.yaml

@@ -1,8 +1,8 @@
 status:
   avatar: "{name}'s avatar"
   characterCount: "{count} character | {count} characters"
-  showContent: "Show content ({@:status.characterCount})"
+  showContent: "Show content (@:status.characterCount)"
-  hideContent: "Hide content ({@:status.characterCount})"
+  hideContent: "Hide content (@:status.characterCount)"
   visibility:
     directMessage: Direct message
     followersOnly: Followers only

tailwind.config.js

@@ -1,3 +1,5 @@
+import { theme } from "tailwindcss/defaultConfig";
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	darkMode: "class",
@@ -8,7 +10,11 @@ export default {
 		"node_modules/flowbite/**/*.{js,jsx,ts,tsx}",
 	],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				sans: ['"Fira Sans"', ...theme.fontFamily.sans],
+			},
+		},
 	},
 	plugins: [import("flowbite/plugin")],
 };

tsconfig.app.json

@@ -5,6 +5,7 @@
 	"compilerOptions": {
 		"composite": true,
 		"noEmit": true,
+		"jsxImportSource": "vue",
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"]

tsconfig.node.json

@@ -1,12 +1,6 @@
 {
 	"extends": "@tsconfig/node18/tsconfig.json",
-	"include": [
+	"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
-		"vite.config.*",
-		"vitest.config.*",
-		"cypress.config.*",
-		"nightwatch.conf.*",
-		"playwright.config.*"
-	],
 	"compilerOptions": {
 		"composite": true,
 		"noEmit": true,

vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from "node:url";
 
 import { loadEnv, defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import yaml from "@modyfi/vite-plugin-yaml";
 
 // https://vitejs.dev/config/
@@ -9,7 +10,7 @@ export default defineConfig(({ mode }) => {
 	const { INSTANCE } = loadEnv(mode, process.cwd(), "");
 
 	return {
-		plugins: [vue(), yaml()],
+		plugins: [vue(), vueJsx(), yaml()],
 		resolve: {
 			alias: {
 				"@": fileURLToPath(new URL("./src", import.meta.url)),