Switch frontend server to Nuxt

packages/frontend/pages/[username]/[uuid].vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
+        <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+            <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+        </div>
+        <div class="code" v-html="code">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { getHighlighterCore } from "shiki/core";
+import getWasm from "shiki/wasm";
+
+const config = (await useFetch("/api/config")).data.value;
+
+if (!config) {
+    throw new Error("Config not found");
+}
+
+const url = `${config.http.bind}:${config.http.bind_port}`;
+
+const route = useRoute();
+
+const data = await fetch(
+    new URL(`/api/v1/statuses/${route.params.uuid}`, url),
+    {
+        headers: {
+            Accept: "application/json",
+        },
+    },
+)
+    .then((res) => res.json())
+    .catch(() => ({
+        error: "Failed to fetch status (it probably doesn't exist)",
+    }));
+
+const highlighter = await getHighlighterCore({
+    themes: [import("shiki/themes/rose-pine.mjs")],
+    langs: [import("shiki/langs/json.mjs")],
+    loadWasm: getWasm,
+});
+
+const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
+    lang: "json",
+    theme: "rose-pine",
+});
+</script>
+
+<style lang="postcss">
+pre:has(code) {
+	word-wrap: normal;
+	background: transparent;
+	-webkit-hyphens: none;
+	hyphens: none;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	white-space: pre;
+	word-break: normal;
+	word-spacing: normal;
+	overflow-x: auto;
+    @apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
+}
+
+pre code {
+    @apply block p-0;
+}
+</style>

packages/frontend/pages/[username]/index.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
+        <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+            <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+        </div>
+        <div id="code" v-html="code">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { getHighlighterCore } from "shiki/core";
+import getWasm from "shiki/wasm";
+
+const config = (await useFetch("/api/config")).data.value;
+
+if (!config) {
+    throw new Error("Config not found");
+}
+
+const url = `${config.http.bind}:${config.http.bind_port}`;
+
+const route = useRoute();
+
+const username = (route.params.username as string).replace("@", "");
+
+const id = await fetch(new URL(`/api/v1/accounts/search?q=${username}`, url), {
+    headers: {
+        Accept: "application/json",
+    },
+})
+    .then((res) => res.json())
+    .catch(() => null);
+
+let data = null;
+
+if (id && id.length > 0) {
+    data = await fetch(new URL(`/api/v1/accounts/${id[0].id}`, url), {
+        headers: {
+            Accept: "application/json",
+        },
+    })
+        .then((res) => res.json())
+        .catch(() => ({
+            error: "Failed to fetch user (it probably doesn't exist)",
+        }));
+}
+
+const highlighter = await getHighlighterCore({
+    themes: [import("shiki/themes/rose-pine.mjs")],
+    langs: [import("shiki/langs/json.mjs")],
+    loadWasm: getWasm,
+});
+
+const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
+    lang: "json",
+    theme: "rose-pine",
+});
+</script>
+
+<style lang="postcss">
+pre:has(code) {
+	word-wrap: normal;
+	background: transparent;
+	-webkit-hyphens: none;
+	hyphens: none;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	white-space: pre;
+	word-break: normal;
+	word-spacing: normal;
+	overflow-x: auto;
+    @apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
+}
+
+pre code {
+    @apply block p-0;
+}
+</style>