Merge pull request #3 from davidmayr/main

feat: download page for advanced slime paper

Author: b0ykoe

docs_asp/setup.mdx

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 2
 ---
+import AswmDownload from '@site/src/components/aswm-download';
 
 # Setup
 This page covers how to quickly get ASP up and running on your server.
@@ -22,24 +23,15 @@ ASP is actively developed for Paper; Pufferfish and Purpur versions are based on
 
 ### ASPaper
 We recommend using the Paper version for the most stable experience.
+AdvancedSlimePaper builds are split into several branches, including main, develop, and various feature or PR branches.
 
-#### Main
-Tested and ready for production.
-```
-Download links will be added later
-```
+The `main` branch is stable and well-tested, but it may not always include the latest Paper commits. For bleeding-edge updates, see `paper_upstream`, which includes untested automatic changes.
 
-#### Develop
-Contains the latest features and bug fixes, but is **BARELY** tested and might not work at all.
-```
-Download links will be added later
-```
+The `develop` branch is experimental — it’s generally up-to-date with the latest features and versions, but may include a few bugs.
 
-#### Upstream
-Contains the latest patches from Paper, but is **NOT** tested.
-```
-Download links will be added later
-```
+All other branches should be considered highly unstable. These may include breaking API changes, incomplete features, or **unsafe third-party code** from pull requests.
+
+<AswmDownload slug={"asp"} github={"https://github.com/InfernalSuite/AdvancedSlimePaper"}></AswmDownload>
 
 ### ASPufferfish
 The Pufferfish version is updated less frequently than Paper.

package.json

@@ -24,8 +24,10 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/tsconfig": "^3.7.0",
+    "@docusaurus/types": "^3.7.0",
+    "typescript": "^5.8.3",
     "wrangler": "^3.60.3"
   },
   "browserslist": {

src/components/aswm-build.tsx

@@ -0,0 +1,46 @@
+import React, {useMemo} from "react";
+import styles from "@site/src/components/downloads.module.css";
+import {Build, resolveDownload} from "@site/src/lib/download-api";
+
+export function ASWMBuild({slug, build, github}: { slug: string, build: Build, github: string }) {
+    const serverDownload = useMemo(() => {
+        return build.files.find((it) => it.fileName.endsWith(".jar") && it.fileName.includes("server"))
+    }, [build])
+    const pluginDownload = useMemo(() => {
+        return build.files.find((it) => it.fileName.endsWith(".jar") && it.fileName.includes("plugin"))
+    }, [build])
+    const date = useMemo(() => {
+        const d = new Date(build.date)
+        const now = new Date();
+        const diff = now.getTime() - d.getTime(), dayMs = 86400000;
+
+        if (diff < 7 * dayMs) {
+            const rtf = new Intl.RelativeTimeFormat('en', {numeric: 'auto'});
+            const days = Math.floor(diff / dayMs);
+            return rtf.format(-days, 'day');
+        }
+
+        return d.toLocaleDateString("en");
+    }, [build])
+
+
+    return <div className={styles.build}>
+        <div className={styles.downloads}>
+            {serverDownload &&
+                <a className={"button button--primary button--sm"}
+                   href={resolveDownload(slug, build.id, serverDownload.id)} target={"_blank"}>Server</a>}
+            {pluginDownload && <a className={"button button--primary button--sm"}
+                                  href={resolveDownload(slug, build.id, pluginDownload.id)}
+                                  target={"_blank"}>Plugin</a>}
+        </div>
+        <div className={styles.changeList}>
+            {build.changes.map((it) => {
+                return <p><a target={"_blank"} href={github + "/commit/" + it.commitHash}>{it.shortCommitHash}</a> {it.commit}</p>
+            })}
+            {build.changes.length == 0 && <p>No changes</p>}
+        </div>
+
+        <p className={styles.date}>{date}</p>
+
+    </div>
+}

src/components/aswm-download.tsx

@@ -0,0 +1,91 @@
+import React, {useEffect, useMemo, useState} from "react";
+import styles from './downloads.module.css';
+import {
+    BranchInfo,
+    Build,
+    findNewestSafeVersion,
+    findOptimalBranch, getBranchSuffix,
+    getVersionsSortedDescending
+} from "@site/src/lib/download-api";
+import {ASWMBuild} from "@site/src/components/aswm-build";
+
+export default function AswmDownload({ slug, github }: { slug: string, github: string }) {
+    const [branchInfo, setBranchInfo] = useState<BranchInfo | undefined>();
+    const [selectedVersion, setSelectedVersion] = useState<string>();
+    const sortedVersions = useMemo(() => getVersionsSortedDescending(branchInfo), [branchInfo]);
+
+    const [selectedBranch, setSelectedBranch] = useState<string>();
+    const [buildInfo, setBuildInfo] = useState<Build[]>();
+
+    const optimalVersion = useMemo(() => branchInfo != undefined ? findNewestSafeVersion(branchInfo) : undefined, [branchInfo])
+    const newerThenOptimal = useMemo(() => sortedVersions.filter((e) => sortedVersions.indexOf(e) < sortedVersions.indexOf(optimalVersion)), [optimalVersion, sortedVersions])
+
+    const latestBuilds = useMemo(() => {
+        if(!buildInfo || !selectedBranch) return []
+
+        return buildInfo.filter((it) => it.branch === selectedBranch).sort((b, a) => a.date -  b.date).slice(0, 10)
+    }, [buildInfo, selectedBranch]);
+
+    useEffect(() => {
+        fetch("https://api.infernalsuite.com/v1/projects/" + slug + "/branches").then((res) => res.json()).then((res) => {
+            setBranchInfo(res)
+
+
+            const version = findNewestSafeVersion(res)
+            setSelectedVersion(version)
+            const branches = res[version]
+            setSelectedBranch(findOptimalBranch(branches))
+        })
+    }, [slug])
+
+    useEffect(() => {
+        if(!selectedVersion || !selectedBranch) return
+
+        setBuildInfo(undefined)
+        fetch("https://api.infernalsuite.com/v1/projects/" + slug + "/mcVersion/" + selectedVersion).then((res) => res.json()).then((res) => {
+            setBuildInfo(res)
+        })
+
+    }, [selectedVersion]);
+
+    function changeVersion(e: React.ChangeEvent<HTMLSelectElement>) {
+        setSelectedVersion(e.target.value)
+        setSelectedBranch(findOptimalBranch(branchInfo[e.target.value]))
+    }
+
+
+    return <>
+        {newerThenOptimal.length > 0 && <div className={"alert alert--warning margin-bottom--md"}>
+            We have experimental builds for newer Minecraft versions available({newerThenOptimal.join(", ")}), however use them with caution! You can select them in the version switcher.
+        </div>}
+
+        <div className={styles.downloadContainer}>
+            <div className={styles.downloadHeader}>
+                <p>Latest builds</p>
+
+                <div className={styles.downloadHeaderSelect}>
+                    <select id="version" value={selectedVersion} onChange={(e) => changeVersion(e)}>
+                        {branchInfo && sortedVersions.map((it) => {
+                            return <option value={it}>{it}</option>
+                        })}
+                    </select>
+                    <select id="branch" value={selectedBranch} onChange={(e) => setSelectedBranch(e.target.value)}>
+                        {branchInfo && selectedVersion && branchInfo[selectedVersion] && branchInfo[selectedVersion].map((it) => {
+                            return <option value={it}>{it} {getBranchSuffix(it)}</option>
+                        })}
+                    </select>
+                </div>
+            </div>
+
+            {/*{!branchInfo || !buildInfo && <p>Loading</p>}*/}
+
+            <div className={styles.buildContainer}>
+                {latestBuilds.map((build) => {
+                    return <ASWMBuild key={build.id} slug={slug} build={build} github={github}/>
+                })}
+            </div>
+
+
+        </div>
+    </>
+}

src/components/downloads.module.css

@@ -0,0 +1,88 @@
+
+
+:root {
+    --downloads-header-color: #303846;
+    --downloads-header-text: #ffffff;
+    --downloads-body-color: #e1e1e1;
+    --downloads-entry-hover: #c4c4c4;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+    --downloads-body-color: #272d38;
+    --downloads-entry-hover: #1f262e;
+}
+
+
+.downloadContainer {
+    background: var(--downloads-body-color);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.downloadHeader {
+    background: var(--downloads-header-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+}
+
+.downloadHeader select {
+    padding: 5px 8px;
+    border-radius: 5px;
+}
+
+.downloadHeader p {
+    color: var(--downloads-header-text)
+}
+
+.downloadHeaderSelect {
+    display: flex;
+    gap: 5px;
+}
+
+.downloadHeader p {
+    margin: 0;
+    font-weight: 650;
+}
+
+.buildContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.build {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+}
+
+.build:hover {
+    background-color: var(--downloads-entry-hover);
+    transition: color;
+}
+
+.build .date {
+    margin: 1px 10px;
+}
+.build .changeList {
+    max-width: 100%;
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.build .changeList p {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.build .downloads {
+    display: flex;
+    gap: 5px;
+    margin: 6px 10px
+}

src/css/custom.css

@@ -36,6 +36,10 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+[data-theme='dark'] :where(.button--primary) {
+  --ifm-button-color: #ffffff;
+}
+
 .hero {
   --ifm-hero-background-color: #572245;
   --ifm-hero-text-color: #e6e6e6;

src/lib/download-api.ts

@@ -0,0 +1,84 @@
+
+export interface Build {
+    date: number
+    branch: string
+    paperRef: string
+    id: string
+    changes: Change[]
+    files: File[]
+}
+
+export interface Change {
+    shortCommitHash: string
+    commit: string
+    commitHash: string
+}
+
+export interface File {
+    fileName: string
+    id: string
+}
+
+export interface BranchInfo {
+    [key: string]: string[]
+}
+
+
+export function resolveDownload(slug: string, build: string, file: string) {
+    return `https://api.infernalsuite.com/v1/projects/${slug}/${build}/download/${file}`
+}
+
+
+export function getVersionsSortedDescending(branchInfo: BranchInfo) {
+    if (!branchInfo) return [];
+    const versions = Object.keys(branchInfo);
+    return versions.sort((b, a) => {
+
+        const aParts = a.split('.').map(Number);
+        const bParts = b.split('.').map(Number);
+        for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+            const aPart = aParts[i] || 0;
+            const bPart = bParts[i] || 0;
+            if (aPart !== bPart) {
+                return aPart - bPart;
+            }
+        }
+        return 0;
+    });
+}
+
+export function findNewestSafeVersion(branchInfo: BranchInfo) {
+    const versions = getVersionsSortedDescending(branchInfo);
+
+    for (const version of versions) {
+        const isSafe = branchInfo[version].includes("main");
+        if (isSafe) {
+            return version;
+        }
+    }
+    return versions[0]
+}
+
+//Well, at least somewhat safe
+const safeBranches = ["paper_upstream", "main"]
+
+export function getBranchSuffix(branch: string): string {
+    if(branch == "develop")
+        return "(Experimental)"
+
+    if(!safeBranches.includes(branch))
+        return "(Dangerous)"
+    return ""
+}
+
+export function findOptimalBranch(branches: string[]): string {
+    if(branches.includes("paper_upstream")) {
+        return "paper_upstream"
+    } else if (branches.includes("main")) {
+        return "main"
+    } else if (branches.includes("develop")) {
+        return "develop"
+    } else {
+        return branches[0]
+    }
+}