Pyro Integration

.gitignore

@@ -56,4 +56,8 @@ generated
 # app testing dir
 app-playground-data/*
 
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env
+
 .astro

apps/app/capabilities/plugins.json

@@ -2,9 +2,7 @@
   "identifier": "plugins",
   "description": "",
   "local": true,
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "dialog:allow-open",
     "dialog:allow-confirm",

apps/frontend/.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ["../../packages/eslint-config-custom/nuxt.js"],
+  rules: {
+    "import/no-unresolved": "off",
+  },
 };

apps/frontend/nuxt.config.ts

@@ -177,7 +177,8 @@ export default defineNuxtConfig({
         $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
         $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
         // TODO: dehardcode
-        $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
+        $fetch(`${STAGING_API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
+        // SET TO API_URL WHEN MERGING WITH UPSTREAM
       ]);
 
       state.categories = categories;
@@ -321,8 +322,12 @@ export default defineNuxtConfig({
     apiBaseUrl: process.env.BASE_URL ?? globalThis.BASE_URL ?? getApiUrl(),
     // @ts-ignore
     rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? globalThis.RATE_LIMIT_IGNORE_KEY,
+    pyroBaseUrl: process.env.PYRO_BASE_URL,
+    prodOverride: process.env.PROD_OVERRIDE,
     public: {
       apiBaseUrl: getApiUrl(),
+      pyroBaseUrl: process.env.PYRO_BASE_URL,
+      prodOverride: process.env.PROD_OVERRIDE,
       siteUrl: getDomain(),
       production: isProduction(),
       featureFlagOverrides: getFeatureFlagOverrides(),
@@ -361,7 +366,7 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: ["@vintl/nuxt", "@nuxtjs/turnstile"],
+  modules: ["@vintl/nuxt", "@nuxtjs/turnstile", "@pinia/nuxt"],
   vintl: {
     defaultLocale: "en-US",
     locales: [
@@ -445,23 +450,26 @@ function getFeatureFlagOverrides() {
 
 function getDomain() {
   if (process.env.NODE_ENV === "production") {
-    if (process.env.SITE_URL) {
-      return process.env.SITE_URL;
-    }
-    // @ts-ignore
-    else if (process.env.CF_PAGES_URL || globalThis.CF_PAGES_URL) {
-      // @ts-ignore
-      return process.env.CF_PAGES_URL ?? globalThis.CF_PAGES_URL;
-    } else if (process.env.HEROKU_APP_NAME) {
-      return `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`;
-    } else if (process.env.VERCEL_URL) {
-      return `https://${process.env.VERCEL_URL}`;
-    } else if (getApiUrl() === STAGING_API_URL) {
-      return "https://staging.modrinth.com";
-    } else {
-      return "https://modrinth.com";
-    }
+    // if (process.env.SITE_URL) {
+    //   return process.env.SITE_URL;
+    // }
+    // // @ts-ignore
+    // else if (process.env.CF_PAGES_URL || globalThis.CF_PAGES_URL) {
+    //   // @ts-ignore
+    //   return process.env.CF_PAGES_URL ?? globalThis.CF_PAGES_URL;
+    // } else if (process.env.HEROKU_APP_NAME) {
+    //   return `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`;
+    // } else if (process.env.VERCEL_URL) {
+    //   return `https://${process.env.VERCEL_URL}`;
+    // } else if (getApiUrl() === STAGING_API_URL) {
+    //   return "https://staging.modrinth.com";
+    // } else {
+    //   return "https://modrinth.com";
+    // }
+    // TODO: remove on merge
+    return "https://redacted.modrinth.com";
   } else {
-    return "http://localhost:3000";
+    const port = process.env.PORT || 3000;
+    return `http://localhost:${port}`;
   }
 }

apps/frontend/package.json

@@ -16,6 +16,7 @@
     "@formatjs/cli": "^6.2.12",
     "@nuxt/devtools": "^1.3.3",
     "@nuxtjs/turnstile": "^0.8.0",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.1.0",
     "@vintl/compact-number": "^2.0.5",
     "@vintl/how-ago": "^3.0.1",
@@ -38,8 +39,13 @@
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@pinia/nuxt": "^0.5.1",
     "@vintl/vintl": "^4.4.1",
+    "@vueuse/core": "^11.1.0",
+    "ace-builds": "^1.36.2",
+    "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.7",
+    "dompurify": "^3.1.7",
     "floating-vue": "2.0.0-beta.20",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
@@ -48,9 +54,12 @@
     "jszip": "^3.10.1",
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
+    "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
-    "vue-multiselect": "3.0.0",
+    "vue-multiselect": "3.0.0-alpha.2",
+    "vue-typed-virtual-list": "^1.0.10",
+    "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.5.2",
     "xss": "^1.0.14"
   }

apps/frontend/src/components/ui/CopyCode.vue

@@ -45,7 +45,7 @@ export default {
   margin: 0;
   padding: 0.25rem 0.5rem;
   background-color: var(--color-code-bg);
-  width: min-content;
+  width: fit-content;
   border-radius: 10px;
   user-select: text;
   transition:
@@ -55,7 +55,6 @@ export default {
     outline 0.2s ease-in-out;
 
   span {
-    max-width: 10rem;
     overflow: hidden;
     text-overflow: ellipsis;
   }

apps/frontend/src/components/ui/NavTabs.vue

@@ -24,7 +24,7 @@
         top: sliderTopPx,
         right: sliderRightPx,
         bottom: sliderBottomPx,
-        opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+        // opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
       }"
       aria-hidden="true"
     ></div>
@@ -38,7 +38,7 @@ interface Tab {
   label: string;
   href: string;
   shown?: boolean;
-  icon?: string;
+  icon?: unknown;
   subpages?: string[];
 }
 
@@ -64,6 +64,7 @@ const sliderRightPx = computed(() => `${sliderRight.value}px`);
 const sliderBottomPx = computed(() => `${sliderBottom.value}px`);
 
 function pickLink() {
+  if (route.path.split("/").length < 4) return;
   let index = -1;
   subpageSelected.value = false;
   for (let i = filteredLinks.value.length - 1; i >= 0; i--) {