Moved JDKs page from docs to separate card-style page with details pages

docusaurus.config.ts

@@ -54,7 +54,11 @@ const config: Config = {
     ],
   ],
 
-  plugins: ['docusaurus-plugin-sass', './src/plugins/google-fonts.ts'],
+  plugins: [
+    'docusaurus-plugin-sass',
+    './src/plugins/google-fonts.ts',
+    './src/plugins/jdks-details.ts',
+  ],
 
   themeConfig: {
     metadata: [

preprocessing/src/index.ts

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

sidebars.ts

@@ -5,7 +5,6 @@ const sidebars: SidebarsConfig = {
     'install',
     'usage',
     'vendors',
-    { type: 'doc', label: 'JDKs', id: 'jdks' },
     { type: 'doc', label: 'SDKs', id: 'sdks' },
   ],
 };

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

@@ -0,0 +1,85 @@
+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';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+import jdks from '@site/src/data/jdks';
+import { getNameFromPath } from '@site/src/lib/utils';
+
+export default function JDKDetailsPage() {
+  const { siteConfig } = useDocusaurusContext();
+  const location = useLocation();
+  const JDKId = getNameFromPath(location.pathname, siteConfig.baseUrl);
+
+  if (!JDKId.length) {
+    return <Redirect to="/jdks/" />;
+  }
+
+  const JDK = jdks.find((item) => item.id === JDKId);
+
+  if (!JDK) {
+    return <Redirect to="/404/" />;
+  }
+
+  return (
+    <Layout title={`${JDK.distribution} (${JDK.vendor})`}>
+      <PageCarbonAds />
+
+      <div className={clsx('container', styles.page)}>
+        <Heading as="h1">{`${JDK.distribution} (${JDK.vendor})`}</Heading>
+
+        <div className={styles.pageContent}>
+          <div>
+            <p>{JDK.description}</p>
+
+            <div>
+              <Heading as="h2">Installation</Heading>
+
+              <CodeBlock language="shell">
+                sdk install java x.y.z-{JDK.id}
+              </CodeBlock>
+            </div>
+          </div>
+
+          <div className={clsx('card', styles.card)}>
+            <div className="card__header">
+              <div className="card__title">Details</div>
+            </div>
+
+            <div className={clsx('card__body', styles.cardBody)}>
+              <Link href={JDK.url}>Website</Link>
+
+              {JDK.os?.icons && (
+                <div className={styles.cardIcons}>
+                  {JDK.os.icons.map((OsIcon, idx) => (
+                    <OsIcon
+                      key={`jdk-os-icon-${JDK.id}-${idx}`}
+                      className={styles.cardOsIcon}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {JDK.architecture?.long && (
+                <div>
+                  <div className={styles.cardSubtitle}>Architectures:</div>
+
+                  <ul>
+                    {JDK.architecture?.long.map((arch, idx) => (
+                      <li key={`arch-${JDK.id}-${idx}`}>{arch}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,48 @@
+@use '@site/src/scss/breakpoints' as *;
+
+.page {
+  margin-top: 4rem;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+
+  &Content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+.card {
+  height: fit-content;
+
+  &Subtitle {
+    margin-bottom: 0.5rem;
+  }
+
+  &Body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &Icons {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &OsIcon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+@media (min-width: $lg-screen) {
+  .page {
+    margin-top: 0;
+
+    &Content {
+      grid-template-columns: 1fr 250px;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+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;
+};
+
+export default function JDKCard({ item }: Props) {
+  return (
+    <Link className={clsx('card', styles.card)} href={`/jdks/${item.id}`}>
+      <div className="card__header">
+        <h2 className="card__title">
+          {item.distribution} ({item.vendor})
+        </h2>
+      </div>
+
+      <div className="card__body">
+        <div className={styles.cardBody}>
+          {item.os?.icons && (
+            <div className={styles.cardSide}>
+              {item.os.icons.map((OsIcon, idx) => (
+                <OsIcon
+                  key={`jdk-os-icon-${item.id}-${idx}`}
+                  className={styles.cardOsIcon}
+                />
+              ))}
+            </div>
+          )}
+
+          {item.architecture?.short && (
+            <div className={styles.cardSide}>
+              <span className={styles.cardArch}>
+                {item.architecture.short.join(' / ')}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/sections/JDKList/JDKCard/styles.module.scss

@@ -0,0 +1,30 @@
+.card {
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &Body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &Side {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &OsIcon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  &Arch {
+    font-size: 0.625rem;
+    font-weight: 700;
+  }
+}

src/components/sections/JDKList/index.tsx

@@ -0,0 +1,52 @@
+import Admonition from '@theme/Admonition';
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+import JDKCard from './JDKCard';
+import styles from './styles.module.scss';
+
+import jdks from '@site/src/data/jdks';
+
+export default function JDKList() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <Heading className={styles.sectionTitle} as="h1">
+          JDK Distributions
+        </Heading>
+
+        <Admonition
+          className={styles.sectionNote}
+          type="info"
+          title={
+            <>
+              Why is <Link href="/jdks/tem">Temurin</Link> the default JDK?
+            </>
+          }
+        >
+          <p>
+            We've chosen Eclipse Temurin as our default JDK because it's widely
+            recognized as the de facto standard for OpenJDK distributions.
+            Trusted for its reliability, stability, and performance, Temurin is
+            ideal for production-grade development. We ensure our default
+            version aligns with the latest stable release, so you're equipped
+            with the best tools for your JVM projects.
+          </p>
+
+          <p>
+            Looking ahead, we plan to give you the flexibility to track the
+            latest JDK releases from individual vendors, such as Oracle or
+            Amazon Corretto. While this isn't available yet, we're working to
+            make it easier for you to stay on top of the specific distributions
+            you rely on.
+          </p>
+        </Admonition>
+
+        <div className={styles.sectionList}>
+          {jdks.map((JDK) => (
+            <JDKCard item={JDK} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}