From 8d577efcf26bb0ec66269b481a267eb75329eb49 Mon Sep 17 00:00:00 2001 From: Miles Johnson Date: Tue, 19 Sep 2023 10:50:47 -0700 Subject: [PATCH 1/3] Add cards. --- website/docs/proto/tools.mdx | 124 ++---------------- website/docusaurus.config.js | 4 +- website/src/components/Docs/TomlLink.tsx | 21 +++ website/src/components/Docs/WasmLink.tsx | 12 +- .../components/Products/Proto/ToolCard.tsx | 92 +++++++++++++ .../components/Products/Proto/ToolCards.tsx | 19 +++ .../components/Products/Proto/ToolsGrid.tsx | 80 +---------- website/src/data/proto-plugins.tsx | 109 +++++++++++++++ website/static/img/tools/bun.svg | 9 ++ website/static/img/tools/deno.svg | 13 ++ website/static/img/tools/go.svg | 12 ++ website/static/img/tools/node.svg | 9 ++ website/static/img/tools/python.svg | 9 ++ website/static/img/tools/rust.svg | 10 ++ 14 files changed, 328 insertions(+), 195 deletions(-) create mode 100644 website/src/components/Docs/TomlLink.tsx create mode 100644 website/src/components/Products/Proto/ToolCard.tsx create mode 100644 website/src/components/Products/Proto/ToolCards.tsx create mode 100644 website/src/data/proto-plugins.tsx create mode 100644 website/static/img/tools/bun.svg create mode 100644 website/static/img/tools/deno.svg create mode 100644 website/static/img/tools/go.svg create mode 100644 website/static/img/tools/node.svg create mode 100644 website/static/img/tools/python.svg create mode 100644 website/static/img/tools/rust.svg diff --git a/website/docs/proto/tools.mdx b/website/docs/proto/tools.mdx index 9bec3d2cd16..8b4223f6122 100644 --- a/website/docs/proto/tools.mdx +++ b/website/docs/proto/tools.mdx @@ -2,125 +2,17 @@ title: Supported tools --- -import WasmLink from '@site/src/components/Docs/WasmLink'; +import ToolCards from '@site/src/components/Products/Proto/ToolCards'; +import { BUILTIN_TOOLS, THIRD_PARTY_TOOLS } from '@site/src/data/proto-plugins'; -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. - + -[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` +Additional tools can be supported through [plugins](./plugins). -## Deno - - - -[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 - - - -[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 - - - -[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 - - - -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) - - - -[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 - - - -[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" -``` + diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f982afdb8a8..7eb8d9187b4 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -92,7 +92,7 @@ const config = { items: [ { to: '/moon', - html: 'moon
System for managing codebases
', + html: 'moon
Build system for managing codebases
', }, { to: '/moonbase', @@ -100,7 +100,7 @@ const config = { }, { to: '/proto', - html: 'proto
Multi-language toolchain manager
', + html: 'proto
Multi-language version manager
', }, { to: 'https://espresso.build', diff --git a/website/src/components/Docs/TomlLink.tsx b/website/src/components/Docs/TomlLink.tsx new file mode 100644 index 00000000000..c084a140795 --- /dev/null +++ b/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 ( + + + ); +} diff --git a/website/src/components/Docs/WasmLink.tsx b/website/src/components/Docs/WasmLink.tsx index 97280b6c1f3..fa5bad87743 100644 --- a/website/src/components/Docs/WasmLink.tsx +++ b/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 ( - - + ); } diff --git a/website/src/components/Products/Proto/ToolCard.tsx b/website/src/components/Products/Proto/ToolCard.tsx new file mode 100644 index 00000000000..9c822ed8165 --- /dev/null +++ b/website/src/components/Products/Proto/ToolCard.tsx @@ -0,0 +1,92 @@ +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-plugins'; +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; + + return ( +
+ {tool.pluginType === 'toml' && } + {tool.pluginType === 'wasm' && } + + + {tool.name} + + + {tool.description} + + + {tool.pluginLocator && ( + <> + proto add-plugin {usageId} "{tool.pluginLocator}" +
+ + )} + proto install {usageId} + + + {bins.length > 0 && ( + + Available bins:{' '} + {bins.map((bin, i) => ( + <> + {bin} + {i === bins.length - 1 ? '' : ', '} + + ))} + + )} + + {dirs.length > 0 && ( + + Globals directory:{' '} + {dirs.map((dir, i) => ( + <> + {dir} + {i === dirs.length - 1 ? '' : ', '} + + ))} + + )} + + {detect.length > 0 && ( + + Detection sources:{' '} + {detect.map((src, i) => { + let content = ( + <> + {src.file} + {src.label ? ' ' : ''} + {src.label} + + ); + + content = src.url ? {content} : {content}; + + return ( + <> + {content} + {i === detect.length - 1 ? '' : ', '} + + ); + })} + + )} +
+ ); +} diff --git a/website/src/components/Products/Proto/ToolCards.tsx b/website/src/components/Products/Proto/ToolCards.tsx new file mode 100644 index 00000000000..2f62dedd091 --- /dev/null +++ b/website/src/components/Products/Proto/ToolCards.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ProtoTool } from '@site/src/data/proto-plugins'; +import ToolCard from './ToolCard'; + +export interface ToolCardsProps { + tools: Record; +} + +export default function ToolCards(props: ToolCardsProps) { + return ( +
+ {Object.entries(props.tools).map(([id, tool]) => ( +
+ +
+ ))} +
+ ); +} diff --git a/website/src/components/Products/Proto/ToolsGrid.tsx b/website/src/components/Products/Proto/ToolsGrid.tsx index b1323fcbb0b..22d4e2926ae 100644 --- a/website/src/components/Products/Proto/ToolsGrid.tsx +++ b/website/src/components/Products/Proto/ToolsGrid.tsx @@ -12,72 +12,25 @@ export default function ToolsGrid({ cols = 3 }: ToolsGridProps) {
- - - +
- - - - +
- - - - - - +
- - - + @@ -87,34 +40,13 @@ export default function ToolsGrid({ cols = 3 }: ToolsGridProps) {
- - - +
- - - +
diff --git a/website/src/data/proto-plugins.tsx b/website/src/data/proto-plugins.tsx new file mode 100644 index 00000000000..fa3b89aa076 --- /dev/null +++ b/website/src/data/proto-plugins.tsx @@ -0,0 +1,109 @@ +export interface ProtoTool { + bins?: string[]; + detectionSources?: { + file: string; + label?: string; + url?: string; + }[]; + description: string; + globalsDirs?: string[]; + homepageUrl?: string; + name: string; + noIcon?: boolean; + pluginLocator?: string; + pluginType: 'toml' | 'wasm'; + repoUrl: string; + usageId?: string; +} + +export const BUILTIN_TOOLS: Record = { + bun: { + bins: ['bun', 'bunx'], + description: + 'Bun is an all-in-one runtime and toolset for JavaScript and TypeScript, powered by Zig and Webkit.', + globalsDirs: ['~/.bun/bin'], + homepageUrl: 'https://bun.sh', + name: 'Bun', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/bun-plugin', + }, + deno: { + bins: ['deno'], + description: + "Deno is a secure runtime for JavaScript and TypeScript, powered by Rust and Chrome's V8 engine.", + detectionSources: [{ file: '.dvmrc', url: 'https://github.com/justjavac/dvm' }], + globalsDirs: ['$DENO_INSTALL_ROOT/bin', '$DENO_HOME/bin', '~/.deno/bin'], + homepageUrl: 'https://deno.land', + name: 'Deno', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/deno-plugin', + }, + go: { + bins: ['go'], + description: 'Go is a simple, secure, and fast systems language.', + detectionSources: [ + { file: 'go.work', url: 'https://go.dev/doc/tutorial/workspaces' }, + { file: 'go.mod', url: 'https://go.dev/doc/modules/gomod-ref' }, + ], + globalsDirs: ['$GOBIN', '$GOROOT/bin', '$GOPATH/bin', '~/go/bin'], + homepageUrl: 'https://go.dev', + name: 'Go', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/go-plugin', + }, + node: { + bins: ['node', 'npx'], + description: "Node.js is a JavaScript runtime built on Chrome's V8 engine.", + detectionSources: [ + { file: '.nvmrc', url: 'https://github.com/nvm-sh/nvm' }, + { file: '.node-version', url: 'https://github.com/nodenv/nodenv' }, + { file: 'package.json', label: 'engines' }, + ], + globalsDirs: ['~/.proto/tools/node/globals/bin'], + homepageUrl: 'https://nodejs.org', + name: 'Node.js', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/node-plugin', + }, + node_depman: { + bins: ['npm', 'pnpm', 'yarn', 'node-gyp'], + description: 'proto supports all popular Node.js package managers.', + detectionSources: [{ file: 'package.json', label: 'engines / package manager' }], + globalsDirs: ['~/.proto/tools/node/globals/bin'], + name: 'npm, pnpm, yarn', + noIcon: true, + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/node-plugin', + usageId: '', + }, + python: { + bins: ['python', 'pip'], + description: 'Python is a high-level, general-purpose programming language.', + detectionSources: [{ file: '.python-version', url: 'https://github.com/pyenv/pyenv' }], + globalsDirs: ['~/.local/bin'], + name: 'Python (experimental)', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/python-plugin', + }, + rust: { + description: `Rust is a blazingly fast and memory-efficient systems language.`, + detectionSources: [{ file: 'rust-toolchain.toml' }, { file: 'rust-toolchain' }], + globalsDirs: ['~/.cargo/bin'], + name: 'Rust', + pluginType: 'wasm', + repoUrl: 'https://github.com/moonrepo/rust-plugin', + }, +}; + +export const THIRD_PARTY_TOOLS: Record = { + moon: { + bins: ['moon'], + description: 'moon is a multi-language build system and codebase management tool.', + homepageUrl: 'https://moonrepo.dev/moon', + name: 'moon', + pluginLocator: + 'source:https://raw.githubusercontent.com/moonrepo/moon/master/proto-plugin.toml', + pluginType: 'toml', + repoUrl: 'https://github.com/moonrepo/moon/blob/master/proto-plugin.toml', + }, +}; diff --git a/website/static/img/tools/bun.svg b/website/static/img/tools/bun.svg new file mode 100644 index 00000000000..3844dd1760e --- /dev/null +++ b/website/static/img/tools/bun.svg @@ -0,0 +1,9 @@ + + + diff --git a/website/static/img/tools/deno.svg b/website/static/img/tools/deno.svg new file mode 100644 index 00000000000..daf4a32ba17 --- /dev/null +++ b/website/static/img/tools/deno.svg @@ -0,0 +1,13 @@ + + + + diff --git a/website/static/img/tools/go.svg b/website/static/img/tools/go.svg new file mode 100644 index 00000000000..12b7ed0daab --- /dev/null +++ b/website/static/img/tools/go.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/website/static/img/tools/node.svg b/website/static/img/tools/node.svg new file mode 100644 index 00000000000..7454376fb68 --- /dev/null +++ b/website/static/img/tools/node.svg @@ -0,0 +1,9 @@ + + + diff --git a/website/static/img/tools/python.svg b/website/static/img/tools/python.svg new file mode 100644 index 00000000000..aa75bd60bb5 --- /dev/null +++ b/website/static/img/tools/python.svg @@ -0,0 +1,9 @@ + + + diff --git a/website/static/img/tools/rust.svg b/website/static/img/tools/rust.svg new file mode 100644 index 00000000000..c410966cc4d --- /dev/null +++ b/website/static/img/tools/rust.svg @@ -0,0 +1,10 @@ + + + From 9eb8842952178278e07e395c3b068a0f8841f1b4 Mon Sep 17 00:00:00 2001 From: Miles Johnson Date: Tue, 19 Sep 2023 11:12:46 -0700 Subject: [PATCH 2/3] Add button. --- website/docs/proto/tools.mdx | 11 ++++- .../components/Products/Proto/ToolCard.tsx | 17 +++---- .../components/Products/Proto/ToolCards.tsx | 2 +- .../{proto-plugins.tsx => proto-tools.tsx} | 48 +++++++++++++++---- 4 files changed, 55 insertions(+), 23 deletions(-) rename website/src/data/{proto-plugins.tsx => proto-tools.tsx} (76%) diff --git a/website/docs/proto/tools.mdx b/website/docs/proto/tools.mdx index 8b4223f6122..a1854ecc705 100644 --- a/website/docs/proto/tools.mdx +++ b/website/docs/proto/tools.mdx @@ -2,17 +2,24 @@ title: Supported tools --- +import Button from '@site/src/ui/Button'; import ToolCards from '@site/src/components/Products/Proto/ToolCards'; -import { BUILTIN_TOOLS, THIRD_PARTY_TOOLS } from '@site/src/data/proto-plugins'; +import { BUILT_IN_TOOLS, THIRD_PARTY_TOOLS } from '@site/src/data/proto-tools'; ## Built-in The following tools are supported natively in proto's toolchain. - + ## Third-party +