docs(nx-dev): add monorepo ai support section to homepage (#29934)
Introduced the Monorepo AI Support component and its corresponding illustration to the homepage layout. Also updated the necessary exports for proper integration.
This commit is contained in:
Benjamin Cabanes
GitHub
parent
4c66403a00
commit
c0fd00df6e
@ -4,6 +4,7 @@ import {
|
||||
CiForMonorepos,
|
||||
Hero,
|
||||
HetznerCloudTestimonial,
|
||||
MonorepoAiSupport,
|
||||
SmarterToolsForMonorepos,
|
||||
Statistics,
|
||||
TeamAndCommunity,
|
||||
@ -46,6 +47,9 @@ export default function Index(): JSX.Element {
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<HetznerCloudTestimonial />
|
||||
</div>
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<MonorepoAiSupport />
|
||||
</div>
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<CiForMonorepos />
|
||||
</div>
|
||||
|
||||
BIN
nx-dev/nx-dev/public/images/home/nx-ai-dark-lighting.avif
Normal file
BIN
nx-dev/nx-dev/public/images/home/nx-ai-dark-lighting.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
nx-dev/nx-dev/public/images/home/nx-ai-light-lighting.avif
Normal file
BIN
nx-dev/nx-dev/public/images/home/nx-ai-light-lighting.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
nx-dev/nx-dev/public/images/home/nx-ai.avif
Normal file
BIN
nx-dev/nx-dev/public/images/home/nx-ai.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@ -1,4 +1,5 @@
|
||||
export * from './lib/ci-for-monorepos';
|
||||
export * from './lib/monorepo-ai-support';
|
||||
export * from './lib/hero';
|
||||
export * from './lib/hetzner-cloud-testimonial';
|
||||
export * from './lib/smarter-tools-for-monorepos';
|
||||
|
||||
6585
nx-dev/ui-home/src/lib/illustrations/nx-ai-light.tsx
Normal file
6585
nx-dev/ui-home/src/lib/illustrations/nx-ai-light.tsx
Normal file
File diff suppressed because it is too large
Load Diff
251
nx-dev/ui-home/src/lib/monorepo-ai-support.tsx
Normal file
251
nx-dev/ui-home/src/lib/monorepo-ai-support.tsx
Normal file
@ -0,0 +1,251 @@
|
||||
import { SectionHeading, Strong } from '@nx/nx-dev/ui-common';
|
||||
import { ReactElement } from 'react';
|
||||
import {
|
||||
AngularIcon,
|
||||
CursorIcon,
|
||||
GithubCopilot,
|
||||
GoIcon,
|
||||
IntellijAiIcon,
|
||||
JavaIcon,
|
||||
NodeIcon,
|
||||
ReactIcon,
|
||||
StorybookIcon,
|
||||
TypeScriptIcon,
|
||||
} from '@nx/nx-dev/ui-icons';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function MonorepoAiSupport(): ReactElement {
|
||||
return (
|
||||
<article className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
as="h2"
|
||||
variant="title"
|
||||
id="achieve-more-ship-quicker"
|
||||
className="scroll-mt-24"
|
||||
>
|
||||
Promote your LLM from Junior Dev to Chief Architect
|
||||
</SectionHeading>
|
||||
<div className="max-w-5xl">
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-6">
|
||||
AI-powered coding assistants can edit files, but they’re blind to the
|
||||
bigger picture –{' '}
|
||||
<Strong>
|
||||
they don’t understand how your entire codebase fits together
|
||||
</Strong>
|
||||
. Nx changes that.
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-6">
|
||||
With full visibility into your{' '}
|
||||
<Strong>
|
||||
monorepo’s project relationships, dependencies, and ownership
|
||||
</Strong>
|
||||
, Nx enables your LLM to move beyond local file changes to make{' '}
|
||||
<Strong>informed architectural decisions</Strong>. Future-proof your
|
||||
development with system-wide intelligence, not just AI-friendly tools.
|
||||
</SectionHeading>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-12 grid grid-cols-1 gap-x-0 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-10 -z-10 hidden transform-gpu justify-center overflow-hidden blur-3xl lg:flex"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="aspect-[16/9] w-[50rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-15"
|
||||
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>
|
||||
<div className="absolute inset-0 hidden grid-cols-1 place-items-center lg:grid">
|
||||
<Image
|
||||
src="/images/home/nx-ai-light-lighting.avif"
|
||||
width={1200}
|
||||
height={239}
|
||||
alt="nx-ai-llm"
|
||||
className="max-w-[40%] lg:max-w-[45%] dark:hidden"
|
||||
/>
|
||||
<Image
|
||||
src="/images/home/nx-ai-dark-lighting.avif"
|
||||
width={1200}
|
||||
height={239}
|
||||
alt="nx-ai-llm"
|
||||
className="hidden max-w-[40%] lg:max-w-[45%] dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative hidden text-slate-500 lg:block">
|
||||
<ProjectGraph />
|
||||
|
||||
<ReactIcon
|
||||
aria-hidden="true"
|
||||
className="absolute left-[12%] top-[28%] size-5 lg:size-8"
|
||||
/>
|
||||
<TypeScriptIcon
|
||||
aria-hidden="true"
|
||||
className="absolute left-[36%] top-[16%] size-5 lg:size-8"
|
||||
/>
|
||||
<JavaIcon
|
||||
aria-hidden="true"
|
||||
className="absolute right-[36%] top-[24%] size-5 lg:size-8"
|
||||
/>
|
||||
<StorybookIcon
|
||||
aria-hidden="true"
|
||||
className="absolute right-[4%] top-[36%] size-5 lg:size-8"
|
||||
/>
|
||||
<AngularIcon
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[24%] left-[16%] size-5 lg:size-8"
|
||||
/>
|
||||
<GoIcon
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[10%] left-[40%] size-5 lg:size-10"
|
||||
/>
|
||||
<NodeIcon
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[24%] right-0 size-5 lg:size-8"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden flex-col items-center justify-center sm:flex">
|
||||
<div className="relative text-slate-100 dark:text-slate-950">
|
||||
<Image
|
||||
src="/images/home/nx-ai.avif"
|
||||
width={1200}
|
||||
height={1200}
|
||||
alt="nx-ai-llm"
|
||||
className="block"
|
||||
/>
|
||||
<GithubCopilot
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[32%] right-[57%] size-5 sm:size-8"
|
||||
/>
|
||||
<IntellijAiIcon
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[32%] right-[45%] size-5 sm:size-8"
|
||||
/>
|
||||
<CursorIcon
|
||||
aria-hidden="true"
|
||||
className="absolute bottom-[32%] right-[34%] size-5 sm:size-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex flex-col items-center justify-center gap-6">
|
||||
<div className="flex w-full flex-col rounded-lg border-slate-200 bg-white px-4 py-2 opacity-85 shadow-sm transition-all hover:opacity-100 dark:bg-slate-900">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs font-semibold text-slate-800 dark:text-slate-200">
|
||||
Instant impact analysis
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1.5 text-sm font-normal text-slate-900 dark:text-white">
|
||||
If I update this shared library, what downstream projects will
|
||||
break?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col rounded-lg border-slate-200 bg-white px-4 py-2 opacity-85 shadow-sm transition-all hover:opacity-100 dark:bg-slate-900">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs font-semibold text-slate-800 dark:text-slate-200">
|
||||
Ownership clarity
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1.5 text-sm font-normal text-slate-900 dark:text-white">
|
||||
Who maintains this module, and what other teams rely on it?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col rounded-lg border-slate-200 bg-white px-4 py-2 opacity-85 shadow-sm transition-all hover:opacity-100 dark:bg-slate-900">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs font-semibold text-slate-800 dark:text-slate-200">
|
||||
Cross-stack reasoning
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1.5 text-sm font-normal text-slate-900 dark:text-white">
|
||||
How does this frontend change impact our backend services?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectGraph(): ReactElement {
|
||||
return (
|
||||
<div className="space-y-2 p-4">
|
||||
<div className="mx-auto max-w-[300px] text-center uppercase">
|
||||
Project Graph
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 491 440"
|
||||
className="mx-auto block max-h-[300px] max-w-[300px]"
|
||||
>
|
||||
<rect
|
||||
width="180"
|
||||
height="85"
|
||||
y="189.658"
|
||||
fill="currentColor"
|
||||
fillOpacity=".08"
|
||||
rx="11.9521"
|
||||
/>
|
||||
<rect
|
||||
width="179.281"
|
||||
height="83.6644"
|
||||
x=".664"
|
||||
y="190.322"
|
||||
stroke="currentColor"
|
||||
strokeOpacity=".5"
|
||||
strokeWidth="1.328"
|
||||
rx="11.288"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.328"
|
||||
d="M87.6484 190.323v-24.568c0-7.335 5.9457-13.28 13.2796-13.28h130.809c7.334 0 13.28-5.946 13.28-13.28V.418"
|
||||
/>
|
||||
<rect
|
||||
width="180.609"
|
||||
height="84.9924"
|
||||
fill="currentColor"
|
||||
fillOpacity=".08"
|
||||
rx="11.9521"
|
||||
transform="matrix(-1 0 0 1 490.695 190.322)"
|
||||
/>
|
||||
<rect
|
||||
width="179.281"
|
||||
height="83.6644"
|
||||
x="-.664"
|
||||
y=".664"
|
||||
stroke="currentColor"
|
||||
strokeOpacity=".5"
|
||||
strokeWidth="1.328"
|
||||
rx="11.288"
|
||||
transform="matrix(-1 0 0 1 489.367 190.322)"
|
||||
/>
|
||||
<rect
|
||||
width="180.609"
|
||||
height="84.9924"
|
||||
fill="currentColor"
|
||||
fillOpacity=".08"
|
||||
rx="11.9521"
|
||||
transform="matrix(-1 0 0 1 490.695 354.332)"
|
||||
/>
|
||||
<rect
|
||||
width="179.281"
|
||||
height="83.6644"
|
||||
x="-.664"
|
||||
y=".664"
|
||||
stroke="currentColor"
|
||||
strokeOpacity=".5"
|
||||
strokeWidth="1.328"
|
||||
rx="11.288"
|
||||
transform="matrix(-1 0 0 1 489.367 354.332)"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.328"
|
||||
d="M403.047 190.987v-24.568c0-7.335-5.946-13.28-13.28-13.28H258.958c-7.334 0-13.28-5.946-13.28-13.28V1.082M398.402 274.65v79.681"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
// AI
|
||||
export * from './lib/ai/cursor';
|
||||
export * from './lib/ai/github-copilot';
|
||||
export * from './lib/ai/intellij-ai';
|
||||
|
||||
// CI PROVIDERS
|
||||
export * from './lib/ci-providers/azure-devops';
|
||||
export * from './lib/ci-providers/bitbucket';
|
||||
|
||||
21
nx-dev/ui-icons/src/lib/ai/cursor.tsx
Normal file
21
nx-dev/ui-icons/src/lib/ai/cursor.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { FC, SVGProps } from 'react';
|
||||
|
||||
/**
|
||||
* Use `#000000` for a colored version.
|
||||
*/
|
||||
export const CursorIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<title>Cursor</title>
|
||||
<path d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z" fillOpacity=".5" />
|
||||
<path d="M22.35 18V6L11.925 0v12l10.425 6z" fillOpacity=".5" />
|
||||
<path d="M11.925 0L1.5 6v12l10.425-6V0z" fillOpacity=".5" />
|
||||
<path d="M22.35 6L11.925 24V12L22.35 6z" fillOpacity=".4" />
|
||||
<path d="M22.35 6l-10.425 6L1.5 6h20.85z" />
|
||||
</svg>
|
||||
);
|
||||
17
nx-dev/ui-icons/src/lib/ai/github-copilot.tsx
Normal file
17
nx-dev/ui-icons/src/lib/ai/github-copilot.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { FC, SVGProps } from 'react';
|
||||
|
||||
/**
|
||||
* Use `#000000` for a colored version.
|
||||
*/
|
||||
export const GithubCopilot: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<title>GitHub Copilot</title>
|
||||
<path d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z" />
|
||||
</svg>
|
||||
);
|
||||
17
nx-dev/ui-icons/src/lib/ai/intellij-ai.tsx
Normal file
17
nx-dev/ui-icons/src/lib/ai/intellij-ai.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { FC, SVGProps } from 'react';
|
||||
|
||||
/**
|
||||
* Use `#955AE0` for a colored version.
|
||||
*/
|
||||
export const IntellijAiIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<title>Intellij AI</title>
|
||||
<path d="M2.705 4.74c1.98-1.1275 4.7025-1.6775 7.04-1.6775 6.8475 0 11.1925 3.19 11.1925 7.5075 0 3.4375-2.9975 5.555-6.985 5.555-3.2175 0-5.61-1.1825-5.61-2.75 0-1.485 1.5125-2.2 3.6575-1.375l.55-1.6775c-3.3275-1.0725-6.0775.44-6.0775 3.0525 0 2.6125 3.245 4.4825 7.59 4.4825 5.17 0 8.9375-2.86 8.9375-7.2875C23 5.0425 17.775 1 9.745 1c-2.585 0-5.5.66-7.8925 1.9525L2.705 4.74Zm18.59 14.52c-1.98 1.1275-4.7025 1.6775-7.04 1.6775-6.8475 0-11.1925-3.19-11.1925-7.5075 0-3.4375 2.9975-5.555 6.985-5.555 3.2175 0 5.61 1.1825 5.61 2.75 0 1.485-1.5125 2.2-3.6575 1.375l-.55 1.6775c3.3275 1.0725 6.0775-.44 6.0775-3.0525 0-2.6125-3.245-4.4825-7.59-4.4825C4.7675 6.1425 1 9.0025 1 13.43 1 18.9575 6.225 23 14.255 23c2.585 0 5.5-.66 7.8925-1.9525L21.295 19.26Z" />
|
||||
</svg>
|
||||
);
|
||||
Loading…
x
Reference in New Issue
Block a user