From fa06b28bbad2767a143770d0d7539bb8825c1b42 Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Tue, 8 Apr 2025 11:59:28 +0200
Subject: [PATCH 1/8] docs: update docs for Yarn and pnpm built-in JSR support

---
 api/src/docs.rs                          | 65 +++++++++++-----------
 frontend/docs/introduction.md            | 10 +++-
 frontend/docs/npm-compatibility.md       | 40 +++++++++----
 frontend/docs/using-packages.md          | 71 ++++++++++++++++++------
 frontend/docs/with/cloudflare-workers.md | 20 +++++--
 frontend/docs/with/nextjs.md             | 20 +++++--
 frontend/docs/with/node.md               | 21 +++++--
 frontend/docs/with/vite.md               | 20 +++++--
 frontend/static/styles.css               | 14 +++++
 9 files changed, 198 insertions(+), 83 deletions(-)

diff --git a/api/src/docs.rs b/api/src/docs.rs
index 15d7e443..7e2c2cb9 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -88,6 +88,7 @@ lazy_static::lazy_static! {
           "alert-important",
           "alert-warning",
           "alert-caution",
+          "or-bar"
         ],
       )
       .link_rel(Some("nofollow"))
@@ -1215,44 +1216,44 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
 
     if !self.runtime_compat.deno.is_some_and(|compat| !compat) {
       map.insert(
-          UsageComposerEntry {
-            name: "Deno".to_string(),
-            icon: Some(
-              r#"<img src="/logos/deno.svg" alt="deno logo" draggable="false" />"#.into(),
-            ),
-          },
-          format!("Add Package\n```\ndeno add jsr:{scoped_name}\n```{import}\n---- OR ----\n\nImport directly with a jsr specifier\n{}\n", usage_to_md(&format!("jsr:{url}"), Some(self.package.as_str()))),
-        );
+        UsageComposerEntry {
+          name: "Deno".to_string(),
+          icon: Some(
+            r#"<img src="/logos/deno.svg" alt="deno logo" draggable="false" />"#.into(),
+          ),
+        },
+        format!("Add Package\n```\ndeno add jsr:{scoped_name}\n```{import}\n<div class='or-bar'>or</div>\n\nImport directly with a jsr specifier\n{}\n", usage_to_md(&format!("jsr:{url}"), Some(self.package.as_str()))),
+      );
     }
 
     if !self.runtime_compat.node.is_some_and(|compat| !compat) {
       map.insert(
-          UsageComposerEntry {
-            name: "npm".to_string(),
-            icon: Some(
-              r#"<img src="/logos/npm_textless.svg" alt="npm logo" draggable="false" />"#.into(),
-            ),
-          },
-          format!("Add Package\n```\nnpx jsr add {scoped_name}\n```{import}"),
-        );
+        UsageComposerEntry {
+          name: "pnpm".to_string(),
+          icon: Some(
+            r#"<img src="/logos/pnpm_textless.svg" alt="pnpm logo" draggable="false" />"#.into(),
+          ),
+        },
+        format!("Add Package\n```\npnpm i jsr:{scoped_name}\n```\n<div class='or-bar'>or (using pnpm 10.8 or older)</div>\n\n```\npnpm dlx jsr add {scoped_name}\n```{import}"),
+      );
       map.insert(
-          UsageComposerEntry {
-            name: "Yarn".to_string(),
-            icon: Some(
-              r#"<img src="/logos/yarn_textless.svg" alt="yarn logo" draggable="false" />"#.into(),
-            ),
-          },
-          format!("Add Package\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
-        );
+        UsageComposerEntry {
+          name: "Yarn".to_string(),
+          icon: Some(
+            r#"<img src="/logos/yarn_textless.svg" alt="yarn logo" draggable="false" />"#.into(),
+          ),
+        },
+        format!("Add Package\n```\nyarn add {scoped_name}@jsr:latest\n```\n<div class='or-bar'>or (using Yarn 4.8 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
+      );
       map.insert(
-          UsageComposerEntry {
-            name: "pnpm".to_string(),
-            icon: Some(
-              r#"<img src="/logos/pnpm_textless.svg" alt="pnpm logo" draggable="false" />"#.into(),
-            ),
-          },
-          format!("Add Package\n```\npnpm dlx jsr add {scoped_name}\n```{import}"),
-        );
+        UsageComposerEntry {
+          name: "npm".to_string(),
+          icon: Some(
+            r#"<img src="/logos/npm_textless.svg" alt="npm logo" draggable="false" />"#.into(),
+          ),
+        },
+        format!("Add Package\n```\nnpx jsr add {scoped_name}\n```{import}"),
+      );
     }
 
     if !self.runtime_compat.bun.is_some_and(|compat| !compat) {
diff --git a/frontend/docs/introduction.md b/frontend/docs/introduction.md
index 6834bdae..042e81f5 100644
--- a/frontend/docs/introduction.md
+++ b/frontend/docs/introduction.md
@@ -18,8 +18,14 @@ project.
 # deno
 deno add jsr:@luca/cases
 
-# npm (use any of npx, yarn dlx, pnpm dlx, or bunx)
-npx jsr add @luca/cases
+# pnpm 10.9+
+pnpm add jsr:@luca/cases
+
+# yarn 4.9+
+yarn add @luca/cases:<todo>
+
+# npm, bun, and older versions of yarn or pnpm
+npx jsr add @luca/cases # replace npx with any of yarn dlx, pnpm dlx, or bunx
 ```
 
 After adding the package, you can import and use it in ES modules like so:
diff --git a/frontend/docs/npm-compatibility.md b/frontend/docs/npm-compatibility.md
index 3479daa0..346a5e42 100644
--- a/frontend/docs/npm-compatibility.md
+++ b/frontend/docs/npm-compatibility.md
@@ -19,7 +19,20 @@ downloaded from jsr.io and installed in your `node_modules` directory.
 
 ## Installing and using JSR packages
 
-You can add JSR packages to your project using the `jsr` CLI:
+If you are using a recent version of pnpm (10.9+) or Yarn (4.9+), you can
+install JSR packages using `pnpm install` or `yarn add` without any additional
+configuration. These versions of pnpm and Yarn both support JSR out of the box.
+
+```sh
+yarn add @luca/cases:<todo>
+```
+
+```sh
+pnpm install jsr:@luca/cases
+```
+
+If you are using npm, an older version of pnpm or Yarn, or Bun, you can use the
+JSR CLI to install JSR packages:
 
 ```sh
 npx jsr add @luca/cases
@@ -28,13 +41,15 @@ npx jsr add @luca/cases
 This will add the `@luca/cases` package to your `package.json` file, and install
 it to your `node_modules` directory using your preferred package manager.
 
-The package manager to use will be automatically detected based on the presence
-of a `package.lock`, `yarn.lock` or `pnpm-lock.yaml` file in your project. You
-can also specify the package manager to use explicitly using the `--npm`,
-`--yarn`, or `--pnpm` flags to the `jsr add` command.
+When using the JSR CLI, the package manager to use will be automatically
+detected based on the presence of a `package.lock`, `yarn.lock` or
+`pnpm-lock.yaml` file in your project. You can also specify the package manager
+to use explicitly using the `--npm`, `--yarn`, or `--pnpm` flags to the
+`jsr add` command.
 
-> You should check the `.npmrc` file that is created into source control. This
-> enables future calls to `npm install` / `yarn` / `pnpm install` to succeed.
+> When using the JSR CLI, you should check the `.npmrc` file that is created
+> into source control. This enables future calls to `npm install` and alike to
+> succeed.
 
 You can then use the JSR package from your code:
 
@@ -72,9 +87,14 @@ you cannot publish packages to it. You can only use it to install jsr packages
 from npm.
 
 The `@jsr` npm scope is served from the JSR registry at `https://npm.jsr.io`.
-This means that you need to configure your package manager to use this registry
-to install JSR packages. When adding packages with the `jsr` CLI, this is done
-automatically.
+
+Recent versions of `yarn` and `pnpm` automatically configure pull packages in
+the `@jsr` scope from `https://npm.jsr.io`, so you don't need to do anything
+special to use JSR packages with these package managers.
+
+For other package managers, and older versions of `yarn` and `pnpm`, you need to
+configure your package manager to use the JSR registry to install JSR packages.
+When adding packages with the `jsr` CLI, this is done automatically.
 
 Instead of using the `jsr` CLI to install JSR packages, you can also manually
 configure your package manager to support installing JSR packages.
diff --git a/frontend/docs/using-packages.md b/frontend/docs/using-packages.md
index 4680e657..948031e1 100644
--- a/frontend/docs/using-packages.md
+++ b/frontend/docs/using-packages.md
@@ -15,14 +15,16 @@ example below will add the most recent version of
 [`@luca/cases`](https://jsr.io/@luca/cases) to your project.
 
 ```bash
-# deno
+# deno, pnpm 10.9+, and yarn 4.9+ with first class JSR support
 deno add jsr:@luca/cases
+pnpm add jsr:@luca/cases
+yarn add @luca/cases:<todo>
 
-# npm (one of the below, depending on your package manager)
+# npm, bun, and older versions of yarn or pnpm
 npx jsr add @luca/cases
+bunx jsr add @luca/cases
 yarn dlx jsr add @luca/cases
 pnpm dlx jsr add @luca/cases
-bunx jsr add @luca/cases
 ```
 
 If you're using Deno, the `deno add` command will add an
@@ -38,15 +40,31 @@ something like this:
 }
 ```
 
-For npm and npm-compatible package managers, the `jsr` command will add the
-dependency to your `package.json` file, along with a `.npmrc` file to your
-project root with the necessary config to use JSR with npm. Learn more about
+For npm compatible package managers, the dependency will be added to your
+`package.json` file, and the package will be installed to your `node_modules`
+directory.
+
+For npm, older versions of pnpm and Yarn, and for Bun, the `jsr` command will
+additionally add a `.npmrc` file to your project root with the necessary config
+to use JSR with npm. Learn more about
 [JSR's npm compatibility layer](/docs/npm-compatibility).
 
-After installation with `npx jsr add`, your package.json will contain a
-dependency entry that looks something like this:
+After installation with any npm compatible package manager, your package.json
+will contain a dependency entry that looks like one of these configurations:
+
+```json
+// pnpm 10.9+ and yarn 4.9+
+{
+  "dependencies": {
+    "@luca/cases": "jsr:@luca/cases@^1.0.1"
+  }
+}
+```
+
+or
 
 ```json
+// npm, bun, and older versions of yarn or pnpm
 {
   "dependencies": {
     "@luca/cases": "npm:@jsr/luca__cases@^1.0.1"
@@ -54,8 +72,9 @@ dependency entry that looks something like this:
 }
 ```
 
-This npm dependency configuration makes use of a special custom scope called
-`@jsr`, which is now configured for you in `.npmrc`:
+In npm, Bun, and older versions of yarn or pnpm the dependency configuration
+makes use of a special custom scope called `@jsr`, which is configured for you
+in `.npmrc`:
 
 ```
 @jsr:registry=https://npm.jsr.io
@@ -99,30 +118,42 @@ If you only care about the major version, you can specify just the major
 version:
 
 ```bash
-# deno
+# deno and pnpm 10.9+
 deno add jsr:@luca/cases@1
+pnpm add jsr:@luca/cases@1
 
-# npm (and npm-like systems)
+# yarn 4.9+
+yarn add @luca/cases@jsr:1
+
+# npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1
 ```
 
 If you want to use a specific minor version, you can specify the minor version:
 
 ```bash
-# deno
+# deno and pnpm 10.9+
 deno add jsr:@luca/cases@1.0
+pnpm add jsr:@luca/cases@1.0
+
+# yarn 4.9+
+yarn add @luca/cases@jsr:1.0
 
-# npm (and npm-like systems)
+# npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1.0
 ```
 
 If you want to use a specific patch version, you can specify the patch version:
 
 ```bash
-# deno
+# deno and pnpm 10.9+
 deno add jsr:@luca/cases@1.0.1
+pnpm add jsr:@luca/cases@1.0.1
 
-# npm (and npm-like systems)
+# yarn 4.9+
+yarn add @luca/cases@jsr:1.0.1
+
+# npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1.0.1
 ```
 
@@ -130,10 +161,14 @@ If you want to use at least a specific patch version, but do want to allow\
 updates, you can specify the patch version with a `^` prefix:
 
 ```bash
-# deno
+# deno and pnpm 10.9+
 deno add jsr:@luca/cases@^1.0.1
+pnpm add jsr:@luca/cases@^1.0.1
+
+# yarn 4.9+
+yarn add @luca/cases@jsr:^1.0.1
 
-# npm (and npm-like systems)
+# npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@^1.0.1
 ```
 
diff --git a/frontend/docs/with/cloudflare-workers.md b/frontend/docs/with/cloudflare-workers.md
index 126a5764..5480f41c 100644
--- a/frontend/docs/with/cloudflare-workers.md
+++ b/frontend/docs/with/cloudflare-workers.md
@@ -16,18 +16,28 @@ First, create a new Cloudflare Worker project:
 npm create cloudflare@latest
 yarn create cloudflare
 pnpm create cloudflare
+bun create cloudflare
 ```
 
-You can then add JSR packages with the `jsr` CLI. This will add the package to
-your `package.json` and install it into your `node_modules` folder using your
-preferred package manager (npm, yarn, or pnpm).
+You can then add JSR packages using your package manager. This will add the
+package to your `package.json` and install it into your `node_modules` folder
+using your preferred package manager (npm, yarn, or pnpm).
 
 ```shell
+# pnpm 10.9+ and yarn 4.9+
+pnpm add jsr:@std/encoding
+yarn add @std/encoding:<todo>
+
+# npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
+bunx jsr add @std/encoding
+yarn dlx jsr add @std/encoding
+pnpm dlx jsr add @std/encoding
 ```
 
-> Note: You should check the `.npmrc` file that is created into source control.
-> Without this, future calls to `npm install` / `yarn` / `pnpm install` will not
+> Note: A `.npmrc` file is created when using the JSR CLI. The `.npmrc` file
+> that is created should be checked into source control. Without this, future
+> calls to `npm install` / `yarn` / `pnpm install` / `bun install` will not
 > succeed.
 
 You can then import JSR packages in your code:
diff --git a/frontend/docs/with/nextjs.md b/frontend/docs/with/nextjs.md
index 1ec83541..35fef135 100644
--- a/frontend/docs/with/nextjs.md
+++ b/frontend/docs/with/nextjs.md
@@ -15,18 +15,28 @@ First, create a new Next.js project:
 npx create-next-app@latest
 yarn create next-app
 pnpm create next-app
+bun create next-app
 ```
 
-You can then add JSR packages with the `jsr` CLI. This will add the package to
-your `package.json` and install it into your `node_modules` folder using your
-preferred package manager (npm, yarn, or pnpm).
+You can then add JSR packages using your package manager. This will add the
+package to your `package.json` and install it into your `node_modules` folder
+using your preferred package manager (npm, yarn, or pnpm).
 
 ```shell
+# pnpm 10.9+ and yarn 4.9+
+pnpm add jsr:@std/encoding
+yarn add @std/encoding:<todo>
+
+# npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
+bunx jsr add @std/encoding
+yarn dlx jsr add @std/encoding
+pnpm dlx jsr add @std/encoding
 ```
 
-> Note: You should check the `.npmrc` file that is created into source control.
-> Without this, future calls to `npm install` / `yarn` / `pnpm install` will not
+> Note: A `.npmrc` file is created when using the JSR CLI. The `.npmrc` file
+> that is created should be checked into source control. Without this, future
+> calls to `npm install` / `yarn` / `pnpm install` / `bun install` will not
 > succeed.
 
 You can then import JSR packages in your code:
diff --git a/frontend/docs/with/node.md b/frontend/docs/with/node.md
index 7f5baa9c..6320fe82 100644
--- a/frontend/docs/with/node.md
+++ b/frontend/docs/with/node.md
@@ -12,16 +12,25 @@ JSR packages can be used in Node.js by using
 JSR packages are always ESM-only, so your project must be using
 `"type": "module"` in your `package.json` to use JSR packages.
 
-You can then add JSR packages with the `jsr` CLI. This will add the package to
-your `package.json` and install it into your `node_modules` folder using your
-preferred package manager (npm, yarn, or pnpm).
+You can then add JSR packages using your package manager. This will add the
+package to your `package.json` and install it into your `node_modules` folder
+using your preferred package manager (npm, yarn, or pnpm).
 
 ```shell
-npx jsr add @std/fmt
+# pnpm 10.9+ and yarn 4.9+
+pnpm add jsr:@std/encoding
+yarn add @std/encoding:<todo>
+
+# npm, bun, and older versions of yarn or pnpm
+npx jsr add @std/encoding
+bunx jsr add @std/encoding
+yarn dlx jsr add @std/encoding
+pnpm dlx jsr add @std/encoding
 ```
 
-> Note: You should check the `.npmrc` file that is created into source control.
-> Without this, future calls to `npm install` / `yarn` / `pnpm install` will not
+> Note: A `.npmrc` file is created when using the JSR CLI. The `.npmrc` file
+> that is created should be checked into source control. Without this, future
+> calls to `npm install` / `yarn` / `pnpm install` / `bun install` will not
 > succeed.
 
 You can then import JSR packages in your code:
diff --git a/frontend/docs/with/vite.md b/frontend/docs/with/vite.md
index b7d1b033..7435da8e 100644
--- a/frontend/docs/with/vite.md
+++ b/frontend/docs/with/vite.md
@@ -15,18 +15,28 @@ First, create a new Vite project:
 npm init vite@latest
 yarn create vite
 pnpm create vite
+bun create vite
 ```
 
-You can then add JSR packages with the `jsr` CLI. This will add the package to
-your `package.json` and install it into your `node_modules` folder using your
-preferred package manager (npm, yarn, or pnpm).
+You can then add JSR packages using your package manager. This will add the
+package to your `package.json` and install it into your `node_modules` folder
+using your preferred package manager (npm, yarn, or pnpm).
 
 ```shell
+# pnpm 10.9+ and yarn 4.9+
+pnpm add jsr:@std/encoding
+yarn add @std/encoding:<todo>
+
+# npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
+bunx jsr add @std/encoding
+yarn dlx jsr add @std/encoding
+pnpm dlx jsr add @std/encoding
 ```
 
-> Note: You should check the `.npmrc` file that is created into source control.
-> Without this, future calls to `npm install` / `yarn` / `pnpm install` will not
+> Note: A `.npmrc` file is created when using the JSR CLI. The `.npmrc` file
+> that is created should be checked into source control. Without this, future
+> calls to `npm install` / `yarn` / `pnpm install` / `bun install` will not
 > succeed.
 
 You can then import JSR packages in your code:
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 013cdd1a..7fc403b2 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -558,6 +558,20 @@ body .ddoc:has(.toc) {
   @apply text-green-600;
 }
 
+body .ddoc .or-bar {
+  &::before {
+    @apply h-[1px] w-full bg-jsr-gray-200;
+    content: "";
+  }
+
+  &::after {
+    @apply h-[1px] w-full bg-jsr-gray-200;
+    content: "";
+  }
+
+  @apply flex items-center justify-between gap-2 !mt-[2px] text-nowrap;
+}
+
 @layer base {
   /* I hate having all these !important tags, but it's the only way to override some of the GFM styles */
   :root {

From 3671e3285a5c30d4834f22252d0a3c8f7dbe2c6b Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Tue, 8 Apr 2025 19:38:05 +0200
Subject: [PATCH 2/8] Apply suggestions from code review

Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
---
 frontend/static/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 7fc403b2..dcb6fe1c 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -560,12 +560,12 @@ body .ddoc:has(.toc) {
 
 body .ddoc .or-bar {
   &::before {
-    @apply h-[1px] w-full bg-jsr-gray-200;
+    @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
     content: "";
   }
 
   &::after {
-    @apply h-[1px] w-full bg-jsr-gray-200;
+    @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
     content: "";
   }
 

From c194845cbf4c40d8bbbf7baa5493c225edd75e19 Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Tue, 8 Apr 2025 19:38:44 +0200
Subject: [PATCH 3/8] Apply suggestions from code review

---
 frontend/static/styles.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index dcb6fe1c..b9530884 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -561,12 +561,10 @@ body .ddoc:has(.toc) {
 body .ddoc .or-bar {
   &::before {
     @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
-    content: "";
   }
 
   &::after {
     @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
-    content: "";
   }
 
   @apply flex items-center justify-between gap-2 !mt-[2px] text-nowrap;

From 2560988dba616cc372e187fd8e01c5a377e7f41e Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Wed, 9 Apr 2025 18:00:18 +0000
Subject: [PATCH 4/8] fix yarn commands

---
 api/src/docs.rs                          |  2 +-
 frontend/docs/introduction.md            |  2 +-
 frontend/docs/npm-compatibility.md       |  4 ++--
 frontend/docs/using-packages.md          | 26 ++++++++----------------
 frontend/docs/with/cloudflare-workers.md |  2 +-
 frontend/docs/with/nextjs.md             |  2 +-
 frontend/docs/with/node.md               |  2 +-
 frontend/docs/with/vite.md               |  2 +-
 8 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/api/src/docs.rs b/api/src/docs.rs
index 7e2c2cb9..f34753a1 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -1243,7 +1243,7 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
             r#"<img src="/logos/yarn_textless.svg" alt="yarn logo" draggable="false" />"#.into(),
           ),
         },
-        format!("Add Package\n```\nyarn add {scoped_name}@jsr:latest\n```\n<div class='or-bar'>or (using Yarn 4.8 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
+        format!("Add Package\n```\nyarn add jsr:{scoped_name}\n```\n<div class='or-bar'>or (using Yarn 4.8 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
       );
       map.insert(
         UsageComposerEntry {
diff --git a/frontend/docs/introduction.md b/frontend/docs/introduction.md
index 042e81f5..dbfaea1c 100644
--- a/frontend/docs/introduction.md
+++ b/frontend/docs/introduction.md
@@ -22,7 +22,7 @@ deno add jsr:@luca/cases
 pnpm add jsr:@luca/cases
 
 # yarn 4.9+
-yarn add @luca/cases:<todo>
+yarn add jsr:@luca/cases
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @luca/cases # replace npx with any of yarn dlx, pnpm dlx, or bunx
diff --git a/frontend/docs/npm-compatibility.md b/frontend/docs/npm-compatibility.md
index 346a5e42..3d1691e4 100644
--- a/frontend/docs/npm-compatibility.md
+++ b/frontend/docs/npm-compatibility.md
@@ -24,11 +24,11 @@ install JSR packages using `pnpm install` or `yarn add` without any additional
 configuration. These versions of pnpm and Yarn both support JSR out of the box.
 
 ```sh
-yarn add @luca/cases:<todo>
+pnpm install jsr:@luca/cases
 ```
 
 ```sh
-pnpm install jsr:@luca/cases
+yarn add jsr:@luca/cases
 ```
 
 If you are using npm, an older version of pnpm or Yarn, or Bun, you can use the
diff --git a/frontend/docs/using-packages.md b/frontend/docs/using-packages.md
index 948031e1..5d527161 100644
--- a/frontend/docs/using-packages.md
+++ b/frontend/docs/using-packages.md
@@ -18,7 +18,7 @@ example below will add the most recent version of
 # deno, pnpm 10.9+, and yarn 4.9+ with first class JSR support
 deno add jsr:@luca/cases
 pnpm add jsr:@luca/cases
-yarn add @luca/cases:<todo>
+yarn add jsr:@luca/cases
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @luca/cases
@@ -118,12 +118,10 @@ If you only care about the major version, you can specify just the major
 version:
 
 ```bash
-# deno and pnpm 10.9+
+# deno, pnpm 10.9+ and yarn 4.9+
 deno add jsr:@luca/cases@1
 pnpm add jsr:@luca/cases@1
-
-# yarn 4.9+
-yarn add @luca/cases@jsr:1
+yarn add jsr:@luca/cases@1
 
 # npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1
@@ -132,12 +130,10 @@ npx jsr add @luca/cases@1
 If you want to use a specific minor version, you can specify the minor version:
 
 ```bash
-# deno and pnpm 10.9+
+# deno, pnpm 10.9+ and yarn 4.9+
 deno add jsr:@luca/cases@1.0
 pnpm add jsr:@luca/cases@1.0
-
-# yarn 4.9+
-yarn add @luca/cases@jsr:1.0
+yarn add jsr:@luca/cases@1.0
 
 # npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1.0
@@ -146,12 +142,10 @@ npx jsr add @luca/cases@1.0
 If you want to use a specific patch version, you can specify the patch version:
 
 ```bash
-# deno and pnpm 10.9+
+# deno, pnpm 10.9+ and yarn 4.9+
 deno add jsr:@luca/cases@1.0.1
 pnpm add jsr:@luca/cases@1.0.1
-
-# yarn 4.9+
-yarn add @luca/cases@jsr:1.0.1
+yarn add jsr:@luca/cases@1.0.1
 
 # npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@1.0.1
@@ -161,12 +155,10 @@ If you want to use at least a specific patch version, but do want to allow\
 updates, you can specify the patch version with a `^` prefix:
 
 ```bash
-# deno and pnpm 10.9+
+# deno, pnpm 10.9+ and yarn 4.9+
 deno add jsr:@luca/cases@^1.0.1
 pnpm add jsr:@luca/cases@^1.0.1
-
-# yarn 4.9+
-yarn add @luca/cases@jsr:^1.0.1
+yarn add jsr:@luca/cases@^1.0.1
 
 # npm (and bun, and older versions of yarn or pnpm)
 npx jsr add @luca/cases@^1.0.1
diff --git a/frontend/docs/with/cloudflare-workers.md b/frontend/docs/with/cloudflare-workers.md
index 5480f41c..5f29d078 100644
--- a/frontend/docs/with/cloudflare-workers.md
+++ b/frontend/docs/with/cloudflare-workers.md
@@ -26,7 +26,7 @@ using your preferred package manager (npm, yarn, or pnpm).
 ```shell
 # pnpm 10.9+ and yarn 4.9+
 pnpm add jsr:@std/encoding
-yarn add @std/encoding:<todo>
+yarn add jsr:@std/encoding
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
diff --git a/frontend/docs/with/nextjs.md b/frontend/docs/with/nextjs.md
index 35fef135..ba86d4a4 100644
--- a/frontend/docs/with/nextjs.md
+++ b/frontend/docs/with/nextjs.md
@@ -25,7 +25,7 @@ using your preferred package manager (npm, yarn, or pnpm).
 ```shell
 # pnpm 10.9+ and yarn 4.9+
 pnpm add jsr:@std/encoding
-yarn add @std/encoding:<todo>
+yarn add jsr:@std/encoding
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
diff --git a/frontend/docs/with/node.md b/frontend/docs/with/node.md
index 6320fe82..bb7ac6b2 100644
--- a/frontend/docs/with/node.md
+++ b/frontend/docs/with/node.md
@@ -19,7 +19,7 @@ using your preferred package manager (npm, yarn, or pnpm).
 ```shell
 # pnpm 10.9+ and yarn 4.9+
 pnpm add jsr:@std/encoding
-yarn add @std/encoding:<todo>
+yarn add jsr:@std/encoding
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding
diff --git a/frontend/docs/with/vite.md b/frontend/docs/with/vite.md
index 7435da8e..bfb5820e 100644
--- a/frontend/docs/with/vite.md
+++ b/frontend/docs/with/vite.md
@@ -25,7 +25,7 @@ using your preferred package manager (npm, yarn, or pnpm).
 ```shell
 # pnpm 10.9+ and yarn 4.9+
 pnpm add jsr:@std/encoding
-yarn add @std/encoding:<todo>
+yarn add jsr:@std/encoding
 
 # npm, bun, and older versions of yarn or pnpm
 npx jsr add @std/encoding

From fd4b7eabed8a1910df7ccbc764a88885bd8cb8b3 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 21 Apr 2025 19:14:17 +0200
Subject: [PATCH 5/8] fmt

---
 frontend/static/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index b9530884..7c0adc55 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -560,11 +560,11 @@ body .ddoc:has(.toc) {
 
 body .ddoc .or-bar {
   &::before {
-    @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
+    @apply h-[1px] w-full bg-jsr-gray-200 content-[""];
   }
 
   &::after {
-    @apply h-[1px] w-full bg-jsr-gray-200 content-[''];
+    @apply h-[1px] w-full bg-jsr-gray-200 content-[""];
   }
 
   @apply flex items-center justify-between gap-2 !mt-[2px] text-nowrap;

From bca9fd006def379dd6bb117e8cf6d432bb3d2036 Mon Sep 17 00:00:00 2001
From: Leo Kettmeir <crowlkats@toaxl.com>
Date: Mon, 21 Apr 2025 10:22:42 -0700
Subject: [PATCH 6/8] Update api/src/docs.rs

---
 api/src/docs.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/docs.rs b/api/src/docs.rs
index 3ea7616a..4fa0031e 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -1243,7 +1243,7 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
             r#"<img src="/logos/yarn_textless.svg" alt="yarn logo" draggable="false" />"#.into(),
           ),
         },
-        format!("Add Package\n```\nyarn add jsr:{scoped_name}\n```\n<div class='or-bar'>or (using Yarn 4.8 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
+        format!("Add Package\n```\nyarn add jsr:{scoped_name}\n```\n<div class='or-bar'>or (using Yarn 4.9 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
       );
       map.insert(
         UsageComposerEntry {

From e0b855cf36e81b214c923d4646709899bb47291d Mon Sep 17 00:00:00 2001
From: Leo Kettmeir <crowlkats@toaxl.com>
Date: Mon, 21 Apr 2025 10:24:48 -0700
Subject: [PATCH 7/8] Update api/src/docs.rs

---
 api/src/docs.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/docs.rs b/api/src/docs.rs
index 4fa0031e..3ea7616a 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -1243,7 +1243,7 @@ impl deno_doc::html::UsageComposer for DocUsageComposer {
             r#"<img src="/logos/yarn_textless.svg" alt="yarn logo" draggable="false" />"#.into(),
           ),
         },
-        format!("Add Package\n```\nyarn add jsr:{scoped_name}\n```\n<div class='or-bar'>or (using Yarn 4.9 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
+        format!("Add Package\n```\nyarn add jsr:{scoped_name}\n```\n<div class='or-bar'>or (using Yarn 4.8 or older)</div>\n\n```\nyarn dlx jsr add {scoped_name}\n```{import}"),
       );
       map.insert(
         UsageComposerEntry {

From c711d4c886a3c79eb223b495a17ee28a503ff810 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 21 Apr 2025 21:34:55 +0200
Subject: [PATCH 8/8] ci