website(docs): Add package manager command selector
MODIFY
website/astro.config.ts
website/astro.config.ts
@@ -101,9 +101,9 @@ export default defineConfig({
inlineCSS(),
inlineJS(),
mdx(),
- /*compress({
+ compress({
path: "./build",
- }),*/
+ }),
],
build: {

ADD
website/src/components/PackageManagerCommand.astro
+---
+import InlineSVG from "./InlineSVG.astro";
+---
+
+<ul class="package-manager-selector">
+ <li data-name="npm" class="active">
+ <InlineSVG src="npm" />
+ <span>npm</span>
+ </li>
+ <li data-name="yarn">
+ <InlineSVG src="yarn" />
+ <span>yarn</span>
+ </li>
+ <li data-name="pnpm">
+ <InlineSVG src="pnpm" />
+ <span>pnpm</span>
+ </li>
+</ul>
+
+<pre data-name="npm" class="package-manager-command language-shellsession active"><code>{Astro.props.npx ? "npx" : "npm"} {Astro.props.npx ?? Astro.props.npm ?? Astro.props.command}</code></pre>
+<pre data-name="yarn" class="package-manager-command language-shellsession"><code>yarn {Astro.props.yarn ?? Astro.props.command}</code></pre>
+<pre data-name="pnpm" class="package-manager-command language-shellsession"><code>pnpm {Astro.props.pnpm ?? Astro.props.command}</code></pre>

ADD
website/src/components/PackageManagerRomeCommand.astro
+---
+import PackageManagerCommand from "./PackageManagerCommand.astro"
+let {command} = Astro.props;
+command = `rome ${command}`;
+---
+
+<PackageManagerCommand yarn={command} pnpm={command} npx={command} />

MODIFY
website/src/frontend-scripts/index.ts
website/src/frontend-scripts/index.ts
import { matchesDark, getCurrentTheme } from "./util";
import "./mobile";
import "./toc";
+import "./package-manager-commands";
//# Team list shuffle

ADD
website/src/frontend-scripts/package-manager-commands.ts
+// Yes TS I am a module.
+export {};
+
+const selectorButtons = document.querySelectorAll(
+ ".package-manager-selector li",
+);
+const elements = document.querySelectorAll(
+ ".package-manager-selector li, .package-manager-command",
+);
+
+function setActivePackageManager(name: string) {
+ localStorage.setItem("package-manager", name);
+
+ for (const elem of elements) {
+ elem.classList.remove("active");
+ if (elem.getAttribute("data-name") === name) {
+ elem.classList.add("active");
+ }
+ }
+}
+
+for (const button of selectorButtons) {
+ button.addEventListener("click", () => {
+ setActivePackageManager(button.getAttribute("data-name") ?? "");
+ });
+}
+
+const stored = localStorage.getItem("package-manager");
+if (stored != null) {
+ setActivePackageManager(stored);
+}

MODIFY
website/src/pages/formatter/index.mdx
website/src/pages/formatter/index.mdx
@@ -6,6 +6,8 @@ description: How to use the Rome formatter.
layout: ../../Layout.astro
---
+import PackageManagerRomeCommand from "../../components/PackageManagerRomeCommand.astro";
+
# Formatter
Rome's an opinionated formatter that has the goal to stop all ongoing debates over styles. That's why Rome only supports
@@ -23,9 +25,7 @@ The language agnostic options supported by Rome are:
You can start by running the CLI with the `--help` flag:
-```shell
-rome format --help
-```
+<PackageManagerRomeCommand command="format --help" />
Which will show you the options available at the moment:

MODIFY
website/src/pages/linter/index.mdx
website/src/pages/linter/index.mdx
@@ -6,6 +6,8 @@ category: tools
description: How to use the Rome linter.
---
+import PackageManagerRomeCommand from "../../components/PackageManagerRomeCommand.astro";
+
# Linter
Rome's linter statically analyzes your code to catch common errors and help you write more idiomatic code.
@@ -14,9 +16,7 @@ Rome's linter statically analyzes your code to catch common errors and help you
You can start by running the CLI with the `--help` flag:
-```bash
-rome check --help
-```
+<PackageManagerRomeCommand command="check --help" />
Which will show you the options available at the moment:

ADD
website/src/styles/_package-manager.scss
+ul.package-manager-selector {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ box-shadow: inset 0 0 0 1px var(--soft-border-color);
+ background-color: var(--container-color);
+ border-bottom: none;
+
+ li {
+ padding: 10px;
+ list-style: none;
+ cursor: pointer;
+ margin: 0;
+
+ svg {
+ vertical-align: middle;
+ height: 16px;
+ width: 16px;
+ margin-right: 4px;
+ }
+
+ &.active {
+ font-weight: bold;
+ border-bottom: 1px solid black;
+
+ @include dark-mode {
+ border-color: white;
+ }
+ }
+ }
+}
+
+pre.package-manager-command {
+ display: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ margin-top: 0;
+
+ &.active {
+ display: block;
+ }
+}

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
@import "_credits";
@import "_buttons";
@import "_docs";
+@import "_package-manager";
:root {
--primary-color: #{$color-4};

ADD
website/src/svg/npm.svg
+<?xml version="1.0" encoding="UTF-8"?><svg id="logosandtypes_com" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.31 150"><defs><style>.cls-1{fill:none;}.cls-2{fill:#cb3837;}.cls-3{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M0,0H150V150H0V0Z"/><g id="Layer_2"><rect class="cls-3" x="23.12" y="23.43" width="104.75" height="104.75"/></g><path class="cls-2" d="M.31,0V150H150.31V0H.31ZM125.16,124.86h-25.15V50.28h-25.15V124.86H25.45V25.15H125.16V124.86Z"/></svg>
\ No newline at end of file

ADD
website/src/svg/pnpm.svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="76.58987244897958 44 164.00775510204068 164" width="160.01" height="160"><defs><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="arNRoK435"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="a3H2WU7Px"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="b1DInM56vl"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="a7LFlgQIwu"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="amwLiZcuo"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="f3Peu5RWan"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="a6DXBfqPa"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="c1GWSTH1z7"></path></defs><g><g><use xlink:href="#arNRoK435" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a3H2WU7Px" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b1DInM56vl" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a7LFlgQIwu" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#amwLiZcuo" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#f3Peu5RWan" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#a6DXBfqPa" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#c1GWSTH1z7" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g></g></svg>
\ No newline at end of file

ADD
website/src/svg/yarn.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+ <g>
+ <path d="M128,0 C57.3281853,0 0,57.3281853 0,128 C0,198.671815 57.3281853,256 128,256 C198.671815,256 256,198.671815 256,128 C256,57.3281853 198.671815,0 128,0" fill="#368FB9"></path>
+ <path d="M203.317375,174.060232 C195.410039,175.938224 191.40695,177.667954 181.621622,184.043243 C166.350579,193.927413 149.646332,198.523552 149.646332,198.523552 C149.646332,198.523552 148.262548,200.599228 144.259459,201.538224 C137.340541,203.218533 111.295753,204.651737 108.923552,204.701158 C102.548263,204.750579 98.6440154,203.07027 97.5567568,200.450965 C94.2455598,192.543629 102.301158,189.08417 102.301158,189.08417 C102.301158,189.08417 100.522008,187.996911 99.4841699,187.008494 C98.5451737,186.069498 97.5567568,184.191506 97.2602317,184.883398 C96.0247104,187.898069 95.3822394,195.261776 92.0710425,198.572973 C87.5243243,203.169112 78.9250965,201.637066 73.834749,198.96834 C68.2501931,196.003089 74.2301158,189.034749 74.2301158,189.034749 C74.2301158,189.034749 71.215444,190.8139 68.7938224,187.156757 C66.619305,183.796139 64.5930502,178.06332 65.1366795,170.996139 C65.7297297,162.940541 74.7243243,155.132046 74.7243243,155.132046 C74.7243243,155.132046 73.1428571,143.221622 78.3320463,131.014672 C83.027027,119.894981 95.6787645,110.949807 95.6787645,110.949807 C95.6787645,110.949807 85.0532819,99.1876448 89.0069498,88.611583 C91.576834,81.6926641 92.6146718,81.7420849 93.4548263,81.4455598 C96.4200772,80.3088803 99.2864865,79.0733591 101.411583,76.7505792 C112.037066,65.2849421 125.578378,67.4594595 125.578378,67.4594595 C125.578378,67.4594595 132.003089,47.9382239 137.933591,51.7436293 C139.762162,52.9297297 146.335135,67.5583012 146.335135,67.5583012 C146.335135,67.5583012 153.352896,63.4563707 154.143629,64.988417 C158.393822,73.2416988 158.888031,89.0069498 157.010039,98.5945946 C153.847104,114.409266 145.939768,122.909653 142.776834,128.247104 C142.035521,129.482625 151.27722,133.386873 157.10888,149.54749 C162.495753,164.324324 157.701931,176.728958 158.542085,178.112741 C158.690347,178.359846 158.739768,178.458687 158.739768,178.458687 C158.739768,178.458687 164.917375,178.952896 177.322008,171.292664 C183.944402,167.190734 191.802317,162.594595 200.74749,162.495753 C209.396139,162.34749 209.840927,172.478764 203.317375,174.060232 L203.317375,174.060232 Z M215.079537,166.795367 C214.189961,159.777606 208.259459,154.934363 200.648649,155.033205 C189.281853,155.181467 179.743629,161.062548 173.417761,164.966795 C170.946718,166.498842 168.821622,167.635521 166.99305,168.475676 C167.388417,162.742857 167.042471,155.230888 164.07722,146.977606 C160.469498,137.093436 155.626255,131.014672 152.166795,127.505792 C156.169884,121.674131 161.655598,113.173745 164.225483,100.027799 C166.449421,88.8092664 165.757529,71.3637066 160.667181,61.5783784 C159.629344,59.6015444 157.899614,58.1683398 155.725097,57.5752896 C154.835521,57.3281853 153.155212,56.8339768 149.844015,57.772973 C144.85251,47.4440154 143.12278,46.3567568 141.788417,45.4671815 C139.020849,43.6880309 135.759073,43.2926641 132.694981,44.4293436 C128.59305,45.9119691 125.08417,49.8656371 121.772973,56.8833977 C121.278764,57.9212355 120.833977,58.9096525 120.43861,59.8980695 C114.162162,60.3428571 104.277992,62.6162162 95.9258687,71.6602317 C94.8880309,72.7969112 92.8617761,73.6370656 90.7366795,74.4277992 L90.7861004,74.4277992 C86.4370656,75.9598456 84.4602317,79.5181467 82.03861,85.9428571 C78.6779923,94.9374517 82.1374517,103.783784 85.5474903,109.516602 C80.9019305,113.667954 74.7243243,120.290347 71.4625483,128.049421 C67.4100386,137.637066 66.965251,147.027027 67.1135135,152.117375 C63.6540541,155.774517 58.3166023,162.644015 57.7235521,170.353668 C56.9328185,181.127413 60.8370656,188.441699 62.5667954,191.110425 C63.0610039,191.901158 63.6046332,192.543629 64.1976834,193.1861 C64,194.520463 63.9505792,195.953668 64.2471042,197.436293 C64.8895753,200.895753 67.0640927,203.712741 70.3752896,205.491892 C76.8988417,208.951351 85.992278,210.433977 93.0100386,206.925097 C95.5305019,209.593822 100.126641,212.163707 108.478764,212.163707 L108.972973,212.163707 C111.098069,212.163707 138.081853,210.730502 145.939768,208.803089 C149.448649,207.962934 151.87027,206.480309 153.451737,205.145946 C158.492664,203.564479 172.429344,198.820077 185.57529,190.319691 C194.866409,184.290347 198.078764,183.005405 204.997683,181.325097 C211.718919,179.694208 215.919691,173.566023 215.079537,166.795367 L215.079537,166.795367 Z" fill="#FFFFFF"></path>
+ </g>
+</svg>

website(docs): Add package manager command selector (#3692)