docs(nxdev): homepage vertical layout (#8211)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
2d4b94ccfc
commit
f623e54b98
@ -39,12 +39,12 @@ export function DocViewer({
|
||||
<NextSeo
|
||||
noindex={version.id === 'previous'}
|
||||
title={document.data.title + ' | Nx'}
|
||||
description="Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, full monorepo support and more."
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: document.data.title + ' | Nx',
|
||||
title: document.data.title,
|
||||
description:
|
||||
'Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, full monorepo support and more.',
|
||||
'Next generation build system with first class monorepo support and powerful integrations.',
|
||||
images: [
|
||||
{
|
||||
url: router.asPath.includes('turbo-and-nx')
|
||||
@ -56,7 +56,7 @@ export function DocViewer({
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -19,12 +19,12 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
|
||||
<>
|
||||
<DefaultSeo
|
||||
title="Nx: Smart, Extensible Build Framework"
|
||||
description="Nx helps architect, test, and build at any scale: full monorepo support, integrations with modern frameworks, computation caching, smart rebuilds of affected projects, distributed task execution, powerful code generators, editor support, GitHub apps, and more."
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Nx: Smart, Extensible Build Framework',
|
||||
description:
|
||||
'Nx helps architect, test, and build at any scale: full monorepo support, integrations with modern frameworks, computation caching, smart rebuilds of affected projects, distributed task execution, powerful code generators, editor support, GitHub apps, and more.',
|
||||
'Next generation build system with first class monorepo support and powerful integrations.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/images/nx-media.jpg',
|
||||
@ -34,7 +34,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
}}
|
||||
twitter={{
|
||||
handle: '@nrwl_io',
|
||||
|
||||
@ -16,12 +16,12 @@ export function AngularPage() {
|
||||
<>
|
||||
<NextSeo
|
||||
title="Nx and Modern Angular"
|
||||
description="Nx is a suite of powerful dev tools that help developers build, test, and scale full-stack Angular applications with integration with modern libraries like Jest, Cypress, Storybook, NgRx, ESLint, full monorepo support and more."
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Nx and Modern Angular',
|
||||
description:
|
||||
'Nx is a suite of powerful dev tools that help developers build, test, and scale full-stack Angular applications with integration with modern libraries like Jest, Cypress, Storybook, NgRx, ESLint, full monorepo support and more.',
|
||||
'Next generation build system with first class monorepo support and powerful integrations.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/images/nx-media.jpg',
|
||||
@ -31,7 +31,7 @@ export function AngularPage() {
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -36,6 +36,7 @@ export function Community(props: CommunityProps) {
|
||||
<>
|
||||
<NextSeo
|
||||
title="Nx Community and Plugin Listing"
|
||||
description="There are many ways you can connect with the open-source Nx community. The community is rich and dynamic offering Nx plugins and help on multiple platforms like Github, Slack and Twitter"
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Nx and Modern Angular',
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
NpxCreateNxWorkspace,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui-common';
|
||||
import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
|
||||
import {
|
||||
AffectedCommand,
|
||||
CloudSupport,
|
||||
@ -25,7 +24,6 @@ import {
|
||||
VscodePlugin,
|
||||
YoutubeChannel,
|
||||
} from '@nrwl/nx-dev/ui-home';
|
||||
import { InlineCommand } from '@nrwl/nx-dev/ui-commands';
|
||||
|
||||
export function Index() {
|
||||
const router = useRouter();
|
||||
@ -33,8 +31,8 @@ export function Index() {
|
||||
return (
|
||||
<>
|
||||
<NextSeo
|
||||
title="Nx: Smart, Extensible Build Framework"
|
||||
description="Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, full monorepo support and more."
|
||||
title="Nx: Smart, Fast and Extensible Build System"
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev',
|
||||
title: 'Nx: Smart, Extensible Build Framework',
|
||||
@ -49,7 +47,7 @@ export function Index() {
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
@ -64,64 +62,35 @@ export function Index() {
|
||||
backgroundImage: 'url(/images/background/hero-bg-large.svg)',
|
||||
}}
|
||||
>
|
||||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 py-4 md:py-24">
|
||||
<div className="my-8 md:my-18 2xl:my-24 flex lg:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full lg:w-1/2 flex flex-col">
|
||||
<h1 className="text-center md:text-left text-4xl sm:text-5xl lg:text-6xl leading none font-extrabold tracking-tight sm:mt-10 mb-8 sm:mt-14 sm:mb-10">
|
||||
<span className="block md:inline">Smart, Extensible</span>{' '}
|
||||
Build Framework
|
||||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 py-4 md:py-18">
|
||||
<div className="my-8 md:my-18 2xl:my-24 flex flex-col items-center justify-center">
|
||||
<div className="w-full text-center flex flex-col">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-5xl leading-none font-extrabold tracking-tight sm:mt-10 mb-8 sm:mt-14 sm:mb-10">
|
||||
<span className="block lg:inline">
|
||||
Smart, Fast and Extensible
|
||||
</span>{' '}
|
||||
Build System
|
||||
</h1>
|
||||
<h2 className="text-2xl font-medium mb-1">
|
||||
Nx helps <b>architect</b>, <b>test</b>, and <b>build</b> at
|
||||
any scale:
|
||||
<h2 className="max-w-2xl mx-auto text-2xl font-semibold mb-10 sm:mb-11">
|
||||
Next generation build system with first class monorepo
|
||||
support and powerful integrations.
|
||||
</h2>
|
||||
<p className="max-w-screen-lg text-lg font-medium mb-10 sm:mb-11 flex flex-wrap">
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
integrations with modern frameworks
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
computation caching
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
smart rebuilds of affected projects
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
distributed task execution
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
powerful code generators
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
editor support
|
||||
</span>
|
||||
<span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
|
||||
GitHub apps
|
||||
</span>
|
||||
and more.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
|
||||
</div>
|
||||
<div className="max-w-2xl mx-auto hidden sm:flex w-full flex-col justify-between items-center lg:pb-0 pb-10 mt-8 lg:mt-0">
|
||||
<NpxCreateNxWorkspace />
|
||||
</div>
|
||||
<div className="my-14 flex flex-wrap sm:space-x-4 text-center">
|
||||
<Link href="#getting-started">
|
||||
<a className="w-full sm:w-auto flex-none bg-white text-blue-nx-base hover:text-blue-nx-dark hover:bg-gray-100 text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition">
|
||||
Get Started
|
||||
Create Nx Workspace
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<InlineCommand
|
||||
language={'bash'}
|
||||
command={'npx create-nx-workspace'}
|
||||
callback={() =>
|
||||
sendCustomEvent(
|
||||
'code-snippets',
|
||||
'click',
|
||||
router.pathname
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:flex w-full lg:w-1/2 flex-col justify-between items-center lg:pl-16 lg:pb-0 pb-10 mt-8 lg:mt-0">
|
||||
<NpxCreateNxWorkspace />
|
||||
<Link href="/l/r/migration/adding-to-monorepo">
|
||||
<a className="w-full sm:w-auto flex-none bg-white text-blue-nx-base hover:text-blue-nx-dark hover:bg-gray-100 text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition">
|
||||
Add Nx to Monorepo
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -60,12 +60,12 @@ export function Node() {
|
||||
<>
|
||||
<NextSeo
|
||||
title="Nx and Node"
|
||||
description="Nx is a smart and extensible build framework to help you develop, test, build, and scale Node applications and with full monorepo support."
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Nx and Node',
|
||||
description:
|
||||
'Nx is a smart and extensible build framework to help you develop, test, build, and scale Node applications and with full monorepo support.',
|
||||
'Next generation build system with first class monorepo support and powerful integrations.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/images/nx-media.jpg',
|
||||
@ -75,7 +75,7 @@ export function Node() {
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -16,12 +16,12 @@ export function ReactPage() {
|
||||
<>
|
||||
<NextSeo
|
||||
title="Nx and React"
|
||||
description="Nx dev tools help developers build, test, and scale full-stack React, Next.js, Gatsby, React Native projects and fully support for monorepo."
|
||||
description="Next generation build system with first class monorepo support and powerful integrations."
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Nx and React',
|
||||
description:
|
||||
'Nx dev tools help developers build, test, and scale full-stack React, Next.js, Gatsby, React Native projects and fully support for monorepo.',
|
||||
'Next generation build system with first class monorepo support and powerful integrations.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/images/nx-media.jpg',
|
||||
@ -31,7 +31,7 @@ export function ReactPage() {
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
site_name: 'Nx',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -9,6 +9,11 @@ Therefore, using Nx it can be fairly straightforward to scaffold and build a Mic
|
||||
|
||||
In this guide, we'll show you to how setup a Micro Frontend Architecture with Nx and Angular.
|
||||
|
||||
_NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, `import.meta` cannot be used outside of a module, and the script that is coming from is `styles.js`. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the `styles.js` file to the `index.html` in a `<script>` tag with `defer`.
|
||||
It needs to be attached with `type=module`, but doing so breaks HMR. There is no way of hooking into that process for us to patch it ourselves.
|
||||
The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file, so there's no erroneous JS to log an error.
|
||||
It's worth reiterating that there's been no actual errors or breakages noted from our tests._
|
||||
|
||||
## What we'll build
|
||||
|
||||
We will put together a simple Admin Dashboard application that requires a user to log in to view the protected content.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 111 KiB |
@ -95,7 +95,7 @@ export function NpxCreateNxWorkspaceAnimation({
|
||||
transition: { ease: 'easeOut', duration: 0.24 },
|
||||
});
|
||||
await wrapper.start({
|
||||
y: -100,
|
||||
y: -32,
|
||||
transition: { ease: 'easeOut', duration: 0.24 },
|
||||
});
|
||||
return await restartButton.start({
|
||||
@ -121,7 +121,7 @@ export function NpxCreateNxWorkspaceAnimation({
|
||||
},
|
||||
});
|
||||
await frameworkSelectionAnswerSectionArrow.start({
|
||||
y: 36,
|
||||
y: 18,
|
||||
transition: { ease: 'easeOut', duration: 0.24 },
|
||||
});
|
||||
await frameworkSelectionAnswerSectionPreviousHighlight.start({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user