ProjectSide

tcmts.share.ProjectSide · #2b3sc33q · term · runs on the server

uses tcmts.share.shareNow, which uses process

The project's side panel: what it is, how to get it, its packages, who works on it.

import { at, Avatar, codeHref, getItCommand, projectNow, shareNow } from "#codebase/tcmts/share";

export function ProjectSide() {
  const s = shareNow();
  const project = projectNow(s);
  return (
    <aside className="side">
      <div className="sect">
        <h4>About {project.name}</h4>
        {project.description || "A tcm codebase."}
      </div>
      <div className="sect">
        <h4>Get it</h4>
        <pre>{getItCommand(s)}</pre>
      </div>
      {project.packages.length > 0 && (
        <div className="sect">
          <h4>Packages</h4>
          {project.packages.map((p) => (
            <div key={p.name}>
              <a className="mono" href={codeHref(p.manifestPath)}>
                {p.name}
              </a>{" "}
              <span className="muted">
                {p.bins.length ? `runs ${p.bins.join(", ")}` : p.namespace || "the codebase"}
              </span>
            </div>
          ))}
        </div>
      )}
      <div className="sect">
        <h4>People</h4>
        <div className="person">
          <Avatar name="maintainer" /> maintainer
        </div>
        {s.users.map((u) => (
          <div className="person" key={u.handle}>
            <Avatar name={u.handle} /> {`@${u.handle}`} <span className="muted">contributor</span>
          </div>
        ))}
        <a href={at("/people")}>Contribute →</a>
      </div>
    </aside>
  );
}

uses

used by