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

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 /docs/jdks.mdx
 /docs/sdks.mdx
 /src/data/jdks-versions.ts
+/src/data/sdks.ts

docusaurus.config.ts

@@ -58,6 +58,7 @@ const config: Config = {
     'docusaurus-plugin-sass',
     './src/plugins/google-fonts.ts',
     './src/plugins/jdks-details.ts',
+    './src/plugins/sdks-details.ts',
   ],
 
   themeConfig: {

package.json

@@ -14,7 +14,7 @@
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
     "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"
+    "preprocessing:clear": "rm -rf ./preprocessing/out ./src/data/jdks-versions.ts ./src/data/sdks.ts"
   },
   "dependencies": {
     "@docusaurus/core": "^3.7.0",

preprocessing/src/sdks/index.ts

@@ -2,53 +2,21 @@ import { writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
 export default async function generateSDKs() {
-  const sdksData = await fetchSdks();
+  const sdksData = await fetchSDKs();
   const sdks = parseSDKs(sdksData);
-  const sdkList = getSDKsMarkup(sdks);
-  const template = getMarkup(sdkList);
 
   try {
-    await writeFile(resolve(process.cwd(), './docs/sdks.mdx'), template);
+    await writeFile(
+      resolve(process.cwd(), './src/data/sdks.ts'),
+      `const sdks = ${JSON.stringify(sdks, null, 2)};\n\n` +
+        'export default sdks;',
+    );
   } catch (err) {
     console.error(err);
   }
 }
 
-function getMarkup(content: string) {
-  return `---
-title: SDK Installation Candidates
----
-
-{/* ATTENTION! Do not edit, the file is generated automatically by the plugin */}
-
-import DocsCarbonAds from '@site/src/components/sections/DocsCarbonAds';
-
-<DocsCarbonAds />
-
-${content}`;
-}
-
-function getSDKsMarkup(sdks: any[]) {
-  return sdks.reduce((acc, val) => {
-    const item = `
-## ${val.title} \\{#${val.id}\\}
-
-[${val.url}](${val.url})
-
-${val.description}
-
-\`\`\`shell
-sdk install ${val.id}
-\`\`\`
-`;
-
-    acc += `${item}`;
-
-    return acc;
-  }, '');
-}
-
-async function fetchSdks() {
+async function fetchSDKs() {
   try {
     const res = await fetch('https://api.sdkman.io/2/candidates/list');
 

sidebars.ts

@@ -1,12 +1,7 @@
 import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 const sidebars: SidebarsConfig = {
-  docSidebar: [
-    'install',
-    'usage',
-    'vendors',
-    { type: 'doc', label: 'SDKs', id: 'sdks' },
-  ],
+  docSidebar: ['install', 'usage', 'vendors'],
 };
 
 export default sidebars;

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

@@ -0,0 +1,16 @@
+import CodeBlock from '@theme/CodeBlock';
+import Heading from '@theme/Heading';
+
+type Props = {
+  id: string;
+};
+
+export default function Installation({ id }: Props) {
+  return (
+    <div>
+      <Heading as="h2">Installation</Heading>
+
+      <CodeBlock language="shell">sdk install {id}</CodeBlock>
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { Redirect, useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import Heading from '@theme/Heading';
+import Layout from '@theme/Layout';
+import PageCarbonAds from '@site/src/components/sections/PageCarbonAds';
+import clsx from 'clsx';
+import Installation from './Installation';
+import styles from './styles.module.scss';
+
+import sdks from '@site/src/data/sdks';
+import { getNameFromPath } from '@site/src/lib/utils';
+
+export default function SDKDetailsPage() {
+  const { siteConfig } = useDocusaurusContext();
+  const location = useLocation();
+  const SDKId = getNameFromPath(location.pathname, siteConfig.baseUrl);
+
+  if (!SDKId.length) {
+    return <Redirect to="/sdks/" />;
+  }
+
+  const SDK = sdks.find((item) => item.id === SDKId);
+
+  if (!SDK) {
+    return <Redirect to="/404/" />;
+  }
+
+  return (
+    <Layout title={SDK.title}>
+      <PageCarbonAds />
+
+      <div className={clsx('container', styles.page)}>
+        <Heading as="h1">{SDK.title}</Heading>
+
+        <div className={styles.pageContent}>
+          <div>
+            <p>{SDK.description}</p>
+
+            <Installation id={SDK.id} />
+          </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={SDK.url}>Website</Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,37 @@
+@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;
+  }
+}
+
+@media (min-width: $lg-screen) {
+  .page {
+    margin-top: 0;
+
+    &Content {
+      grid-template-columns: 1fr 250px;
+    }
+  }
+}

src/components/sections/SDKList/SDKCard/index.tsx

@@ -0,0 +1,18 @@
+import type { SDK } from '@site/src/types/sdk';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+type Props = {
+  item: SDK;
+};
+
+export default function SDKCard({ item }: Props) {
+  return (
+    <Link className={clsx('card', styles.card)} href={`/sdks/${item.id}`}>
+      <div className="card__header">
+        <h2 className="card__title">{item.title}</h2>
+      </div>
+    </Link>
+  );
+}

src/components/sections/SDKList/SDKCard/styles.module.scss

@@ -0,0 +1,8 @@
+.card {
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+}

src/components/sections/SDKList/index.tsx

@@ -0,0 +1,23 @@
+import Heading from '@theme/Heading';
+import SDKCard from './SDKCard';
+import styles from './styles.module.scss';
+
+import sdks from '@site/src/data/sdks';
+
+export default function SDKList() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <Heading className={styles.sectionTitle} as="h1">
+          SDK Installation Candidates
+        </Heading>
+
+        <div className={styles.sectionList}>
+          {sdks.map((SDK, idx) => (
+            <SDKCard key={`sdk-${idx}`} item={SDK} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/SDKList/styles.module.scss

@@ -0,0 +1,36 @@
+@use '@site/src/scss/breakpoints' as *;
+
+.section {
+  margin-top: 4rem;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+
+  &Title {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  &List {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+@media (min-width: $md-screen) {
+  .section {
+    &List {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+@media (min-width: $lg-screen) {
+  .section {
+    margin-top: 0;
+
+    &List {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}

src/pages/sdks.tsx

@@ -0,0 +1,12 @@
+import Layout from '@theme/Layout';
+import SDKList from '@site/src/components/sections/SDKList';
+import PageCarbonAds from '@site/src/components/sections/PageCarbonAds';
+
+export default function SDKsPage() {
+  return (
+    <Layout title="SDK Installation Candidates">
+      <PageCarbonAds />
+      <SDKList />
+    </Layout>
+  );
+}

src/plugins/sdks-details.ts

@@ -0,0 +1,19 @@
+import type { LoadContext } from '@docusaurus/types';
+import sdks from '../data/sdks';
+
+export default function sdksDetailsPlugin(context: LoadContext) {
+  return {
+    name: 'docusaurus-sdks-details',
+    async contentLoaded({ content, actions }) {
+      const { addRoute } = actions;
+
+      sdks.forEach((SDK) => {
+        addRoute({
+          path: `${context.baseUrl}sdks/${SDK.id}`,
+          component:
+            '@site/src/components/plugins-pages/SDKDetailsPage/index.tsx',
+        });
+      });
+    },
+  };
+}

src/types/sdk.ts

@@ -0,0 +1,6 @@
+export type SDK = {
+  id: string;
+  title: string;
+  url: string;
+  description: string;
+};