feat: npm link to npm version (nodejs#6472)

* feat: npm link to npm version * Update NpmLink.tsx Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Claudio W <[email protected]> * chore: fix stuff * Update next.mdx.use.mjs Signed-off-by: Brian Muenzenmeyer <[email protected]> --------- Signed-off-by: Claudio W <[email protected]> Signed-off-by: Brian Muenzenmeyer <[email protected]> Co-authored-by: Caner Akdas <[email protected]> Co-authored-by: Brian Muenzenmeyer <[email protected]>
canerakdas · Mar 14, 2024 · 2bcf50d · 2bcf50d
1 parent 5e6a6e2
commit 2bcf50d
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 27 deletions.
diff --git a/components/Downloads/Release/NpmLink.tsx b/components/Downloads/Release/NpmLink.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const NpmLink: FC = () => {
+  const { release } = useContext(ReleaseContext);
+
+  return (
+    <LinkWithArrow href={`https://www.npmjs.com/package/npm/v/${release.npm}`}>
+      npm ({release.npm})
+    </LinkWithArrow>
+  );
+};
+
+export default NpmLink;
diff --git a/components/Downloads/Release/NpmVersion.tsx b/components/Downloads/Release/NpmVersion.tsx
diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs
@@ -9,7 +9,7 @@ import BitnessDropdown from './components/Downloads/Release/BitnessDropdown';
 import BlogPostLink from './components/Downloads/Release/BlogPostLink';
 import ReleaseDownloadButton from './components/Downloads/Release/DownloadButton';
 import LinkWithArrow from './components/Downloads/Release/LinkWithArrow';
-import NpmVersion from './components/Downloads/Release/NpmVersion';
+import NpmLink from './components/Downloads/Release/NpmLink';
 import OperatingSystemDropdown from './components/Downloads/Release/OperatingSystemDropdown';
 import PlatformDropdown from './components/Downloads/Release/PlatformDropdown';
 import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
@@ -66,8 +66,8 @@ export const mdxComponents = {
     BitnessDropdown: BitnessDropdown,
     // Renders a drop-down menu from which the operating system can select
     OperatingSystemDropdown: OperatingSystemDropdown,
-    // Renders a npm version of the selected release
-    NpmVersion: NpmVersion,
+    // Renders a link to the npm version of the selected release
+    NpmLink: NpmLink,
     // Renders a release version of the selected release
     Version: ReleaseVersion,
     // Renders a release status of the selected release

diff --git a/pages/en/download/current.mdx b/pages/en/download/current.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of Node.js for <Release.Operating
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/index.mdx b/pages/en/download/index.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of Node.js for <Release.Operating
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/package-manager/current.mdx b/pages/en/download/package-manager/current.mdx
@@ -11,7 +11,7 @@ Install Node.js <Release.VersionDropdown /> on  <Release.OperatingSystemDropdown
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/package-manager/index.mdx b/pages/en/download/package-manager/index.mdx
@@ -11,7 +11,7 @@ Install Node.js <Release.VersionDropdown /> on <Release.OperatingSystemDropdown
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/prebuilt-binaries/current.mdx b/pages/en/download/prebuilt-binaries/current.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of Node.js for <Release.Operating
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/prebuilt-binaries/index.mdx b/pages/en/download/prebuilt-binaries/index.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of Node.js for <Release.Operating
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/source-code/current.mdx b/pages/en/download/source-code/current.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of the Node.js source code.
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/download/source-code/index.mdx b/pages/en/download/source-code/index.mdx
@@ -11,7 +11,7 @@ I want the <Release.VersionDropdown /> version of the Node.js source code.
 </section>
 
 <section>
-Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />).
+Node.js includes <Release.NpmLink />.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>