Merge commit '36ad1f16e46333cd85d4719d8ecfcfd745167075' into beta

This commit is contained in:
2025-07-09 23:57:16 +03:00
68 changed files with 348 additions and 200 deletions

View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui";
import { Avatar, ButtonStyled } from "@modrinth/ui";
import { RssIcon, GitGraphIcon } from "@modrinth/assets";
import dayjs from "dayjs";
import { articles as rawArticles } from "@modrinth/blog";
import { computed } from "vue";
import type { User } from "@modrinth/utils";
import ShareArticleButtons from "~/components/ui/ShareArticleButtons.vue";
import NewsletterButton from "~/components/ui/NewsletterButton.vue";
@@ -20,7 +21,21 @@ if (!rawArticle) {
});
}
const html = await rawArticle.html();
const authorsUrl = `users?ids=${JSON.stringify(rawArticle.authors)}`;
const [authors, html] = await Promise.all([
rawArticle.authors
? useAsyncData(authorsUrl, () => useBaseFetch(authorsUrl)).then((data) => {
const users = data.data as Ref<User[]>;
users.value.sort((a, b) => {
return rawArticle.authors.indexOf(a.id) - rawArticle.authors.indexOf(b.id);
});
return users;
})
: Promise.resolve(),
rawArticle.html(),
]);
const article = computed(() => ({
...rawArticle,
@@ -34,6 +49,8 @@ const article = computed(() => ({
html,
}));
const authorCount = computed(() => authors?.value?.length ?? 0);
const articleTitle = computed(() => article.value.title);
const articleUrl = computed(() => `https://modrinth.com/news/article/${route.params.slug}`);
@@ -83,9 +100,35 @@ useSeoMeta({
<article class="mt-6 flex flex-col gap-4 px-6">
<h2 class="m-0 text-2xl font-extrabold leading-tight sm:text-4xl">{{ article.title }}</h2>
<p class="m-0 text-base leading-tight sm:text-lg">{{ article.summary }}</p>
<div class="mt-auto text-sm text-secondary sm:text-base">
Posted on {{ dayjsDate.format("MMMM D, YYYY") }}
<div class="mt-auto flex flex-wrap items-center gap-1 text-sm text-secondary sm:text-base">
<template v-for="(author, index) in authors" :key="`author-${author.id}`">
<span v-if="authorCount - 1 === index && authorCount > 1">and</span>
<span class="flex items-center">
<nuxt-link
:to="`/user/${author.id}`"
class="inline-flex items-center gap-1 font-semibold hover:underline hover:brightness-[--hover-brightness]"
>
<Avatar :src="author.avatar_url" circle size="24px" />
{{ author.username }}
</nuxt-link>
<span v-if="(authors?.length ?? 0) > 2 && index !== authorCount - 1">,</span>
</span>
</template>
<template v-if="!authors || authorCount === 0">
<nuxt-link
to="/organization/modrinth"
class="inline-flex items-center gap-1 font-semibold hover:underline hover:brightness-[--hover-brightness]"
>
<Avatar src="https://cdn-raw.modrinth.com/modrinth-icon-96.webp" size="24px" />
Modrinth Team
</nuxt-link>
</template>
<span class="hidden md:block"></span>
<span class="hidden md:block"> {{ dayjsDate.format("MMMM D, YYYY") }}</span>
</div>
<span class="text-sm text-secondary sm:text-base md:hidden">
Posted on {{ dayjsDate.format("MMMM D, YYYY") }}</span
>
<ShareArticleButtons :title="article.title" :url="articleUrl" />
<img
:src="article.thumbnail"

View File

@@ -719,31 +719,32 @@ async function fetchCapacityStatuses(customProduct = null) {
product.metadata.ram < min.metadata.ram ? product : min,
),
];
const capacityChecks = productsToCheck.map((product) =>
useServersFetch("stock", {
method: "POST",
body: {
cpu: product.metadata.cpu,
memory_mb: product.metadata.ram,
swap_mb: product.metadata.swap,
storage_mb: product.metadata.storage,
},
bypassAuth: true,
}),
);
const results = await Promise.all(capacityChecks);
const capacityChecks = [];
for (const product of productsToCheck) {
capacityChecks.push(
useServersFetch("stock", {
method: "POST",
body: {
cpu: product.metadata.cpu,
memory_mb: product.metadata.ram,
swap_mb: product.metadata.swap,
storage_mb: product.metadata.storage,
},
bypassAuth: true,
}),
);
}
if (customProduct?.metadata) {
return {
custom: results[0],
custom: await capacityChecks[0],
};
} else {
return {
small: results[0],
medium: results[1],
large: results[2],
custom: results[3],
small: await capacityChecks[0],
medium: await capacityChecks[1],
large: await capacityChecks[2],
custom: await capacityChecks[3],
};
}
} catch (error) {
@@ -760,6 +761,11 @@ async function fetchCapacityStatuses(customProduct = null) {
const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
"ServerCapacityAll",
fetchCapacityStatuses,
{
getCachedData() {
return null; // Dont cache stock data.
},
},
);
const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0);

View File

@@ -55,7 +55,7 @@
/>
</div>
<div
v-else-if="server.moduleErrors?.general?.error.statusCode === 503"
v-else-if="server.moduleErrors?.general?.error || !nodeAccessible"
class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
>
<ErrorInformationCard
@@ -68,22 +68,22 @@
<template #description>
<div class="text-md space-y-4">
<p class="leading-[170%] text-secondary">
Your server's node, where your Modrinth Server is physically hosted, is experiencing
issues. We are working with our datacenter to resolve the issue as quickly as possible.
Your server's node, where your Modrinth Server is physically hosted, is not accessible
at the moment. We are working to resolve the issue as quickly as possible.
</p>
<p class="leading-[170%] text-secondary">
Your data is safe and will not be lost, and your server will be back online as soon as
the issue is resolved.
</p>
<p class="leading-[170%] text-secondary">
For updates, please join the Modrinth Discord or contact Modrinth Support via the chat
If reloading does not work initially, please contact Modrinth Support via the chat
bubble in the bottom right corner and we'll be happy to help.
</p>
</div>
</template>
</ErrorInformationCard>
</div>
<div
<!-- <div
v-else-if="server.moduleErrors?.general?.error"
class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
>
@@ -96,19 +96,14 @@
>
<template #description>
<div class="space-y-4">
<div class="text-center text-secondary">
{{
formattedTime == "00" ? "Reconnecting..." : `Retrying in ${formattedTime} seconds...`
}}
</div>
<p class="text-lg text-secondary">
Something went wrong, and we couldn't connect to your server. This is likely due to a
temporary network issue. You'll be reconnected automatically.
temporary network issue.
</p>
</div>
</template>
</ErrorInformationCard>
</div>
</div> -->
<!-- SERVER START -->
<div
v-else-if="serverData"
@@ -355,7 +350,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, type Reactive } from "vue";
import { ref, computed, onMounted, onUnmounted, type Reactive } from "vue";
import {
SettingsIcon,
CopyIcon,
@@ -371,15 +366,15 @@ import DOMPurify from "dompurify";
import { ButtonStyled, ErrorInformationCard, ServerNotice } from "@modrinth/ui";
import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
import type { MessageDescriptor } from "@vintl/vintl";
import type {
ServerState,
Stats,
WSEvent,
WSInstallationResultEvent,
Backup,
PowerAction,
import {
type ServerState,
type Stats,
type WSEvent,
type WSInstallationResultEvent,
type Backup,
type PowerAction,
} from "@modrinth/utils";
import { reloadNuxtApp, navigateTo } from "#app";
import { reloadNuxtApp } from "#app";
import { useModrinthServersConsole } from "~/store/console.ts";
import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
import { ModrinthServer, useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
@@ -392,7 +387,6 @@ const socket = ref<WebSocket | null>(null);
const isReconnecting = ref(false);
const isLoading = ref(true);
const reconnectInterval = ref<ReturnType<typeof setInterval> | null>(null);
const isFirstMount = ref(true);
const isMounted = ref(true);
const flags = useFeatureFlags();
@@ -422,18 +416,6 @@ const loadModulesPromise = Promise.resolve().then(() => {
provide("modulesLoaded", loadModulesPromise);
watch(
() => [server.moduleErrors?.general, server.moduleErrors?.ws],
([generalError, wsError]) => {
if (server.general?.status === "suspended") return;
const error = generalError?.error || wsError?.error;
if (error && error.statusCode !== 403) {
startPolling();
}
},
);
const errorTitle = ref("Error");
const errorMessage = ref("An unexpected error occurred.");
const errorLog = ref("");
@@ -697,7 +679,6 @@ const startUptimeUpdates = () => {
const stopUptimeUpdates = () => {
if (uptimeIntervalId) {
clearInterval(uptimeIntervalId);
pollingIntervalId = null;
}
};
@@ -836,8 +817,6 @@ const handleInstallationResult = async (data: WSInstallationResultEvent) => {
case "ok": {
if (!serverData.value) break;
stopPolling();
try {
await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -992,14 +971,6 @@ const notifyError = (title: string, text: string) => {
});
};
let pollingIntervalId: ReturnType<typeof setInterval> | null = null;
const countdown = ref(15);
const formattedTime = computed(() => {
const seconds = countdown.value % 60;
return `${seconds.toString().padStart(2, "0")}`;
});
export type BackupInProgressReason = {
type: string;
tooltip: MessageDescriptor;
@@ -1035,54 +1006,6 @@ const backupInProgress = computed(() => {
return undefined;
});
const stopPolling = () => {
if (pollingIntervalId) {
clearTimeout(pollingIntervalId);
pollingIntervalId = null;
}
};
const startPolling = () => {
stopPolling();
let retryCount = 0;
const maxRetries = 10;
const poll = async () => {
try {
await server.refresh(["general", "ws"]);
if (!server.moduleErrors?.general?.error) {
stopPolling();
connectWebSocket();
return;
}
retryCount++;
if (retryCount >= maxRetries) {
console.error("Max retries reached, stopping polling");
stopPolling();
return;
}
// Exponential backoff: 3s, 6s, 12s, 24s, etc.
const delay = Math.min(3000 * Math.pow(2, retryCount - 1), 60000);
pollingIntervalId = setTimeout(poll, delay);
} catch (error) {
console.error("Polling failed:", error);
retryCount++;
if (retryCount < maxRetries) {
const delay = Math.min(3000 * Math.pow(2, retryCount - 1), 60000);
pollingIntervalId = setTimeout(poll, delay);
}
}
};
poll();
};
const nodeUnavailableDetails = computed(() => [
{
label: "Server ID",
@@ -1091,9 +1014,16 @@ const nodeUnavailableDetails = computed(() => [
},
{
label: "Node",
value: server.general?.datacenter ?? "Unknown! Please contact support!",
value: server.general?.datacenter ?? "Unknown",
type: "inline" as const,
},
{
label: "Error message",
value: nodeAccessible.value
? server.moduleErrors?.general?.error.message ?? "Unknown"
: "Unable to reach node. Ping test failed.",
type: "block" as const,
},
]);
const suspendedDescription = computed(() => {
@@ -1160,16 +1090,10 @@ const generalErrorAction = computed(() => ({
}));
const nodeUnavailableAction = computed(() => ({
label: "Join Modrinth Discord",
onClick: () => navigateTo("https://discord.modrinth.com", { external: true }),
color: "standard" as const,
}));
const connectionLostAction = computed(() => ({
label: "Reload",
onClick: () => reloadNuxtApp(),
color: "brand" as const,
disabled: formattedTime.value !== "00",
disabled: false,
}));
const copyServerDebugInfo = () => {
@@ -1193,7 +1117,6 @@ const cleanup = () => {
shutdown();
stopPolling();
stopUptimeUpdates();
if (reconnectInterval.value) {
clearInterval(reconnectInterval.value);
@@ -1236,16 +1159,31 @@ async function dismissNotice(noticeId: number) {
await server.refresh(["general"]);
}
const nodeAccessible = ref(true);
onMounted(() => {
isMounted.value = true;
if (server.general?.status === "suspended") {
isLoading.value = false;
return;
}
server
.testNodeReachability()
.then((result) => {
nodeAccessible.value = result;
if (!nodeAccessible.value) {
isLoading.value = false;
}
})
.catch((err) => {
console.error("Error testing node reachability:", err);
nodeAccessible.value = false;
isLoading.value = false;
});
if (server.moduleErrors.general?.error) {
if (!server.moduleErrors.general?.error?.message?.includes("Forbidden")) {
startPolling();
}
isLoading.value = false;
} else {
connectWebSocket();
}
@@ -1297,21 +1235,6 @@ onUnmounted(() => {
cleanup();
});
watch(
() => serverData.value?.status,
(newStatus, oldStatus) => {
if (isFirstMount.value) {
isFirstMount.value = false;
return;
}
if (newStatus === "installing" && oldStatus !== "installing") {
countdown.value = 15;
startPolling();
}
},
);
definePageMeta({
middleware: "auth",
});