feat(nx-dev): add java landing page (#30508)
## Current Behavior <!-- This is the behavior we have today --> Nothing there. ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> Adds a new [/java](https://nx-dev-git-nxdev-gradle-landing-page-nrwl.vercel.app/java) landing page ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes # --------- Co-authored-by: Mike Hartington <mikehartington@gmail.com> Co-authored-by: Mike Hartington <mhartington@users.noreply.github.com>
This commit is contained in:
Juri Strumpflohner
GitHub
parent
3587aeabb7
commit
ea04a2ed72
66
nx-dev/nx-dev/app/java/page.tsx
Normal file
66
nx-dev/nx-dev/app/java/page.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { DefaultLayout } from '@nx/nx-dev/ui-common';
|
||||
import {
|
||||
CallToAction,
|
||||
Features,
|
||||
FeatureSections,
|
||||
GettingStarted,
|
||||
Hero,
|
||||
Resources,
|
||||
} from '@nx/nx-dev/ui-gradle';
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Nx For Java',
|
||||
description:
|
||||
'Add Nx to your Java project for distributed task execution, intelligent caching, and affected commands.',
|
||||
alternates: {
|
||||
canonical: 'https://nx.dev/java',
|
||||
},
|
||||
openGraph: {
|
||||
url: 'https://nx.dev/java',
|
||||
title: 'Nx For Java',
|
||||
description:
|
||||
'Add Nx to your Java project for distributed task execution, intelligent caching, and affected commands.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/socials/nx-gradle-media.png',
|
||||
width: 800,
|
||||
height: 421,
|
||||
alt: 'Nx For Java',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
siteName: 'Nx',
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
|
||||
export default function JavaPage(): JSX.Element {
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<Hero />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mt-16 scroll-mt-16 lg:mt-32" id="features">
|
||||
<Features />
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-16 scroll-mt-16 lg:mt-32" id="resources"> */}
|
||||
{/* <Resources /> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-16 scroll-mt-16 lg:mt-32" id="feature-sections"> */}
|
||||
{/* <FeatureSections /> */}
|
||||
{/* </div> */}
|
||||
|
||||
<div className="mt-16 scroll-mt-16 lg:mt-32">
|
||||
<GettingStarted />
|
||||
</div>
|
||||
<div className="overflow-hidden py-8 sm:py-8">
|
||||
<CallToAction />
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
BIN
nx-dev/nx-dev/public/images/enterprise/nx-affected.avif
Normal file
BIN
nx-dev/nx-dev/public/images/enterprise/nx-affected.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
nx-dev/nx-dev/public/socials/nx-java-media.png
Normal file
BIN
nx-dev/nx-dev/public/socials/nx-java-media.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
12
nx-dev/ui-gradle/.babelrc
Normal file
12
nx-dev/ui-gradle/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@nx/react/babel",
|
||||
{
|
||||
"runtime": "automatic",
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
18
nx-dev/ui-gradle/.eslintrc.json
Normal file
18
nx-dev/ui-gradle/.eslintrc.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
7
nx-dev/ui-gradle/README.md
Normal file
7
nx-dev/ui-gradle/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# nx-dev-ui-gradle
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test nx-dev-ui-gradle` to execute the unit tests via [Jest](https://jestjs.io).
|
||||
10
nx-dev/ui-gradle/jest.config.ts
Normal file
10
nx-dev/ui-gradle/jest.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
displayName: 'nx-dev-ui-gradle',
|
||||
preset: '../../jest.preset.js',
|
||||
transform: {
|
||||
'^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
|
||||
},
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
||||
coverageDirectory: '../../coverage/nx-dev/ui-gradle',
|
||||
};
|
||||
8
nx-dev/ui-gradle/project.json
Normal file
8
nx-dev/ui-gradle/project.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "nx-dev-ui-gradle",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "nx-dev/ui-gradle/src",
|
||||
"projectType": "library",
|
||||
"tags": [],
|
||||
"targets": {}
|
||||
}
|
||||
1
nx-dev/ui-gradle/src/index.ts
Normal file
1
nx-dev/ui-gradle/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './lib';
|
||||
130
nx-dev/ui-gradle/src/lib/call-to-action.tsx
Normal file
130
nx-dev/ui-gradle/src/lib/call-to-action.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
|
||||
import { GradleIcon } from '@nx/nx-dev/ui-icons';
|
||||
import { cx } from '@nx/nx-dev/ui-primitives';
|
||||
import React, { ReactElement } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function CallToAction(): ReactElement {
|
||||
return (
|
||||
<section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
|
||||
{/* Background pattern */}
|
||||
<svg
|
||||
className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="gradle-cta-pattern"
|
||||
width={200}
|
||||
height={200}
|
||||
x="50%"
|
||||
y={0}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<svg
|
||||
x="50%"
|
||||
y={0}
|
||||
className="overflow-visible fill-slate-200/20 dark:fill-slate-800/20"
|
||||
>
|
||||
<path
|
||||
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
</svg>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
strokeWidth={0}
|
||||
fill="url(#gradle-cta-pattern)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Gradient background */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-blue-500 to-blue-600 opacity-20"
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<div className="mb-8 flex justify-center">
|
||||
<GradleIcon className="h-16 w-16 text-slate-900 dark:text-white" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white">
|
||||
Get Started With Gradle
|
||||
</h2>
|
||||
<p className="mt-8">
|
||||
Check out the documentation for the <code>@nx/gradle</code> plugin to
|
||||
learn more
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Link
|
||||
href="/nx-api/gradle/documents/overview"
|
||||
title="Get started with the tutorial"
|
||||
prefetch={false}
|
||||
className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
|
||||
>
|
||||
Read the Docs{' '}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="inline-block transition group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* <Link
|
||||
href="/packages/gradle/gradle-plugin"
|
||||
title="Read the documentation"
|
||||
prefetch={false}
|
||||
className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"
|
||||
>
|
||||
Read documentation{' '}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="inline-block transition group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link> */}
|
||||
</div>
|
||||
|
||||
<h3 className="mt-16 text-3xl font-medium tracking-tight text-slate-950 dark:text-white">
|
||||
Looking for Maven?
|
||||
</h3>
|
||||
<p className="mt-8"> Maven support is coming soon. </p>
|
||||
<p className="mt-4">
|
||||
Join the Nx Community Discord to be notified when it is released.{' '}
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Link
|
||||
href="https://go.nx.dev/community"
|
||||
title="Join the Nx Community Discord"
|
||||
prefetch={false}
|
||||
className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
|
||||
>
|
||||
Join Us On Discord{' '}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="inline-block transition group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
137
nx-dev/ui-gradle/src/lib/feature-sections.tsx
Normal file
137
nx-dev/ui-gradle/src/lib/feature-sections.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
import { ReactElement } from 'react';
|
||||
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
|
||||
|
||||
export function FeatureSections(): ReactElement {
|
||||
return (
|
||||
<section className="feature-sections py-16 sm:py-24">
|
||||
<div className="mx-auto px-6 lg:max-w-7xl">
|
||||
<SectionHeading id="nx-gradle-features" as="h2" variant="title">
|
||||
Supercharge your Java Projects{' '}
|
||||
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
|
||||
with Nx
|
||||
</span>
|
||||
</SectionHeading>
|
||||
|
||||
<div className="mt-10 grid grid-cols-1 gap-8 sm:mt-16 md:grid-cols-2 lg:grid-cols-3 ">
|
||||
{/* Affected Section */}
|
||||
<FeatureSection
|
||||
title="Affected"
|
||||
description="Run tasks only on projects affected by your changes, saving time and resources. Nx understands your project's dependency graph and automatically determines which projects need to be rebuilt."
|
||||
imageSrc="/images/enterprise/nx-affected.avif"
|
||||
alt="Nx Affected: Run tasks only on affected projects"
|
||||
tag="Affected"
|
||||
href="/ci/features/affected"
|
||||
/>
|
||||
|
||||
{/* Remote Caching Section */}
|
||||
<FeatureSection
|
||||
title="Never build the same code twice"
|
||||
description="Nx Replay (Remote Caching) ensures tasks are never rebuilt unnecessarily. Share cached results across your team and CI pipelines to dramatically reduce build times and resource usage."
|
||||
imageSrc="/images/enterprise/nx-replay.avif"
|
||||
alt="Nx Replay: Remote caching"
|
||||
tag="Nx Replay"
|
||||
href="/features/cache-task-results"
|
||||
/>
|
||||
|
||||
{/* Distribution Section */}
|
||||
<FeatureSection
|
||||
title="Distribute tasks across machines"
|
||||
description="Nx Agents intelligently distribute your Gradle tasks across multiple machines, significantly reducing build times. Dynamically allocate agents based on PR size to balance speed and cost."
|
||||
imageSrc="/images/enterprise/nx-agents.avif"
|
||||
alt="Nx Agents: Task distribution"
|
||||
tag="Nx Agents"
|
||||
href="/ci/features/distribute-task-execution"
|
||||
/>
|
||||
|
||||
{/* Atomizer Section */}
|
||||
<FeatureSection
|
||||
title="Break tests down, speed execution up"
|
||||
description="Atomizer automatically splits large Gradle test tasks into smaller, atomized units, enabling lightning fast parallel testing. No code changes required - just configure and run."
|
||||
imageSrc="/images/enterprise/nx-atomizer.avif"
|
||||
alt="Nx Atomizer: Split large test tasks"
|
||||
tag="Atomizer"
|
||||
href="/ci/features/split-e2e-tasks"
|
||||
/>
|
||||
|
||||
{/* Flaky Test Retries Section */}
|
||||
<FeatureSection
|
||||
title="Automatically handle flaky tests"
|
||||
description="Nx detects and automatically retries flaky tests, enhancing the reliability of your CI processes and minimizing time spent debugging intermittent failures."
|
||||
imageSrc="/images/enterprise/nx-flaky-tasks-detection.avif"
|
||||
alt="Nx flaky task detection & rerun"
|
||||
tag="Flaky test retries"
|
||||
href="/nx-api/gradle/documents/overview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeatureSectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
alt: string;
|
||||
tag: string;
|
||||
href: string;
|
||||
reversed?: boolean;
|
||||
}
|
||||
|
||||
function FeatureSection({
|
||||
title,
|
||||
description,
|
||||
imageSrc,
|
||||
alt,
|
||||
tag,
|
||||
href,
|
||||
}: FeatureSectionProps): ReactElement {
|
||||
return (
|
||||
<div
|
||||
className={`feature-section flex flex-col overflow-hidden rounded-2xl bg-white shadow ring-1 ring-black/5 dark:bg-slate-950 dark:ring-white/10 `}
|
||||
>
|
||||
<div className="h-0 w-full md:h-72">
|
||||
<img
|
||||
alt={alt}
|
||||
src={imageSrc}
|
||||
className="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex flex-1 flex-col justify-center p-8 lg:p-10">
|
||||
<div>
|
||||
<span className="mb-3 inline-flex items-center rounded-full bg-slate-400/10 px-3 py-1 text-sm font-medium text-slate-600 ring-1 ring-inset ring-slate-400/20 dark:text-slate-300">
|
||||
{tag}
|
||||
</span>
|
||||
<h3 className="mt-2 text-xl font-medium tracking-tight text-slate-950 lg:text-2xl dark:text-white">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-4 text-base/relaxed text-slate-600 dark:text-slate-300">
|
||||
{description}
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<ButtonLink
|
||||
href={href}
|
||||
title={`Learn more about ${title}`}
|
||||
variant="secondary"
|
||||
size="default"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
277
nx-dev/ui-gradle/src/lib/features.tsx
Normal file
277
nx-dev/ui-gradle/src/lib/features.tsx
Normal file
@ -0,0 +1,277 @@
|
||||
import { SectionHeading } from '@nx/nx-dev/ui-common';
|
||||
import { cx } from '@nx/nx-dev/ui-primitives';
|
||||
import React, { ReactElement } from 'react';
|
||||
|
||||
export function Features(): ReactElement {
|
||||
return (
|
||||
<>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Features
|
||||
</SectionHeading>
|
||||
|
||||
<p className="mt-4 text-lg text-slate-500 dark:text-slate-400">
|
||||
The Nx Plugin for Java integrates seamlessly with your existing Gradle
|
||||
builds, adding powerful capabilities to your workflow.
|
||||
</p>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<FeatureCard
|
||||
title="Task Caching"
|
||||
description="Cache task results locally and remotely, avoiding redundant builds and speeding up your development workflow."
|
||||
href="/features/cache-task-results"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<polyline
|
||||
points="12 6 12 12 16 14"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Distributed Task Execution"
|
||||
description="Run your project tasks across multiple machines, dramatically reducing build times for large repositories."
|
||||
href="/ci/features/distribute-task-execution"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="2"
|
||||
y="7"
|
||||
width="20"
|
||||
height="14"
|
||||
rx="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M6 7V4.5C6 3.67157 6.67157 3 7.5 3H16.5C17.3284 3 18 3.67157 18 4.5V7"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M12 14L12 10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 12L15 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Affected Targets"
|
||||
description="Run tasks only on projects affected by your changes, saving time and computing resources."
|
||||
href="/ci/features/affected"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M22 4L12 14L9 11"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Project Graph"
|
||||
description="Nx automatically infers your project graph from project's configuration, providing visualization and dependency analysis."
|
||||
href="/features/explore-graph"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="5"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="19"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="19"
|
||||
cy="19"
|
||||
r="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path d="M7 5H17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M5 7V17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M7 19H17" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M19 7V17" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Split E2E Tests"
|
||||
description="Automatically split your E2E tests for faster parallel execution in CI environments with Atomizer."
|
||||
href="/ci/features/split-e2e-tasks"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14 3V7C14 7.55228 14.4477 8 15 8H19"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 12L8 14L10 16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 12L16 14L14 16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Zero Configuration"
|
||||
description="Add Nx to your project in minutes with no changes to your existing setup required."
|
||||
href="/nx-api/gradle/documents/overview"
|
||||
icon={
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2L2 7L12 12L22 7L12 2Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 17L12 22L22 17"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 12L12 17L22 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: JSX.Element;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
href = '#',
|
||||
}: FeatureCardProps): ReactElement {
|
||||
return (
|
||||
<a href={href} className="block h-full transform-gpu">
|
||||
<div
|
||||
className={cx(
|
||||
'group relative h-full w-full overflow-hidden rounded-lg border border-slate-200 bg-white p-6',
|
||||
'dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-900 dark:hover:shadow-blue-900/20',
|
||||
'before:absolute before:inset-0 before:z-0 before:bg-gradient-to-br before:from-blue-50 before:to-transparent before:opacity-0 before:transition-opacity',
|
||||
'transition-all duration-300 ease-out',
|
||||
'hover:-translate-y-2 hover:border-blue-200 hover:shadow-xl hover:shadow-blue-100/50',
|
||||
'hover:before:opacity-100 dark:before:from-blue-950'
|
||||
)}
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 transition-transform duration-300 group-hover:scale-110 dark:bg-slate-800 dark:text-blue-400 dark:group-hover:bg-blue-900">
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-medium">{title}</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
148
nx-dev/ui-gradle/src/lib/hero.tsx
Normal file
148
nx-dev/ui-gradle/src/lib/hero.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
/* eslint-disable @nx/enforce-module-boundaries */
|
||||
import {
|
||||
ButtonLink,
|
||||
SectionHeading,
|
||||
Strong,
|
||||
SectionDescription,
|
||||
} from '@nx/nx-dev/ui-common';
|
||||
import { JavaIcon } from '@nx/nx-dev/ui-icons';
|
||||
/* eslint-enable @nx/enforce-module-boundaries */
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
export function Hero(): ReactElement {
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
{/* Logo displayed above the title */}
|
||||
<div className="mb-6 flex justify-center">
|
||||
<div className="rounded-full bg-slate-100 p-4 dark:bg-slate-800">
|
||||
<JavaIcon className="h-20 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionHeading as="h1" variant="title" className="mt-6">
|
||||
Supercharge Your Java Projects
|
||||
</SectionHeading>
|
||||
<SectionDescription as="h2" className="mt-6">
|
||||
Get distributed tasks, intelligent caching, and target affected
|
||||
packages to optimize your build process and CI pipeline. Support for{' '}
|
||||
<Strong>Gradle</Strong> and <Strong>Maven</Strong> (coming soon)
|
||||
</SectionDescription>
|
||||
|
||||
<div className="mt-10 flex flex-col items-center justify-center gap-6 sm:flex-row">
|
||||
<ButtonLink
|
||||
href="https://nx.dev/getting-started/tutorials/gradle-tutorial"
|
||||
variant="primary"
|
||||
size="default"
|
||||
title="Get Started"
|
||||
>
|
||||
Get Started with Nx for Java
|
||||
</ButtonLink>
|
||||
|
||||
<a
|
||||
href="https://github.com/nrwl/nx-recipes/tree/main/gradle"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group inline-flex items-center text-sm font-semibold leading-6 text-slate-800 dark:text-white"
|
||||
>
|
||||
View Example Project{' '}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="ml-1 inline-block transition-transform group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function GettingStarted(): ReactElement {
|
||||
return (
|
||||
<section className="relative py-16 sm:py-24">
|
||||
<div className="absolute inset-0 bg-white dark:bg-slate-900"></div>
|
||||
<div className="relative mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
|
||||
Add Nx To An Existing Project
|
||||
</h2>
|
||||
<p className="mt-8">
|
||||
Currently Nx only supports Gradle. Support for Maven will come soon
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<GetStartedCard
|
||||
title="Add Nx To Your Project"
|
||||
command="npx nx@latest init"
|
||||
description="Select <code>@nx/gradle</code> when prompted."
|
||||
/>
|
||||
|
||||
<GetStartedCard
|
||||
title="Run Tasks With Nx"
|
||||
command="./nx build <project>"
|
||||
description="Nx will automatically infers tasks from your projects."
|
||||
/>
|
||||
|
||||
<GetStartedCard
|
||||
title="Run Affected Tasks"
|
||||
command="./nx affected -t build"
|
||||
description="Nx adds caching, distribution, and affected commands without changing your setup."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* GitHub example project link */}
|
||||
<div className="mt-12 flex justify-center">
|
||||
<a
|
||||
href="https://github.com/nrwl/nx-recipes/tree/main/gradle"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-6 py-3 font-medium text-slate-900 shadow-sm transition-all hover:-translate-y-1 hover:border-blue-400 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:border-blue-500"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.477 2 2 6.477 2 12C2 16.418 4.865 20.166 8.839 21.489C9.339 21.581 9.521 21.284 9.521 21.029C9.521 20.799 9.513 20.065 9.508 19.27C6.726 19.891 6.139 17.962 6.139 17.962C5.685 16.812 5.029 16.516 5.029 16.516C4.121 15.89 5.098 15.902 5.098 15.902C6.101 15.97 6.629 16.925 6.629 16.925C7.521 18.43 8.97 18.008 9.539 17.762C9.631 17.097 9.889 16.676 10.175 16.419C7.954 16.159 5.62 15.304 5.62 11.453C5.62 10.355 6.009 9.457 6.649 8.758C6.546 8.514 6.203 7.543 6.746 6.161C6.746 6.161 7.585 5.902 9.497 7.203C10.295 6.988 11.15 6.88 12 6.876C12.85 6.88 13.705 6.988 14.505 7.203C16.415 5.902 17.253 6.161 17.253 6.161C17.798 7.543 17.455 8.514 17.352 8.758C17.994 9.457 18.38 10.355 18.38 11.453C18.38 15.313 16.042 16.156 13.815 16.411C14.174 16.726 14.495 17.347 14.495 18.297C14.495 19.648 14.483 20.709 14.483 21.029C14.483 21.287 14.661 21.586 15.171 21.487C19.138 20.161 22 16.417 22 12C22 6.477 17.523 2 12 2Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
View Example Project on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface GetStartedCardProps {
|
||||
title: string;
|
||||
command: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
function GetStartedCard({
|
||||
title,
|
||||
command,
|
||||
description,
|
||||
}: GetStartedCardProps): ReactElement {
|
||||
return (
|
||||
<div className="h-full rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-slate-700 dark:bg-slate-800">
|
||||
<h3 className="text-lg font-medium text-slate-900 dark:text-white">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="mt-3 overflow-hidden rounded-md bg-slate-800 px-4 py-3 text-sm text-white dark:bg-slate-950">
|
||||
<code>{command}</code>
|
||||
</div>
|
||||
<p
|
||||
className="mt-3 text-sm text-slate-600 dark:text-slate-300"
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
nx-dev/ui-gradle/src/lib/index.ts
Normal file
5
nx-dev/ui-gradle/src/lib/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export * from './hero';
|
||||
export * from './features';
|
||||
export * from './resources';
|
||||
export * from './call-to-action';
|
||||
export * from './feature-sections';
|
||||
71
nx-dev/ui-gradle/src/lib/resources.tsx
Normal file
71
nx-dev/ui-gradle/src/lib/resources.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { ButtonLink, SectionHeading, TextLink } from '@nx/nx-dev/ui-common';
|
||||
import { cx } from '@nx/nx-dev/ui-primitives';
|
||||
import React, { ReactElement } from 'react';
|
||||
|
||||
export function Resources(): ReactElement {
|
||||
return (
|
||||
<>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Resources
|
||||
</SectionHeading>
|
||||
<p className="mt-4 text-lg text-slate-500 dark:text-slate-400">
|
||||
Learn more about using Nx with Java projects with these resources.
|
||||
</p>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-3">
|
||||
<ResourceCard
|
||||
title="Gradle Tutorial"
|
||||
description="Follow this step-by-step tutorial to add Nx to an existing Gradle project."
|
||||
linkText="View tutorial"
|
||||
href="/tutorials/gradle"
|
||||
/>
|
||||
|
||||
<ResourceCard
|
||||
title="Gradle Plugin Documentation"
|
||||
description="Learn all the details about the Nx Gradle plugin configuration and usage."
|
||||
linkText="View docs"
|
||||
href="/packages/gradle/gradle-plugin"
|
||||
/>
|
||||
|
||||
<ResourceCard
|
||||
title="CI with Nx"
|
||||
description="Learn how to configure Continuous Integration with Nx for faster builds."
|
||||
linkText="View CI docs"
|
||||
href="/ci/intro/ci-with-nx"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface ResourceCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
linkText: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
function ResourceCard({
|
||||
title,
|
||||
description,
|
||||
linkText,
|
||||
href,
|
||||
}: ResourceCardProps): ReactElement {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'flex h-full flex-col justify-between rounded-lg border border-slate-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-slate-800 dark:bg-slate-900'
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<h3 className="mb-2 text-lg font-medium">{title}</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400">{description}</p>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<ButtonLink href={href} size="small" variant="primary" title={linkText}>
|
||||
{linkText}
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
nx-dev/ui-gradle/tsconfig.json
Normal file
20
nx-dev/ui-gradle/tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": false,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../tsconfig.base.json"
|
||||
}
|
||||
24
nx-dev/ui-gradle/tsconfig.lib.json
Normal file
24
nx-dev/ui-gradle/tsconfig.lib.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"node",
|
||||
"@nx/react/typings/cssmodule.d.ts",
|
||||
"@nx/react/typings/image.d.ts"
|
||||
],
|
||||
"lib": ["DOM", "es2019"]
|
||||
},
|
||||
"exclude": [
|
||||
"jest.config.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.test.jsx"
|
||||
],
|
||||
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
|
||||
}
|
||||
20
nx-dev/ui-gradle/tsconfig.spec.json
Normal file
20
nx-dev/ui-gradle/tsconfig.spec.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"types": ["jest", "node"]
|
||||
},
|
||||
"include": [
|
||||
"jest.config.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@ -107,6 +107,7 @@
|
||||
"@nx/nx-dev/ui-customers": ["nx-dev/ui-customers/src/index.ts"],
|
||||
"@nx/nx-dev/ui-enterprise": ["nx-dev/ui-enterprise/src/index.ts"],
|
||||
"@nx/nx-dev/ui-fence": ["nx-dev/ui-fence/src/index.ts"],
|
||||
"@nx/nx-dev/ui-gradle": ["nx-dev/ui-gradle/src/lib/index.ts"],
|
||||
"@nx/nx-dev/ui-home": ["nx-dev/ui-home/src/index.ts"],
|
||||
"@nx/nx-dev/ui-icons": ["nx-dev/ui-icons/src/index.ts"],
|
||||
"@nx/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user