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--) {

apps/frontend/src/components/ui/servers/ContentItem.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="relative flex w-full items-center justify-between rounded-xl bg-bg-raised"
+ :class="data.disabled ? 'bg-table-alternateRow text-secondary' : ''"
+ >
+ <NuxtLink
+ :to="`/project/${data.project_id}`"
+ class="group flex w-full items-center rounded-xl p-2"
+ >
+ <div class="flex items-center gap-2">
+ <UiAvatar
+ :src="data.icon_url"
+ no-shadow
+ size="sm"
+ alt="Server Icon"
+ :class="data.disabled ? 'grayscale' : ''"
+ />
+ <div class="flex flex-col">
+ <span class="flex items-center gap-2 text-lg font-bold">
+ {{ data.name === null ? "External Mod" : data.name }}
+ <span
+ v-if="data.disabled"
+ class="rounded-full bg-button-bg p-1 px-2 text-xs text-contrast"
+ >
+ Disabled
+ </span>
+ </span>
+ <span v-if="data.name !== null" class="text-xs text-secondary">
+ {{ data.version_number }}
+ </span>
+ </div>
+ </div>
+ </NuxtLink>
+ <div class="absolute right-2 flex gap-2 rounded-xl p-1 font-semibold text-contrast">
+ <Button v-if="data.project_id" icon-only transparent @click="emit('edit', data)">
+ <EditIcon />
+ </Button>
+ <Button icon-only transparent @click="emit('delete', data)">
+ <TrashIcon />
+ </Button>
+ <input
+ id="property.id"
+ class="switch stylized-toggle"
+ type="checkbox"
+ @change="emit('toggle', data)"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { Button } from "@modrinth/ui";
+import { EditIcon, TrashIcon } from "@modrinth/assets";
+
+const emit = defineEmits(["toggle", "delete", "edit"]);
+
+defineProps<{
+ data: {
+ name?: string;
+ filename: string;
+ project_id?: string;
+ version_id?: string;
+ version_number?: string;
+ icon_url?: string;
+ disabled: boolean;
+ };
+}>();
+</script>