Skip to content

Commit 09c0b3d

Browse files
ndcunninghamndcunningham
authored
feat(nx-dev): Migrate brands from nx.app (nrwl#27044)
1 parent 8f5d3dc commit 09c0b3d

24 files changed

+573
-12
lines changed

‎nx-dev/nx-dev/app/brands/page.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { DefaultLayout } from '@nx/nx-dev/ui-common';
2+
import {
3+
Hero,
4+
LernaBrand,
5+
NxBrand,
6+
NxCloudBrand,
7+
NxConsoleBrand,
8+
} from '@nx/nx-dev/ui-brands';
9+
import type { Metadata } from 'next';
10+
11+
export const metadata: Metadata = {
12+
title: 'Brands & Guidelines',
13+
description:
14+
'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
15+
openGraph: {
16+
url: 'https://nx.dev/brands',
17+
title: 'Brands & Guidelines',
18+
description:
19+
'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
20+
images: [
21+
{
22+
url: 'https://nx.dev/socials/nx-media.png',
23+
width: 800,
24+
height: 421,
25+
alt: 'Nx: Smart Monorepos · Fast CI',
26+
type: 'image/jpeg',
27+
},
28+
],
29+
siteName: 'NxDev',
30+
type: 'website',
31+
},
32+
};
33+
34+
export default function BrandsPage() {
35+
return (
36+
<DefaultLayout>
37+
<Hero />
38+
<div className="mt-32 lg:mt-56">
39+
<NxBrand />
40+
</div>
41+
<div className="mt-32 lg:mt-56">
42+
<NxCloudBrand />
43+
</div>
44+
<div className="mt-32 lg:mt-56">
45+
<NxConsoleBrand />
46+
</div>
47+
<div className="mt-32 lg:mt-56">
48+
<LernaBrand />
49+
</div>
50+
</DefaultLayout>
51+
);
52+
}

‎nx-dev/nx-dev/public/assets/brand-kits/lerna-logos-assets.zip

988 KB
Binary file not shown.

‎nx-dev/nx-dev/public/assets/brand-kits/nx-cloud-logos-assets.zip

64.1 KB
Binary file not shown.

‎nx-dev/nx-dev/public/assets/brand-kits/nx-console-logos-assets.zip

161 KB
Binary file not shown.

‎nx-dev/nx-dev/public/assets/brand-kits/nx-logos-assets.zip

52.8 KB
Binary file not shown.

‎nx-dev/ui-brands/.babelrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
[
4+
"@nx/react/babel",
5+
{
6+
"runtime": "automatic",
7+
"useBuiltIns": "usage"
8+
}
9+
]
10+
],
11+
"plugins": []
12+
}

‎nx-dev/ui-brands/.eslintrc.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

‎nx-dev/ui-brands/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# ui-brands
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test ui-brands` to execute the unit tests via [Jest](https://jestjs.io).

‎nx-dev/ui-brands/project.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "ui-brands",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "nx-dev/ui-brands/src",
5+
"projectType": "library",
6+
"tags": [],
7+
"// targets": "to see all targets run: nx show project ui-brands --web",
8+
"targets": {}
9+
}

‎nx-dev/ui-brands/src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export * from './lib/hero';
2+
export * from './lib/nx-brand';
3+
export * from './lib/nx-cloud';
4+
export * from './lib/lerna-brand';
5+
export * from './lib/nx-console-brand';

‎nx-dev/ui-brands/src/lib/hero.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { SectionHeading } from '@nx/nx-dev/ui-common';
2+
3+
export function Hero() {
4+
return (
5+
<div
6+
id="hero"
7+
className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8"
8+
>
9+
<SectionHeading as="h2" variant="display">
10+
Brands & Guidelines
11+
</SectionHeading>
12+
<SectionHeading as="p" variant="subtitle" className="mt-6">
13+
We’ve created the following guidelines for 3rd party use of our logos,
14+
content, and trademarks.
15+
</SectionHeading>
16+
</div>
17+
);
18+
}

‎nx-dev/ui-brands/src/lib/lerna-brand.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
2+
import {
3+
ButtonLink,
4+
SectionDescription,
5+
SectionHeading,
6+
} from '@nx/nx-dev/ui-common';
7+
import { LernaIcon } from '@nx/nx-dev/ui-icons';
8+
9+
export function LernaBrand() {
10+
return (
11+
<article id="lerna" className="relative">
12+
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
13+
<div>
14+
<header>
15+
<SectionHeading as="h2" variant="title">
16+
Lerna
17+
</SectionHeading>
18+
<SectionHeading as="p" variant="subtitle" className="mt-4">
19+
The Original Tool forJavaScript Monorepos
20+
</SectionHeading>
21+
<SectionDescription as="p" className="mt-2">
22+
The Lerna trademark includes the Lerna name & logo, and any word,
23+
phrase, image, or other designation that identifies any Nrwl
24+
products. Please don’t modify the marks or use them in a confusing
25+
way, including suggesting sponsorship or endorsement by Nrwl, or
26+
in a way that confuses Nrwl with another brand.
27+
</SectionDescription>
28+
</header>
29+
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
30+
Spelling
31+
</h4>
32+
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
33+
The preferred written format is Lerna. <br /> For social media
34+
usage,
35+
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
36+
#Lerna
37+
</span>{' '}
38+
is an accepted format.
39+
</p>
40+
<ButtonLink
41+
variant="secondary"
42+
href="/assets/brand-kits/lerna-logos-assets.zip"
43+
size="default"
44+
target="_blank"
45+
title="Download"
46+
className="my-12"
47+
>
48+
<DocumentArrowDownIcon className="h-5 w-5" />
49+
<span>
50+
Download Lerna assets{' '}
51+
<span className="text-sm italic">(zip)</span>
52+
</span>
53+
</ButtonLink>
54+
</div>
55+
<div aria-hidden="true">
56+
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
57+
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
58+
<LernaIcon className="m-16 h-36 w-36 text-slate-900 dark:text-slate-100" />
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</article>
64+
);
65+
}

‎nx-dev/ui-brands/src/lib/nx-brand.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
2+
import {
3+
ButtonLink,
4+
SectionDescription,
5+
SectionHeading,
6+
} from '@nx/nx-dev/ui-common';
7+
import { NxIcon } from '@nx/nx-dev/ui-icons';
8+
9+
export function NxBrand() {
10+
return (
11+
<article id="nx" className="relative">
12+
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
13+
<div>
14+
<header>
15+
<SectionHeading as="h2" variant="title">
16+
Nx
17+
</SectionHeading>
18+
<SectionHeading as="p" variant="subtitle" className="mt-4">
19+
Smart monorepos · Fast CI
20+
</SectionHeading>
21+
<SectionDescription as="p" className="mt-2">
22+
The Nx trademark includes the Nx name & logo, and any word,
23+
phrase, image, or other designation that identifies any NX
24+
products. Please don’t modify the marks or use them in a confusing
25+
way, including suggesting sponsorship or endorsement by Nx, or in
26+
a way that confuses Nx with another brand.
27+
</SectionDescription>
28+
</header>
29+
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
30+
Spelling
31+
</h4>
32+
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
33+
The preferred written format is Nx. <br /> For social media usage,
34+
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
35+
#NxDevTools
36+
</span>{' '}
37+
is an accepted format.
38+
</p>
39+
<ButtonLink
40+
variant="secondary"
41+
size="default"
42+
target="_blank"
43+
title="Download"
44+
href="/assets/brand-kits/nx-logos-assets.zip"
45+
className="my-12"
46+
>
47+
<DocumentArrowDownIcon className="h-5 w-5" />
48+
<span>
49+
Download Nx assets <span className="text-sm italic">(zip)</span>
50+
</span>
51+
</ButtonLink>
52+
</div>
53+
<div aria-hidden="true">
54+
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
55+
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
56+
<NxIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</article>
62+
);
63+
}

‎nx-dev/ui-brands/src/lib/nx-cloud.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
2+
import {
3+
ButtonLink,
4+
SectionDescription,
5+
SectionHeading,
6+
} from '@nx/nx-dev/ui-common';
7+
import { NxCloudIcon } from '@nx/nx-dev/ui-icons';
8+
9+
export function NxCloudBrand() {
10+
return (
11+
<article id="nx-cloud" className="relative">
12+
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
13+
<div>
14+
<header>
15+
<SectionHeading as="h2" variant="title">
16+
Nx Cloud
17+
</SectionHeading>
18+
<SectionHeading as="p" variant="subtitle" className="mt-4">
19+
Fast CI · Built for Monorepos
20+
</SectionHeading>
21+
<SectionDescription as="p" className="mt-2">
22+
The Nx Cloud trademark includes the Nx Cloud name & logo, and any
23+
word, phrase, image, or other designation that identifies any Nx
24+
products. Please don’t modify the marks or use them in a confusing
25+
way, including suggesting sponsorship or endorsement by Nx, or in
26+
a way that confuses Nx with another brand.
27+
</SectionDescription>
28+
</header>
29+
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
30+
Spelling
31+
</h4>
32+
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
33+
The preferred written format is Nx Cloud. <br /> For social media
34+
usage,
35+
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
36+
#NxCloud
37+
</span>{' '}
38+
is an accepted format.
39+
</p>
40+
<ButtonLink
41+
variant="secondary"
42+
size="default"
43+
href="/assets/brand-kits/nx-cloud-logos-assets.zip"
44+
target="_blank"
45+
title="Download"
46+
className="my-12"
47+
>
48+
<DocumentArrowDownIcon className="h-5 w-5" />
49+
<span>
50+
Download Nx Cloud assets{' '}
51+
<span className="text-sm italic">(zip)</span>
52+
</span>
53+
</ButtonLink>
54+
</div>
55+
<div aria-hidden="true">
56+
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
57+
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
58+
<NxCloudIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</article>
64+
);
65+
}

‎nx-dev/ui-brands/src/lib/nx-console-brand.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
2+
import {
3+
ButtonLink,
4+
SectionDescription,
5+
SectionHeading,
6+
} from '@nx/nx-dev/ui-common';
7+
import { NxConsoleIcon } from '@nx/nx-dev/ui-icons';
8+
9+
export function NxConsoleBrand() {
10+
return (
11+
<article id="nx-console" className="relative">
12+
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
13+
<div>
14+
<header>
15+
<SectionHeading as="h2" variant="title">
16+
Nx Console
17+
</SectionHeading>
18+
<SectionHeading as="p" variant="subtitle" className="mt-4">
19+
The UI for Nx (VSCode ext.)
20+
</SectionHeading>
21+
<SectionDescription as="p" className="mt-2">
22+
The Nx Console trademark includes the Nx Console name & logo, and
23+
any word, phrase, image, or other designation that identifies any
24+
Nx products. Please don’t modify the marks or use them in a
25+
confusing way, including suggesting sponsorship or endorsement by
26+
Nx, or in a way that confuses Nx with another brand.
27+
</SectionDescription>
28+
</header>
29+
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
30+
Spelling
31+
</h4>
32+
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
33+
The preferred written format is Nx Console. <br /> For social media
34+
usage,
35+
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
36+
#NxConsole
37+
</span>{' '}
38+
is an accepted format.
39+
</p>
40+
<ButtonLink
41+
variant="secondary"
42+
size="default"
43+
href="/assets/brand-kits/nx-console-logos-assets.zip"
44+
target="_blank"
45+
title="Download"
46+
className="my-12"
47+
>
48+
<DocumentArrowDownIcon className="h-5 w-5" />
49+
<span>
50+
Download Nx Console assets{' '}
51+
<span className="text-sm italic">(zip)</span>
52+
</span>
53+
</ButtonLink>
54+
</div>
55+
<div aria-hidden="true">
56+
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
57+
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
58+
<NxConsoleIcon className="m-16 h-40 w-40 text-slate-900 dark:text-slate-100" />
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</article>
64+
);
65+
}

0 commit comments

Comments
 (0)