feat(nx-dev): Migrate brands from nx.app (#27044)

(cherry picked from commit 09c0b3d)

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

@@ -0,0 +1,52 @@
+import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import {
+  Hero,
+  LernaBrand,
+  NxBrand,
+  NxCloudBrand,
+  NxConsoleBrand,
+} from '@nx/nx-dev/ui-brands';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Brands & Guidelines',
+  description:
+    'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
+  openGraph: {
+    url: 'https://nx.dev/brands',
+    title: 'Brands & Guidelines',
+    description:
+      'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
+    images: [
+      {
+        url: 'https://nx.dev/socials/nx-media.png',
+        width: 800,
+        height: 421,
+        alt: 'Nx: Smart Monorepos · Fast CI',
+        type: 'image/jpeg',
+      },
+    ],
+    siteName: 'NxDev',
+    type: 'website',
+  },
+};
+
+export default function BrandsPage() {
+  return (
+    <DefaultLayout>
+      <Hero />
+      <div className="mt-32 lg:mt-56">
+        <NxBrand />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <NxCloudBrand />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <NxConsoleBrand />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <LernaBrand />
+      </div>
+    </DefaultLayout>
+  );
+}

nx-dev/ui-brands/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

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

@@ -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": {}
+    }
+  ]
+}

nx-dev/ui-brands/README.md

@@ -0,0 +1,7 @@
+# ui-brands
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-brands` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/ui-brands/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "ui-brands",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-brands/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project ui-brands --web",
+  "targets": {}
+}

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

@@ -0,0 +1,5 @@
+export * from './lib/hero';
+export * from './lib/nx-brand';
+export * from './lib/nx-cloud';
+export * from './lib/lerna-brand';
+export * from './lib/nx-console-brand';

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

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

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

@@ -0,0 +1,65 @@
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import {
+  ButtonLink,
+  SectionDescription,
+  SectionHeading,
+} from '@nx/nx-dev/ui-common';
+import { LernaIcon } from '@nx/nx-dev/ui-icons';
+
+export function LernaBrand() {
+  return (
+    <article id="lerna" className="relative">
+      <div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
+        <div>
+          <header>
+            <SectionHeading as="h2" variant="title">
+              Lerna
+            </SectionHeading>
+            <SectionHeading as="p" variant="subtitle" className="mt-4">
+              The Original Tool forJavaScript Monorepos
+            </SectionHeading>
+            <SectionDescription as="p" className="mt-2">
+              The Lerna trademark includes the Lerna name & logo, and any word,
+              phrase, image, or other designation that identifies any Nrwl
+              products. Please don’t modify the marks or use them in a confusing
+              way, including suggesting sponsorship or endorsement by Nrwl, or
+              in a way that confuses Nrwl with another brand.
+            </SectionDescription>
+          </header>
+          <h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
+            Spelling
+          </h4>
+          <p className="mt-2 text-base text-slate-700 dark:text-slate-400">
+            The preferred written format is Lerna. <br /> For social media
+            usage,
+            <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">
+              #Lerna
+            </span>{' '}
+            is an accepted format.
+          </p>
+          <ButtonLink
+            variant="secondary"
+            href="/assets/brand-kits/lerna-logos-assets.zip"
+            size="default"
+            target="_blank"
+            title="Download"
+            className="my-12"
+          >
+            <DocumentArrowDownIcon className="h-5 w-5" />
+            <span>
+              Download Lerna assets{' '}
+              <span className="text-sm italic">(zip)</span>
+            </span>
+          </ButtonLink>
+        </div>
+        <div aria-hidden="true">
+          <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">
+            <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">
+              <LernaIcon className="m-16 h-36 w-36 text-slate-900 dark:text-slate-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import {
+  ButtonLink,
+  SectionDescription,
+  SectionHeading,
+} from '@nx/nx-dev/ui-common';
+import { NxIcon } from '@nx/nx-dev/ui-icons';
+
+export function NxBrand() {
+  return (
+    <article id="nx" className="relative">
+      <div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
+        <div>
+          <header>
+            <SectionHeading as="h2" variant="title">
+              Nx
+            </SectionHeading>
+            <SectionHeading as="p" variant="subtitle" className="mt-4">
+              Smart monorepos · Fast CI
+            </SectionHeading>
+            <SectionDescription as="p" className="mt-2">
+              The Nx trademark includes the Nx name & logo, and any word,
+              phrase, image, or other designation that identifies any NX
+              products. Please don’t modify the marks or use them in a confusing
+              way, including suggesting sponsorship or endorsement by Nx, or in
+              a way that confuses Nx with another brand.
+            </SectionDescription>
+          </header>
+          <h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
+            Spelling
+          </h4>
+          <p className="mt-2 text-base text-slate-700 dark:text-slate-400">
+            The preferred written format is Nx. <br /> For social media usage,
+            <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">
+              #NxDevTools
+            </span>{' '}
+            is an accepted format.
+          </p>
+          <ButtonLink
+            variant="secondary"
+            size="default"
+            target="_blank"
+            title="Download"
+            href="/assets/brand-kits/nx-logos-assets.zip"
+            className="my-12"
+          >
+            <DocumentArrowDownIcon className="h-5 w-5" />
+            <span>
+              Download Nx assets <span className="text-sm italic">(zip)</span>
+            </span>
+          </ButtonLink>
+        </div>
+        <div aria-hidden="true">
+          <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">
+            <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">
+              <NxIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import {
+  ButtonLink,
+  SectionDescription,
+  SectionHeading,
+} from '@nx/nx-dev/ui-common';
+import { NxCloudIcon } from '@nx/nx-dev/ui-icons';
+
+export function NxCloudBrand() {
+  return (
+    <article id="nx-cloud" className="relative">
+      <div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
+        <div>
+          <header>
+            <SectionHeading as="h2" variant="title">
+              Nx Cloud
+            </SectionHeading>
+            <SectionHeading as="p" variant="subtitle" className="mt-4">
+              Fast CI · Built for Monorepos
+            </SectionHeading>
+            <SectionDescription as="p" className="mt-2">
+              The Nx Cloud trademark includes the Nx Cloud name & logo, and any
+              word, phrase, image, or other designation that identifies any Nx
+              products. Please don’t modify the marks or use them in a confusing
+              way, including suggesting sponsorship or endorsement by Nx, or in
+              a way that confuses Nx with another brand.
+            </SectionDescription>
+          </header>
+          <h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
+            Spelling
+          </h4>
+          <p className="mt-2 text-base text-slate-700 dark:text-slate-400">
+            The preferred written format is Nx Cloud. <br /> For social media
+            usage,
+            <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">
+              #NxCloud
+            </span>{' '}
+            is an accepted format.
+          </p>
+          <ButtonLink
+            variant="secondary"
+            size="default"
+            href="/assets/brand-kits/nx-cloud-logos-assets.zip"
+            target="_blank"
+            title="Download"
+            className="my-12"
+          >
+            <DocumentArrowDownIcon className="h-5 w-5" />
+            <span>
+              Download Nx Cloud assets{' '}
+              <span className="text-sm italic">(zip)</span>
+            </span>
+          </ButtonLink>
+        </div>
+        <div aria-hidden="true">
+          <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">
+            <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">
+              <NxCloudIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import {
+  ButtonLink,
+  SectionDescription,
+  SectionHeading,
+} from '@nx/nx-dev/ui-common';
+import { NxConsoleIcon } from '@nx/nx-dev/ui-icons';
+
+export function NxConsoleBrand() {
+  return (
+    <article id="nx-console" className="relative">
+      <div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
+        <div>
+          <header>
+            <SectionHeading as="h2" variant="title">
+              Nx Console
+            </SectionHeading>
+            <SectionHeading as="p" variant="subtitle" className="mt-4">
+              The UI for Nx (VSCode ext.)
+            </SectionHeading>
+            <SectionDescription as="p" className="mt-2">
+              The Nx Console trademark includes the Nx Console name & logo, and
+              any word, phrase, image, or other designation that identifies any
+              Nx products. Please don’t modify the marks or use them in a
+              confusing way, including suggesting sponsorship or endorsement by
+              Nx, or in a way that confuses Nx with another brand.
+            </SectionDescription>
+          </header>
+          <h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
+            Spelling
+          </h4>
+          <p className="mt-2 text-base text-slate-700 dark:text-slate-400">
+            The preferred written format is Nx Console. <br /> For social media
+            usage,
+            <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">
+              #NxConsole
+            </span>{' '}
+            is an accepted format.
+          </p>
+          <ButtonLink
+            variant="secondary"
+            size="default"
+            href="/assets/brand-kits/nx-console-logos-assets.zip"
+            target="_blank"
+            title="Download"
+            className="my-12"
+          >
+            <DocumentArrowDownIcon className="h-5 w-5" />
+            <span>
+              Download Nx Console assets{' '}
+              <span className="text-sm italic">(zip)</span>
+            </span>
+          </ButtonLink>
+        </div>
+        <div aria-hidden="true">
+          <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">
+            <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">
+              <NxConsoleIcon className="m-16 h-40 w-40 text-slate-900 dark:text-slate-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}