Switch to nuxt assets for emojis

components/EmojiText.vue

@@ -10,6 +10,6 @@ const props = defineProps<{
 }>();
 
 const url = computed(() => {
-  return `/twemoji/${twemoji.convert.toCodePoint(props.emoji)}.svg`;
+  return `/api/v1/emoji/${twemoji.convert.toCodePoint(props.emoji)}`;
 });
 </script>

nuxt.config.ts

@@ -1,16 +1,23 @@
 import tailwindcss from "@tailwindcss/vite";
 import { execSync } from "node:child_process";
-import { cpSync, readFileSync, existsSync } from "node:fs";
+import { readFileSync, existsSync } from "node:fs";
 import path from "node:path";
-import { findPackageJSON } from "node:module";
-import { viteStaticCopy } from "vite-plugin-static-copy";
+import module from "module";
 import { type } from "arktype";
 
 const packageJsonSchema = type({
   name: "string",
   version: "string",
 });
 
+const twemojiJson = module.findPackageJSON(
+  "@discordapp/twemoji",
+  import.meta.url,
+);
+if (!twemojiJson) {
+  throw new Error("Could not find @discordapp/twemoji package.");
+}
+
 // get drop version
 const dropVersion = getDropVersion();
 
@@ -56,7 +63,7 @@ export default defineNuxtConfig({
 
   experimental: {
     buildCache: true,
-    viewTransition: false,
+    viewTransition: true,
     componentIslands: true,
   },
 
@@ -68,39 +75,9 @@ export default defineNuxtConfig({
     plugins: [
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       tailwindcss() as any,
-      // only used in dev server, not build because nitro sucks
-      // see build hook below
-      viteStaticCopy({
-        targets: [
-          {
-            src: "node_modules/@discordapp/twemoji/dist/svg/*",
-            dest: "twemoji",
-          },
-        ],
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      }) as any,
     ],
   },
 
-  hooks: {
-    "nitro:build:public-assets": (nitro) => {
-      const twemojiJson = findPackageJSON(
-        "@discordapp/twemoji",
-        import.meta.url,
-      );
-      if (!twemojiJson) {
-        throw new Error("Could not find @discordapp/twemoji package.");
-      }
-      // this is only run during build, not dev server
-      // https://github.com/nuxt/nuxt/issues/18918#issuecomment-1925774964
-      // copy emojis to .output/public/twemoji
-      const targetDir = path.join(nitro.options.output.publicDir, "twemoji");
-      cpSync(path.join(path.dirname(twemojiJson), "dist", "svg"), targetDir, {
-        recursive: true,
-      });
-    },
-  },
-
   runtimeConfig: {
     gitRef: commitHash,
     dropVersion: dropVersion,
@@ -139,6 +116,7 @@ export default defineNuxtConfig({
 
     scheduledTasks: {
       "0 * * * *": ["dailyTasks"],
+      "*/30 * * * *": ["downloadCleanup"],
     },
 
     storage: {
@@ -154,6 +132,14 @@ export default defineNuxtConfig({
         base: "./.data/appCache",
       },
     },
+
+    serverAssets: [
+      {
+        baseName: "twemoji",
+        // get path to twemoji svg assets
+        dir: path.join(path.dirname(twemojiJson), "dist", "svg"),
+      },
+    ],
   },
 
   typescript: {

package.json

@@ -59,7 +59,6 @@
     "stream-mime-type": "^2.0.0",
     "turndown": "^7.2.0",
     "unstorage": "^1.15.0",
-    "vite-plugin-static-copy": "^3.1.2",
     "vue": "latest",
     "vue-router": "latest",
     "vue3-carousel": "^0.16.0",

server/api/v1/emoji/[codepoint]/index.get.ts

@@ -0,0 +1,39 @@
+import aclManager from "~/server/internal/acls";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.hasACL(h3, [
+    "system:setup",
+    "user:emoji:read",
+  ]);
+  if (!allowed)
+    throw createError({
+      statusCode: 403,
+      statusMessage: "Requires authentication",
+    });
+
+  const codepoint = getRouterParam(h3, "codepoint");
+  if (!codepoint) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing codepoint parameter",
+    });
+  }
+
+  // Get the emoji SVG from server assets
+  const asset = await useStorage("assets:twemoji").getItemRaw(
+    `${codepoint}.svg`,
+  );
+
+  if (!asset) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Emoji not found",
+    });
+  }
+
+  // Set proper content type for SVG
+  setResponseHeader(h3, "Content-Type", "image/svg+xml");
+  setResponseHeader(h3, "Cache-Control", "private, max-age=31536000");
+
+  return asset;
+});

server/internal/acls/descriptions.ts

@@ -40,6 +40,8 @@ export const userACLDescriptions: ObjectFromList<typeof userACLs> = {
 
   "news:read": "Read the server's news articles.",
 
+  "emoji:read": "Read built in emojis",
+
   "settings:read": "Read system settings.",
 };
 

server/internal/acls/index.ts

@@ -32,6 +32,8 @@ export const userACLs = [
   "clients:read",
   "clients:revoke",
 
+  "emoji:read",
+
   "news:read",
 
   "settings:read",
@@ -220,7 +222,7 @@ class ACLManager {
     return false;
   }
 
-  async hasACL(request: MinimumRequestObject | undefined, acls: string[]) {
+  async hasACL(request: MinimumRequestObject | undefined, acls: GlobalACL[]) {
     for (const acl of acls) {
       if (acl.startsWith(userACLPrefix)) {
         const rawACL = acl.substring(userACLPrefix.length);

server/internal/tasks/index.ts

@@ -284,7 +284,8 @@ class TaskHandler {
       return;
     }
 
-    const allowed = await aclManager.hasACL(request, task.acls);
+    // cast acls due to prisma types being less strict
+    const allowed = await aclManager.hasACL(request, task.acls as GlobalACL[]);
     if (!allowed) {
       // logger.warn("user does not have necessary ACLs");
       peer.send(