docs: Add an index of all proto tools/plugins.

website/blog/2023-09-18_proto-v0.18.mdx

@@ -2,8 +2,8 @@
 slug: proto-v0.18
 title: proto v0.18 - List installed tools and configure HTTP client
 authors: [milesj]
-tags: [proto, http]
-# image: ./img/proto/v0.17.png
+tags: [proto, http, registry, index]
+image: ./img/proto/v0.18.png
 ---
 
 Today we've got a small release that includes some helpful features.
@@ -58,6 +58,17 @@ proxies = ["http://intra.net/proxy"]
 root-cert = "/path/to/root/cert.pem"
 ```
 
+## Index for third-party tools
+
+Now that our TOML and WASM plugins have stabilized, we felt the time was right to start working on a
+third-party index, a registry of all available tools. We've updated the official
+[Supported tools](/docs/proto/tools) documentation to now include third-party tools.
+
+At this time, the list of tools is powered by a JS/JSON object,
+[which can be found here](https://github.com/moonrepo/moon/blob/master/website/src/data/proto-tools.tsx).
+In the future, we may move this to a database, add filtering, sorting, and everything else necessary
+for showcasing tools maintained by the community!
+
 ## Other changes
 
 View the [official release](https://github.com/moonrepo/proto/releases/tag/v0.18.0) for a full list

website/docs/proto/tools.mdx

@@ -2,125 +2,24 @@
 title: Supported tools
 ---
 
-import WasmLink from '@site/src/components/Docs/WasmLink';
+import Button from '@site/src/ui/Button';
+import ToolCards from '@site/src/components/Products/Proto/ToolCards';
+import { BUILT_IN_TOOLS, THIRD_PARTY_TOOLS } from '@site/src/data/proto-tools';
 
-The following tools are supported natively in proto's toolchain. Additional tools can be supported
-through [plugins](./plugins).
+## Built-in
 
-## Bun
+The following tools are supported natively in proto's toolchain.
 
-<WasmLink to="https://github.com/moonrepo/bun-plugin" />
+<ToolCards tools={BUILT_IN_TOOLS} />
 
-[Bun](https://bun.sh/) is an all-in-one runtime and toolset for JavaScript and TypeScript, powered
-by Zig and Webkit.
+## Third-party
 
-- **Available binaries** - `bun`, `bunx`
-- **Globals directory** - `~/.bun/bin`
+<Button
+  className="float-right -mt-8"
+  href="https://github.com/moonrepo/moon/edit/master/website/src/data/proto-tools.tsx"
+  label="Add tool"
+/>
 
-## Deno
+Additional tools can be supported through [plugins](./plugins).
 
-<WasmLink to="https://github.com/moonrepo/deno-plugin" />
-
-[Deno](https://deno.land/) is a secure runtime for JavaScript and TypeScript, powered by Rust and
-Chrome's V8 engine.
-
-- **Available binaries** - `deno`
-- **Globals directory** - `$DENO_INSTALL_ROOT/bin`, `~/.deno/bin`
-- **Detection sources** - [`.dvmrc`](https://github.com/justjavac/dvm)
-
-## Go
-
-<WasmLink to="https://github.com/moonrepo/go-plugin" />
-
-[Go](https://go.dev/) is a simple, secure, and fast systems language.
-
-- **Available binaries** - `go`
-- **Globals directory** - `$GOBIN`, `~/go/bin`
-- **Detection sources** - [`go.work`](https://go.dev/doc/tutorial/workspaces),
-  [`go.mod`](https://go.dev/doc/modules/gomod-ref)
-
-#### Post-install hook
-
-After installation, we'll inject a `GOBIN` environment variable into your shell, pointing to
-`~/go/bin`, if it does not already exist. This variable will be used to locate Go binaries across
-all installed versions. This functionality can be skipped by passing `--no-gobin` during
-installation.
-
-```shell
-$ proto install go -- --no-gobin
-```
-
-## Node.js
-
-<WasmLink to="https://github.com/moonrepo/node-plugin" />
-
-[Node.js](https://nodejs.org/) is a JavaScript runtime built on Chrome's V8 engine.
-
-- **Available binaries** - `node`, `npx`
-- **Globals directory** - `~/.proto/tools/node/globals/bin`
-- **Detection sources** - [`.nvmrc`](https://github.com/nvm-sh/nvm),
-  [`.node-version`](https://github.com/nodenv/nodenv), `package.json` engines
-
-#### Post-install hook
-
-After installation, the version of npm that came bundled with Node.js will also be installed. This
-functionality can be skipped by passing `--no-bundled-npm` during installation.
-
-```shell
-$ proto install node -- --no-bundled-npm
-```
-
-### npm, pnpm, yarn
-
-<WasmLink to="https://github.com/moonrepo/node-plugin" />
-
-proto supports all popular Node.js package managers: `npm`, `pnpm`, `yarn`.
-
-- **Available binaries** - `*`, `node-gyp`
-- **Detection sources** - `package.json` engines / package manager
-
-### corepack
-
-Corepack _is not supported_ by proto, and never will be. Use [`proto use`](./commands/use) instead,
-which is a far more poweful alternative.
-
-## Python (experimental)
-
-<WasmLink to="https://github.com/moonrepo/python-plugin" />
-
-[Python](https://www.python.org/) is a high-level, general-purpose programming language.
-
-- **Available binaries** - `python`, `pip`
-- **Globals directory** - `~/.local/bin`
-- **Detection sources** - [`.python-version`](https://github.com/pyenv/pyenv)
-
-## Rust
-
-<WasmLink to="https://github.com/moonrepo/rust-plugin" />
-
-[Rust](https://www.rust-lang.org/) (`rust`) is blazingly fast and memory-efficient systems language.
-
-:::caution
-
-If you're familiar with Rust, you most likely use [rustup](https://rustup.rs), a Rust specific
-toolchain manager. This overlaps heavily with how proto works, so instead of proto reinventing the
-wheel here, we simply call `rustup` under the hood. Because of this, be aware of the following when
-using Rust in proto:
-
-- Rust and Cargo must be pre-installed on your system.
-- The `~/.cargo/bin` directory must be in your `PATH`.
-- We don't install Rust to `~/.proto/tools/rust` but instead reference `~/.rustup/toolchains`.
-- We don't create shims for `cargo`, `rustup`, etc.
-
-:::
-
-Since we don't create shims for `cargo`, `rustup`, etc, we can't detect Rust versions at runtime.
-However, `rustup` supports this through the
-[`rust-toolchain.toml`](https://rust-lang.github.io/rustup/overrides.html#the-toolchain-file) file.
-We suggest using this file.
-
-```toml title="rust-toolchain.toml"
-[toolchain]
-profile = "default"
-channel = "1.68.0"
-```
+<ToolCards tools={THIRD_PARTY_TOOLS} />

website/docusaurus.config.js

@@ -92,15 +92,15 @@ const config = {
 						items: [
 							{
 								to: '/moon',
-								html: '<strong class="block mr-2">moon</strong><div class="opacity-60">System for managing codebases</div>',
+								html: '<strong class="block mr-2">moon</strong><div class="opacity-60">Build system for managing codebases</div>',
 							},
 							{
 								to: '/moonbase',
 								html: '<strong class="block mr-2">moonbase</strong><div class="opacity-60">Service for scaling CI pipelines</div>',
 							},
 							{
 								to: '/proto',
-								html: '<strong class="block mr-2">proto</strong><div class="opacity-60">Multi-language toolchain manager</div>',
+								html: '<strong class="block mr-2">proto</strong><div class="opacity-60">Multi-language version manager</div>',
 							},
 							{
 								to: 'https://espresso.build',

website/src/components/Docs/TomlLink.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { faPuzzle } from '@fortawesome/pro-regular-svg-icons';
+import Label from '../../ui/typography/Label';
+
+export interface TomlLinkProps {
+	to: string;
+	noMargin?: boolean;
+}
+
+export default function TomlLink({ to, noMargin }: TomlLinkProps) {
+	return (
+		<a
+			href={to}
+			target="_blank"
+			className="float-right block"
+			style={{ marginTop: noMargin ? 0 : '-3.75em' }}
+		>
+			<Label text="TOML" icon={faPuzzle} variant="info" />
+		</a>
+	);
+}

website/src/components/Docs/WasmLink.tsx

@@ -4,12 +4,18 @@ import Label from '../../ui/typography/Label';
 
 export interface WasmLinkProps {
 	to: string;
+	noMargin?: boolean;
 }
 
-export default function WasmLink({ to }: WasmLinkProps) {
+export default function WasmLink({ to, noMargin }: WasmLinkProps) {
 	return (
-		<a href={to} target="_blank" className="float-right block" style={{ marginTop: '-3.75em' }}>
-			<Label text="WASM plugin" icon={faPuzzle} variant="success" />
+		<a
+			href={to}
+			target="_blank"
+			className="float-right block"
+			style={{ marginTop: noMargin ? 0 : '-3.75em' }}
+		>
+			<Label text="WASM" icon={faPuzzle} variant="success" />
 		</a>
 	);
 }

website/src/components/Products/Proto/ToolCard.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Heading from '@site/src/ui/typography/Heading';
+import Text from '@site/src/ui/typography/Text';
+import CodeBlock from '@theme/CodeBlock';
+import Code from '@theme/MDXComponents/Code';
+import { ProtoTool } from '../../../data/proto-tools';
+import TomlLink from '../../Docs/TomlLink';
+import WasmLink from '../../Docs/WasmLink';
+
+export interface ToolCardProps {
+	id: string;
+	tool: ProtoTool;
+}
+
+export default function ToolCard({ id, tool }: ToolCardProps) {
+	const bins = tool.bins ?? [];
+	const dirs = tool.globalsDirs ?? [];
+	const detect = tool.detectionSources ?? [];
+	const usageId = tool.usageId ?? id;
+	let usage = `proto install ${usageId}`;
+
+	if (tool.pluginLocator) {
+		usage = `proto add-plugin ${usageId} "${tool.pluginLocator}"\n${usage}`;
+	}
+
+	return (
+		<div className="relative rounded-lg px-2 py-2 text-black border-solid border border-t-0 border-b-2 bg-gray-50 border-gray-200/75 dark:bg-slate-700 dark:border-slate-900/75">
+			{tool.pluginType === 'toml' && <TomlLink to={tool.repoUrl} noMargin />}
+			{tool.pluginType === 'wasm' && <WasmLink to={tool.repoUrl} noMargin />}
+
+			<Heading level={5} className="mb-1">
+				<Link href={tool.homepageUrl}>{tool.name}</Link>
+			</Heading>
+
+			<Text>{tool.description}</Text>
+
+			<CodeBlock language="shell">{usage}</CodeBlock>
+
+			{bins.length > 0 && (
+				<Text size="sm" variant="muted" className="m-0 mt-1">
+					Available bins:{' '}
+					{bins.map((bin, i) => (
+						<>
+							<Code>{bin}</Code>
+							{i === bins.length - 1 ? '' : ', '}
+						</>
+					))}
+				</Text>
+			)}
+
+			{dirs.length > 0 && (
+				<Text size="sm" variant="muted" className="m-0 mt-1">
+					Globals directory:{' '}
+					{dirs.map((dir, i) => (
+						<>
+							<Code>{dir}</Code>
+							{i === dirs.length - 1 ? '' : ', '}
+						</>
+					))}
+				</Text>
+			)}
+
+			{detect.length > 0 && (
+				<Text size="sm" variant="muted" className="m-0 mt-1">
+					Detection sources:{' '}
+					{detect.map((src, i) => {
+						let content = (
+							<>
+								<Code>{src.file}</Code>
+								{src.label ? ' ' : ''}
+								{src.label}
+							</>
+						);
+
+						content = src.url ? <Link href={src.url}>{content}</Link> : <span>{content}</span>;
+
+						return (
+							<>
+								{content}
+								{i === detect.length - 1 ? '' : ', '}
+							</>
+						);
+					})}
+				</Text>
+			)}
+		</div>
+	);
+}

website/src/components/Products/Proto/ToolCards.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ProtoTool } from '../../../data/proto-tools';
+import ToolCard from './ToolCard';
+
+export interface ToolCardsProps {
+	tools: Record<string, ProtoTool>;
+}
+
+export default function ToolCards(props: ToolCardsProps) {
+	return (
+		<div className="grid grid-cols-2 gap-2">
+			{Object.entries(props.tools).map(([id, tool]) => (
+				<div key={id} id={id}>
+					<ToolCard id={id} tool={tool} />
+				</div>
+			))}
+		</div>
+	);
+}