Improvements to the installation section of the JDK details page

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log*
 # Hide auto generated doc pages
 /docs/jdks.mdx
 /docs/sdks.mdx
+/src/data/jdks-versions.ts

package.json

@@ -13,8 +13,8 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
-    "preprocessing:start": "tsc --outDir ./preprocessing/out ./preprocessing/src/*.ts && node ./preprocessing/out/index.js",
-    "preprocessing:clear": "rm -rf ./preprocessing/out ./docs/jdks.mdx ./docs/sdks.mdx"
+    "preprocessing:start": "tsc --outDir ./preprocessing/out ./preprocessing/src/*.ts && node ./preprocessing/out/preprocessing/src/index.js",
+    "preprocessing:clear": "rm -rf ./preprocessing/out ./src/data/jdks-versions.ts ./docs/sdks.mdx"
   },
   "dependencies": {
     "@docusaurus/core": "^3.7.0",

preprocessing/src/index.ts

@@ -1,8 +1,9 @@
+import generateJDKs from './jdks';
 import generateSDKs from './sdks';
 
 async function run() {
   try {
-    await generateSDKs();
+    await Promise.all([generateJDKs(), generateSDKs()]);
   } catch (err) {
     console.error(err);
   }

preprocessing/src/jdks/index.ts

@@ -0,0 +1,65 @@
+import type { Platform } from '../../../src/types/jdk';
+
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const platformList: Platform[] = [
+  'linuxx64',
+  'linuxarm32hf',
+  'linuxarm64',
+  'darwinx64',
+  'darwinarm64',
+  'windowsx64',
+];
+
+export default async function generateJDKs() {
+  const result = [];
+
+  for (const platform of platformList) {
+    const JDKsData = await fetchJDKs(platform);
+    const JDKs = parseJDKs(JDKsData);
+
+    result.push({
+      platform,
+      versions: JDKs,
+    });
+  }
+
+  try {
+    await writeFile(
+      resolve(process.cwd(), './src/data/jdks-versions.ts'),
+      `const result = ${JSON.stringify(result, null, 2)};\n\n` +
+        'export default result;',
+    );
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+async function fetchJDKs(platformId: Platform) {
+  try {
+    const res = await fetch(
+      `https://api.sdkman.io/2/candidates/java/${platformId}/versions/list?installed=`,
+    );
+
+    return await res.text();
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+function parseJDKs(data: string) {
+  return data
+    .split('\n')
+    .slice(5, -10)
+    .reduce<{ version: string; dist: string }[]>((acc, val) => {
+      const rowParts = val.split('|').map((item) => item.trim());
+
+      acc.push({
+        version: rowParts[2],
+        dist: rowParts[3],
+      });
+
+      return acc;
+    }, []);
+}

src/components/plugins-pages/JDKDetailsPage/Installation/index.tsx

@@ -0,0 +1,84 @@
+import type { Architecture } from '@site/src/types/jdk';
+import * as React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import Heading from '@theme/Heading';
+import Select from '@site/src/components/ui/Select';
+import styles from './styles.module.scss';
+
+import { jdksService } from '@site/src/lib/services/jdks';
+import clsx from 'clsx';
+
+type Props = {
+  id: string;
+  architecture: Architecture[];
+};
+
+export default function Installation({ id, architecture }: Props) {
+  const [platform, setPlatform] = React.useState(architecture[0].label);
+  const [versions, setVersions] = React.useState([]);
+  const [version, setVersion] = React.useState('');
+
+  React.useEffect(() => {
+    const currentPlatformId = architecture.find(
+      (arch) => arch.label === platform,
+    ).platformId;
+
+    const data = jdksService.getVersions(currentPlatformId, id);
+    setVersions(data);
+    setVersion(data[0]);
+  }, [platform]);
+
+  function handleCHangePlatform(value: string) {
+    setPlatform(value);
+  }
+
+  function handleChangeVersion(value: string) {
+    setVersion(value);
+  }
+
+  return (
+    <div>
+      <div className={styles.sectionTitleWrapper}>
+        <Heading as="h2">Installation</Heading>
+
+        <div className={styles.sectionSelectWrapper}>
+          <Select
+            value={platform}
+            items={architecture.map((arch) => arch.label)}
+            position="right"
+            onChange={handleCHangePlatform}
+          />
+
+          <Select
+            value={version}
+            items={versions}
+            position="right"
+            onChange={handleChangeVersion}
+          />
+        </div>
+      </div>
+
+      <CodeBlock language="shell">
+        sdk install java {version}-{id}
+      </CodeBlock>
+
+      <ul className={styles.sectionBadgeList}>
+        {versions.map((badgeVersion, idx) => (
+          <li key={`version-${idx}`}>
+            <button
+              className={clsx(
+                'badge',
+                badgeVersion === version
+                  ? 'badge--primary'
+                  : 'badge--secondary',
+              )}
+              onClick={() => handleChangeVersion(badgeVersion)}
+            >
+              {badgeVersion}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/plugins-pages/JDKDetailsPage/Installation/styles.module.scss

@@ -0,0 +1,21 @@
+.section {
+  &TitleWrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &SelectWrapper {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin-bottom: 1.125rem;
+  }
+
+  &BadgeList {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}

src/components/plugins-pages/JDKDetailsPage/index.tsx

@@ -1,7 +1,6 @@
 import { Redirect, useLocation } from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Layout from '@theme/Layout';
 import PageCarbonAds from '@site/src/components/sections/PageCarbonAds';
@@ -10,6 +9,7 @@ import styles from './styles.module.scss';
 
 import jdks from '@site/src/data/jdks';
 import { getNameFromPath } from '@site/src/lib/utils';
+import Installation from './Installation';
 
 export default function JDKDetailsPage() {
   const { siteConfig } = useDocusaurusContext();
@@ -37,13 +37,7 @@ export default function JDKDetailsPage() {
           <div>
             <p>{JDK.description}</p>
 
-            <div>
-              <Heading as="h2">Installation</Heading>
-
-              <CodeBlock language="shell">
-                sdk install java x.y.z-{JDK.id}
-              </CodeBlock>
-            </div>
+            <Installation id={JDK.id} architecture={JDK.architecture?.long} />
           </div>
 
           <div className={clsx('card', styles.card)}>
@@ -71,7 +65,7 @@ export default function JDKDetailsPage() {
 
                   <ul>
                     {JDK.architecture?.long.map((arch, idx) => (
-                      <li key={`arch-${JDK.id}-${idx}`}>{arch}</li>
+                      <li key={`arch-${JDK.id}-${idx}`}>{arch.label}</li>
                     ))}
                   </ul>
                 </div>

src/components/sections/JDKList/JDKCard/index.tsx

@@ -1,9 +1,8 @@
+import type { JDK } from '@site/src/types/jdk';
 import Link from '@docusaurus/Link';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 
-import { JDK } from '@site/src/types/jdk';
-
 type Props = {
   item: JDK;
 };

src/components/sections/JDKList/index.tsx

@@ -42,8 +42,8 @@ export default function JDKList() {
         </Admonition>
 
         <div className={styles.sectionList}>
-          {jdks.map((JDK) => (
-            <JDKCard item={JDK} />
+          {jdks.map((JDK, idx) => (
+            <JDKCard key={`jdk-${idx}`} item={JDK} />
           ))}
         </div>
       </div>

src/components/ui/Select/index.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+type Props = {
+  className?: string;
+  value: string;
+  items: string[];
+  position?: 'left' | 'right';
+  onChange: (value: string) => void;
+};
+
+export default function Select({
+  className,
+  value,
+  items,
+  position = 'left',
+  onChange,
+}: Props) {
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
+      if (
+        !dropdownRef.current ||
+        dropdownRef.current.contains(event.target as Node)
+      ) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  function handleClick() {
+    setShowDropdown(!showDropdown);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      setShowDropdown(!showDropdown);
+    }
+  }
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('dropdown', className, {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      <button
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        className={clsx('navbar__link', styles.button, styles.buttonBackground)}
+      >
+        {value}
+      </button>
+
+      <ul className="dropdown__menu">
+        {items.map((item, idx) => (
+          <li key={`${item}-${idx}`}>
+            <button
+              className={clsx(
+                'dropdown__link',
+                styles.button,
+                item === value
+                  ? 'dropdown__link--active'
+                  : styles.buttonBackground,
+              )}
+              onClick={() => onChange(item)}
+            >
+              {item}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/ui/Select/styles.module.scss

@@ -0,0 +1,10 @@
+.button {
+  width: 100%;
+  border: none;
+  text-align: left;
+  font-weight: 700;
+
+  &Background {
+    background-color: transparent;
+  }
+}

src/data/jdks.ts

@@ -1,4 +1,4 @@
-import type { JDK } from '@site/src/types/jdk';
+import type { Architecture, JDK } from '@site/src/types/jdk';
 import { FaApple, FaLinux, FaWindows } from 'react-icons/fa6';
 
 const shortArchList = {
@@ -7,13 +7,13 @@ const shortArchList = {
   arm32: 'AArch32',
 };
 
-const archList = {
-  linux_x86_64: 'Linux x86_64',
-  linux_arm: 'Linux AArch32',
-  linux_arm64: 'Linux AArch64',
-  macOS_x86_64: 'macOS x86_64',
-  macOS_arm64: 'macOS AArch64',
-  windows_x86_64: 'Windows x86_64',
+const archList: Record<string, Architecture> = {
+  linux_x86_64: { label: 'Linux x86_64', platformId: 'linuxx64' },
+  linux_arm: { label: 'Linux AArch32', platformId: 'linuxarm32hf' },
+  linux_arm64: { label: 'Linux AArch64', platformId: 'linuxarm64' },
+  macOS_x86_64: { label: 'macOS x86_64', platformId: 'darwinx64' },
+  macOS_arm64: { label: 'macOS AArch64', platformId: 'darwinarm64' },
+  windows_x86_64: { label: 'Windows x86_64', platformId: 'windowsx64' },
 };
 
 const jdks: JDK[] = [