Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(nx-dev): add MinIO icon & adjust nx powerpack cache layout #28962

Merged
merged 1 commit into from
Nov 15, 2024
Merged

docs(nx-dev): add MinIO icon & adjust nx powerpack cache layout #28962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions nx-dev/ui-icons/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export * from './lib/editors/visual-studio-code';
export * from './lib/monorepo-world';
export * from './lib/others/amazon-s3';
export * from './lib/others/linux';
export * from './lib/others/min-io';
export * from './lib/others/windows';

// PODCASTS
Expand Down
17 changes: 17 additions & 0 deletions nx-dev/ui-icons/src/lib/others/min-io.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { FC, SVGProps } from 'react';

/**
* Use `#C72E49` for a colored version.
*/
export const MinIOIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
{...props}
>
<title>MinIO</title>
<path d="M13.2072.006c-.6216-.0478-1.2.1943-1.6211.582a2.15 2.15 0 0 0-.0938 3.0352l3.4082 3.5507a3.042 3.042 0 0 1-.664 4.6875l-.463.2383V7.2853a15.4198 15.4198 0 0 0-8.0174 10.4862v.0176l6.5487-3.3281v7.621L13.7794 24V13.6817l.8965-.4629a4.4432 4.4432 0 0 0 1.2207-7.0292l-3.371-3.5254a.7489.7489 0 0 1 .037-1.0547.7522.7522 0 0 1 1.0567.0371l.4668.4863-.006.0059 4.0704 4.2441a.0566.0566 0 0 0 .082 0 .06.06 0 0 0 0-.0703l-3.1406-5.1425-.1484.1425.1484-.1445C14.4945.3926 13.8287.0538 13.2072.006Zm-.9024 9.8652v2.9941l-4.1523 2.1484a13.9787 13.9787 0 0 1 2.7676-3.9277 14.1784 14.1784 0 0 1 1.3847-1.2148z" />
</svg>
);
106 changes: 66 additions & 40 deletions nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
AmazonS3Icon,
AzureDevOpsIcon,
GoogleCloudIcon,
MinIOIcon,
NxIcon,
} from '@nx/nx-dev/ui-icons';
import Link from 'next/link';
Expand Down Expand Up @@ -65,7 +66,7 @@ export function PowerpackFeatures(): ReactElement {
</ButtonLink>
</div>
</div>
<div className="hidden w-full lg:block">
<div className="hidden w-full xl:block">
<CustomRemoteCacheAnimation />
</div>
</div>
Expand Down Expand Up @@ -268,7 +269,7 @@ const Card = forwardRef<
<div
ref={ref}
className={cx(
'z-10 flex flex-col items-center justify-between rounded-lg border border-slate-200 bg-white p-2 py-3 shadow-sm dark:border-white/10 dark:bg-slate-950',
'z-10 flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2 py-2 shadow-sm dark:border-white/10 dark:bg-slate-950',
className
)}
onMouseEnter={onMouseEnter}
Expand All @@ -286,6 +287,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
const azureRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const gcpRef = useRef<HTMLDivElement>(null);
const minioRef = useRef<HTMLDivElement>(null);
const networkDriveRef = useRef<HTMLDivElement>(null);
const nxRef = useRef<HTMLDivElement>(null);

Expand All @@ -295,9 +297,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
containerRef={containerRef}
fromRef={awsRef}
toRef={nxRef}
curvature={175}
startXOffset={-20}
endYOffset={30}
curvature={-75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
duration={5}
/>
Expand All @@ -307,9 +309,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
containerRef={containerRef}
fromRef={azureRef}
toRef={nxRef}
curvature={175}
startXOffset={20}
endYOffset={30}
curvature={75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
reverse={true}
duration={5}
Expand All @@ -321,21 +323,33 @@ export function CustomRemoteCacheAnimation(): ReactElement {
fromRef={gcpRef}
toRef={nxRef}
bidirectional={true}
curvature={130}
startXOffset={20}
endXOffset={-20}
curvature={75}
startXOffset={-75}
endYOffset={0}
reverse={true}
duration={5}
/>
),
minio: (
<AnimatedCurvedBeam
containerRef={containerRef}
fromRef={minioRef}
toRef={nxRef}
curvature={-75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
duration={5}
/>
),
networkDrive: (
<AnimatedCurvedBeam
containerRef={containerRef}
fromRef={networkDriveRef}
toRef={nxRef}
curvature={150}
startXOffset={-20}
endXOffset={20}
curvature={10}
startXOffset={-75}
endXOffset={0}
bidirectional={true}
duration={5}
/>
Expand Down Expand Up @@ -370,7 +384,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {

return (
<div className="relative flex h-full w-full" ref={containerRef}>
<div className="flex w-full flex-col items-center justify-center gap-24">
<div className="grid w-full grid-cols-2 items-center justify-center gap-24">
<div className="flex w-full justify-center">
<Card
ref={nxRef}
Expand All @@ -386,7 +400,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
/>
</Card>
</div>
<div className="grid w-full grid-cols-4 items-stretch gap-4">
<div className="flex w-full flex-col items-stretch gap-4">
<Card
ref={awsRef}
onMouseEnter={() => {
Expand All @@ -402,18 +416,39 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'aws' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
<AmazonS3Icon aria-hidden="true" className="size-4" />
<Link
href="/nx-api/powerpack-s3-cache"
title="Learn how to configure Amazon S3 caching"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Amazon S3
</div>
<AmazonS3Icon aria-hidden="true" className="mt-1 size-6" />

</Link>
</Card>
<Card
ref={minioRef}
onMouseEnter={() => {
setAutoplay(false);
setSelected('minio');
}}
onMouseLeave={() => {
setAutoplay(true);
setSelected(null);
}}
className={cx(
'relative transition hover:bg-slate-50 dark:hover:bg-slate-800',
{ 'bg-slate-50 dark:bg-slate-800': selected === 'minio' }
)}
>
<MinIOIcon aria-hidden="true" className="size-4" />
<Link
href="/nx-api/powerpack-s3-cache"
title="Learn how to configure Amazon S3 caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
MinIO
</Link>
</Card>
<Card
Expand All @@ -431,18 +466,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'networkDrive' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
Network Drive
</div>
<ServerIcon aria-hidden="true" className="mt-1 size-6" />
<ServerIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-shared-fs-cache"
title="Learn how to configure network drive caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
Network Drive
</Link>
</Card>
<Card
Expand All @@ -460,18 +492,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'gcp' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
GCP
</div>
<GoogleCloudIcon aria-hidden="true" className="mt-1 size-6" />
<GoogleCloudIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-gcs-cache"
title="Learn how to configure Google Storage caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
GCP
</Link>
</Card>
<Card
Expand All @@ -489,18 +518,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'azure' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
Azure
</div>
<AzureDevOpsIcon aria-hidden="true" className="mt-1 size-6" />
<AzureDevOpsIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-azure-cache"
title="Learn how to configure Azure Blob Storage caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
Azure
</Link>
</Card>
</div>
Expand Down