Skip to content

Commit 5a0634d

Browse files
SvMakSvMak
authored
Merge pull request #93 from sdkman/jdk-card-style
Moved JDKs page from docs to separate card-style page with details pages
2 parents 884526d + d977082 commit 5a0634d

File tree

15 files changed

+647
-117
lines changed

15 files changed

+647
-117
lines changed

‎docusaurus.config.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,11 @@ const config: Config = {
5454
],
5555
],
5656

57-
plugins: ['docusaurus-plugin-sass', './src/plugins/google-fonts.ts'],
57+
plugins: [
58+
'docusaurus-plugin-sass',
59+
'./src/plugins/google-fonts.ts',
60+
'./src/plugins/jdks-details.ts',
61+
],
5862

5963
themeConfig: {
6064
metadata: [

‎preprocessing/src/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import generateJDKs from './jdks';
21
import generateSDKs from './sdks';
32

43
async function run() {
54
try {
6-
await Promise.all([generateJDKs(), generateSDKs()]);
5+
await generateSDKs();
76
} catch (err) {
87
console.error(err);
98
}

‎preprocessing/src/jdks/index.ts

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎sidebars.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const sidebars: SidebarsConfig = {
55
'install',
66
'usage',
77
'vendors',
8-
{ type: 'doc', label: 'JDKs', id: 'jdks' },
98
{ type: 'doc', label: 'SDKs', id: 'sdks' },
109
],
1110
};

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { Redirect, useLocation } from '@docusaurus/router';
2+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import Link from '@docusaurus/Link';
4+
import CodeBlock from '@theme/CodeBlock';
5+
import Heading from '@theme/Heading';
6+
import Layout from '@theme/Layout';
7+
import PageCarbonAds from '@site/src/components/sections/PageCarbonAds';
8+
import clsx from 'clsx';
9+
import styles from './styles.module.scss';
10+
11+
import jdks from '@site/src/data/jdks';
12+
import { getNameFromPath } from '@site/src/lib/utils';
13+
14+
export default function JDKDetailsPage() {
15+
const { siteConfig } = useDocusaurusContext();
16+
const location = useLocation();
17+
const JDKId = getNameFromPath(location.pathname, siteConfig.baseUrl);
18+
19+
if (!JDKId.length) {
20+
return <Redirect to="/jdks/" />;
21+
}
22+
23+
const JDK = jdks.find((item) => item.id === JDKId);
24+
25+
if (!JDK) {
26+
return <Redirect to="/404/" />;
27+
}
28+
29+
return (
30+
<Layout title={`${JDK.distribution} (${JDK.vendor})`}>
31+
<PageCarbonAds />
32+
33+
<div className={clsx('container', styles.page)}>
34+
<Heading as="h1">{`${JDK.distribution} (${JDK.vendor})`}</Heading>
35+
36+
<div className={styles.pageContent}>
37+
<div>
38+
<p>{JDK.description}</p>
39+
40+
<div>
41+
<Heading as="h2">Installation</Heading>
42+
43+
<CodeBlock language="shell">
44+
sdk install java x.y.z-{JDK.id}
45+
</CodeBlock>
46+
</div>
47+
</div>
48+
49+
<div className={clsx('card', styles.card)}>
50+
<div className="card__header">
51+
<div className="card__title">Details</div>
52+
</div>
53+
54+
<div className={clsx('card__body', styles.cardBody)}>
55+
<Link href={JDK.url}>Website</Link>
56+
57+
{JDK.os?.icons && (
58+
<div className={styles.cardIcons}>
59+
{JDK.os.icons.map((OsIcon, idx) => (
60+
<OsIcon
61+
key={`jdk-os-icon-${JDK.id}-${idx}`}
62+
className={styles.cardOsIcon}
63+
/>
64+
))}
65+
</div>
66+
)}
67+
68+
{JDK.architecture?.long && (
69+
<div>
70+
<div className={styles.cardSubtitle}>Architectures:</div>
71+
72+
<ul>
73+
{JDK.architecture?.long.map((arch, idx) => (
74+
<li key={`arch-${JDK.id}-${idx}`}>{arch}</li>
75+
))}
76+
</ul>
77+
</div>
78+
)}
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</Layout>
84+
);
85+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@use '@site/src/scss/breakpoints' as *;
2+
3+
.page {
4+
margin-top: 4rem;
5+
padding-top: 5rem;
6+
padding-bottom: 5rem;
7+
8+
&Content {
9+
display: grid;
10+
grid-template-columns: 1fr;
11+
gap: 1rem;
12+
}
13+
}
14+
15+
.card {
16+
height: fit-content;
17+
18+
&Subtitle {
19+
margin-bottom: 0.5rem;
20+
}
21+
22+
&Body {
23+
display: flex;
24+
flex-direction: column;
25+
gap: 0.75rem;
26+
}
27+
28+
&Icons {
29+
display: flex;
30+
align-items: center;
31+
gap: 0.5rem;
32+
}
33+
34+
&OsIcon {
35+
width: 1.25rem;
36+
height: 1.25rem;
37+
}
38+
}
39+
40+
@media (min-width: $lg-screen) {
41+
.page {
42+
margin-top: 0;
43+
44+
&Content {
45+
grid-template-columns: 1fr 250px;
46+
}
47+
}
48+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Link from '@docusaurus/Link';
2+
import clsx from 'clsx';
3+
import styles from './styles.module.scss';
4+
5+
import { JDK } from '@site/src/types/jdk';
6+
7+
type Props = {
8+
item: JDK;
9+
};
10+
11+
export default function JDKCard({ item }: Props) {
12+
return (
13+
<Link className={clsx('card', styles.card)} href={`/jdks/${item.id}`}>
14+
<div className="card__header">
15+
<h2 className="card__title">
16+
{item.distribution} ({item.vendor})
17+
</h2>
18+
</div>
19+
20+
<div className="card__body">
21+
<div className={styles.cardBody}>
22+
{item.os?.icons && (
23+
<div className={styles.cardSide}>
24+
{item.os.icons.map((OsIcon, idx) => (
25+
<OsIcon
26+
key={`jdk-os-icon-${item.id}-${idx}`}
27+
className={styles.cardOsIcon}
28+
/>
29+
))}
30+
</div>
31+
)}
32+
33+
{item.architecture?.short && (
34+
<div className={styles.cardSide}>
35+
<span className={styles.cardArch}>
36+
{item.architecture.short.join(' / ')}
37+
</span>
38+
</div>
39+
)}
40+
</div>
41+
</div>
42+
</Link>
43+
);
44+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.card {
2+
color: inherit;
3+
4+
&:hover {
5+
text-decoration: none;
6+
color: inherit;
7+
}
8+
9+
&Body {
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-between;
13+
}
14+
15+
&Side {
16+
display: flex;
17+
align-items: center;
18+
gap: 0.75rem;
19+
}
20+
21+
&OsIcon {
22+
width: 1.25rem;
23+
height: 1.25rem;
24+
}
25+
26+
&Arch {
27+
font-size: 0.625rem;
28+
font-weight: 700;
29+
}
30+
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Admonition from '@theme/Admonition';
2+
import Heading from '@theme/Heading';
3+
import Link from '@docusaurus/Link';
4+
import JDKCard from './JDKCard';
5+
import styles from './styles.module.scss';
6+
7+
import jdks from '@site/src/data/jdks';
8+
9+
export default function JDKList() {
10+
return (
11+
<section className={styles.section}>
12+
<div className="container">
13+
<Heading className={styles.sectionTitle} as="h1">
14+
JDK Distributions
15+
</Heading>
16+
17+
<Admonition
18+
className={styles.sectionNote}
19+
type="info"
20+
title={
21+
<>
22+
Why is <Link href="/jdks/tem">Temurin</Link> the default JDK?
23+
</>
24+
}
25+
>
26+
<p>
27+
We've chosen Eclipse Temurin as our default JDK because it's widely
28+
recognized as the de facto standard for OpenJDK distributions.
29+
Trusted for its reliability, stability, and performance, Temurin is
30+
ideal for production-grade development. We ensure our default
31+
version aligns with the latest stable release, so you're equipped
32+
with the best tools for your JVM projects.
33+
</p>
34+
35+
<p>
36+
Looking ahead, we plan to give you the flexibility to track the
37+
latest JDK releases from individual vendors, such as Oracle or
38+
Amazon Corretto. While this isn't available yet, we're working to
39+
make it easier for you to stay on top of the specific distributions
40+
you rely on.
41+
</p>
42+
</Admonition>
43+
44+
<div className={styles.sectionList}>
45+
{jdks.map((JDK) => (
46+
<JDKCard item={JDK} />
47+
))}
48+
</div>
49+
</div>
50+
</section>
51+
);
52+
}

0 commit comments

Comments
 (0)