LibrariesPage

tcmts.registry.pages.LibrariesPage · #yvkdrxjx · term · runs on the server

is an async component

Every library, by how many use it, newest first, or most reviewed; how many, and from how many servers (their sources' hosts).

import {
  everyone, libraries, libraryKey, registryShare, shownAttestations, starCounts,
} from "#codebase/tcmts/registry";
import type { Library } from "#codebase/tcmts/registry";
import { Legend, LibraryRow, LinkSelect, RegistryFrame } from "#codebase/tcmts/registry/pages";
import { at } from "#codebase/tcmts/share";

export async function LibrariesPage({ sort }: { sort: string }) {
  registryShare();
  const all = await libraries();
  const who = await everyone();
  const said_ = await shownAttestations();
  const starred = await starCounts();
  // (what people say of each: advisories on any version, and how many reviews)
  const saidOf = (l: Library) =>
    said_.filter((a) => l.versions.some((v) => v.namespace === a.namespace));
  const reviewsOf = (l: Library) => saidOf(l).filter((a) => a.kind === "review").length;
  const notesOf = (l: Library) => {
    const of = saidOf(l);
    const advised = l.versions.filter((v) =>
      of.some((a) => a.kind === "advisory" && a.namespace === v.namespace),
    );
    const reviews = reviewsOf(l);
    return [
      ...(advised.length ? [`advisory on ${advised.map((v) => v.version).join(", ")}`] : []),
      ...(reviews ? [`${reviews} review${reviews === 1 ? "" : "s"}`] : []),
    ].join(" · ");
  };
  const byUse = (a: Library, b: Library) =>
    b.dependents - a.dependents || a.package.localeCompare(b.package);
  if (sort === "newest")
    all.sort((a, b) => Date.parse(b.latest.createdAt) - Date.parse(a.latest.createdAt));
  else if (sort === "reviewed") all.sort((a, b) => reviewsOf(b) - reviewsOf(a) || byUse(a, b));
  else all.sort(byUse);
  const servers = new Set(
    all.flatMap((l) =>
      l.latest.sources.flatMap((s) => {
        try {
          return [new URL(s).host];
        } catch {
          return [];
        }
      }),
    ),
  ).size;
  const sorts = [
    ["", "Most used"],
    ["newest", "Newest release"],
    ["reviewed", "Most reviewed"],
  ] as const;
  return (
    <RegistryFrame tab="libraries" title="Libraries">
      <div className="narrow">
        <div className="pagehead">
          <h2 className="title">Libraries</h2>
          <span className="muted">
            {all.length} from {servers} server{servers === 1 ? "" : "s"}
          </span>
          <span className="right">
            <LinkSelect
              label="Sort by"
              shown
              selected={sorts.some(([x]) => x === sort) ? sort || "used" : "used"}
              options={sorts.map(([id, label]) => ({
                id: id || "used",
                label,
                href: at(id ? `/libraries?sort=${id}` : "/libraries"),
              }))}
            />
          </span>
        </div>
        {all.length ? (
          <>
            <div className="box">
              {all.map((l) => (
                <LibraryRow
                  key={libraryKey(l)}
                  l={l}
                  who={who.get(l.did) ?? { did: l.did }}
                  notes={notesOf(l)}
                  stars={starred.get(libraryKey(l)) ?? 0}
                />
              ))}
            </div>
            <Legend />
          </>
        ) : (
          <div className="empty">No libraries yet.</div>
        )}
      </div>
    </RegistryFrame>
  );
}

uses

used by