Rewrite extensions list

Author: NotNite

.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 # shut up
 /.vscode
 /.idea
+
+/.extensions-list-cache.json

astro.config.mjs

@@ -76,6 +76,10 @@ export default defineConfig({
         {
           label: "moonlight developers",
           autogenerate: { directory: "dev" }
+        },
+        {
+          label: "Extensions list",
+          link: "/extensions-list"
         }
       ],
       components: {

src/components/extensions-list/Extension.astro

@@ -0,0 +1,117 @@
+---
+import type { ExtensionManifest } from "./shared";
+import ExtensionInfo from "./ExtensionInfo.astro";
+import { Tabs, TabItem, LinkButton } from "@astrojs/starlight/components";
+import AnchorHeading from "@astrojs/starlight/components/AnchorHeading.astro";
+import { marked } from "marked";
+import type { StarlightIcon } from "@astrojs/starlight/types";
+
+interface Props {
+  extensions: ExtensionManifest[];
+  ext: ExtensionManifest;
+}
+
+const { extensions, ext } = Astro.props;
+
+const tagline = ext.meta?.tagline;
+const description = ext.meta?.description;
+const changelog = ext.meta?.changelog;
+const settings = ext.settings;
+
+type ExtensionLink = {
+  href?: string;
+  icon: StarlightIcon;
+  title: string;
+};
+
+const links = (
+  [
+    {
+      href: ext.meta?.source,
+      icon: "seti:html",
+      title: "View source"
+    },
+    {
+      href: ext.meta?.donate,
+      icon: "heart",
+      title: "Donate"
+    },
+    {
+      href: ext.download,
+      icon: "download",
+      title: "Download .asar"
+    }
+  ] satisfies ExtensionLink[]
+).filter((link) => link.href != null);
+---
+
+<AnchorHeading level="2" id={ext.id}>
+  {ext.meta?.name || ext.id}
+</AnchorHeading>
+
+{
+  tagline != null && (
+    <div class="tagline">
+      <Fragment set:html={marked(tagline)} />
+    </div>
+  )
+}
+
+<Tabs>
+  <TabItem label="Info">
+    <ExtensionInfo {extensions} {ext} />
+  </TabItem>
+
+  {
+    description != null && (
+      <TabItem label="Description">
+        <Fragment set:html={marked(description)} />
+      </TabItem>
+    )
+  }
+
+  {
+    changelog != null && (
+      <TabItem label="Changelog">
+        <Fragment set:html={marked(changelog)} />
+      </TabItem>
+    )
+  }
+
+  {
+    settings != null && (
+      <TabItem label="Settings">
+        <ul>
+          {Object.entries(settings).map(([key, value]) => (
+            <li>
+              <span title={value.description}>{value.displayName ?? key}</span>
+            </li>
+          ))}
+        </ul>
+      </TabItem>
+    )
+  }
+
+  {
+    links.length !== 0 && (
+      <TabItem label="Links">
+        {links.map((link) => (
+          <LinkButton
+            href={link.href!}
+            icon={link.icon}
+            iconPlacement="start"
+            variant="secondary"
+          >
+            {link.title}
+          </LinkButton>
+        ))}
+      </TabItem>
+    )
+  }
+</Tabs>
+
+<style>
+  .tagline {
+    margin: 0;
+  }
+</style>

src/components/extensions-list/ExtensionInfo.astro

@@ -0,0 +1,123 @@
+---
+import InfoSection from "./InfoSection.astro";
+import { Badge } from "@astrojs/starlight/components";
+import {
+  tryGetExtensionName,
+  tagNames,
+  ExtensionTag,
+  DependencyType,
+  type ExtensionManifest,
+  type Dependency
+} from "./shared";
+
+interface Props {
+  extensions: ExtensionManifest[];
+  ext: ExtensionManifest;
+}
+
+const { extensions, ext } = Astro.props;
+
+const authors = ext.meta?.authors;
+const tags = ext.meta?.tags;
+const version = ext.version;
+
+const dependencies: Dependency[] = [];
+const incompatible: Dependency[] = [];
+
+if (ext.dependencies != null) {
+  dependencies.push(
+    ...ext.dependencies.map((dep) => ({
+      id: dep,
+      type: DependencyType.Dependency
+    }))
+  );
+}
+
+if (ext.suggested != null) {
+  dependencies.push(
+    ...ext.suggested.map((dep) => ({
+      id: dep,
+      type: DependencyType.Optional
+    }))
+  );
+}
+
+if (ext.incompatible != null) {
+  incompatible.push(
+    ...ext.incompatible.map((dep) => ({
+      id: dep,
+      type: DependencyType.Incompatible
+    }))
+  );
+}
+---
+
+<div class="extensionInfo">
+  {
+    authors != null && (
+      <InfoSection title="Authors">
+        <span>
+          {authors
+            .map((author) =>
+              typeof author === "string" ? author : author.name
+            )
+            .join(", ")}
+        </span>
+      </InfoSection>
+    )
+  }
+
+  {
+    tags != null && (
+      <InfoSection title="Tags">
+        {tags.map((tag) => (
+          <Badge
+            class="badge"
+            text={tagNames[tag]}
+            variant={tag === ExtensionTag.DangerZone ? "danger" : "note"}
+          />
+        ))}
+      </InfoSection>
+    )
+  }
+
+  {
+    dependencies.length > 0 && (
+      <InfoSection title="Dependencies">
+        {dependencies.map((dep) => (
+          <Badge class="badge" text={tryGetExtensionName(extensions, dep.id)} />
+        ))}
+      </InfoSection>
+    )
+  }
+
+  {
+    incompatible.length > 0 && (
+      <InfoSection title="Incompatible">
+        {incompatible.map((dep) => (
+          <Badge class="badge" text={tryGetExtensionName(extensions, dep.id)} />
+        ))}
+      </InfoSection>
+    )
+  }
+
+  {
+    version != null && (
+      <InfoSection title="Version">
+        <span>{version}</span>
+      </InfoSection>
+    )
+  }
+</div>
+
+<style>
+  .extensionInfo {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .badge {
+    margin-right: 0.4em;
+  }
+</style>

src/components/extensions-list/InfoSection.astro

@@ -0,0 +1,23 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="infoSection">
+  <span class="infoSectionTitle">{title}</span>
+  <slot />
+</div>
+
+<style>
+  .infoSection {
+    margin: 0 !important;
+  }
+
+  .infoSectionTitle {
+    font-weight: 700;
+    display: block;
+  }
+</style>