Skip to content

Package Version pages #1547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: 09-17-update_thunderstore-api_to_match_up_coming_cyberstorm_api_changes
Choose a base branch
from
Open

Package Version pages #1547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f7c3d36
Add packageVersionDetails endpoint usage
Oksamies Sep 19, 2025
ddeef84
Add packageVersion method to Dapper
Oksamies Sep 19, 2025
cbee42a
Add LinkLibrary support for PackageVersion pages
Oksamies Sep 19, 2025
38d56a9
Add PackageVersion pages and tabs (with community)
Oksamies Sep 19, 2025
1c48661
Add PackageVersion pages and tabs (without community)
Oksamies Sep 19, 2025
7edfffd
Add Breadcrumbs for Package Version pages
Oksamies Sep 19, 2025
a55032e
Enhance formatToDisplayName to support full version display names
Oksamies Sep 19, 2025
e19c1bc
Add Package Version pages into routes.ts to enable the pages
Oksamies Sep 19, 2025
4c51a83
Package Pages Versions tabs version numbers to be links to the specif…
Oksamies Sep 19, 2025
7a9bbdb
Add /p location to the ts-dev-proxy
Oksamies Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
544 changes: 544 additions & 0 deletions apps/cyberstorm-remix/app/p/packageVersion.tsx
View file
Open in desktop

Large diffs are not rendered by default.

491 changes: 491 additions & 0 deletions apps/cyberstorm-remix/app/p/packageVersionWithoutCommunity.tsx
View file
Open in desktop

Large diffs are not rendered by default.

85 changes: 85 additions & 0 deletions apps/cyberstorm-remix/app/p/tabs/Readme/PackageVersionReadme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Await, LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";
import { DapperTs } from "@thunderstore/dapper-ts";
import {
getPublicEnvVariables,
getSessionTools,
} from "cyberstorm/security/publicEnvVariables";
import { Suspense } from "react";
import { SkeletonBox } from "@thunderstore/cyberstorm";
import "./Readme.css";

export async function loader({ params }: LoaderFunctionArgs) {
if (params.namespaceId && params.packageId && params.packageVersion) {
const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
const dapper = new DapperTs(() => {
return {
apiHost: publicEnvVariables.VITE_API_URL,
sessionId: undefined,
};
});
return {
readme: await dapper.getPackageReadme(
params.namespaceId,
params.packageId,
params.packageVersion
),
};
}
return {
status: "error",
message: "Failed to load readme",
readme: { html: "" },
};
}

export async function clientLoader({ params }: LoaderFunctionArgs) {
if (params.namespaceId && params.packageId && params.packageVersion) {
const tools = getSessionTools();
const dapper = new DapperTs(() => {
return {
apiHost: tools?.getConfig().apiHost,
sessionId: tools?.getConfig().sessionId,
};
});
return {
readme: dapper.getPackageReadme(
params.namespaceId,
params.packageId,
params.packageVersion
),
};
}
return {
status: "error",
message: "Failed to load readme",
readme: { html: "" },
};
}

export default function PackageVersionReadme() {
const { status, message, readme } = useLoaderData<
typeof loader | typeof clientLoader
>();

if (status === "error") return <div>{message}</div>;
return (
<Suspense fallback={<SkeletonBox className="package-readme__skeleton" />}>
<Await
resolve={readme}
errorElement={<div>Error occurred while loading description</div>}
>
{(resolvedValue) => (
<>
<div className="markdown-wrapper">
<div
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
className="markdown"
/>
</div>
</>
)}
</Await>
</Suspense>
);
}
85 changes: 85 additions & 0 deletions apps/cyberstorm-remix/app/p/tabs/Readme/PackageVersionWithoutCommunityReadme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Await, LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";
import { DapperTs } from "@thunderstore/dapper-ts";
import {
getPublicEnvVariables,
getSessionTools,
} from "cyberstorm/security/publicEnvVariables";
import { Suspense } from "react";
import { SkeletonBox } from "@thunderstore/cyberstorm";
import "./Readme.css";

export async function loader({ params }: LoaderFunctionArgs) {
if (params.namespaceId && params.packageId && params.packageVersion) {
const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
const dapper = new DapperTs(() => {
return {
apiHost: publicEnvVariables.VITE_API_URL,
sessionId: undefined,
};
});
return {
readme: await dapper.getPackageReadme(
params.namespaceId,
params.packageId,
params.packageVersion
),
};
}
return {
status: "error",
message: "Failed to load readme",
readme: { html: "" },
};
}

export async function clientLoader({ params }: LoaderFunctionArgs) {
if (params.namespaceId && params.packageId && params.packageVersion) {
const tools = getSessionTools();
const dapper = new DapperTs(() => {
return {
apiHost: tools?.getConfig().apiHost,
sessionId: tools?.getConfig().sessionId,
};
});
return {
readme: dapper.getPackageReadme(
params.namespaceId,
params.packageId,
params.packageVersion
),
};
}
return {
status: "error",
message: "Failed to load readme",
readme: { html: "" },
};
}

export default function PackageVersionReadme() {
const { status, message, readme } = useLoaderData<
typeof loader | typeof clientLoader
>();

if (status === "error") return <div>{message}</div>;
return (
<Suspense fallback={<SkeletonBox className="package-readme__skeleton" />}>
<Await
resolve={readme}
errorElement={<div>Error occurred while loading description</div>}
>
{(resolvedValue) => (
<>
<div className="markdown-wrapper">
<div
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
className="markdown"
/>
</div>
</>
)}
</Await>
</Suspense>
);
}
112 changes: 112 additions & 0 deletions apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionRequired.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import "./Required.css";
// import { Heading, SkeletonBox } from "@thunderstore/cyberstorm";
// import {
// Await,
// LoaderFunctionArgs
// } from "react-router";
// import { useLoaderData, useOutletContext } from "react-router";
// import { ListingDependency } from "~/commonComponents/ListingDependency/ListingDependency";
// import { DapperTs } from "@thunderstore/dapper-ts";
// import { OutletContextShape } from "~/root";
// import {
// getPublicEnvVariables,
// getSessionTools,
// } from "cyberstorm/security/publicEnvVariables";
// import { Suspense } from "react";

// LOADERS ARE WAITING FOR PACKAGE DEPENDENCIES API ENDPOINT

// export async function loader({ params }: LoaderFunctionArgs) {
// if (
// params.communityId &&
// params.namespaceId &&
// params.packageId &&
// params.packageVersion
// ) {
// const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
// const dapper = new DapperTs(() => {
// return {
// apiHost: publicEnvVariables.VITE_API_URL,
// sessionId: undefined,
// };
// });
// return {
// listing: dapper.getPackageListingDetails(
// params.communityId,
// params.namespaceId,
// params.packageId
// ),
// };
// }
// throw new Response("Listing dependencies not found", { status: 404 });
// }

// export async function clientLoader({ params }: LoaderFunctionArgs) {
// if (
// params.communityId &&
// params.namespaceId &&
// params.packageId &&
// params.packageVersion
// ) {
// const tools = getSessionTools();
// const dapper = new DapperTs(() => {
// return {
// apiHost: tools?.getConfig().apiHost,
// sessionId: tools?.getConfig().sessionId,
// };
// });
// return {
// listing: dapper.getPackageListingDetails(
// params.communityId,
// params.namespaceId,
// params.packageId
// ),
// };
// }
// throw new Response("Listing dependencies not found", { status: 404 });
// }

export default function PackageVersionRequired() {
// const { listing } = useLoaderData<typeof loader | typeof clientLoader>();
// const outletContext = useOutletContext() as OutletContextShape;

return <p>TODO; Waiting for package dependencies API endpoint</p>;

// return (
// <Suspense fallback={<SkeletonBox className="package-required__skeleton" />}>
// <Await
// resolve={listing}
// errorElement={
// <div>Error occurred while loading required dependencies</div>
// }
// >
// {(resolvedValue) => (
// <>
// <div className="required">
// <div className="required__title">
// <Heading csLevel="3" csSize="3">
// Required mods ({resolvedValue.dependencies.length})
// </Heading>
// <span className="required__description">
// This package requires the following packages to work.
// </span>
// </div>
// <div className="required__body">
// {resolvedValue.dependencies.map((dep, key) => {
// return (
// <ListingDependency
// key={key}
// dependency={dep}
// // TODO: Remove when package versiond detail is available
// domain={outletContext.domain}
// />
// );
// })}
// </div>
// </div>
// </>
// )}
// </Await>
// </Suspense>
// );
}
112 changes: 112 additions & 0 deletions apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionWithoutCommunityRequired.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import "./Required.css";
// import { Heading, SkeletonBox } from "@thunderstore/cyberstorm";
// import {
// Await,
// LoaderFunctionArgs
// } from "react-router";
// import { useLoaderData, useOutletContext } from "react-router";
// import { ListingDependency } from "~/commonComponents/ListingDependency/ListingDependency";
// import { DapperTs } from "@thunderstore/dapper-ts";
// import { OutletContextShape } from "~/root";
// import {
// getPublicEnvVariables,
// getSessionTools,
// } from "cyberstorm/security/publicEnvVariables";
// import { Suspense } from "react";

// LOADERS ARE WAITING FOR PACKAGE DEPENDENCIES API ENDPOINT

// export async function loader({ params }: LoaderFunctionArgs) {
// if (
// params.communityId &&
// params.namespaceId &&
// params.packageId &&
// params.packageVersion
// ) {
// const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
// const dapper = new DapperTs(() => {
// return {
// apiHost: publicEnvVariables.VITE_API_URL,
// sessionId: undefined,
// };
// });
// return {
// listing: dapper.getPackageListingDetails(
// params.communityId,
// params.namespaceId,
// params.packageId
// ),
// };
// }
// throw new Response("Listing dependencies not found", { status: 404 });
// }

// export async function clientLoader({ params }: LoaderFunctionArgs) {
// if (
// params.communityId &&
// params.namespaceId &&
// params.packageId &&
// params.packageVersion
// ) {
// const tools = getSessionTools();
// const dapper = new DapperTs(() => {
// return {
// apiHost: tools?.getConfig().apiHost,
// sessionId: tools?.getConfig().sessionId,
// };
// });
// return {
// listing: dapper.getPackageListingDetails(
// params.communityId,
// params.namespaceId,
// params.packageId
// ),
// };
// }
// throw new Response("Listing dependencies not found", { status: 404 });
// }

export default function PackageVersionRequired() {
// const { listing } = useLoaderData<typeof loader | typeof clientLoader>();
// const outletContext = useOutletContext() as OutletContextShape;

return <p>TODO; Waiting for package dependencies API endpoint</p>;

// return (
// <Suspense fallback={<SkeletonBox className="package-required__skeleton" />}>
// <Await
// resolve={listing}
// errorElement={
// <div>Error occurred while loading required dependencies</div>
// }
// >
// {(resolvedValue) => (
// <>
// <div className="required">
// <div className="required__title">
// <Heading csLevel="3" csSize="3">
// Required mods ({resolvedValue.dependencies.length})
// </Heading>
// <span className="required__description">
// This package requires the following packages to work.
// </span>
// </div>
// <div className="required__body">
// {resolvedValue.dependencies.map((dep, key) => {
// return (
// <ListingDependency
// key={key}
// dependency={dep}
// // TODO: Remove when package versiond detail is available
// domain={outletContext.domain}
// />
// );
// })}
// </div>
// </div>
// </>
// )}
// </Await>
// </Suspense>
// );
}
Loading
Loading