miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(core): use prettier tailwindcss plugin (#8856)

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-02-04 15:38:06 -05:00 committed by GitHub
parent e2330f0667
commit 045c8dc9eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 548 additions and 542 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dep-graph/client/src/app/debugger-panel.tsx
View File

@ -19,20 +19,20 @@ export const DebuggerPanel = memo(function ({
<div
id="debugger-panel"
className="
flex-column
flex
w-auto
text-gray-700
bg-gray-50
border-b border-gray-200
p-4
flex flex-column
items-center
justify-items-center
items-center justify-items-center
gap-4
border-b border-gray-200
bg-gray-50
p-4
text-gray-700
"
>
<h4 className="text-lg font-bold mr-4">Debugger</h4>
<h4 className="mr-4 text-lg font-bold">Debugger</h4>
<select
className="w-auto flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white"
className="flex w-auto items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
data-cy="project-select"
onChange={(event) => projectGraphChange(event.target.value)}
value={selectedProjectGraph}
@ -47,9 +47,9 @@ export const DebuggerPanel = memo(function ({
</select>
<p className="text-sm">
Last render took {lastPerfReport.renderTime}ms:{' '}
<b className="font-mono text-medium">{lastPerfReport.numNodes} nodes</b>{' '}
<b className="text-medium font-mono">{lastPerfReport.numNodes} nodes</b>{' '}
|{' '}
<b className="font-mono text-medium">{lastPerfReport.numEdges} edges</b>
<b className="text-medium font-mono">{lastPerfReport.numEdges} edges</b>
.
</p>
</div>

18
dep-graph/client/src/app/shell.tsx
View File

@ -111,7 +111,7 @@ export function Shell() {
<div id="no-projects-chosen" className="flex text-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mr-4"
className="mr-4 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -132,20 +132,20 @@ export function Shell() {
<button
type="button"
className={`
bg-green-nx-base
fixed
z-50
bottom-4
right-4
w-16
h-16
rounded-full
bg-green-nx-base
shadow-sm
text-white
z-50
block
h-16
w-16
transform
rounded-full
text-white
shadow-sm
transition
duration-300
transform
${!projectIsSelected ? 'opacity-0' : ''}
`}
data-cy="downloadImageButton"

8
dep-graph/client/src/app/sidebar/focused-project-panel.tsx
View File

@ -10,14 +10,14 @@ export const FocusedProjectPanel = memo(
return (
<div className="mt-10 px-4">
<div
className="p-2 shadow-sm bg-green-nx-base text-gray-50 border border-gray-200 rounded-md flex items-center group relative cursor-pointer overflow-hidden"
className="bg-green-nx-base group relative flex cursor-pointer items-center overflow-hidden rounded-md border border-gray-200 p-2 text-gray-50 shadow-sm"
data-cy="unfocusButton"
onClick={() => resetFocus()}
>
<p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 inline -mt-1 mr-1"
className="-mt-1 mr-1 inline h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -31,9 +31,9 @@ export const FocusedProjectPanel = memo(
</svg>
<span id="focused-project-name">Focused on {focusedProject}</span>
</p>
<div className="absolute right-2 flex transition-all translate-x-32 transition duration-200 ease-in-out group-hover:translate-x-0 pl-2 rounded-md text-gray-700 items-center text-sm font-medium bg-white shadow-sm ring-1 ring-gray-500">
<div className="absolute right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0">
Reset
<span className="p-1 rounded-md">
<span className="rounded-md p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"

4
dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx
View File

@ -10,13 +10,13 @@ export const GroupByFolderPanel = memo(
return (
<div className="mt-8 px-4">
<div className="flex items-start">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<input
id="displayOptions"
name="displayOptions"
value="groupByFolder"
type="checkbox"
className="h-4 w-4 border-gray-300 rounded"
className="h-4 w-4 rounded border-gray-300"
onChange={(event) => groupByFolderChanged(event.target.checked)}
checked={groupByFolder}
></input>

18
dep-graph/client/src/app/sidebar/project-list.tsx
View File

@ -61,7 +61,7 @@ function ProjectListItem({
focusProject: (projectId: string) => void;
}) {
return (
<li className="text-xs text-gray-600 block cursor-default select-none relative py-1 pl-3 pr-9">
<li className="relative block cursor-default select-none py-1 pl-3 pr-9 text-xs text-gray-600">
<div className="flex items-center">
<button
type="button"
@ -69,7 +69,7 @@ function ProjectListItem({
title="Focus on this library"
onClick={() => focusProject(project.projectGraphNode.name)}
>
<span className="p-1 rounded-md flex items-center font-medium bg-white transition hover:bg-gray-50 shadow-sm ring-1 ring-gray-200">
<span className="flex items-center rounded-md bg-white p-1 font-medium shadow-sm ring-1 ring-gray-200 transition hover:bg-gray-50">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
@ -86,7 +86,7 @@ function ProjectListItem({
</span>
</button>
<label
className="font-mono font-normal ml-3 p-2 transition hover:bg-gray-50 cursor-pointer block rounded-md truncate w-full"
className="ml-3 block w-full cursor-pointer truncate rounded-md p-2 font-mono font-normal transition hover:bg-gray-50"
data-project={project.projectGraphNode.name}
data-active={project.isSelected.toString()}
onClick={() =>
@ -100,7 +100,7 @@ function ProjectListItem({
{project.isSelected ? (
<span
title="This library is visible"
className="text-green-nx-base absolute inset-y-0 right-0 flex items-center cursor-pointer"
className="text-green-nx-base absolute inset-y-0 right-0 flex cursor-pointer items-center"
onClick={() =>
toggleProject(project.projectGraphNode.name, project.isSelected)
}
@ -159,7 +159,7 @@ function SubProjectList({
return (
<>
<h3 className="mt-4 py-2 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900 cursor-text">
<h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs">
{headerText}
</h3>
<ul className="mt-2 -ml-3">
@ -222,8 +222,8 @@ export function ProjectList() {
const sortedE2EDirectories = Object.keys(e2eDirectoryGroups).sort();
return (
<div id="project-lists" className="mt-8 px-4 border-t border-gray-200">
<h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
<div id="project-lists" className="mt-8 border-t border-gray-200 px-4">
<h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
app projects
</h2>
@ -240,7 +240,7 @@ export function ProjectList() {
);
})}
<h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
<h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
e2e projects
</h2>
@ -257,7 +257,7 @@ export function ProjectList() {
);
})}
<h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
<h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
lib projects
</h2>

12
dep-graph/client/src/app/sidebar/search-depth.tsx
View File

@ -19,13 +19,13 @@ export const SearchDepth = memo(
return (
<div className="mt-4 px-4">
<div className="mt-4 flex items-start">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<input
id="depthFilter"
name="depthFilter"
value="depthFilterActivated"
type="checkbox"
className="h-4 w-4 border-gray-300 rounded"
className="h-4 w-4 rounded border-gray-300"
checked={searchDepthEnabled}
onChange={(event) =>
searchDepthFilterEnabledChange(event.target.checked)
@ -45,10 +45,10 @@ export const SearchDepth = memo(
</div>
</div>
<div className="mt-3 px-10">
<div className="flex rounded-md shadow-sm text-gray-500">
<div className="flex rounded-md text-gray-500 shadow-sm">
<button
title="Remove ancestor level"
className="inline-flex items-center py-2 px-4 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100"
className="inline-flex items-center rounded-l-md border border-gray-300 bg-gray-50 py-2 px-4 text-gray-500 hover:bg-gray-100"
onClick={decrementDepthFilter}
>
<svg
@ -68,13 +68,13 @@ export const SearchDepth = memo(
</button>
<span
id="depthFilterValue"
className="p-1.5 bg-white flex-1 block w-full rounded-none border-t border-b border-gray-300 text-center font-mono"
className="block w-full flex-1 rounded-none border-t border-b border-gray-300 bg-white p-1.5 text-center font-mono"
>
{searchDepth}
</span>
<button
title="Add ancestor level"
className="inline-flex items-center py-2 px-4 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100"
className="inline-flex items-center rounded-r-md border border-gray-300 bg-gray-50 py-2 px-4 text-gray-500 hover:bg-gray-100"
onClick={incrementDepthFilter}
>
<svg

6
dep-graph/client/src/app/sidebar/show-hide-projects.tsx
View File

@ -19,7 +19,7 @@ export const ShowHideAllProjects = memo(
<button
onClick={showAllProjects}
type="button"
className="w-full flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
className="flex w-full items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
data-cy="selectAllButton"
>
<svg
@ -49,7 +49,7 @@ export const ShowHideAllProjects = memo(
<button
onClick={showAffectedProjects}
type="button"
className="mt-3 w-full flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-500 bg-white hover:bg-red-50"
className="mt-3 flex w-full items-center rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-500 shadow-sm hover:bg-red-50"
data-cy="affectedButton"
>
<svg
@ -73,7 +73,7 @@ export const ShowHideAllProjects = memo(
<button
onClick={hideAllProjects}
type="button"
className="mt-3 w-full flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
className="mt-3 flex w-full items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
data-cy="deselectAllButton"
>
<svg

22
dep-graph/client/src/app/sidebar/sidebar.tsx
View File

@ -81,19 +81,19 @@ export function Sidebar() {
return (
<div
className="
flex flex-col
relative flex
h-full
overflow-scroll
w-72
flex-col
overflow-scroll
pb-10
shadow-lg
ring-1 ring-gray-400 ring-opacity-10
relative
shadow-lg ring-1 ring-gray-400
ring-opacity-10
"
id="sidebar"
>
<div className="bg-blue-nx-base">
<div className="flex items-center justify-start mx-4 my-5 text-white">
<div className="mx-4 my-5 flex items-center justify-start text-white">
<svg
className="h-10 w-auto"
viewBox="0 0 24 24"
@ -111,11 +111,11 @@ export function Sidebar() {
id="help"
className="
mt-3
px-4
text-xs text-gray-500
flex
items-center
cursor-pointer
cursor-pointer items-center
px-4
text-xs
text-gray-500
hover:underline
"
href="https://nx.dev/structure/dependency-graph"
@ -124,7 +124,7 @@ export function Sidebar() {
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 mr-2"
className="mr-2 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"

14
dep-graph/client/src/app/sidebar/text-filter-panel.tsx
View File

@ -50,10 +50,10 @@ export function TextFilterPanel({
<div>
<div className="mt-10 px-4">
<form
className="flex rounded-md shadow-sm relative"
className="relative flex rounded-md shadow-sm"
onSubmit={(event) => event.preventDefault()}
>
<span className="inline-flex items-center p-2 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 p-2 text-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -71,7 +71,7 @@ export function TextFilterPanel({
</span>
<input
type="text"
className="p-1.5 bg-white text-gray-600 flex-1 block w-full rounded-none rounded-r-md border border-gray-300"
className="block w-full flex-1 rounded-none rounded-r-md border border-gray-300 bg-white p-1.5 text-gray-600"
placeholder="lib name, other lib name"
data-cy="textFilterInput"
name="filter"
@ -84,7 +84,7 @@ export function TextFilterPanel({
data-cy="textFilterReset"
type="reset"
onClick={resetClicked}
className="p-1 top-1 right-1 absolute bg-white inline-block rounded-md text-gray-500"
className="absolute top-1 right-1 inline-block rounded-md bg-white p-1 text-gray-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -107,14 +107,14 @@ export function TextFilterPanel({
<div className="mt-4 px-4">
<div className="flex items-start">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<input
disabled={textFilter.length === 0}
id="includeInPath"
name="textFilterCheckbox"
type="checkbox"
value="includeInPath"
className="h-4 w-4 border-gray-300 rounded"
className="h-4 w-4 rounded border-gray-300"
checked={includePath}
onChange={toggleIncludeLibsInPathChange}
></input>
@ -122,7 +122,7 @@ export function TextFilterPanel({
<div className="ml-3 text-sm">
<label
htmlFor="includeInPath"
className="font-medium text-gray-700 cursor-pointer"
className="cursor-pointer font-medium text-gray-700"
>
Include related libraries
</label>

42
nx-dev/feature-conf/src/lib/conf-schedule.tsx
View File

@ -311,18 +311,18 @@ export function ConfSchedule(): JSX.Element {
return activeDay === 1 ? (
<div className="border-t border-gray-600">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="date-container-l grid grid-cols-2 font-input-mono divide-x divide-gray-600">
<div className="p-8 text-center bg-blue-nx-dark">September 16</div>
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="date-container-l font-input-mono grid grid-cols-2 divide-x divide-gray-600">
<div className="bg-blue-nx-dark p-8 text-center">September 16</div>
<div
className="p-8 text-center cursor-pointer"
className="cursor-pointer p-8 text-center"
onClick={() => setActiveDay(2)}
>
September 17
</div>
</div>
</div>
<section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
<section className="w-full divide-y divide-gray-600 border-t border-b border-gray-600">
{scheduleItemsFor16.map((item) =>
item.type === 'event' ? scheduleRow(item) : breakRow(item)
)}
@ -331,18 +331,18 @@ export function ConfSchedule(): JSX.Element {
) : (
<div>
<div className="border-t border-gray-600">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="date-container-r grid grid-cols-2 font-input-mono divide-x divide-gray-600">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="date-container-r font-input-mono grid grid-cols-2 divide-x divide-gray-600">
<div
className="p-8 text-center cursor-pointer"
className="cursor-pointer p-8 text-center"
onClick={() => setActiveDay(1)}
>
September 16
</div>
<div className="p-8 text-center bg-blue-nx-dark">September 17</div>
<div className="bg-blue-nx-dark p-8 text-center">September 17</div>
</div>
</div>
<section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
<section className="w-full divide-y divide-gray-600 border-t border-b border-gray-600">
{scheduleItemsFor17.map((item) =>
item.type === 'event' ? scheduleRow(item) : breakRow(item)
)}
@ -354,15 +354,15 @@ export function ConfSchedule(): JSX.Element {
const scheduleRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<article className="w-full grid grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600">
<div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600">
<div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
<span className="hidden md:block">{item.time}</span>
<span className="py-4 px-6 mb-4 bg-blue-nx-dark rounded-md md:hidden">
<span className="bg-blue-nx-dark mb-4 rounded-md py-4 px-6 md:hidden">
{item.time}
</span>
</div>
<div className="px-5 md:py-12 md:px-8 col-span-2 font-input-mono">
<div className="font-input-mono col-span-2 px-5 md:py-12 md:px-8">
{item.videoUrl ? (
<h3 className="mb-4 underline">
<a href={item.videoUrl} target="_blank">
@ -376,7 +376,7 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
{item.speakers.join(' & ')}
</div>
</div>
<p className="px-5 pt-8 pb-12 md:py-12 md:px-8 col-span-2 text-gray-400">
<p className="col-span-2 px-5 pt-8 pb-12 text-gray-400 md:py-12 md:px-8">
{item.description}
</p>
</article>
@ -386,15 +386,15 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
const breakRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="w-full grid grid-cols-1 md:grid-cols-5">
<div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="grid w-full grid-cols-1 md:grid-cols-5">
<div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
<span className="hidden md:block">{item.time}</span>
<span className="py-4 px-6 mb-4 bg-blue-nx-dark rounded-md md:hidden">
<span className="bg-blue-nx-dark mb-4 rounded-md py-4 px-6 md:hidden">
{item.time}
</span>
</div>
<div className="pb-12 md:py-12 px-5 md:px-8 md:col-span-4 md:border-l md:border-gray-600">
<div className="px-5 pb-12 md:col-span-4 md:border-l md:border-gray-600 md:py-12 md:px-8">
{item.videoUrl ? (
<h3 className="font-input-mono underline">
<a href={item.videoUrl} target="_blank">

4
nx-dev/feature-conf/src/lib/conf-speakers.tsx
View File

@ -122,12 +122,12 @@ export function ConfSpeakers(): JSX.Element {
key={'speaker-row--' + rowIndex}
className="border-b border-gray-600"
>
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="grid grid-cols-1 md:grid-cols-2">
{row.map((speaker) => (
<div
key={speaker.name}
className="py-8 md:odd:pr-12 md:even:pl-12 odd:border-b md:odd:border-r md:odd:border-b-0 border-gray-600"
className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
>
<div className="px-5">
<MemberCard

6
nx-dev/feature-conf/src/lib/conf-sponsors.tsx
View File

@ -102,14 +102,14 @@ export function ConfSponsors(): JSX.Element {
sponsorLevelList.length === levelIndex + 1 && 'border-b'
)}
>
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="grid grid-cols-1 md:grid-cols-2">
{row.map((speaker) => (
<div
key={speaker.name}
className="py-8 md:odd:pr-12 md:even:pl-12 odd:border-b md:odd:border-r md:odd:border-b-0 border-gray-600"
className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
>
<div className="px-5 h-full">
<div className="h-full px-5">
<SponsorCard
imageUrl={speaker.imageUrl}
name={speaker.name}

28
nx-dev/feature-conf/src/lib/conf-workshop.tsx
View File

@ -4,16 +4,16 @@ import { MemberCard } from '@nrwl/nx-dev/ui-member-card';
export function ConfWorkshop(): JSX.Element {
return (
<div className="border-t border-b border-gray-600">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-gray-600">
<div className="px-5 py-12 md:pr-12">
<div className="font-input-mono text-green-nx-base">
September 14 & 15
</div>
<h2 className="pt-8 pb-2 text-2xl font-input-mono">
<h2 className="font-input-mono pt-8 pb-2 text-2xl">
Develop at Scale with Nx Monorepos
</h2>
<p className="mb-8 text-md text-gray-400">
<p className="text-md mb-8 text-gray-400">
Presented by Nrwl on September 14th and 15th, 10:30am - 5:30pm ET
</p>
<p className="text-gray-400">
@ -24,7 +24,7 @@ export function ConfWorkshop(): JSX.Element {
needed for any tech lead or individual contributor to be
successful working in an Nx workspace.
</p>
<h4 className="mt-8 mb-4 text-lg font-input-mono">
<h4 className="font-input-mono mt-8 mb-4 text-lg">
$800 All-Inclusive
</h4>
<p className="mb-4 text-gray-400">
@ -38,7 +38,7 @@ export function ConfWorkshop(): JSX.Element {
codelabs.
</p>
<h4 className="mb-2 text-lg font-input-mono">Day 1</h4>
<h4 className="font-input-mono mb-2 text-lg">Day 1</h4>
<ul className="mb-4 text-sm text-gray-400">
<li>
<span role="img" aria-label="emojii">
@ -111,7 +111,7 @@ export function ConfWorkshop(): JSX.Element {
</li>
</ul>
<h4 className="mb-2 text-lg font-input-mono">Day 2</h4>
<h4 className="font-input-mono mb-2 text-lg">Day 2</h4>
<ul className="text-sm text-gray-400">
<li>
<span role="img" aria-label="emojii">
@ -162,9 +162,9 @@ export function ConfWorkshop(): JSX.Element {
</li>
</ul>
</div>
<div className="py-12 divide-y divide-gray-600">
<div className="px-5 pb-12 md:pl-12 md:w-4/5">
<h3 className="mb-8 text-xl font-input-mono">Instructors</h3>
<div className="divide-y divide-gray-600 py-12">
<div className="px-5 pb-12 md:w-4/5 md:pl-12">
<h3 className="font-input-mono mb-8 text-xl">Instructors</h3>
<MemberCard
imageUrl="/images/conf/kirils-ladovs.webp"
name="Kirils Ladovs"
@ -182,7 +182,7 @@ export function ConfWorkshop(): JSX.Element {
/> */}
</div>
<div className="workshop-border-r px-5 py-12 md:pl-12">
<h3 className="mb-8 text-xl font-input-mono">
<h3 className="font-input-mono mb-8 text-xl">
What you'll learn
</h3>
<p className="text-gray-400">
@ -195,11 +195,11 @@ export function ConfWorkshop(): JSX.Element {
plugins that allow for the smooth integration of frameworks and
libraries.
</p>
<div className="my-12 m-auto w-2/3 grid grid-cols-3 justify-items-center gap-4">
<div className="m-auto my-12 grid w-2/3 grid-cols-3 justify-items-center gap-4">
<svg viewBox="0 0 24 24" className="w-18 h-18" fill="#52C1DE">
<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 className="text-6xl font-input-mono">||</div>
<div className="font-input-mono text-6xl">||</div>
<svg viewBox="0 0 24 24" className="w-18 h-18" fill="#E23236">
<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>
@ -211,7 +211,7 @@ export function ConfWorkshop(): JSX.Element {
</div>
<div className="px-5 pt-12 md:pl-12">
<a
className="flex items-center font-input-mono group w-full sm:text-xl"
className="font-input-mono group flex w-full items-center sm:text-xl"
href="https://nrwl.io/contact-us?utm_source=nxdev"
>
<span className="group-hover:underline">
@ -219,7 +219,7 @@ export function ConfWorkshop(): JSX.Element {
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"

4
nx-dev/feature-doc-viewer/src/lib/code-block.tsx
View File

@ -27,7 +27,7 @@ export function CodeBlock({
};
}, [copied]);
return (
<div className="relative group code-block">
<div className="group code-block relative">
<CopyToClipboard
text={text}
onCopy={() => {
@ -37,7 +37,7 @@ export function CodeBlock({
>
<button
type="button"
className="flex absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
className="absolute top-2 right-2 flex opacity-0 transition-opacity group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"

2
nx-dev/feature-doc-viewer/src/lib/content.tsx
View File

@ -43,7 +43,7 @@ const components: any = (config: ComponentsConfig) => ({
export function Content(props: ContentProps) {
return (
<div className="min-w-0 flex-auto px-4 sm:px-6 xl:px-8 pt-8 pb-24 lg:pb-16">
<div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
<ReactMarkdown
remarkPlugins={[gfm]}
rehypePlugins={[

16
nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
View File

@ -44,27 +44,27 @@ export function DocViewer({
type: 'website',
}}
/>
<div className="w-full max-w-screen-lg mx-auto">
<div className="mx-auto w-full max-w-screen-lg">
<div className="lg:flex">
<Sidebar menu={menu} navIsOpen={navIsOpen} />
<div
id="content-wrapper"
className={cx(
'min-w-0 w-full flex-auto flex-col lg:static lg:max-h-full lg:overflow-visible pt-16 md:pl-4',
navIsOpen && 'overflow-hidden max-h-screen fixed'
'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible',
navIsOpen && 'fixed max-h-screen overflow-hidden'
)}
>
<Content document={document} />
<div className="flex items-center space-x-2 w-full px-4 sm:px-6 xl:px-8 pt-24 pb-24 lg:pb-16">
<div className="ml-4 flex flex-grow h-0.5 w-full bg-slate-50 rounded" />
<div className="flex-shrink-0 relative z-0 inline-flex shadow-sm rounded-md">
<div className="flex w-full items-center space-x-2 px-4 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
<div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50" />
<div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
<a
aria-hidden="true"
href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
target="_blank"
rel="noreferrer"
title="Report an issue on Github"
className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-200 bg-white text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-nx-base focus:border-blue-nx-base"
className="focus:ring-blue-nx-base focus:border-blue-nx-base relative inline-flex items-center rounded-l-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
>
Report an issue
</a>
@ -80,7 +80,7 @@ export function DocViewer({
target="_blank"
rel="noreferrer"
title="Edit this page on Github"
className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-200 bg-white text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-nx-base focus:border-blue-nx-base"
className="focus:ring-blue-nx-base focus:border-blue-nx-base relative -ml-px inline-flex items-center rounded-r-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
>
Edit this page
</a>

20
nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
View File

@ -18,21 +18,21 @@ export function Sidebar({ menu, navIsOpen }: SidebarProps) {
<div
data-testid="sidebar"
className={cx(
'fixed z-20 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block border-r border-gray-50',
'lg:pt-o fixed inset-0 z-20 h-full w-full flex-none border-r border-gray-50 bg-black bg-opacity-25 lg:static lg:block lg:h-auto lg:w-64 lg:overflow-y-visible lg:bg-white',
!navIsOpen && 'hidden',
navIsOpen && 'block'
)}
>
<div
data-testid="navigation-wrapper"
className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-auto lg:top-18 bg-white mr-24 lg:mr-0 px-2 sm:pr-4 xl:pr-6"
className="scrolling-touch lg:top-18 mr-24 h-full overflow-auto overflow-y-auto bg-white px-2 sm:pr-4 lg:relative lg:sticky lg:mr-0 lg:block lg:h-auto lg:bg-transparent xl:pr-6"
>
<div className="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white" />
<div className="pointer-events-none absolute inset-x-0 z-10 hidden h-12 bg-gradient-to-b from-white lg:block" />
<nav
id="nav"
data-testid="navigation"
className="px-1 pt-16 font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
className="sticky?lg:h-(screen-18) px-1 pt-16 pb-10 text-base font-medium sm:px-3 lg:pb-14 lg:text-sm xl:px-5"
>
{menu.sections.map((section, index) => (
<SidebarSection key={section.id + '-' + index} section={section} />
@ -49,7 +49,7 @@ function SidebarSection({ section }: { section: MenuSection }) {
{section.hideSectionHeader ? null : (
<h4
data-testid={`section-h4:${section.id}`}
className="mt-8 text-lg font-bold border-b border-gray-50 border-solid"
className="mt-8 border-b border-solid border-gray-50 text-lg font-bold"
>
{section.name}
</h4>
@ -87,7 +87,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
data-testid={`section-h5:${item.id}`}
className={cx(
'flex py-2',
'uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900',
'text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs',
item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
)}
onClick={handleCollapseToggle}
@ -108,11 +108,11 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
<Link href={item.url as string}>
<a
className={cx(
'py-1 transition-colors duration-200 relative block text-gray-500 hover:text-gray-900'
'relative block py-1 text-gray-500 transition-colors duration-200 hover:text-gray-900'
)}
>
{isActiveLink ? (
<span className="rounded-md absolute h-full w-1 -right-2 sm:-right-4 top-0 bg-blue-nx-base" />
<span className="bg-blue-nx-base absolute -right-2 top-0 h-full w-1 rounded-md sm:-right-4" />
) : null}
<span
className={cx('relative', {
@ -136,8 +136,8 @@ function CollapsibleIcon({ isCollapsed }: { isCollapsed: boolean }) {
<svg
xmlns="http://www.w3.org/2000/svg"
className={cx(
'transition-all h-3.5 w-3.5 text-gray-500',
!isCollapsed && 'transform rotate-90'
'h-3.5 w-3.5 text-gray-500 transition-all',
!isCollapsed && 'rotate-90 transform'
)}
fill="none"
viewBox="0 0 24 24"

4
nx-dev/feature-search/src/lib/algolia-search.tsx
View File

@ -72,7 +72,7 @@ export function AlgoliaSearch() {
type="button"
ref={searchButtonRef}
onClick={handleOpen}
className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 text-white opacity-90 hover:opacity-100 transition-colors duration-200 w-full py-2"
className="group flex w-full items-center space-x-3 py-2 font-medium leading-6 text-white opacity-90 transition-colors duration-200 hover:opacity-100 sm:space-x-4"
>
<svg width="24" height="24" fill="none" className="text-white">
<path
@ -88,7 +88,7 @@ export function AlgoliaSearch() {
</span>
<span
style={{ opacity: browserDetected ? '1' : '0' }}
className="hidden sm:block text-sm leading-5 py-0.5 px-1.5 border border-white rounded-md"
className="hidden rounded-md border border-white py-0.5 px-1.5 text-sm leading-5 sm:block"
>
<span className="sr-only">Press </span>
<kbd className="font-sans">

10
nx-dev/nx-dev/pages/[...segments].tsx
View File

@ -51,7 +51,7 @@ export default function DocumentationPage({
/>
<button
type="button"
className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-green-nx-base shadow-sm text-white block lg:hidden"
className="bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 rounded-full text-white shadow-sm lg:hidden"
onClick={toggleNav}
>
<span className="sr-only">Open site navigation</span>
@ -60,9 +60,9 @@ export default function DocumentationPage({
height="24"
fill="none"
className={cx(
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
{
'opacity-0 scale-80': navIsOpen,
'scale-80 opacity-0': navIsOpen,
}
)}
>
@ -79,9 +79,9 @@ export default function DocumentationPage({
height="24"
fill="none"
className={cx(
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
{
'opacity-0 scale-80': !navIsOpen,
'scale-80 opacity-0': !navIsOpen,
}
)}
>

2
nx-dev/nx-dev/pages/_app.tsx
View File

@ -72,7 +72,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<div className="documentation-app text-gray-700 antialiased bg-white">
<div className="documentation-app bg-white text-gray-700 antialiased">
<Component {...pageProps} />
</div>
{/* Global Site Tag (gtag.js) - Google Analytics */}

2
nx-dev/nx-dev/pages/_document.tsx
View File

@ -3,7 +3,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html
className="scroll-smooth selection:bg-blue-nx-base selection:text-white"
className="selection:bg-blue-nx-base scroll-smooth selection:text-white"
lang="en"
>
<Head />

94
nx-dev/nx-dev/pages/community.tsx
View File

@ -57,12 +57,12 @@ export function Community(props: CommunityProps) {
<div className="w-full">
{/*Intro component*/}
<div className="bg-gray-50">
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="mt-40">
<h1 className="text-4xl sm:text-6xl lg:text-7xl leading none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">
<h1 className="leading none mt-10 mb-8 text-4xl font-extrabold tracking-tight text-gray-900 sm:mt-14 sm:mb-10 sm:text-6xl lg:text-7xl">
It's always better when we're together.
</h1>
<p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
<p className="mb-10 max-w-screen-lg text-lg font-medium sm:mb-11 sm:text-2xl sm:leading-10">
There are many ways you can connect with the open-source Nx
community. Below, you’ll find details about various connection
points.
@ -71,20 +71,20 @@ export function Community(props: CommunityProps) {
</div>
</div>
{/*Community*/}
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
<div className="mt-32 flex md:flex-row flex-col justify-center">
<div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="mt-32 flex flex-col justify-center md:flex-row">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pb-0">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
GitHub & Slack
</h2>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
, you can file issues or contribute code back to the project.
</p>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
title="Join the Nx Community Slack"
href="https://go.nrwl.io/join-slack"
@ -99,14 +99,14 @@ export function Community(props: CommunityProps) {
community plugins can be reached there.
</p>
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
Livestreams & Twitter
</h2>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
The Nx Show takes place every second and fourth Monday, from
1:00 - 2:00 PM EST on the{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
href="https://www.youtube.com/nrwl_io"
rel="noreferrer"
@ -115,7 +115,7 @@ export function Community(props: CommunityProps) {
</a>
. Info about upcoming sessions is shared on the{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
href="https://twitter.com/NxDevTools"
rel="noreferrer"
@ -125,7 +125,7 @@ export function Community(props: CommunityProps) {
Twitter account and the Nrwl+Nx Newsletter. You can find past
live-streams on the{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
@ -135,13 +135,13 @@ export function Community(props: CommunityProps) {
.
</p>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
In each session, members of the Nx core team answer your
questions, help get you up and running with Nx, and address
particular challenges. If you have a question or topic you’d
like to see covered during The Nx Show, you can{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
aria-label="Nx Show Questions and Suggestions Form"
@ -152,10 +152,10 @@ export function Community(props: CommunityProps) {
</a>
</p>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
For the latest news about Nx,{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://twitter.com/NxDevTools"
@ -165,13 +165,13 @@ export function Community(props: CommunityProps) {
.
</p>
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
We also have a newsletter
</h2>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
You can also{' '}
<a
className="underline cursor-pointer"
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://go.nrwl.io/nx-newsletter"
@ -184,7 +184,7 @@ export function Community(props: CommunityProps) {
resources, and additional Nx content.
</p>
</div>
<div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pl-16 md:pb-0 pb-10 mt-8 md:mt-0">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pl-16 md:pb-0">
<Image
src="/images/community.svg"
width={555}
@ -195,22 +195,22 @@ export function Community(props: CommunityProps) {
</div>
</div>
{/*How to plugin*/}
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
<div className="my-32 flex flex-col md:flex-row items-start justify-center">
<div className="w-full lg:w-2/5 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="my-32 flex flex-col items-start justify-center md:flex-row">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pb-0 lg:w-2/5">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
Community plugin
</h2>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
Core Nx plugins are created and maintained by the Nx team at
Nrwl and you can see all the available plugins when you run
the{' '}
<code className="text-sm bg-gray-50 text-gray-600 font-mono leading-6 px-2 py-1 border border-gray-200 rounded">
<code className="rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
nx list
</code>{' '}
command in your workspace.
</p>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
<b>The community plugins listed below</b> are created and
maintained by members of the Nx community, will allow you to
use the full power of the workspace while using different
@ -219,26 +219,26 @@ export function Community(props: CommunityProps) {
<div className="mb-6">
<a
href="#community-plugin-list"
className="underline cursor-pointer"
className="cursor-pointer underline"
>
Check the community plugins right now!
</a>
</div>
<h3 className="text-xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800">
How to Install
</h3>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
Each of the plugins listed below have a yarn and an npm icon.
Clicking on either of these copies the relevant command to
install the dependency for your project.
</p>
</div>
<div className="w-full lg:w-3/5 flex flex-col justify-between items-start md:pl-16 pb-10 mt-8 md:mt-0">
<div className="py-4 px-6 w-full bg-gray-50 border border-gray-100">
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pl-16 lg:w-3/5">
<div className="w-full border border-gray-100 bg-gray-50 py-4 px-6">
<h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
How to Create Your Own
</h3>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
Get started with building your own plugin!
</p>
<iframe
@ -256,8 +256,8 @@ export function Community(props: CommunityProps) {
</div>
</div>
{/*Call out*/}
<div className="text-white bg-blue-nx-base">
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<div className="bg-blue-nx-base text-white">
<div className="mx-auto my-12 max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
<span className="block">Ready to dive in?</span>
<span className="block text-gray-200">
@ -267,7 +267,7 @@ export function Community(props: CommunityProps) {
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div className="inline-flex rounded-md shadow">
<Link href="/getting-started/intro">
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-nx-base bg-white">
<a className="text-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium">
Get started with Nx
</a>
</Link>
@ -276,26 +276,26 @@ export function Community(props: CommunityProps) {
</div>
</div>
{/*Plugins*/}
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
<div className="my-32 flex sm:flex-row flex-col justify-center">
<div className="w-full lg:w-3/5 py-6 mt-8">
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="my-32 flex flex-col justify-center sm:flex-row">
<div className="mt-8 w-full py-6 lg:w-3/5">
<h2
id="community-plugin-list"
className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4"
className="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 sm:text-2xl lg:text-3xl"
>
Community Plugins Directory
</h2>
</div>
<div className="w-full lg:w-2/5 py-6 mt-8 text-right">
<div className="mt-8 w-full py-6 text-right lg:w-2/5">
<a
href="/nx-plugin/overview#listing-your-nx-plugin"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base"
className="bg-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent px-5 py-3 text-base font-medium text-white"
>
Add your Nx plugin to the list!
</a>
</div>
</div>
<div className="my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{props.pluginList.map((plugin) => (
<PluginCard
key={plugin.name}

60
nx-dev/nx-dev/pages/conf.tsx
View File

@ -42,19 +42,19 @@ export function ConfPage() {
}}
>
<div
className="w-full overflow-hidden bg-blue-nx-base"
className="bg-blue-nx-base w-full overflow-hidden"
style={{
background:
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='2' height='2' fill='white' fill-opacity='0.15'/%3E%3C/svg%3E\")",
}}
>
{/*INTRO*/}
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mt-24 py-48 flex lg:flex-row flex-col items-start">
<div className="w-full lg:w-2/5 flex flex-col lg:pb-0 pb-10 mt-8 lg:mt-0 relative">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
<div className="mt-24 flex flex-col items-start py-48 lg:flex-row">
<div className="relative mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-2/5 lg:pb-0">
<svg
id="nx-conf-glow"
className="z-0 absolute w-full"
className="absolute z-0 w-full"
style={{
transform: 'scale(1.5, 1.5) translate3d(-12%, -25%, 0)',
}}
@ -143,7 +143,7 @@ export function ConfPage() {
</svg>
<svg
id="nx-conf-logo"
className="z-10 -left-60 -top-60 w-full"
className="-left-60 -top-60 z-10 w-full"
role="img"
width="446"
height="86"
@ -179,16 +179,16 @@ export function ConfPage() {
/>
</svg>
</div>
<div className="w-full lg:w-3/5 flex flex-col lg:pl-16 lg:pb-0 pb-10 mt-8 lg:mt-0 z-50">
<div className="z-50 mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
<h2 className="my-6">
<div className="inline-block py-4 px-6 text-xl sm:text-2xl lg:text-2xl leading-none font-input-mono font-extrabold tracking-tight mb-4 bg-blue-nx-dark rounded-md">
<div className="font-input-mono bg-blue-nx-dark mb-4 inline-block rounded-md py-4 px-6 text-xl font-extrabold leading-none tracking-tight sm:text-2xl lg:text-2xl">
<span className="hidden">
Announcing the first ever Nx Conf on{' '}
</span>{' '}
September 16 & 17, 2021
</div>
</h2>
<p className="sm:text-lg mb-6">
<p className="mb-6 sm:text-lg">
Nx Conf is a new, online & free-to-attend, 2-day conference
featuring members of the Nx team and community. Watch us as we
share our ideas and expertise about making development faster,
@ -276,15 +276,15 @@ export function ConfPage() {
Grab your FREE Nx Conf ticket and save your workshop seat
today!
</p> */}
<div className="flex mt-16">
<div className="mt-16 flex">
<a
className="flex items-center justify-end font-input-mono group w-full sm:text-2xl"
className="font-input-mono group flex w-full items-center justify-end sm:text-2xl"
href="https://www.youtube.com/watch?v=oG2QbFquraA"
>
<span className="group-hover:underline">Watch Day 1</span>
<svg
xmlns="http://www.w3.org/2000/svg"
className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -298,13 +298,13 @@ export function ConfPage() {
</svg>
</a>
<a
className="flex items-center justify-end font-input-mono group w-full sm:text-2xl"
className="font-input-mono group flex w-full items-center justify-end sm:text-2xl"
href="https://www.youtube.com/watch?v=hlGOaGDsWKg"
>
<span className="group-hover:underline">Watch Day 2</span>
<svg
xmlns="http://www.w3.org/2000/svg"
className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -324,9 +324,9 @@ export function ConfPage() {
</div>
<div className="w-full overflow-hidden">
{/*NAVIGATION*/}
<div className="hidden md:block border-t border-b border-gray-600">
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
<div className="md:grid grid-cols-7 items-center text-center font-input-mono divide-x divide-gray-600">
<div className="hidden border-t border-b border-gray-600 md:block">
<div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="font-input-mono grid-cols-7 items-center divide-x divide-gray-600 text-center md:grid">
<div className="p-8">
<svg
id="nx-conf-logo"
@ -365,22 +365,22 @@ export function ConfPage() {
</svg>
</div>
<Link href="#agenda">
<a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
<a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
Agenda
</a>
</Link>
<Link href="#speakers">
<a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
<a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
Speakers
</a>
</Link>
<Link href="#workshop">
<a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
<a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
Workshop
</a>
</Link>
<Link href="#sponsors">
<a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
<a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
Sponsors
</a>
</Link>
@ -389,9 +389,9 @@ export function ConfPage() {
</div>
{/*AGENDA*/}
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
<div className="mt-24">
<h2 id="agenda" className="my-20 text-3xl font-input-mono">
<h2 id="agenda" className="font-input-mono my-20 text-3xl">
Agenda (EST)
</h2>
</div>
@ -399,19 +399,19 @@ export function ConfPage() {
<ConfSchedule />
{/*SPEAKERS*/}
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
<div className="mt-24">
<h2 id="speakers" className="my-20 text-3xl font-input-mono">
<h2 id="speakers" className="font-input-mono my-20 text-3xl">
Speakers
</h2>
</div>
</div>
<ConfSpeakers />
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
{/*WORKSHOP*/}
<div className="mt-24">
<h2 id="workshop" className="my-20 text-3xl font-input-mono">
<h2 id="workshop" className="font-input-mono my-20 text-3xl">
Workshop
</h2>
</div>
@ -419,16 +419,16 @@ export function ConfPage() {
<ConfWorkshop />
{/*SPONSORS*/}
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
<div className="mt-24">
<h2 id="sponsors" className="my-20 text-3xl font-input-mono">
<h2 id="sponsors" className="font-input-mono my-20 text-3xl">
Sponsors
</h2>
</div>
</div>
<ConfSponsors />
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
<div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
{/*SPONSORS*/}
{/*<div className="my-24">*/}
{/* <h2 id="sponsors" className="my-20 text-3xl font-input-mono">*/}

54
nx-dev/nx-dev/pages/index.tsx
View File

@ -55,36 +55,36 @@ export function Index() {
{/*INTRO COMPONENT*/}
<header
id="animated-background"
className="bg-blue-nx-base text-white transform-gpu lg:bg-contain bg-clip-border bg-origin-border bg-right bg-no-repeat"
className="bg-blue-nx-base transform-gpu bg-clip-border bg-right bg-no-repeat bg-origin-border text-white lg:bg-contain"
style={{
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-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">
<div className="md:py-18 mx-auto max-w-screen-lg px-4 py-4 xl:max-w-screen-xl">
<div className="md:my-18 my-8 flex flex-col items-center justify-center 2xl:my-24">
<div className="flex w-full flex-col text-center">
<h1 className="mb-8 text-4xl font-extrabold leading-none tracking-tight sm:mt-10 sm:mt-14 sm:mb-10 sm:text-5xl lg:text-5xl">
<span className="block lg:inline">
Smart, Fast and Extensible
</span>{' '}
Build System
</h1>
<h2 className="max-w-2xl mx-auto text-2xl font-semibold mb-10 sm:mb-11">
<h2 className="mx-auto mb-10 max-w-2xl text-2xl font-semibold sm:mb-11">
Next generation build system with first class monorepo
support and powerful integrations.
</h2>
</div>
<div
aria-hidden="true"
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"
className="mx-auto mt-8 hidden w-full max-w-2xl flex-col items-center justify-between pb-10 sm:flex lg:mt-0 lg:pb-0"
>
<NpxCreateNxWorkspace />
</div>
<div className="my-14 flex flex-wrap sm:space-x-4 text-center">
<div className="my-14 flex flex-wrap text-center sm:space-x-4">
<Link href="#getting-started">
<a
title="Start using Nx by creating a workspace"
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"
className="text-blue-nx-base hover:text-blue-nx-dark w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
>
Create Nx Workspace
</a>
@ -93,7 +93,7 @@ export function Index() {
<Link href="/migration/adding-to-monorepo">
<a
title="Add Nx to existing Monorepo"
className="mt-4 md:mt-0 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"
className="text-blue-nx-base hover:text-blue-nx-dark mt-4 w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto md:mt-0"
>
Add Nx to Monorepo
</a>
@ -103,7 +103,7 @@ export function Index() {
</div>
</header>
<div className="hidden md:block bg-gray-50 border-b border-gray-100">
<div className="hidden border-b border-gray-100 bg-gray-50 md:block">
{/*COMPANIES*/}
<NxUsersShowcase />
</div>
@ -111,7 +111,7 @@ export function Index() {
{/*NX FEATURES*/}
<div
id="features"
className="relative bg-gray-50 py-12 overflow-hidden"
className="relative overflow-hidden bg-gray-50 py-12"
>
{/*MONOREPO*/}
<MonorepoFeatures />
@ -128,7 +128,7 @@ export function Index() {
<EcosystemFeatures />
</div>
<div className="bg-gray-50 relative transform-gpu">
<div className="relative transform-gpu bg-gray-50">
<img
className="w-full"
src="/images/background/hero-bg-large-3.svg"
@ -141,17 +141,17 @@ export function Index() {
{/*NX FEATURE DETAILS*/}
<article
id="features-in-depth"
className="relative bg-gray-50 pb-32 overflow-hidden"
className="relative overflow-hidden bg-gray-50 pb-32"
>
<header className="max-w-prose mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<header className="mx-auto max-w-prose py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-base font-semibold text-blue-nx-base tracking-wide uppercase">
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wide">
Monorepo done right
</h1>
<p className="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
Works for Projects of Any Size
</p>
<p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
Whether you have one project or one thousand, Nx will keep
your CI fast and your workspace maintainable.
</p>
@ -176,15 +176,15 @@ export function Index() {
id="getting-started"
className="relative bg-white pt-16 sm:pt-24 lg:pt-32"
>
<header className="mx-auto max-w-prose px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8">
<header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
<div>
<h1 className="text-base font-semibold tracking-wider text-blue-nx-base uppercase">
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
Getting Started <span className="sr-only">With Nx</span>
</h1>
<p className="mt-2 text-4xl font-extrabold text-gray-800 tracking-tight sm:text-6xl">
<p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
TypeScript, React, Angular, Node and more
</p>
<p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
Nx has first-class support for many frontend and backend
technologies, so its documentation comes in multiple flavours.
</p>
@ -196,13 +196,13 @@ export function Index() {
<div
id="learning-materials"
className="mt-28 max-w-prose mx-auto py-16 px-4 sm:py-18 sm:px-6 lg:px-8"
className="sm:py-18 mx-auto mt-28 max-w-prose py-16 px-4 sm:px-6 lg:px-8"
>
<div className="text-center">
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
Free Courses and Videos
</p>
<p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
For visual learners we have created high-quality courses walking
you through building real-world examples step by step.
</p>
@ -220,7 +220,7 @@ export function Index() {
<NxPlaybook />
</div>
<div className="bg-white relative transform-gpu">
<div className="relative transform-gpu bg-white">
<img
className="w-full"
loading="lazy"
@ -232,15 +232,15 @@ export function Index() {
{/*COMMUNITY*/}
<article id="community" className="bg-white">
<div className="max-w-prose mx-auto py-16 px-4 sm:py-18 sm:px-6 lg:px-8">
<div className="sm:py-18 mx-auto max-w-prose py-16 px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-base font-semibold text-gray-600 tracking-wide uppercase">
<h1 className="text-base font-semibold uppercase tracking-wide text-gray-600">
Community
</h1>
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
Used by Popular Open Source Projects
</p>
<p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
Nx works equally well for the teams building apps and for the
communities building open source libraries and tools.
</p>

6
nx-dev/ui-commands/src/lib/inline-command.tsx
View File

@ -37,10 +37,10 @@ export function InlineCommand({
>
<button
type="button"
className="sm:max-w-full w-full text-sm flex-none bg-white text-gray-400 hover:text-gray-800 font-input-mono leading-6 py-1 sm:px-3 border border-gray-300 rounded-md flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white py-1 text-sm leading-6 text-gray-400 transition-colors hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
>
<span className="overflow-auto flex items-center text-gray-800">
<span className="hidden sm:inline text-gray-500" aria-hidden="true">
<span className="flex items-center overflow-auto text-gray-800">
<span className="hidden text-gray-500 sm:inline" aria-hidden="true">
$
</span>
<SyntaxHighlighter

18
nx-dev/ui-common/src/lib/footer.tsx
View File

@ -119,9 +119,9 @@ export function Footer({ useDarkBackground }: FooterProps) {
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="text-gray-500 space-y-4 xl:col-span-1">
<div className="space-y-4 text-gray-500 xl:col-span-1">
<svg
className="h-14 subpixel-antialiased"
role="img"
@ -151,10 +151,10 @@ export function Footer({ useDarkBackground }: FooterProps) {
))}
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
Resources
</h3>
<ul role="list" className="mt-4 space-y-4">
@ -177,7 +177,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
Help
</h3>
<ul role="list" className="mt-4 space-y-4">
@ -202,7 +202,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
Community
</h3>
<ul role="list" className="mt-4 space-y-4">
@ -225,7 +225,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
Solutions
</h3>
<ul role="list" className="mt-4 space-y-4">
@ -255,7 +255,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
&copy; 2022 made with{' '}
<svg
xmlns="http://www.w3.org/2000/svg"
className="-mt-0.5 h-5 w-5 inline"
className="-mt-0.5 inline h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
@ -269,7 +269,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
<Link href="https://nrwl.io/?utm_source=nx.dev">
<a target="_blank" rel="nofollow">
<svg
className="-mt-0.5 ml-0.5 w-14 h-auto inline"
className="-mt-0.5 ml-0.5 inline h-auto w-14"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"

20
nx-dev/ui-common/src/lib/header.tsx
View File

@ -13,11 +13,11 @@ export function Header(props: HeaderProps) {
return (
<div
className={cx(
'h-16 px-5 py-5 flex items-center justify-between print:hidden',
'flex h-16 items-center justify-between px-5 py-5 print:hidden',
props.useDarkBackground ? 'bg-blue-nx-dark' : 'bg-blue-nx-base'
)}
>
<div className="flex items-center justify-between w-full max-w-screen-xl mx-auto sm:space-x-10">
<div className="mx-auto flex w-full max-w-screen-xl items-center justify-between sm:space-x-10">
{/*LOGO*/}
<div className="flex items-center">
<a href="/" className="flex items-center">
@ -58,14 +58,14 @@ export function Header(props: HeaderProps) {
{/*SEARCH*/}
<div className="inline">{!!showSearch ? <AlgoliaSearch /> : null}</div>
{/*NAVIGATION*/}
<div className="text-sm flex-shrink-0">
<nav className="flex items-justified justify-center space-x-1">
<div className="flex-shrink-0 text-sm">
<nav className="items-justified flex justify-center space-x-1">
<h2 className="sr-only">Main navigation</h2>
<Link href="/getting-started/intro">
<a
title="Check Nx documentation"
className={cx(
'px-3 py-2 text-white leading-tight',
'px-3 py-2 leading-tight text-white',
!!props.isDocViewer ? 'font-bold' : ''
)}
>
@ -75,7 +75,7 @@ export function Header(props: HeaderProps) {
<Link href="/using-nx/nx-devkit">
<a
title="Check Nx available plugins"
className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
>
Plugins
</a>
@ -83,7 +83,7 @@ export function Header(props: HeaderProps) {
<Link href="/community">
<a
title="Check Nx community"
className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
>
Community
</a>
@ -91,7 +91,7 @@ export function Header(props: HeaderProps) {
<Link href="/conf">
<a
title="Check Nx conference"
className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
>
Nx Conf
</a>
@ -102,7 +102,7 @@ export function Header(props: HeaderProps) {
href="https://nx.app/?utm_source=nx.dev"
target="_blank"
rel="noreferrer"
className="px-3 py-2 text-white lg:inline-flex leading-tight group relative"
className="group relative px-3 py-2 leading-tight text-white lg:inline-flex"
>
Nx Cloud
</a>
@ -111,7 +111,7 @@ export function Header(props: HeaderProps) {
href="https://nrwl.io/services/?utm_source=nx.dev"
target="_blank"
rel="noreferrer"
className="px-3 py-2 text-white hidden lg:inline-flex leading-tight"
className="hidden px-3 py-2 leading-tight text-white lg:inline-flex"
>
Nx Consulting
</a>

60
nx-dev/ui-common/src/lib/npx-create-nx-workspace.tsx
View File

@ -243,22 +243,22 @@ export function NpxCreateNxWorkspaceAnimation({
<>
<div
key={'npx-create-nx-workspace-animation'}
className="pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
bg-gray-800 pb-6 pt-4 rounded-lg leading-normal max-w-full overflow-hidden h-96 relative"
className="relative h-96 max-w-full overflow-hidden rounded-lg bg-gray-800
pt-4 pb-6 pt-4 font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
>
<div className="px-5 top mb-2 flex">
<div className="h-3 w-3 bg-red-500 rounded-full" />
<div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
<div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
<div className="top mb-2 flex px-5">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
<div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="px-5 overflow-y-hidden">
<div className="overflow-y-hidden px-5">
<motion.div initial={{ y: 0 }} animate={wrapper}>
<div className="mt-4 flex">
<span className="text-green-nx-base mr-2">/workspace ➜</span>
<motion.p
initial={{ opacity: 0 }}
animate={npxCreateNxWorkspace}
className="flex-1 typing items-center"
className="typing flex-1 items-center"
>
{typing('npx create-nx-workspace ludicrous-narwhals').map(
(x) => x
@ -269,7 +269,7 @@ export function NpxCreateNxWorkspaceAnimation({
<AnimateSharedLayout>
{/*LOADING*/}
<motion.div
className="inline-block items-center bg-green-nx-base"
className="bg-green-nx-base inline-block items-center"
initial={{ width: '0%', height: '12px' }}
animate={firstLoading}
/>
@ -289,13 +289,13 @@ export function NpxCreateNxWorkspaceAnimation({
</motion.span>
</motion.div>
<motion.div
className="mt-2 relative"
className="relative mt-2"
initial={{ opacity: 0 }}
animate={frameworkSelectionAnswerSection}
>
{/*SELECTION ARROW*/}
<motion.div
className="absolute -left-4 top-0 text-green-nx-base"
className="text-green-nx-base absolute -left-4 top-0"
initial={{ y: 0 }}
animate={frameworkSelectionAnswerSectionArrow}
>
@ -417,13 +417,13 @@ export function NpxCreateNxWorkspaceAnimation({
</motion.span>
</motion.div>
<motion.div
className="mt-2 relative"
className="relative mt-2"
initial={{ opacity: 0 }}
animate={stylesheetSelectionAnswerSection}
>
{/*SELECTION ARROW*/}
<motion.div
className="absolute -left-4 top-0 text-green-nx-base"
className="text-green-nx-base absolute -left-4 top-0"
initial={{ y: 0 }}
animate={stylesheetSelectionAnswerSectionArrow}
>
@ -521,13 +521,13 @@ export function NpxCreateNxWorkspaceAnimation({
</motion.span>
</motion.div>
<motion.div
className="mt-2 relative"
className="relative mt-2"
initial={{ opacity: 0 }}
animate={nxCloudSelectionAnswerSection}
>
{/*SELECTION ARROW*/}
<motion.div
className="absolute -left-4 top-0 text-green-nx-base"
className="text-green-nx-base absolute -left-4 top-0"
initial={{ y: 18 }}
animate={nxCloudSelectionAnswerSectionArrow}
>
@ -556,7 +556,7 @@ export function NpxCreateNxWorkspaceAnimation({
initial={{ opacity: 0 }}
animate={creatingNxWorkspace}
>
<span className="px-1 py-0.5 bg-green-nx-base">NX</span> Nx is
<span className="bg-green-nx-base px-1 py-0.5">NX</span> Nx is
creating your workspace. To make sure the command works
reliably in all environments, and that the preset is applied
correctly, Nx will run "yarn install" several times. Please
@ -573,7 +573,7 @@ export function NpxCreateNxWorkspaceAnimation({
{/*LOADING*/}
<motion.div
layout
className="mt-2 items-center bg-green-nx-base"
className="bg-green-nx-base mt-2 items-center"
initial={{ width: '0%', height: '12px' }}
animate={secondLoading}
/>
@ -585,15 +585,15 @@ export function NpxCreateNxWorkspaceAnimation({
animate={workpaceReady}
>
<div>
<span className="px-1 py-0.5 bg-green-nx-base">
<span className="bg-green-nx-base px-1 py-0.5">
NX SUCCESS
</span>{' '}
Nx has successfully created the workspace.
</div>
<div className="my-3 w-full h-px bg-gray-100" />
<div className="my-3 h-px w-full bg-gray-100" />
<div>
<span className="px-1 py-0.5 bg-green-nx-base">NX</span>
<span className="ml-1 px-1 py-0.5 bg-yellow-500">
<span className="bg-green-nx-base px-1 py-0.5">NX</span>
<span className="ml-1 bg-yellow-500 px-1 py-0.5">
NOTE
</span>{' '}
First time using Nx? Check out this interactive Nx tutorial.
@ -632,10 +632,10 @@ export function NpxCreateNxWorkspaceAnimation({
<button
type="button"
onClick={() => restartFunction() && sequence()}
className="w-full sm:w-auto flex-none bg-gray-800 text-green-nx-base hover:bg-gray-700 text-xs font-normal py-1 px-3 border border-gray-700 rounded-md transition"
className="text-green-nx-base w-full flex-none rounded-md border border-gray-700 bg-gray-800 py-1 px-3 text-xs font-normal transition hover:bg-gray-700 sm:w-auto"
>
<svg
className="inline-flex w-5 h-5 r-2"
className="r-2 inline-flex h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -679,15 +679,15 @@ export function NpxCreateNxWorkspace() {
) : (
<div
key={'npx-create-nx-workspace-animation'}
className="pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
bg-gray-800 pb-6 pt-4 rounded-lg leading-normal w-full overflow-hidden h-96 relative"
className="relative h-96 w-full overflow-hidden rounded-lg bg-gray-800
pt-4 pb-6 pt-4 font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
>
<div className="px-5 top mb-2 flex">
<div className="h-3 w-3 bg-red-500 rounded-full" />
<div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
<div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
<div className="top mb-2 flex px-5">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
<div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="px-5 overflow-y-hidden" />
<div className="overflow-y-hidden px-5" />
</div>
)}
</>

4
nx-dev/ui-common/src/lib/nx-users-showcase.tsx
View File

@ -1,10 +1,10 @@
export function NxUsersShowcase() {
return (
<div className="overflow-hidden py-4 px-4">
<div className="mx-auto w-60 top-1 bottom-3 text-center text-xs text-gray-400">
<div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-gray-400">
Powering leading companies like
</div>
<div id="sponsors-carousel" className="w-full flex column text-gray-400">
<div id="sponsors-carousel" className="column flex w-full text-gray-400">
<div className="flex justify-center">
<svg className="w-full" viewBox="0 0 160 88" fill="currentColor">
<path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />

8
nx-dev/ui-common/src/lib/plugin-card.tsx
View File

@ -22,8 +22,8 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
};
}, [copied]);
return (
<div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded-md">
<h3 className="text-lg font-semibold leading-tight mb-4">
<div className="flex w-full flex-col rounded-md border border-gray-100 py-8 px-6">
<h3 className="mb-4 text-lg font-semibold leading-tight">
<a
href={url}
target="_blank"
@ -32,7 +32,7 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
className="flex items-center"
>
<svg
className="mr-3 w-5 h-5 text-gray-800"
className="mr-3 h-5 w-5 text-gray-800"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -43,7 +43,7 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
{name}
</a>
</h3>
<p className="sm:text-lg mb-6">{description}</p>
<p className="mb-6 sm:text-lg">{description}</p>
</div>
);
}

16
nx-dev/ui-common/src/lib/selector.tsx
View File

@ -18,11 +18,11 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
{({ open }) => (
<>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded border border-gray-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-blue-300 focus-visible:ring-offset-2 focus-visible:border-blue-500 sm:text-sm font-medium">
<Listbox.Button className="relative w-full cursor-pointer rounded border border-gray-200 bg-white py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
<span className="block truncate">{props.selected.label}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<SelectorIcon
className="w-5 h-5 text-gray-500"
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
</span>
@ -39,7 +39,7 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
>
<Listbox.Options
static
className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-sm shadow-md max-h-60 focus:outline-none sm:text-sm z-10"
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 text-base shadow-md focus:outline-none sm:text-sm"
>
{props.items.map((item, personIdx) => (
<Listbox.Option
@ -47,16 +47,16 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
className={({ active }) =>
`${
active
? 'text-white bg-blue-nx-base'
? 'bg-blue-nx-base text-white'
: 'text-gray-500'
}
cursor-pointer select-none relative py-2 pl-10 pr-4`
relative cursor-pointer select-none py-2 pl-10 pr-4`
}
value={item}
>
{({ selected, active }) => (
<>
<span className={'font-medium block truncate'}>
<span className={'block truncate font-medium'}>
{item.label}
</span>
{selected || item.value === props.selected.value ? (
@ -67,7 +67,7 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
absolute inset-y-0 left-0 flex items-center pl-3`}
>
<CheckIcon
className="w-5 h-5"
className="h-5 w-5"
aria-hidden="true"
/>
</span>

26
nx-dev/ui-common/src/lib/testimonials.tsx
View File

@ -3,13 +3,13 @@ import React from 'react';
export function Testimonials() {
return (
<section className="bg-blue-nx-base">
<div className="max-w-7xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8">
<div className="py-12 px-4 sm:px-6 md:flex md:flex-col md:py-16 md:pl-0 md:pr-10 md:border-r md:border-blue-nx-dark lg:pr-16">
<div className="mx-auto max-w-7xl md:grid md:grid-cols-2 md:px-6 lg:px-8">
<div className="md:border-blue-nx-dark py-12 px-4 sm:px-6 md:flex md:flex-col md:border-r md:py-16 md:pl-0 md:pr-10 lg:pr-16">
<div className="md:flex-shrink-0">
<div className="mx-auto flex items-center text-white font-mono tracking-wider">
<div className="mx-auto flex items-center font-mono tracking-wider text-white">
<svg
role="img"
className="w-8 h-8"
className="h-8 w-8"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@ -19,10 +19,10 @@ export function Testimonials() {
<span className="ml-2 font-bold ">TypeScript-ESLint</span>
</div>
</div>
<blockquote className="mt-6 md:flex-grow md:flex md:flex-col">
<blockquote className="mt-6 md:flex md:flex-grow md:flex-col">
<div className="relative text-lg font-medium text-white md:flex-grow">
<svg
className="hidden md:flex absolute top-0 left-0 transform -translate-x-4 -translate-y-4 h-8 w-8 text-green-nx-base"
className="text-green-nx-base absolute top-0 left-0 hidden h-8 w-8 -translate-x-4 -translate-y-4 transform md:flex"
fill="currentColor"
viewBox="0 0 32 32"
aria-hidden="true"
@ -35,7 +35,7 @@ export function Testimonials() {
</div>
<footer className="mt-8">
<div className="flex items-start">
<div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
<div className="inline-flex flex-shrink-0 rounded-full border-2 border-white">
<img
className="h-12 w-12 rounded-full"
src="https://avatars.githubusercontent.com/u/900523?v=4"
@ -54,11 +54,11 @@ export function Testimonials() {
</footer>
</blockquote>
</div>
<div className="py-12 px-4 border-t-2 border-blue-nx-dark sm:px-6 md:py-16 md:pr-0 md:pl-10 md:border-t-0 md:border-l lg:pl-16">
<div className="border-blue-nx-dark border-t-2 py-12 px-4 sm:px-6 md:border-t-0 md:border-l md:py-16 md:pr-0 md:pl-10 lg:pl-16">
<div className="md:flex-shrink-0">
<div className="mx-auto flex items-center text-white font-mono tracking-wider">
<div className="mx-auto flex items-center font-mono tracking-wider text-white">
<svg
className="w-10 h-auto"
className="h-auto w-10"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -69,10 +69,10 @@ export function Testimonials() {
<span className="ml-2 font-bold ">Storybook</span>
</div>
</div>
<blockquote className="mt-6 md:flex-grow md:flex md:flex-col">
<blockquote className="mt-6 md:flex md:flex-grow md:flex-col">
<div className="relative text-lg font-medium text-white md:flex-grow">
<svg
className="hidden md:flex absolute top-0 left-0 transform -translate-x-4 -translate-y-4 h-8 w-8 text-green-nx-base"
className="text-green-nx-base absolute top-0 left-0 hidden h-8 w-8 -translate-x-4 -translate-y-4 transform md:flex"
fill="currentColor"
viewBox="0 0 32 32"
>
@ -85,7 +85,7 @@ export function Testimonials() {
</div>
<footer className="mt-8">
<div className="flex items-start">
<div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
<div className="inline-flex flex-shrink-0 rounded-full border-2 border-white">
<img
className="h-12 w-12 rounded-full"
src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=8cc7a3620510c32066d3fbb193e7eb23"

38
nx-dev/ui-home/src/lib/affected-command.tsx
View File

@ -52,9 +52,9 @@ export function AffectedCommand(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -76,7 +76,7 @@ export function AffectedCommand(): ReactComponentElement<any> {
<Link href="/using-nx/affected">
<a
title="Nx allows you to see what is affected by your changes"
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
>
Learn about "nx affected"
</a>
@ -86,13 +86,13 @@ export function AffectedCommand(): ReactComponentElement<any> {
</div>
</div>
<div
className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1"
className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0"
aria-hidden="true"
>
<div className="relative px-4 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<div className="relative px-4 sm:pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<motion.div
variants={opacityTranslateXVariant}
className="-mt-8 w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
className="-mt-8 w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
>
<Image
src="/images/nx-affected.webp"
@ -105,35 +105,35 @@ export function AffectedCommand(): ReactComponentElement<any> {
<motion.div
variants={opacityTranslateXVariant}
custom={0.25}
className="hidden md:flex absolute -bottom-8 right-8 bg-gray-500 rounded-xl shadow-xl"
className="absolute -bottom-8 right-8 hidden rounded-xl bg-gray-500 shadow-xl md:flex"
>
<div
className="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
bg-gray-800 pb-6 pt-4 rounded-lg leading-normal overflow-hidden"
className="coding inverse-toggle overflow-hidden rounded-lg bg-gray-800 px-5 pt-4 pb-6 pt-4
font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
>
<div className="top mb-2 flex">
<div className="h-3 w-3 bg-red-500 rounded-full" />
<div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
<div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
<div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="mt-4 flex">
<span className="text-green-400">/workspace ➜</span>
<p className="flex-1 typing items-center pl-2">
<p className="typing flex-1 items-center pl-2">
nx affected:test --parallel
</p>
</div>
<div className="mt-2 flex">
<p className="flex-1 typing items-center pl-2">
<p className="typing flex-1 items-center pl-2">
<span className="text-green-400">{'>'}</span>{' '}
<span className="px-1 py-0.5 bg-blue-nx-base">NX</span>
<span className="ml-1 px-1 py-0.5 bg-yellow-500">
<span className="bg-blue-nx-base px-1 py-0.5">NX</span>
<span className="ml-1 bg-yellow-500 px-1 py-0.5">
NOTE
</span>{' '}
Affected criteria defaulted to --base=master --head=HEAD
<br />
<br />
<span className="text-green-400">{'>'}</span>{' '}
<span className="px-1 py-0.5 bg-blue-nx-base mr-1">NX</span>{' '}
<span className="bg-blue-nx-base mr-1 px-1 py-0.5">NX</span>{' '}
Running target test for 3 project(s):
<br />
- nx-dev <br />
@ -144,10 +144,10 @@ export function AffectedCommand(): ReactComponentElement<any> {
<span className="text-green-400">{'>'}</span> nx run
nx-dev:test RUNS nx-dev
<br />
<span className="px-1 py-0.5 bg-green-nx-base">
<span className="bg-green-nx-base px-1 py-0.5">
RUNS
</span>{' '}
<span className="px-1 py-0.5 bg-gray-200 text-gray-700">
<span className="bg-gray-200 px-1 py-0.5 text-gray-700">
nx-dev
</span>{' '}
nx-dev/nx-dev/specs/index.spec.tsx

14
nx-dev/ui-home/src/lib/cloud-support.tsx
View File

@ -52,9 +52,9 @@ export function CloudSupport(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -75,7 +75,7 @@ export function CloudSupport(): ReactComponentElement<any> {
<Link href="https://nx.app">
<a
title="Enable Nx generation monorepo tooling with NxCloud"
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
>
Enable Nx Cloud
</a>
@ -86,12 +86,12 @@ export function CloudSupport(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-2"
className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0"
>
<div className="relative px-4 sm:pr-6 lg:px-0 lg:h-full">
<div className="relative px-4 sm:pr-6 lg:h-full lg:px-0">
<motion.div
variants={opacityTranslateXVariant}
className="w-full mx-auto max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:left-16 lg:-top-28 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
className="mx-auto w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:left-16 lg:-top-28 lg:h-full lg:w-auto lg:max-w-none"
>
<Image
src="/images/nx-cloud.webp"
@ -104,7 +104,7 @@ export function CloudSupport(): ReactComponentElement<any> {
<motion.div
variants={opacityTranslateXVariant}
custom={0.25}
className="w-full mx-auto max-w-screen-sm hidden lg:flex rounded-xl shadow-xl border border-gray-300 lg:absolute lg:-left-20 lg:-bottom-64 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
className="mx-auto hidden w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:-left-20 lg:-bottom-64 lg:flex lg:h-full lg:w-auto lg:max-w-none"
>
<Image
src="/images/github-app.webp"

12
nx-dev/ui-home/src/lib/dependency-graph.tsx
View File

@ -51,9 +51,9 @@ export function DependencyGraph(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -73,7 +73,7 @@ export function DependencyGraph(): ReactComponentElement<any> {
<Link href="/structure/dependency-graph">
<a
title="Nx graph tool to visally interact with monorepo dependencies"
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
>
Learn about "nx graph"
</a>
@ -84,15 +84,15 @@ export function DependencyGraph(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-2"
className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0"
>
<motion.div
variants={opacityTranslateXVariant}
className="relative px-4 lg:px-0 lg:h-full"
className="relative px-4 lg:h-full lg:px-0"
>
<video
preload="true"
className="-mt-8 mx-auto w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:left-16 lg:h-full lg:w-auto lg:max-w-none"
className="mx-auto -mt-8 w-full max-w-screen-sm rounded-xl border border-gray-300 shadow-xl lg:absolute lg:left-16 lg:h-full lg:w-auto lg:max-w-none"
autoPlay={true}
loop
muted

16
nx-dev/ui-home/src/lib/ecosystem-features.tsx
View File

@ -195,9 +195,9 @@ export function EcosystemFeatures(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<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="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -217,27 +217,27 @@ export function EcosystemFeatures(): ReactComponentElement<any> {
</div>
</div>
</div>
<div className="md:mt-16 lg:mt-0 lg:col-start-2">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
<div className="md:mt-16 lg:col-start-2 lg:mt-0">
<div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => (
<motion.div
key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant}
className={cx(
'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
[2, 3].includes(index) && 'lg:left-8'
)}
>
<div
className={cx(
'flex-shrink-0 p-2 rounded-full text-white ',
'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames
)}
>
{item.svg}
</div>
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<Link href={item.link}>
<a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />

12
nx-dev/ui-home/src/lib/egghead-courses.tsx
View File

@ -15,7 +15,7 @@ export function EggheadCourses(): ReactComponentElement<any> {
return (
<article
id="egghead-course"
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
>
<motion.div
ref={ref}
@ -32,9 +32,9 @@ export function EggheadCourses(): ReactComponentElement<any> {
},
},
}}
className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
>
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Scale React Development</span>
@ -48,7 +48,7 @@ export function EggheadCourses(): ReactComponentElement<any> {
title="Start learning how to create React application that scale with Nx"
rel="nofollow"
target="_blank"
className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
>
Start learning now
</a>
@ -57,11 +57,11 @@ export function EggheadCourses(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"
className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6"
>
<img
loading="lazy"
className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
className="translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
src="/images/nx-egghead-course.webp"
alt="nx egghead course"
/>

10
nx-dev/ui-home/src/lib/event-banner.tsx
View File

@ -2,9 +2,9 @@ import React, { ReactComponentElement } from 'react';
export function EventBanner(): ReactComponentElement<any> {
return (
<div className="relative bg-green-nx-base">
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
<div className="pr-16 sm:text-center sm:px-16">
<div className="bg-green-nx-base relative">
<div className="mx-auto max-w-7xl py-4 px-3 sm:px-6 lg:px-8">
<div className="pr-16 sm:px-16 sm:text-center">
<p className="font-medium text-white">
New event! We're excited to announce a new Nx workshop on December.
<span className="block sm:ml-2 sm:inline-block">
@ -12,13 +12,13 @@ export function EventBanner(): ReactComponentElement<any> {
href="https://ti.to/nrwl/nx-workshop-12-2021?utm_source=nx.dev"
target="_blank"
rel="nofollow"
className="text-white font-bold underline group"
className="group font-bold text-white underline"
>
{' '}
Register now{' '}
<span
aria-hidden="true"
className="inline-block group-hover:translate-x-2 transition"
className="inline-block transition group-hover:translate-x-2"
>
&rarr;
</span>

16
nx-dev/ui-home/src/lib/experience-features.tsx
View File

@ -190,9 +190,9 @@ export function ExperienceFeatures(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<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-2">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -212,27 +212,27 @@ export function ExperienceFeatures(): ReactComponentElement<any> {
</div>
</div>
</div>
<div className="md:mt-16 lg:mt-0 lg:col-start-1">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
<div className="md:mt-16 lg:col-start-1 lg:mt-0">
<div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => (
<motion.div
key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant}
className={cx(
'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
[2, 3].includes(index) && 'lg:left-8'
)}
>
<div
className={cx(
'flex-shrink-0 p-2 rounded-full text-white ',
'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames
)}
>
{item.svg}
</div>
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<Link href={item.link}>
<a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />

212
nx-dev/ui-home/src/lib/getting-started.tsx
View File

@ -22,7 +22,7 @@ function Tabs({
setActiveTab: (id: string) => void;
}): ReactComponentElement<any> {
return (
<div className="mt-12 max-w-3xl mx-auto">
<div className="mx-auto mt-12 max-w-3xl">
<div>
<div className="px-4 sm:hidden">
<label htmlFor="getting-started-tabs" className="sr-only">
@ -31,7 +31,7 @@ function Tabs({
<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"
className="focus:ring-blue-nx-base focus:border-blue-nx-base block w-full rounded-md border-gray-300"
value={tabs.find((tab) => tab.id === activeTab)?.id}
onChange={(event) => setActiveTab(event.target.value)}
>
@ -44,7 +44,7 @@ function Tabs({
</div>
<div className="hidden sm:block">
<nav
className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
className="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow"
aria-label="Tabs"
>
<h2 className="sr-only">
@ -56,10 +56,10 @@ function Tabs({
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',
'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm uppercase transition ease-out hover:bg-gray-50 focus:z-10',
tab.id === activeTab
? 'text-gray-600 font-bold'
: 'text-gray-400 hover:text-gray-600 font-medium',
? 'font-bold text-gray-600'
: 'font-medium text-gray-400 hover:text-gray-600',
tabIdx === 0 ? 'rounded-l-lg' : '',
tabIdx === tabs.length - 1 ? 'rounded-r-lg' : ''
)}
@ -123,25 +123,25 @@ function AngularPane(): ReactComponentElement<any> {
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">
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
Create an Angular Workspace with Nx
</h2>
<p className="mt-4 mx-4">
<p className="mx-4 mt-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">
<p className="mx-4 mt-4 font-medium italic 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"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -152,7 +152,7 @@ function AngularPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
Angular{' '}
<Link href="/angular-tutorial/01-create-application">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our Angular tutorial)
</a>
</Link>{' '}
@ -170,7 +170,7 @@ function AngularPane(): ReactComponentElement<any> {
</div>
<div className="relative my-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -181,7 +181,7 @@ function AngularPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
Full-stack app built with Angular and Nest.js{' '}
<Link href="/angular-tutorial/01-create-application">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our Angular tutorial)
</a>
</Link>{' '}
@ -199,8 +199,8 @@ function AngularPane(): ReactComponentElement<any> {
</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">
<div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe
loading="lazy"
className="max-w-screen-sm"
@ -210,18 +210,18 @@ function AngularPane(): ReactComponentElement<any> {
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">
<div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
AngularCLI migration
</p>
<p className="text-xs text-gray-500">
@ -232,11 +232,11 @@ function AngularPane(): ReactComponentElement<any> {
</Link>
</div>
<div className="flex-shrink-0">
<div className="p-2 rounded-full text-white border border-gray-100 bg-white">
<div className="rounded-full border border-gray-100 bg-white p-2 text-white">
<svg
role="img"
viewBox="0 0 24 24"
className="w-6 h-6 text-[#DD0031]"
className="h-6 w-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" />
@ -244,7 +244,7 @@ function AngularPane(): ReactComponentElement<any> {
</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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -267,14 +267,14 @@ function AngularPane(): ReactComponentElement<any> {
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
AngularJS migration
</p>
<p className="text-xs text-gray-500">
@ -284,11 +284,11 @@ function AngularPane(): ReactComponentElement<any> {
</Link>
</div>
<div className="flex-shrink-0">
<div className="p-2 rounded-full text-white border border-gray-100 bg-white">
<div className="rounded-full border border-gray-100 bg-white p-2 text-white">
<svg
role="img"
viewBox="0 0 24 24"
className="w-6 h-6 text-[#E23237]"
className="h-6 w-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" />
@ -296,7 +296,7 @@ function AngularPane(): ReactComponentElement<any> {
</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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -365,13 +365,13 @@ function NodeJsPane(): ReactComponentElement<any> {
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">
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
Create a Node Workspace with Nx
</h2>
<p className="mt-4 mx-4">
<p className="mx-4 mt-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.
@ -379,7 +379,7 @@ function NodeJsPane(): ReactComponentElement<any> {
<div className="relative mt-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -390,7 +390,7 @@ function NodeJsPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
NestJS{' '}
<Link href="/node-tutorial/01-create-application">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our Nest tutorial)
</a>
</Link>{' '}
@ -408,7 +408,7 @@ function NodeJsPane(): ReactComponentElement<any> {
</div>
<div className="relative my-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -430,8 +430,8 @@ function NodeJsPane(): ReactComponentElement<any> {
</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">
<div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe
loading="lazy"
className="max-w-screen-sm"
@ -441,18 +441,18 @@ function NodeJsPane(): ReactComponentElement<any> {
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">
<div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
Lerna migration
</p>
<p className="text-xs text-gray-500">
@ -462,16 +462,16 @@ function NodeJsPane(): ReactComponentElement<any> {
</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">
<div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
<img
className="h-6 w-6 filter invert"
className="h-6 w-6 invert filter"
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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -540,13 +540,13 @@ function ReactPane(): ReactComponentElement<any> {
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">
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
Create a React Workspace with Nx
</h2>
<p className="mt-4 mx-4">
<p className="mx-4 mt-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.
@ -554,7 +554,7 @@ function ReactPane(): ReactComponentElement<any> {
<div className="relative mt-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -565,7 +565,7 @@ function ReactPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
React{' '}
<Link href="/react-tutorial/01-create-application">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our React tutorial)
</a>
</Link>{' '}
@ -594,7 +594,7 @@ function ReactPane(): ReactComponentElement<any> {
</svg>*/}
<h3 className="mt-2 font-semibold">React Native</h3>
<div className="mt-2 max-w-full inline-flex">
<div className="mt-2 inline-flex max-w-full">
<InlineCommand
language={'bash'}
command={'npx create-nx-workspace --preset=react-native'}
@ -607,7 +607,7 @@ function ReactPane(): ReactComponentElement<any> {
<div className="relative my-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -618,7 +618,7 @@ function ReactPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
Next.js{' '}
<Link href="/next/overview">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our Next.js guide)
</a>
</Link>{' '}
@ -636,8 +636,8 @@ function ReactPane(): ReactComponentElement<any> {
</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">
<div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe
loading="lazy"
className="max-w-screen-sm"
@ -647,18 +647,18 @@ function ReactPane(): ReactComponentElement<any> {
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">
<div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
CRA migration
</p>
<p className="text-xs text-gray-500">
@ -668,10 +668,10 @@ function ReactPane(): ReactComponentElement<any> {
</Link>
</div>
<div className="flex-shrink-0">
<div className="p-2 rounded-full text-white bg-gray-600">
<div className="rounded-full bg-gray-600 p-2 text-white">
<svg
viewBox="0 0 24 24"
className="w-6 h-6 text-[#09D3AC]"
className="h-6 w-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" />
@ -679,7 +679,7 @@ function ReactPane(): ReactComponentElement<any> {
</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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -700,14 +700,14 @@ function ReactPane(): ReactComponentElement<any> {
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
Lerna migration
</p>
<p className="text-xs text-gray-500">
@ -717,16 +717,16 @@ function ReactPane(): ReactComponentElement<any> {
</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">
<div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
<img
className="h-6 w-6 filter invert"
className="h-6 w-6 invert filter"
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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -795,13 +795,13 @@ function TypescriptPane(): ReactComponentElement<any> {
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">
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
Create a TypeScript/JavaScript Workspace with Nx
</h2>
<p className="mt-4 mx-4">
<p className="mx-4 mt-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.
@ -809,7 +809,7 @@ function TypescriptPane(): ReactComponentElement<any> {
<div className="relative my-6 pl-14 pr-4">
<svg
className="absolute left-4 top-0 w-6 h-6"
className="absolute left-4 top-0 h-6 w-6"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -820,7 +820,7 @@ function TypescriptPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold">
TypeScript/JavaScript{' '}
<Link href="/getting-started/nx-and-typescript">
<a className="italic font-normal text-sm text-gray-600 hover:underline">
<a className="text-sm font-normal italic text-gray-600 hover:underline">
(follow our Nx and TypeScript tutorial)
</a>
</Link>
@ -838,8 +838,8 @@ function TypescriptPane(): ReactComponentElement<any> {
</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">
<div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe
loading="lazy"
className="max-w-screen-sm"
@ -849,18 +849,18 @@ function TypescriptPane(): ReactComponentElement<any> {
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">
<div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/getting-started/nx-and-typescript">
<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">
<p className="text-md mb-0.5 font-bold text-gray-600">
Nx and TypeScript
</p>
<p className="text-xs text-gray-500">
@ -871,9 +871,9 @@ function TypescriptPane(): ReactComponentElement<any> {
</Link>
</div>
<div className="flex-shrink-0">
<div className="p-2 rounded-full text-white bg-[#3178C6]">
<div className="rounded-full bg-[#3178C6] p-2 text-white">
<svg
className="p-0.5 w-6 h-6"
className="h-6 w-6 p-0.5"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
@ -884,7 +884,7 @@ function TypescriptPane(): ReactComponentElement<any> {
</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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -907,14 +907,14 @@ function TypescriptPane(): ReactComponentElement<any> {
<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"
className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
>
<div className="px-4 py-3 flex w-full">
<div className="flex-1 min-w-0">
<div className="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/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">
<p className="text-md mb-0.5 font-bold text-gray-600">
Lerna migration
</p>
<p className="text-xs text-gray-500">
@ -924,16 +924,16 @@ function TypescriptPane(): ReactComponentElement<any> {
</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">
<div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
<img
className="h-6 w-6 filter invert"
className="h-6 w-6 invert filter"
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">
<div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
@ -970,7 +970,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg
viewBox="0 0 24 24"
className={cx(
'w-8 h-8 flex-shrink-0 group-hover:text-[#3178C6] transition ease-out',
'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#3178C6]',
active ? 'text-[#3178C6]' : 'text-gray-400'
)}
fill="currentColor"
@ -986,7 +986,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg
viewBox="0 0 24 24"
className={cx(
'w-8 h-8 flex-shrink-0 group-hover:text-[#52C1DE] transition ease-out',
'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#52C1DE]',
active ? 'text-[#52C1DE]' : 'text-gray-400'
)}
fill="currentColor"
@ -1002,7 +1002,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg
viewBox="0 0 24 24"
className={cx(
'w-8 h-8 flex-shrink-0 group-hover:text-[#E2431F] transition ease-out',
'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#E2431F]',
active ? 'text-[#E2431F]' : 'text-gray-400'
)}
fill="currentColor"
@ -1018,7 +1018,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg
viewBox="0 0 24 24"
className={cx(
'w-8 h-8 flex-shrink-0 group-hover:text-[#77AE64] transition ease-out',
'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#77AE64]',
active ? 'text-[#77AE64]' : 'text-gray-400'
)}
fill="currentColor"

14
nx-dev/ui-home/src/lib/monorepo-features.tsx
View File

@ -196,9 +196,9 @@ export function MonorepoFeatures(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<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">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -225,26 +225,26 @@ export function MonorepoFeatures(): ReactComponentElement<any> {
</div>
</div>
<div className="mm:mt-16 lg:mt-0">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
<div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => (
<motion.div
key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant}
className={cx(
'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
[2, 3].includes(index) && 'lg:-left-8'
)}
>
<div
className={cx(
'flex-shrink-0 p-2 rounded-full text-white ',
'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames
)}
>
{item.svg}
</div>
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<Link href={item.link}>
<a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />

14
nx-dev/ui-home/src/lib/nx-playbook.tsx
View File

@ -15,7 +15,7 @@ export function NxPlaybook(): ReactComponentElement<any> {
return (
<article
id="nx-playbook"
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
>
<motion.div
ref={ref}
@ -32,10 +32,10 @@ export function NxPlaybook(): ReactComponentElement<any> {
},
},
}}
className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
>
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="lg:self-center relative">
<div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="relative lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Premium courses</span>
<span className="block">to know everything</span>
@ -50,7 +50,7 @@ export function NxPlaybook(): ReactComponentElement<any> {
title="Dedicated carefully created Nx courses to get you up and running in no time"
rel="nofollow"
target="_blank"
className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
>
Check the courses on NxPlaybook
</a>
@ -59,11 +59,11 @@ export function NxPlaybook(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"
className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6"
>
<img
loading="lazy"
className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
className="translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
src="/images/nx-playbook.webp"
alt="nx courses on nxplaybook.com"
/>

18
nx-dev/ui-home/src/lib/open-platform.tsx
View File

@ -5,7 +5,7 @@ import { useInView } from 'react-intersection-observer';
const featureItems: ReactComponentElement<any>[] = [
<svg
id="typescript-logo"
className="w-full max-h-12 fill-current text-[#3178C6]"
className="max-h-12 w-full fill-current text-[#3178C6]"
role="img"
viewBox="0 0 24 24"
>
@ -13,7 +13,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>,
<svg
id="python-logo"
className="w-full max-h-12 fill-current text-yellow-500"
className="max-h-12 w-full fill-current text-yellow-500"
role="img"
viewBox="0 0 24 24"
>
@ -21,14 +21,14 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>,
<svg
id="go-logo"
className="w-full max-h-12 fill-current text-[#7FD5EA]"
className="max-h-12 w-full fill-current text-[#7FD5EA]"
viewBox="0 0 24 24"
>
<path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z" />
</svg>,
<svg
id="rust-logo"
className="w-full max-h-12 fill-current text-gray-800"
className="max-h-12 w-full fill-current text-gray-800"
role="img"
viewBox="0 0 24 24"
>
@ -36,7 +36,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>,
<svg
id="kotlin-logo"
className="w-full max-h-12 fill-current text-purple-500"
className="max-h-12 w-full fill-current text-purple-500"
role="img"
viewBox="0 0 24 24"
>
@ -44,7 +44,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>,
<svg
id=".net-logo"
className="w-full max-h-12 fill-current text-gray-800"
className="max-h-12 w-full fill-current text-gray-800"
role="img"
viewBox="0 0 24 24"
>
@ -84,7 +84,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
return (
<article
id="open-platform"
className="mt-32 max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
className="mx-auto mt-32 max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
>
<motion.div
ref={ref}
@ -103,7 +103,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
},
},
}}
className="lg:grid lg:grid-cols-2 lg:gap-24 lg:items-center lg:grid-flow-col-dense"
className="lg:grid lg:grid-flow-col-dense lg:grid-cols-2 lg:items-center lg:gap-24"
>
<div>
<div className="mt-6">
@ -135,7 +135,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
<motion.div
key={'open-platform-' + index}
variants={opacityTranslateXVariant}
className="col-span-1 flex justify-center py-8 px-8 bg-white rounded-md border border-gray-300 "
className="col-span-1 flex justify-center rounded-md border border-gray-300 bg-white py-8 px-8 "
>
{svg}
</motion.div>

28
nx-dev/ui-home/src/lib/open-source-projects.tsx
View File

@ -13,7 +13,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!',
icon: (
<svg
className="w-10 h-auto text-[#FF4785]"
className="h-auto w-10 text-[#FF4785]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -30,7 +30,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'Fluent UI web represents a collection of utilities, React components, and web components for building web applications.',
icon: (
<svg
className="w-10 h-auto text-[#5E5E5E]"
className="h-auto w-10 text-[#5E5E5E]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -46,7 +46,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
description: 'Reactive libraries for Angular.',
icon: (
<svg
className="w-10 h-auto"
className="h-auto w-10"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 1000"
@ -85,7 +85,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.',
icon: (
<svg
className="w-10 h-auto text-[#3655FF]"
className="h-auto w-10 text-[#3655FF]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -102,7 +102,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'Monorepo for all the tooling which enables ESLint to support TypeScript',
icon: (
<svg
className="w-10 h-auto text-[#3178C6]"
className="h-auto w-10 text-[#3178C6]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -119,7 +119,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'The Homebridge UI. Monitor, configure and backup Homebridge from a browser.',
icon: (
<svg
className="w-10 h-auto text-[#491F59]"
className="h-auto w-10 text-[#491F59]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -154,7 +154,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)',
icon: (
<svg
className="w-10 h-auto"
className="h-auto w-10"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 27"
@ -192,7 +192,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'WooCommerce is a customizable, open-source eCommerce platform built on WordPress. Get started quickly and make your way.',
icon: (
<svg
className="w-10 h-auto text-[#96588A]"
className="h-auto w-10 text-[#96588A]"
fill="currentColor"
role="img"
viewBox="0 0 24 24"
@ -263,9 +263,9 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
},
},
}}
className="lg:mx-auto lg:max-w-7xl p-4 flex"
className="flex p-4 lg:mx-auto lg:max-w-7xl"
>
<div className="w-full rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 divide-y-0 grid grid-cols-2 gap-px">
<div className="grid w-full grid-cols-2 gap-px divide-y divide-y-0 divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow">
{projectList.map((project, index: number) => (
<motion.div
key={project.title + '-' + index}
@ -278,11 +278,11 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
index === projectList.length - 1
? 'rounded-br-lg rounded-bl-none'
: '',
'relative w-full group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-nx-base'
'group focus-within:ring-blue-nx-base relative w-full bg-white p-6 focus-within:ring-2 focus-within:ring-inset'
)}
>
<div>
<span className="rounded-lg inline-flex">{project.icon}</span>
<span className="inline-flex rounded-lg">{project.icon}</span>
</div>
<div className="sm:mt-2">
<p className="text-lg font-medium">
@ -298,12 +298,12 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
</a>
</Link>
</p>
<p className="mt-2 hidden sm:block text-sm text-gray-400">
<p className="mt-2 hidden text-sm text-gray-400 sm:block">
{project.description}
</p>
</div>
<span
className="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400 transition-all group-hover:translate-x-2 group-hover:-translate-y-2"
className="pointer-events-none absolute top-6 right-6 text-gray-300 transition-all group-hover:translate-x-2 group-hover:-translate-y-2 group-hover:text-gray-400"
aria-hidden="true"
>
<svg

12
nx-dev/ui-home/src/lib/performance.tsx
View File

@ -84,9 +84,9 @@ export function Performance(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -107,7 +107,7 @@ export function Performance(): ReactComponentElement<any> {
</div>
</div>
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:col-start-1">
<div className="p-8 lg:pt-0 lg:pl-0 lg:pb-8 lg:pr-8 col-span-1 flex flex-col justify-center border-r border-b border-gray-100">
<div className="col-span-1 flex flex-col justify-center border-r border-b border-gray-100 p-8 lg:pt-0 lg:pl-0 lg:pb-8 lg:pr-8">
<div className="text-lg text-gray-600">Up to</div>
<div
aria-hidden="true"
@ -121,7 +121,7 @@ export function Performance(): ReactComponentElement<any> {
reduction in CI time for mid-size projects with standard CI setups
</div>
</div>
<div className="p-8 lg:pr-0 lg:pt-0 lg:pb-8 lg:pl-8 col-span-1 flex flex-col justify-center border-l border-b border-gray-100">
<div className="col-span-1 flex flex-col justify-center border-l border-b border-gray-100 p-8 lg:pr-0 lg:pt-0 lg:pb-8 lg:pl-8">
<div className="text-lg text-gray-600">Up to</div>
<div
aria-hidden="true"
@ -135,7 +135,7 @@ export function Performance(): ReactComponentElement<any> {
reduction in CI time for large projects with standard CI setups
</div>
</div>
<div className="p-8 lg:pb-0 lg:pl-0 lg:pt-8 lg:pr-8 col-span-1 flex flex-col justify-center border-r border-t border-gray-100">
<div className="col-span-1 flex flex-col justify-center border-r border-t border-gray-100 p-8 lg:pb-0 lg:pl-0 lg:pt-8 lg:pr-8">
<div className="text-lg text-gray-600">Up to</div>
<div
aria-hidden="true"
@ -150,7 +150,7 @@ export function Performance(): ReactComponentElement<any> {
distributed CI setups
</div>
</div>
<div className="p-8 lg:pb-0 lg:pr-0 lg:pt-8 lg:pl-8 col-span-1 flex flex-col justify-center border-l border-t border-gray-100">
<div className="col-span-1 flex flex-col justify-center border-l border-t border-gray-100 p-8 lg:pb-0 lg:pr-0 lg:pt-8 lg:pl-8">
<div className="text-lg text-gray-600">Average</div>
<div
aria-hidden="true"

12
nx-dev/ui-home/src/lib/vscode-plugin.tsx
View File

@ -52,9 +52,9 @@ export function VscodePlugin(): ReactComponentElement<any> {
},
},
}}
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"
className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div className="mt-6">
<motion.h1
@ -75,7 +75,7 @@ export function VscodePlugin(): ReactComponentElement<any> {
<Link href="/using-nx/console">
<a
title="Get a better monorepo experience with Nx Console"
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
>
Install Nx Console
</a>
@ -86,12 +86,12 @@ export function VscodePlugin(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1"
className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0"
>
<div className="relative px-4 lg:px-0 lg:h-full">
<div className="relative px-4 lg:h-full lg:px-0">
<motion.div
variants={opacityTranslateXVariant}
className="-mt-8 mx-auto w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
className="mx-auto -mt-8 w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
>
<Image
src="/images/nx-console.webp"

12
nx-dev/ui-home/src/lib/youtube-channel.tsx
View File

@ -15,7 +15,7 @@ export function YoutubeChannel(): ReactComponentElement<any> {
return (
<article
id="youtube-channel"
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
>
<motion.div
ref={ref}
@ -32,9 +32,9 @@ export function YoutubeChannel(): ReactComponentElement<any> {
},
},
}}
className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
>
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 lg:order-2">
<div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:order-2 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">A dedicated</span>
@ -49,7 +49,7 @@ export function YoutubeChannel(): ReactComponentElement<any> {
title="Get the latest resources about Nx"
rel="nofollow"
target="_blank"
className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
>
Check the Nx Youtube channel
</a>
@ -58,11 +58,11 @@ export function YoutubeChannel(): ReactComponentElement<any> {
</div>
<div
aria-hidden="true"
className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 lg:order-1"
className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6 lg:order-1"
>
<img
loading="lazy"
className="transform -translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:-translate-x-22 lg:translate-y-20"
className="sm:-translate-x-22 -translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top lg:translate-y-20"
src="/images/nrwlio-channel.webp"
alt="nrwl youtube channel"
/>

8
nx-dev/ui-member-card/src/lib/member-card.tsx
View File

@ -9,8 +9,8 @@ export interface Member {
export function MemberCard(data: Member): JSX.Element {
return (
<figure className="py-6 grid grid-cols-5 md:grid-cols-3 gap-12 align-center items-center justify-center">
<div className="rounded-full col-span-2 md:col-span-1">
<figure className="align-center grid grid-cols-5 items-center justify-center gap-12 py-6 md:grid-cols-3">
<div className="col-span-2 rounded-full md:col-span-1">
<Image
src={data.imageUrl}
alt={data.name}
@ -20,11 +20,11 @@ export function MemberCard(data: Member): JSX.Element {
/>
</div>
<div className="col-span-3 md:col-span-2">
<h5 className="mb-3 font-input-mono">{data.name}</h5>
<h5 className="font-input-mono mb-3">{data.name}</h5>
<p className="text-gray-400">{data.description}</p>
{data.twitter ? (
<a
className="mt-6 block font-input-mono"
className="font-input-mono mt-6 block"
href={'https://twitter.com/' + data.twitter}
target="_blank"
rel="nofollow"

4
nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
View File

@ -8,7 +8,7 @@ export interface Sponsor {
}
export function SponsorCard(data: Sponsor) {
return (
<figure className="py-6 h-full grid grid-cols-1 md:grid-cols-3 gap-12 align-center items-center justify-center">
<figure className="align-center grid h-full grid-cols-1 items-center justify-center gap-12 py-6 md:grid-cols-3">
<div className="rounded-full md:col-span-1">
<a
className="cursor-pointer"
@ -20,7 +20,7 @@ export function SponsorCard(data: Sponsor) {
</a>
</div>
<div className="md:col-span-2">
<h5 className="mb-3 font-input-mono">{data.name}</h5>
<h5 className="font-input-mono mb-3">{data.name}</h5>
<p className="text-gray-400">{data.description}</p>
</div>
</figure>

3
package.json
View File

@ -201,6 +201,7 @@
"postcss-url": "^10.1.1",
"precise-commits": "1.0.2",
"prettier": "2.5.1",
"prettier-plugin-tailwindcss": "^0.1.5",
"pretty-quick": "^3.1.0",
"protractor": "5.4.3",
"raw-loader": "^4.0.2",
@ -306,4 +307,4 @@
"**/xmlhttprequest-ssl": "~1.6.2",
"immer": "~9.0.6"
}
}
}

5
yarn.lock
View File

@ -20086,6 +20086,11 @@ prettier-bytes@^1.0.4:
resolved "https://registry.npmjs.org/prettier-bytes/-/prettier-bytes-1.0.4.tgz"
integrity sha1-mUsCqkb2mcULYle1+qp/4lV+YtY=
prettier-plugin-tailwindcss@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz#1709b4cea44873cbfefe9862f9f0827a51fe8cc3"
integrity sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==
prettier@2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"