281df64ba8
* docs(core): fix youtube allow=fullscreen attribute * docs(react): add video to cra-to-nx guide Co-authored-by: Isaac Mann <isaacplmann+git@gmail.com>
997 lines
67 KiB
TypeScript
997 lines
67 KiB
TypeScript
import { ReactComponentElement, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import cx from 'classnames';
|
|
import { InlineCommand } from '@nrwl/nx-dev/ui-commands';
|
|
import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
|
|
|
|
interface Tab {
|
|
id: string;
|
|
name: string;
|
|
svg: (active: boolean) => ReactComponentElement<any>;
|
|
}
|
|
|
|
function Tabs({
|
|
tabs = [],
|
|
activeTab,
|
|
setActiveTab,
|
|
}: {
|
|
tabs: Tab[];
|
|
activeTab: string;
|
|
setActiveTab: (id: string) => void;
|
|
}): ReactComponentElement<any> {
|
|
return (
|
|
<div className="mt-12 max-w-3xl mx-auto">
|
|
<div>
|
|
<div className="px-4 sm:hidden">
|
|
<label htmlFor="getting-started-tabs" className="sr-only">
|
|
Select a tab
|
|
</label>
|
|
<select
|
|
id="getting-started-tabs"
|
|
name="tabs"
|
|
className="block w-full focus:ring-blue-nx-base focus:border-blue-nx-base border-gray-300 rounded-md"
|
|
value={tabs.find((tab) => tab.id === activeTab)?.id}
|
|
onChange={(event) => setActiveTab(event.target.value)}
|
|
>
|
|
{tabs.map((tab) => (
|
|
<option key={'option-' + tab.name} value={tab.id}>
|
|
{tab.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<nav
|
|
className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
|
|
aria-label="Tabs"
|
|
>
|
|
{tabs.map((tab, tabIdx) => (
|
|
<button
|
|
key={tab.name}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={cx(
|
|
'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm uppercase text-center hover:bg-gray-50 focus:z-10 transition ease-out',
|
|
tab.id === activeTab
|
|
? 'text-gray-600 font-bold'
|
|
: 'text-gray-400 hover:text-gray-600 font-medium',
|
|
tabIdx === 0 ? 'rounded-l-lg' : '',
|
|
tabIdx === tabs.length - 1 ? 'rounded-r-lg' : ''
|
|
)}
|
|
aria-current={tab.id === activeTab ? 'page' : undefined}
|
|
>
|
|
<span className="flex items-center">
|
|
{tab.svg(tab.id === activeTab)}
|
|
<span className="flex-grow">{tab.name}</span>
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute inset-x-0 bottom-0 h-0.5"
|
|
/>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AngularPane(): ReactComponentElement<any> {
|
|
const opacityTranslateYVariant = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 46,
|
|
},
|
|
visible: (delay: number = 0) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { delay, duration: 0.32 },
|
|
}),
|
|
};
|
|
const router = useRouter();
|
|
return (
|
|
<motion.div
|
|
key={'angular'}
|
|
initial="hidden"
|
|
variants={{
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
},
|
|
},
|
|
}}
|
|
animate="visible"
|
|
transition={{
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
}}
|
|
exit="hidden"
|
|
className="mt-8"
|
|
>
|
|
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
|
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
|
|
<div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
|
|
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
|
|
Create an Angular Workspace with Nx
|
|
</h2>
|
|
<p className="mt-4 mx-4">
|
|
Get an application up and running in minutes. No need to figure
|
|
out webpack, e2e and unit test runners, linting. It all works out
|
|
of the box.
|
|
</p>
|
|
<p className="mt-4 mx-4 italic font-medium text-gray-600">
|
|
You get better linting, better testing, a faster CLI, support for
|
|
popular modern tools and libraries.
|
|
</p>
|
|
|
|
<div className="relative my-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
Angular{' '}
|
|
<Link href="/l/a/tutorial/01-create-application">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our Angular tutorial)
|
|
</a>
|
|
</Link>{' '}
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=angular'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="relative my-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.131.047c-.173 0-.334.037-.483.087.316.21.49.49.576.806.007.043.019.074.025.117a.681.681 0 0 1 .013.112c.024.545-.143.614-.26.936-.18.415-.13.861.086 1.22a.74.74 0 0 0 .074.137c-.235-1.568 1.073-1.803 1.314-2.293.019-.428-.334-.713-.613-.911a1.37 1.37 0 0 0-.732-.21zM16.102.4c-.024.143-.006.106-.012.18-.006.05-.006.112-.012.161-.013.05-.025.1-.044.149-.012.05-.03.1-.05.149l-.067.142c-.02.025-.031.05-.05.075l-.037.055a2.152 2.152 0 0 1-.093.124c-.037.038-.068.081-.112.112v.006c-.037.031-.074.068-.118.1-.13.099-.278.173-.415.266-.043.03-.087.056-.124.093a.906.906 0 0 0-.118.099c-.043.037-.074.074-.111.118-.031.037-.068.08-.093.124a1.582 1.582 0 0 0-.087.13c-.025.05-.043.093-.068.142-.019.05-.037.093-.05.143a2.007 2.007 0 0 0-.043.155c-.006.025-.006.056-.012.08-.007.025-.007.05-.013.075 0 .05-.006.105-.006.155 0 .037 0 .074.006.111 0 .05.006.1.019.155.006.05.018.1.03.15.02.049.032.098.05.148.013.03.031.062.044.087l-1.426-.552c-.241-.068-.477-.13-.719-.186l-.39-.093c-.372-.074-.75-.13-1.128-.167-.013 0-.019-.006-.031-.006A11.082 11.082 0 0 0 8.9 2.855c-.378.025-.756.074-1.134.136a12.45 12.45 0 0 0-.837.174l-.279.074c-.092.037-.18.08-.266.118l-.205.093c-.012.006-.024.006-.03.012-.063.031-.118.056-.174.087a2.738 2.738 0 0 0-.236.118c-.043.018-.086.043-.124.062a.559.559 0 0 1-.055.03c-.056.032-.112.063-.162.094a1.56 1.56 0 0 0-.148.093c-.044.03-.087.055-.124.086-.006.007-.013.007-.019.013-.037.025-.08.056-.118.087l-.012.012-.093.074c-.012.007-.025.019-.037.025-.031.025-.062.056-.093.08-.006.013-.019.02-.025.025-.037.038-.074.069-.111.106-.007 0-.007.006-.013.012a1.742 1.742 0 0 0-.111.106c-.007.006-.007.012-.013.012a1.454 1.454 0 0 0-.093.1c-.012.012-.03.024-.043.036a1.374 1.374 0 0 1-.106.112c-.006.012-.018.019-.024.03-.05.05-.093.1-.143.15l-.018.018c-.1.106-.205.211-.317.304-.111.1-.229.192-.347.273a3.777 3.777 0 0 1-.762.421c-.13.056-.267.106-.403.149-.26.056-.527.161-.756.18-.05 0-.105.012-.155.018l-.155.037-.149.056c-.05.019-.099.044-.148.068-.044.031-.093.056-.137.087a1.011 1.011 0 0 0-.124.106c-.043.03-.087.074-.124.111-.037.043-.074.08-.105.124-.031.05-.068.093-.093.143a1.092 1.092 0 0 0-.087.142c-.025.056-.05.106-.068.161-.019.05-.037.106-.056.161-.012.05-.025.1-.03.15 0 .005-.007.012-.007.018-.012.056-.012.13-.019.167C.006 7.95 0 7.986 0 8.03a.657.657 0 0 0 .074.31v.006c.019.037.044.075.069.112.024.037.05.074.08.111.031.031.068.069.106.1a.906.906 0 0 0 .117.099c.149.13.186.173.378.272.031.019.062.031.1.05.006 0 .012.006.018.006 0 .013 0 .019.006.031a1.272 1.272 0 0 0 .08.298c.02.037.032.074.05.111.007.013.013.025.02.031.024.05.049.093.073.137l.093.13c.031.037.069.08.106.118.037.037.074.068.118.105 0 0 .006.006.012.006.037.031.074.062.112.087a.986.986 0 0 0 .136.08c.043.025.093.05.142.069a.73.73 0 0 0 .124.043c.007.006.013.006.025.012.025.007.056.013.08.019-.018.335-.024.65.026.762.055.124.328-.254.6-.688-.036.428-.061.93 0 1.079.069.155.44-.329.763-.862 4.395-1.016 8.405 2.02 8.826 6.31-.08-.67-.905-1.041-1.283-.948-.186.458-.502 1.047-1.01 1.413.043-.41.025-.83-.062-1.24a4.009 4.009 0 0 1-.769 1.562c-.588.043-1.177-.242-1.487-.67-.025-.018-.031-.055-.05-.08-.018-.043-.037-.087-.05-.13a.515.515 0 0 1-.037-.13c-.006-.044-.006-.087-.006-.137v-.093a.992.992 0 0 1 .031-.13c.013-.043.025-.086.044-.13.024-.043.043-.087.074-.13.105-.298.105-.54-.087-.682a.706.706 0 0 0-.118-.062c-.024-.006-.055-.018-.08-.025l-.05-.018a.847.847 0 0 0-.13-.031.472.472 0 0 0-.13-.019 1.01 1.01 0 0 0-.136-.012c-.031 0-.062.006-.093.006a.484.484 0 0 0-.137.019c-.043.006-.086.012-.13.024a1.068 1.068 0 0 0-.13.044c-.043.018-.08.037-.124.056-.037.018-.074.043-.118.062-1.444.942-.582 3.148.403 3.787-.372.068-.75.148-.855.229l-.013.012c.267.161.546.298.837.416.397.13.818.247 1.004.297v.006a5.996 5.996 0 0 0 1.562.112c2.746-.192 4.996-2.281 5.405-5.033l.037.161c.019.112.043.23.056.347v.006c.012.056.018.112.025.162v.024c.006.056.012.112.012.162.006.068.012.136.012.204v.1c0 .03.007.067.007.098 0 .038-.007.075-.007.112v.087c0 .043-.006.08-.006.124 0 .025 0 .05-.006.08 0 .044-.006.087-.006.137-.006.018-.006.037-.006.055l-.02.143c0 .019 0 .037-.005.056-.007.062-.019.118-.025.18v.012l-.037.174v.018l-.037.167c0 .007-.007.02-.007.025a1.663 1.663 0 0 1-.043.168v.018c-.019.062-.037.118-.05.174-.006.006-.006.012-.006.012l-.056.186c-.024.062-.043.118-.068.18-.025.062-.043.124-.068.18-.025.062-.05.117-.074.18h-.007c-.024.055-.05.117-.08.173a.302.302 0 0 1-.019.043c-.006.006-.006.013-.012.019a5.867 5.867 0 0 1-1.742 2.082c-.05.031-.099.069-.149.106-.012.012-.03.018-.043.03a2.603 2.603 0 0 1-.136.094l.018.037h.007l.26-.037h.006c.161-.025.322-.056.483-.087.044-.006.093-.019.137-.031l.087-.019c.043-.006.086-.018.13-.024.037-.013.074-.02.111-.031.62-.15 1.221-.354 1.798-.595a9.926 9.926 0 0 1-3.85 3.142c.714-.05 1.426-.167 2.114-.366a9.903 9.903 0 0 0 5.857-4.68 9.893 9.893 0 0 1-1.667 3.986 9.758 9.758 0 0 0 1.655-1.376 9.824 9.824 0 0 0 2.61-5.268c.21.98.272 1.99.18 2.987 4.474-6.241.371-12.712-1.346-14.416-.006-.013-.012-.019-.012-.031-.006.006-.006.006-.006.012 0-.006 0-.006-.007-.012 0 .074-.006.148-.012.223a8.34 8.34 0 0 1-.062.415c-.03.136-.068.273-.105.41-.044.13-.093.266-.15.396a5.322 5.322 0 0 1-.185.378 4.735 4.735 0 0 1-.477.688c-.093.111-.192.21-.292.31a3.994 3.994 0 0 1-.18.155l-.142.124a3.459 3.459 0 0 1-.347.241 4.295 4.295 0 0 1-.366.211c-.13.062-.26.118-.39.174a4.364 4.364 0 0 1-.818.223c-.143.025-.285.037-.422.05a4.914 4.914 0 0 1-.297.012 4.66 4.66 0 0 1-.422-.025 3.137 3.137 0 0 1-.421-.062 3.136 3.136 0 0 1-.415-.105h-.007c.137-.013.273-.025.41-.05a4.493 4.493 0 0 0 .818-.223c.136-.05.266-.112.39-.174.13-.062.248-.13.372-.204.118-.08.235-.161.347-.248.112-.087.217-.18.316-.279.105-.093.198-.198.291-.304.093-.111.18-.223.26-.334.013-.019.026-.044.038-.062.062-.1.124-.199.18-.298a4.272 4.272 0 0 0 .334-.775c.044-.13.075-.266.106-.403.025-.142.05-.278.062-.415.012-.142.025-.285.025-.421 0-.1-.007-.199-.013-.298a6.726 6.726 0 0 0-.05-.415 4.493 4.493 0 0 0-.092-.415c-.044-.13-.087-.267-.137-.397-.05-.13-.111-.26-.173-.384-.069-.124-.137-.248-.211-.366a6.843 6.843 0 0 0-.248-.34c-.093-.106-.186-.212-.285-.317a3.878 3.878 0 0 0-.161-.155c-.28-.217-.57-.421-.862-.607a1.154 1.154 0 0 0-.124-.062 2.415 2.415 0 0 0-.589-.26Z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
Full-stack app built with Angular and Nest.js{' '}
|
|
<Link href="/l/a/tutorial/01-create-application">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our Angular tutorial)
|
|
</a>
|
|
</Link>{' '}
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=angular-nest'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
|
|
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
|
|
<iframe
|
|
className="max-w-screen-sm"
|
|
width="100%"
|
|
height="315"
|
|
src="https://www.youtube.com/embed/i37yJKK8qGI"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
|
/>
|
|
<div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<motion.div
|
|
custom={0.2}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/a/migration/migration-angular">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
AngularCLI migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to add Nx to an existing AngularCLI
|
|
project
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white border border-gray-100 bg-white">
|
|
<svg
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
className="w-6 h-6 text-[#DD0031]"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">
|
|
migration/migration-angular
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div
|
|
custom={0.6}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/a/migration/migration-angularjs">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
AngularJS migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to migrate from AngularJS to Nx
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white border border-gray-100 bg-white">
|
|
<svg
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
className="w-6 h-6 text-[#E23237]"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M11.964 0L.672 3.974l1.784 14.794L11.976 24l9.568-5.303 1.784-14.794zm-.027 1.258l10.265 3.5-1.663 13.232-8.602 4.76-8.469-4.697L1.939 4.822zm0 .78L4.957 17.57l2.604-.048 1.4-3.501h6.257l1.532 3.55 2.492.046zm.02 4.98l2.355 4.93H9.878Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">
|
|
migration/migration-angularjs
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function NodeJsPane(): ReactComponentElement<any> {
|
|
const opacityTranslateYVariant = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 46,
|
|
},
|
|
visible: (delay: number = 0) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { delay, duration: 0.32 },
|
|
}),
|
|
};
|
|
const router = useRouter();
|
|
return (
|
|
<motion.div
|
|
key={'nodejs'}
|
|
initial="hidden"
|
|
variants={{
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
},
|
|
},
|
|
}}
|
|
animate="visible"
|
|
transition={{
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
}}
|
|
exit="hidden"
|
|
className="mt-8"
|
|
>
|
|
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
|
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
|
|
<div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
|
|
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
|
|
Create a Node Workspace with Nx
|
|
</h2>
|
|
<p className="mt-4 mx-4">
|
|
Get an application up and running in minutes. No need to figure
|
|
out TypeScript compilation, e2e and unit test runners, linting. It
|
|
all works out of the box.
|
|
</p>
|
|
|
|
<div className="relative mt-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.131.047c-.173 0-.334.037-.483.087.316.21.49.49.576.806.007.043.019.074.025.117a.681.681 0 0 1 .013.112c.024.545-.143.614-.26.936-.18.415-.13.861.086 1.22a.74.74 0 0 0 .074.137c-.235-1.568 1.073-1.803 1.314-2.293.019-.428-.334-.713-.613-.911a1.37 1.37 0 0 0-.732-.21zM16.102.4c-.024.143-.006.106-.012.18-.006.05-.006.112-.012.161-.013.05-.025.1-.044.149-.012.05-.03.1-.05.149l-.067.142c-.02.025-.031.05-.05.075l-.037.055a2.152 2.152 0 0 1-.093.124c-.037.038-.068.081-.112.112v.006c-.037.031-.074.068-.118.1-.13.099-.278.173-.415.266-.043.03-.087.056-.124.093a.906.906 0 0 0-.118.099c-.043.037-.074.074-.111.118-.031.037-.068.08-.093.124a1.582 1.582 0 0 0-.087.13c-.025.05-.043.093-.068.142-.019.05-.037.093-.05.143a2.007 2.007 0 0 0-.043.155c-.006.025-.006.056-.012.08-.007.025-.007.05-.013.075 0 .05-.006.105-.006.155 0 .037 0 .074.006.111 0 .05.006.1.019.155.006.05.018.1.03.15.02.049.032.098.05.148.013.03.031.062.044.087l-1.426-.552c-.241-.068-.477-.13-.719-.186l-.39-.093c-.372-.074-.75-.13-1.128-.167-.013 0-.019-.006-.031-.006A11.082 11.082 0 0 0 8.9 2.855c-.378.025-.756.074-1.134.136a12.45 12.45 0 0 0-.837.174l-.279.074c-.092.037-.18.08-.266.118l-.205.093c-.012.006-.024.006-.03.012-.063.031-.118.056-.174.087a2.738 2.738 0 0 0-.236.118c-.043.018-.086.043-.124.062a.559.559 0 0 1-.055.03c-.056.032-.112.063-.162.094a1.56 1.56 0 0 0-.148.093c-.044.03-.087.055-.124.086-.006.007-.013.007-.019.013-.037.025-.08.056-.118.087l-.012.012-.093.074c-.012.007-.025.019-.037.025-.031.025-.062.056-.093.08-.006.013-.019.02-.025.025-.037.038-.074.069-.111.106-.007 0-.007.006-.013.012a1.742 1.742 0 0 0-.111.106c-.007.006-.007.012-.013.012a1.454 1.454 0 0 0-.093.1c-.012.012-.03.024-.043.036a1.374 1.374 0 0 1-.106.112c-.006.012-.018.019-.024.03-.05.05-.093.1-.143.15l-.018.018c-.1.106-.205.211-.317.304-.111.1-.229.192-.347.273a3.777 3.777 0 0 1-.762.421c-.13.056-.267.106-.403.149-.26.056-.527.161-.756.18-.05 0-.105.012-.155.018l-.155.037-.149.056c-.05.019-.099.044-.148.068-.044.031-.093.056-.137.087a1.011 1.011 0 0 0-.124.106c-.043.03-.087.074-.124.111-.037.043-.074.08-.105.124-.031.05-.068.093-.093.143a1.092 1.092 0 0 0-.087.142c-.025.056-.05.106-.068.161-.019.05-.037.106-.056.161-.012.05-.025.1-.03.15 0 .005-.007.012-.007.018-.012.056-.012.13-.019.167C.006 7.95 0 7.986 0 8.03a.657.657 0 0 0 .074.31v.006c.019.037.044.075.069.112.024.037.05.074.08.111.031.031.068.069.106.1a.906.906 0 0 0 .117.099c.149.13.186.173.378.272.031.019.062.031.1.05.006 0 .012.006.018.006 0 .013 0 .019.006.031a1.272 1.272 0 0 0 .08.298c.02.037.032.074.05.111.007.013.013.025.02.031.024.05.049.093.073.137l.093.13c.031.037.069.08.106.118.037.037.074.068.118.105 0 0 .006.006.012.006.037.031.074.062.112.087a.986.986 0 0 0 .136.08c.043.025.093.05.142.069a.73.73 0 0 0 .124.043c.007.006.013.006.025.012.025.007.056.013.08.019-.018.335-.024.65.026.762.055.124.328-.254.6-.688-.036.428-.061.93 0 1.079.069.155.44-.329.763-.862 4.395-1.016 8.405 2.02 8.826 6.31-.08-.67-.905-1.041-1.283-.948-.186.458-.502 1.047-1.01 1.413.043-.41.025-.83-.062-1.24a4.009 4.009 0 0 1-.769 1.562c-.588.043-1.177-.242-1.487-.67-.025-.018-.031-.055-.05-.08-.018-.043-.037-.087-.05-.13a.515.515 0 0 1-.037-.13c-.006-.044-.006-.087-.006-.137v-.093a.992.992 0 0 1 .031-.13c.013-.043.025-.086.044-.13.024-.043.043-.087.074-.13.105-.298.105-.54-.087-.682a.706.706 0 0 0-.118-.062c-.024-.006-.055-.018-.08-.025l-.05-.018a.847.847 0 0 0-.13-.031.472.472 0 0 0-.13-.019 1.01 1.01 0 0 0-.136-.012c-.031 0-.062.006-.093.006a.484.484 0 0 0-.137.019c-.043.006-.086.012-.13.024a1.068 1.068 0 0 0-.13.044c-.043.018-.08.037-.124.056-.037.018-.074.043-.118.062-1.444.942-.582 3.148.403 3.787-.372.068-.75.148-.855.229l-.013.012c.267.161.546.298.837.416.397.13.818.247 1.004.297v.006a5.996 5.996 0 0 0 1.562.112c2.746-.192 4.996-2.281 5.405-5.033l.037.161c.019.112.043.23.056.347v.006c.012.056.018.112.025.162v.024c.006.056.012.112.012.162.006.068.012.136.012.204v.1c0 .03.007.067.007.098 0 .038-.007.075-.007.112v.087c0 .043-.006.08-.006.124 0 .025 0 .05-.006.08 0 .044-.006.087-.006.137-.006.018-.006.037-.006.055l-.02.143c0 .019 0 .037-.005.056-.007.062-.019.118-.025.18v.012l-.037.174v.018l-.037.167c0 .007-.007.02-.007.025a1.663 1.663 0 0 1-.043.168v.018c-.019.062-.037.118-.05.174-.006.006-.006.012-.006.012l-.056.186c-.024.062-.043.118-.068.18-.025.062-.043.124-.068.18-.025.062-.05.117-.074.18h-.007c-.024.055-.05.117-.08.173a.302.302 0 0 1-.019.043c-.006.006-.006.013-.012.019a5.867 5.867 0 0 1-1.742 2.082c-.05.031-.099.069-.149.106-.012.012-.03.018-.043.03a2.603 2.603 0 0 1-.136.094l.018.037h.007l.26-.037h.006c.161-.025.322-.056.483-.087.044-.006.093-.019.137-.031l.087-.019c.043-.006.086-.018.13-.024.037-.013.074-.02.111-.031.62-.15 1.221-.354 1.798-.595a9.926 9.926 0 0 1-3.85 3.142c.714-.05 1.426-.167 2.114-.366a9.903 9.903 0 0 0 5.857-4.68 9.893 9.893 0 0 1-1.667 3.986 9.758 9.758 0 0 0 1.655-1.376 9.824 9.824 0 0 0 2.61-5.268c.21.98.272 1.99.18 2.987 4.474-6.241.371-12.712-1.346-14.416-.006-.013-.012-.019-.012-.031-.006.006-.006.006-.006.012 0-.006 0-.006-.007-.012 0 .074-.006.148-.012.223a8.34 8.34 0 0 1-.062.415c-.03.136-.068.273-.105.41-.044.13-.093.266-.15.396a5.322 5.322 0 0 1-.185.378 4.735 4.735 0 0 1-.477.688c-.093.111-.192.21-.292.31a3.994 3.994 0 0 1-.18.155l-.142.124a3.459 3.459 0 0 1-.347.241 4.295 4.295 0 0 1-.366.211c-.13.062-.26.118-.39.174a4.364 4.364 0 0 1-.818.223c-.143.025-.285.037-.422.05a4.914 4.914 0 0 1-.297.012 4.66 4.66 0 0 1-.422-.025 3.137 3.137 0 0 1-.421-.062 3.136 3.136 0 0 1-.415-.105h-.007c.137-.013.273-.025.41-.05a4.493 4.493 0 0 0 .818-.223c.136-.05.266-.112.39-.174.13-.062.248-.13.372-.204.118-.08.235-.161.347-.248.112-.087.217-.18.316-.279.105-.093.198-.198.291-.304.093-.111.18-.223.26-.334.013-.019.026-.044.038-.062.062-.1.124-.199.18-.298a4.272 4.272 0 0 0 .334-.775c.044-.13.075-.266.106-.403.025-.142.05-.278.062-.415.012-.142.025-.285.025-.421 0-.1-.007-.199-.013-.298a6.726 6.726 0 0 0-.05-.415 4.493 4.493 0 0 0-.092-.415c-.044-.13-.087-.267-.137-.397-.05-.13-.111-.26-.173-.384-.069-.124-.137-.248-.211-.366a6.843 6.843 0 0 0-.248-.34c-.093-.106-.186-.212-.285-.317a3.878 3.878 0 0 0-.161-.155c-.28-.217-.57-.421-.862-.607a1.154 1.154 0 0 0-.124-.062 2.415 2.415 0 0 0-.589-.26Z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
NestJS{' '}
|
|
<Link href="/l/n/tutorial/01-create-application">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our Nest tutorial)
|
|
</a>
|
|
</Link>{' '}
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=nest'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="relative my-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M24 18.588a1.529 1.529 0 01-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 01-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 011.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 011.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 000 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 002.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 01-2.589 3.957 6.272 6.272 0 01-7.306-.933 6.575 6.575 0 01-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 010 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">Express </h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=express'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
|
|
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
|
|
<iframe
|
|
className="max-w-screen-sm"
|
|
width="100%"
|
|
height="315"
|
|
src="https://www.youtube.com/embed/UcBSBQYNlhE"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
|
/>
|
|
<div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<motion.div
|
|
custom={0.2}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/n/migration/adding-to-monorepo">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
Lerna migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to migrate from Lerna to Nx
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
|
|
<img
|
|
className="h-6 w-6 filter invert"
|
|
src="/images/lerna-logo.svg"
|
|
alt="Migrating to Nx from Lerna"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">migration/lerna-yarn-pnpm</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function ReactPane(): ReactComponentElement<any> {
|
|
const opacityTranslateYVariant = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 46,
|
|
},
|
|
visible: (delay: number = 0) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { delay, duration: 0.32 },
|
|
}),
|
|
};
|
|
const router = useRouter();
|
|
return (
|
|
<motion.div
|
|
key={'react'}
|
|
initial="hidden"
|
|
variants={{
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
},
|
|
},
|
|
}}
|
|
animate="visible"
|
|
transition={{
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
}}
|
|
exit="hidden"
|
|
className="mt-8"
|
|
>
|
|
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
|
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
|
|
<div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
|
|
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
|
|
Create a React Workspace with Nx
|
|
</h2>
|
|
<p className="mt-4 mx-4">
|
|
Get an application up and running in minutes. No need to figure
|
|
out webpack, e2e and unit test runners, linting. It all works out
|
|
of the box.
|
|
</p>
|
|
|
|
<div className="relative mt-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
React{' '}
|
|
<Link href="/l/r/tutorial/01-create-application">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our React tutorial)
|
|
</a>
|
|
</Link>{' '}
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=react'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative mt-6 pl-14 pr-4">
|
|
{/*<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
|
</svg>*/}
|
|
<h3 className="mt-2 font-semibold">React Native</h3>
|
|
|
|
<div className="mt-2 max-w-full inline-flex">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=react-native'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative my-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
Next.js{' '}
|
|
<Link href="/l/r/guides/nextjs">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our Next.js guide)
|
|
</a>
|
|
</Link>{' '}
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=next'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
|
|
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
|
|
<iframe
|
|
className="max-w-screen-sm"
|
|
width="100%"
|
|
height="315"
|
|
src="https://www.youtube.com/embed/HcQE5R6ucng"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
|
/>
|
|
<div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<motion.div
|
|
custom={0.2}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/r/migration/migration-cra">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
CRA migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to migrate from CRA to Nx
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white bg-gray-600">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className="w-6 h-6 text-[#09D3AC]"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">migration/migration-cra</p>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div
|
|
custom={0.6}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/r/migration/adding-to-monorepo">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
Lerna migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to migrate from Lerna to Nx
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
|
|
<img
|
|
className="h-6 w-6 filter invert"
|
|
src="/images/lerna-logo.svg"
|
|
alt="Migrating to Nx from Lerna"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">migration/lerna-yarn-pnpm</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function TypescriptPane(): ReactComponentElement<any> {
|
|
const opacityTranslateYVariant = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 46,
|
|
},
|
|
visible: (delay: number = 0) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { delay, duration: 0.32 },
|
|
}),
|
|
};
|
|
const router = useRouter();
|
|
return (
|
|
<motion.div
|
|
key={'typescript'}
|
|
initial="hidden"
|
|
variants={{
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
},
|
|
},
|
|
}}
|
|
animate="visible"
|
|
transition={{
|
|
when: 'beforeChildren',
|
|
staggerChildren: 0.12,
|
|
ease: 'linear',
|
|
duration: 0.24,
|
|
type: 'tween',
|
|
}}
|
|
exit="hidden"
|
|
className="mt-8"
|
|
>
|
|
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
|
|
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
|
|
<div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
|
|
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
|
|
Create a TypeScript/JavaScript Workspace with Nx
|
|
</h2>
|
|
<p className="mt-4 mx-4">
|
|
Create an empty workspace where you can create TypeScript or
|
|
JavaScript projects. You can build/test/lint them either yourself
|
|
or using Nx plugins.
|
|
</p>
|
|
|
|
<div className="relative my-6 pl-14 pr-4">
|
|
<svg
|
|
className="absolute left-4 top-0 w-6 h-6"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
|
|
</svg>
|
|
<h3 className="mt-2 font-semibold">
|
|
TypeScript/JavaScript{' '}
|
|
<Link href="/getting-started/nx-core">
|
|
<a className="italic font-normal text-sm text-gray-600 hover:underline">
|
|
(follow our Nx Core tutorial)
|
|
</a>
|
|
</Link>
|
|
</h3>
|
|
|
|
<div className="mt-2 inline-flex max-w-full">
|
|
<InlineCommand
|
|
language={'bash'}
|
|
command={'npx create-nx-workspace --preset=npm'}
|
|
callback={() =>
|
|
sendCustomEvent('code-snippets', 'click', router.pathname)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
|
|
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
|
|
<iframe
|
|
className="max-w-screen-sm"
|
|
width="100%"
|
|
height="315"
|
|
src="https://www.youtube.com/embed/HcQE5R6ucng"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
|
/>
|
|
<div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<motion.div
|
|
custom={0.2}
|
|
variants={opacityTranslateYVariant}
|
|
className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
|
|
>
|
|
<div className="px-4 py-3 flex w-full">
|
|
<div className="flex-1 min-w-0">
|
|
<Link href="/l/n/migration/adding-to-monorepo">
|
|
<a className="focus:outline-none">
|
|
<span className="absolute inset-0" aria-hidden="true" />
|
|
<p className="mb-0.5 text-md font-bold text-gray-600">
|
|
Lerna migration
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Follow this guide to migrate from Lerna to Nx
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
|
|
<img
|
|
className="h-6 w-6 filter invert"
|
|
src="/images/lerna-logo.svg"
|
|
alt="Migrating to Nx from Lerna"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs font-bold">migration/lerna-yarn-pnpm</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export function GettingStarted(): ReactComponentElement<any> {
|
|
const tabs: Tab[] = [
|
|
{
|
|
id: 'typescript',
|
|
name: 'Typescript',
|
|
svg: (active) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className={cx(
|
|
'w-8 h-8 flex-shrink-0 group-hover:text-[#3178C6] transition ease-out',
|
|
active ? 'text-[#3178C6]' : 'text-gray-400'
|
|
)}
|
|
fill="currentColor"
|
|
>
|
|
<path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: 'react',
|
|
name: 'React',
|
|
svg: (active) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className={cx(
|
|
'w-8 h-8 flex-shrink-0 group-hover:text-[#52C1DE] transition ease-out',
|
|
active ? 'text-[#52C1DE]' : 'text-gray-400'
|
|
)}
|
|
fill="currentColor"
|
|
>
|
|
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: 'angular',
|
|
name: 'Angular',
|
|
svg: (active) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className={cx(
|
|
'w-8 h-8 flex-shrink-0 group-hover:text-[#E2431F] transition ease-out',
|
|
active ? 'text-[#E2431F]' : 'text-gray-400'
|
|
)}
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: 'nodejs',
|
|
name: 'NodeJS',
|
|
svg: (active) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className={cx(
|
|
'w-8 h-8 flex-shrink-0 group-hover:text-[#77AE64] transition ease-out',
|
|
active ? 'text-[#77AE64]' : 'text-gray-400'
|
|
)}
|
|
fill="currentColor"
|
|
>
|
|
<path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
const panes: {
|
|
id: string;
|
|
element: () => ReactComponentElement<any>;
|
|
}[] = [
|
|
{
|
|
id: 'angular',
|
|
element: AngularPane,
|
|
},
|
|
{
|
|
id: 'nodejs',
|
|
element: NodeJsPane,
|
|
},
|
|
{
|
|
id: 'react',
|
|
element: ReactPane,
|
|
},
|
|
{
|
|
id: 'typescript',
|
|
element: TypescriptPane,
|
|
},
|
|
];
|
|
const [activeId, setActiveId] = useState('typescript');
|
|
|
|
return (
|
|
<div id="getting-started">
|
|
<Tabs tabs={tabs} activeTab={activeId} setActiveTab={setActiveId} />
|
|
<AnimatePresence>
|
|
{panes.find((pane) => pane.id === activeId)?.element()}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GettingStarted;
|