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 <div
id="debugger-panel" id="debugger-panel"
className=" className="
flex-column
flex
w-auto w-auto
text-gray-700 items-center justify-items-center
bg-gray-50
border-b border-gray-200
p-4
flex flex-column
items-center
justify-items-center
gap-4 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 <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" data-cy="project-select"
onChange={(event) => projectGraphChange(event.target.value)} onChange={(event) => projectGraphChange(event.target.value)}
value={selectedProjectGraph} value={selectedProjectGraph}
@ -47,9 +47,9 @@ export const DebuggerPanel = memo(function ({
</select> </select>
<p className="text-sm"> <p className="text-sm">
Last render took {lastPerfReport.renderTime}ms:{' '} 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> </p>
</div> </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"> <div id="no-projects-chosen" className="flex text-gray-700">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mr-4" className="mr-4 h-6 w-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -132,20 +132,20 @@ export function Shell() {
<button <button
type="button" type="button"
className={` className={`
bg-green-nx-base
fixed fixed
z-50
bottom-4 bottom-4
right-4 right-4
w-16 z-50
h-16
rounded-full
bg-green-nx-base
shadow-sm
text-white
block block
h-16
w-16
transform
rounded-full
text-white
shadow-sm
transition transition
duration-300 duration-300
transform
${!projectIsSelected ? 'opacity-0' : ''} ${!projectIsSelected ? 'opacity-0' : ''}
`} `}
data-cy="downloadImageButton" 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 ( return (
<div className="mt-10 px-4"> <div className="mt-10 px-4">
<div <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" data-cy="unfocusButton"
onClick={() => resetFocus()} onClick={() => resetFocus()}
> >
<p className="truncate transition duration-200 ease-in-out group-hover:opacity-60"> <p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
<svg <svg
xmlns="http://www.w3.org/2000/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" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -31,9 +31,9 @@ export const FocusedProjectPanel = memo(
</svg> </svg>
<span id="focused-project-name">Focused on {focusedProject}</span> <span id="focused-project-name">Focused on {focusedProject}</span>
</p> </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 Reset
<span className="p-1 rounded-md"> <span className="rounded-md p-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5" 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 ( return (
<div className="mt-8 px-4"> <div className="mt-8 px-4">
<div className="flex items-start"> <div className="flex items-start">
<div className="flex items-center h-5"> <div className="flex h-5 items-center">
<input <input
id="displayOptions" id="displayOptions"
name="displayOptions" name="displayOptions"
value="groupByFolder" value="groupByFolder"
type="checkbox" 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)} onChange={(event) => groupByFolderChanged(event.target.checked)}
checked={groupByFolder} checked={groupByFolder}
></input> ></input>

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

@ -61,7 +61,7 @@ function ProjectListItem({
focusProject: (projectId: string) => void; focusProject: (projectId: string) => void;
}) { }) {
return ( 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"> <div className="flex items-center">
<button <button
type="button" type="button"
@ -69,7 +69,7 @@ function ProjectListItem({
title="Focus on this library" title="Focus on this library"
onClick={() => focusProject(project.projectGraphNode.name)} 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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5" className="h-5 w-5"
@ -86,7 +86,7 @@ function ProjectListItem({
</span> </span>
</button> </button>
<label <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-project={project.projectGraphNode.name}
data-active={project.isSelected.toString()} data-active={project.isSelected.toString()}
onClick={() => onClick={() =>
@ -100,7 +100,7 @@ function ProjectListItem({
{project.isSelected ? ( {project.isSelected ? (
<span <span
title="This library is visible" 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={() => onClick={() =>
toggleProject(project.projectGraphNode.name, project.isSelected) toggleProject(project.projectGraphNode.name, project.isSelected)
} }
@ -159,7 +159,7 @@ function SubProjectList({
return ( 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} {headerText}
</h3> </h3>
<ul className="mt-2 -ml-3"> <ul className="mt-2 -ml-3">
@ -222,8 +222,8 @@ export function ProjectList() {
const sortedE2EDirectories = Object.keys(e2eDirectoryGroups).sort(); const sortedE2EDirectories = Object.keys(e2eDirectoryGroups).sort();
return ( return (
<div id="project-lists" className="mt-8 px-4 border-t border-gray-200"> <div id="project-lists" className="mt-8 border-t border-gray-200 px-4">
<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">
app projects app projects
</h2> </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 e2e projects
</h2> </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 lib projects
</h2> </h2>

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

@ -19,13 +19,13 @@ export const SearchDepth = memo(
return ( return (
<div className="mt-4 px-4"> <div className="mt-4 px-4">
<div className="mt-4 flex items-start"> <div className="mt-4 flex items-start">
<div className="flex items-center h-5"> <div className="flex h-5 items-center">
<input <input
id="depthFilter" id="depthFilter"
name="depthFilter" name="depthFilter"
value="depthFilterActivated" value="depthFilterActivated"
type="checkbox" type="checkbox"
className="h-4 w-4 border-gray-300 rounded" className="h-4 w-4 rounded border-gray-300"
checked={searchDepthEnabled} checked={searchDepthEnabled}
onChange={(event) => onChange={(event) =>
searchDepthFilterEnabledChange(event.target.checked) searchDepthFilterEnabledChange(event.target.checked)
@ -45,10 +45,10 @@ export const SearchDepth = memo(
</div> </div>
</div> </div>
<div className="mt-3 px-10"> <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 <button
title="Remove ancestor level" 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} onClick={decrementDepthFilter}
> >
<svg <svg
@ -68,13 +68,13 @@ export const SearchDepth = memo(
</button> </button>
<span <span
id="depthFilterValue" 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} {searchDepth}
</span> </span>
<button <button
title="Add ancestor level" 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} onClick={incrementDepthFilter}
> >
<svg <svg

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

@ -19,7 +19,7 @@ export const ShowHideAllProjects = memo(
<button <button
onClick={showAllProjects} onClick={showAllProjects}
type="button" 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" data-cy="selectAllButton"
> >
<svg <svg
@ -49,7 +49,7 @@ export const ShowHideAllProjects = memo(
<button <button
onClick={showAffectedProjects} onClick={showAffectedProjects}
type="button" 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" data-cy="affectedButton"
> >
<svg <svg
@ -73,7 +73,7 @@ export const ShowHideAllProjects = memo(
<button <button
onClick={hideAllProjects} onClick={hideAllProjects}
type="button" 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" data-cy="deselectAllButton"
> >
<svg <svg

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

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

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

@ -50,10 +50,10 @@ export function TextFilterPanel({
<div> <div>
<div className="mt-10 px-4"> <div className="mt-10 px-4">
<form <form
className="flex rounded-md shadow-sm relative" className="relative flex rounded-md shadow-sm"
onSubmit={(event) => event.preventDefault()} 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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -71,7 +71,7 @@ export function TextFilterPanel({
</span> </span>
<input <input
type="text" 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" placeholder="lib name, other lib name"
data-cy="textFilterInput" data-cy="textFilterInput"
name="filter" name="filter"
@ -84,7 +84,7 @@ export function TextFilterPanel({
data-cy="textFilterReset" data-cy="textFilterReset"
type="reset" type="reset"
onClick={resetClicked} 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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -107,14 +107,14 @@ export function TextFilterPanel({
<div className="mt-4 px-4"> <div className="mt-4 px-4">
<div className="flex items-start"> <div className="flex items-start">
<div className="flex items-center h-5"> <div className="flex h-5 items-center">
<input <input
disabled={textFilter.length === 0} disabled={textFilter.length === 0}
id="includeInPath" id="includeInPath"
name="textFilterCheckbox" name="textFilterCheckbox"
type="checkbox" type="checkbox"
value="includeInPath" value="includeInPath"
className="h-4 w-4 border-gray-300 rounded" className="h-4 w-4 rounded border-gray-300"
checked={includePath} checked={includePath}
onChange={toggleIncludeLibsInPathChange} onChange={toggleIncludeLibsInPathChange}
></input> ></input>
@ -122,7 +122,7 @@ export function TextFilterPanel({
<div className="ml-3 text-sm"> <div className="ml-3 text-sm">
<label <label
htmlFor="includeInPath" htmlFor="includeInPath"
className="font-medium text-gray-700 cursor-pointer" className="cursor-pointer font-medium text-gray-700"
> >
Include related libraries Include related libraries
</label> </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 ? ( return activeDay === 1 ? (
<div className="border-t border-gray-600"> <div className="border-t 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="date-container-l grid grid-cols-2 font-input-mono divide-x divide-gray-600"> <div className="date-container-l font-input-mono grid grid-cols-2 divide-x divide-gray-600">
<div className="p-8 text-center bg-blue-nx-dark">September 16</div> <div className="bg-blue-nx-dark p-8 text-center">September 16</div>
<div <div
className="p-8 text-center cursor-pointer" className="cursor-pointer p-8 text-center"
onClick={() => setActiveDay(2)} onClick={() => setActiveDay(2)}
> >
September 17 September 17
</div> </div>
</div> </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) => {scheduleItemsFor16.map((item) =>
item.type === 'event' ? scheduleRow(item) : breakRow(item) item.type === 'event' ? scheduleRow(item) : breakRow(item)
)} )}
@ -331,18 +331,18 @@ export function ConfSchedule(): JSX.Element {
) : ( ) : (
<div> <div>
<div className="border-t border-gray-600"> <div className="border-t 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="date-container-r grid grid-cols-2 font-input-mono divide-x divide-gray-600"> <div className="date-container-r font-input-mono grid grid-cols-2 divide-x divide-gray-600">
<div <div
className="p-8 text-center cursor-pointer" className="cursor-pointer p-8 text-center"
onClick={() => setActiveDay(1)} onClick={() => setActiveDay(1)}
> >
September 16 September 16
</div> </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>
</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) => {scheduleItemsFor17.map((item) =>
item.type === 'event' ? scheduleRow(item) : breakRow(item) item.type === 'event' ? scheduleRow(item) : breakRow(item)
)} )}
@ -354,15 +354,15 @@ export function ConfSchedule(): JSX.Element {
const scheduleRow = (item: ScheduleItem): JSX.Element => ( const scheduleRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full"> <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="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<article className="w-full grid grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600"> <article className="grid w-full 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="font-input-mono px-5 pt-12 pb-8 md:py-12">
<span className="hidden md:block">{item.time}</span> <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} {item.time}
</span> </span>
</div> </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 ? ( {item.videoUrl ? (
<h3 className="mb-4 underline"> <h3 className="mb-4 underline">
<a href={item.videoUrl} target="_blank"> <a href={item.videoUrl} target="_blank">
@ -376,7 +376,7 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
{item.speakers.join(' & ')} {item.speakers.join(' & ')}
</div> </div>
</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} {item.description}
</p> </p>
</article> </article>
@ -386,15 +386,15 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
const breakRow = (item: ScheduleItem): JSX.Element => ( const breakRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full"> <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="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
<div className="w-full grid grid-cols-1 md:grid-cols-5"> <div className="grid w-full grid-cols-1 md:grid-cols-5">
<div className="px-5 pt-12 pb-8 md:py-12 font-input-mono"> <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
<span className="hidden md:block">{item.time}</span> <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} {item.time}
</span> </span>
</div> </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 ? ( {item.videoUrl ? (
<h3 className="font-input-mono underline"> <h3 className="font-input-mono underline">
<a href={item.videoUrl} target="_blank"> <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} key={'speaker-row--' + rowIndex}
className="border-b border-gray-600" 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"> <div className="grid grid-cols-1 md:grid-cols-2">
{row.map((speaker) => ( {row.map((speaker) => (
<div <div
key={speaker.name} 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"> <div className="px-5">
<MemberCard <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' 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"> <div className="grid grid-cols-1 md:grid-cols-2">
{row.map((speaker) => ( {row.map((speaker) => (
<div <div
key={speaker.name} 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 <SponsorCard
imageUrl={speaker.imageUrl} imageUrl={speaker.imageUrl}
name={speaker.name} 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 { export function ConfWorkshop(): JSX.Element {
return ( return (
<div className="border-t border-b border-gray-600"> <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"> <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="px-5 py-12 md:pr-12">
<div className="font-input-mono text-green-nx-base"> <div className="font-input-mono text-green-nx-base">
September 14 & 15 September 14 & 15
</div> </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 Develop at Scale with Nx Monorepos
</h2> </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 Presented by Nrwl on September 14th and 15th, 10:30am - 5:30pm ET
</p> </p>
<p className="text-gray-400"> <p className="text-gray-400">
@ -24,7 +24,7 @@ export function ConfWorkshop(): JSX.Element {
needed for any tech lead or individual contributor to be needed for any tech lead or individual contributor to be
successful working in an Nx workspace. successful working in an Nx workspace.
</p> </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 $800 All-Inclusive
</h4> </h4>
<p className="mb-4 text-gray-400"> <p className="mb-4 text-gray-400">
@ -38,7 +38,7 @@ export function ConfWorkshop(): JSX.Element {
codelabs. codelabs.
</p> </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"> <ul className="mb-4 text-sm text-gray-400">
<li> <li>
<span role="img" aria-label="emojii"> <span role="img" aria-label="emojii">
@ -111,7 +111,7 @@ export function ConfWorkshop(): JSX.Element {
</li> </li>
</ul> </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"> <ul className="text-sm text-gray-400">
<li> <li>
<span role="img" aria-label="emojii"> <span role="img" aria-label="emojii">
@ -162,9 +162,9 @@ export function ConfWorkshop(): JSX.Element {
</li> </li>
</ul> </ul>
</div> </div>
<div className="py-12 divide-y divide-gray-600"> <div className="divide-y divide-gray-600 py-12">
<div className="px-5 pb-12 md:pl-12 md:w-4/5"> <div className="px-5 pb-12 md:w-4/5 md:pl-12">
<h3 className="mb-8 text-xl font-input-mono">Instructors</h3> <h3 className="font-input-mono mb-8 text-xl">Instructors</h3>
<MemberCard <MemberCard
imageUrl="/images/conf/kirils-ladovs.webp" imageUrl="/images/conf/kirils-ladovs.webp"
name="Kirils Ladovs" name="Kirils Ladovs"
@ -182,7 +182,7 @@ export function ConfWorkshop(): JSX.Element {
/> */} /> */}
</div> </div>
<div className="workshop-border-r px-5 py-12 md:pl-12"> <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 What you'll learn
</h3> </h3>
<p className="text-gray-400"> <p className="text-gray-400">
@ -195,11 +195,11 @@ export function ConfWorkshop(): JSX.Element {
plugins that allow for the smooth integration of frameworks and plugins that allow for the smooth integration of frameworks and
libraries. libraries.
</p> </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"> <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" /> <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> </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"> <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" /> <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> </svg>
@ -211,7 +211,7 @@ export function ConfWorkshop(): JSX.Element {
</div> </div>
<div className="px-5 pt-12 md:pl-12"> <div className="px-5 pt-12 md:pl-12">
<a <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" href="https://nrwl.io/contact-us?utm_source=nxdev"
> >
<span className="group-hover:underline"> <span className="group-hover:underline">
@ -219,7 +219,7 @@ export function ConfWorkshop(): JSX.Element {
</span> </span>
<svg <svg
xmlns="http://www.w3.org/2000/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" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"

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

@ -27,7 +27,7 @@ export function CodeBlock({
}; };
}, [copied]); }, [copied]);
return ( return (
<div className="relative group code-block"> <div className="group code-block relative">
<CopyToClipboard <CopyToClipboard
text={text} text={text}
onCopy={() => { onCopy={() => {
@ -37,7 +37,7 @@ export function CodeBlock({
> >
<button <button
type="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 <svg
xmlns="http://www.w3.org/2000/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) { export function Content(props: ContentProps) {
return ( 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 <ReactMarkdown
remarkPlugins={[gfm]} remarkPlugins={[gfm]}
rehypePlugins={[ rehypePlugins={[

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

@ -44,27 +44,27 @@ export function DocViewer({
type: 'website', 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"> <div className="lg:flex">
<Sidebar menu={menu} navIsOpen={navIsOpen} /> <Sidebar menu={menu} navIsOpen={navIsOpen} />
<div <div
id="content-wrapper" id="content-wrapper"
className={cx( 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', 'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible',
navIsOpen && 'overflow-hidden max-h-screen fixed' navIsOpen && 'fixed max-h-screen overflow-hidden'
)} )}
> >
<Content document={document} /> <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="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 flex-grow h-0.5 w-full bg-slate-50 rounded" /> <div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50" />
<div className="flex-shrink-0 relative z-0 inline-flex shadow-sm rounded-md"> <div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
<a <a
aria-hidden="true" aria-hidden="true"
href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md" href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
title="Report an issue on Github" 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 Report an issue
</a> </a>
@ -80,7 +80,7 @@ export function DocViewer({
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
title="Edit this page on Github" 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 Edit this page
</a> </a>

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

@ -18,21 +18,21 @@ export function Sidebar({ menu, navIsOpen }: SidebarProps) {
<div <div
data-testid="sidebar" data-testid="sidebar"
className={cx( 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 && 'hidden',
navIsOpen && 'block' navIsOpen && 'block'
)} )}
> >
<div <div
data-testid="navigation-wrapper" 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 <nav
id="nav" id="nav"
data-testid="navigation" 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) => ( {menu.sections.map((section, index) => (
<SidebarSection key={section.id + '-' + index} section={section} /> <SidebarSection key={section.id + '-' + index} section={section} />
@ -49,7 +49,7 @@ function SidebarSection({ section }: { section: MenuSection }) {
{section.hideSectionHeader ? null : ( {section.hideSectionHeader ? null : (
<h4 <h4
data-testid={`section-h4:${section.id}`} 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} {section.name}
</h4> </h4>
@ -87,7 +87,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
data-testid={`section-h5:${item.id}`} data-testid={`section-h5:${item.id}`}
className={cx( className={cx(
'flex py-2', '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' item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
)} )}
onClick={handleCollapseToggle} onClick={handleCollapseToggle}
@ -108,11 +108,11 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
<Link href={item.url as string}> <Link href={item.url as string}>
<a <a
className={cx( 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 ? ( {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} ) : null}
<span <span
className={cx('relative', { className={cx('relative', {
@ -136,8 +136,8 @@ function CollapsibleIcon({ isCollapsed }: { isCollapsed: boolean }) {
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={cx( className={cx(
'transition-all h-3.5 w-3.5 text-gray-500', 'h-3.5 w-3.5 text-gray-500 transition-all',
!isCollapsed && 'transform rotate-90' !isCollapsed && 'rotate-90 transform'
)} )}
fill="none" fill="none"
viewBox="0 0 24 24" 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" type="button"
ref={searchButtonRef} ref={searchButtonRef}
onClick={handleOpen} 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"> <svg width="24" height="24" fill="none" className="text-white">
<path <path
@ -88,7 +88,7 @@ export function AlgoliaSearch() {
</span> </span>
<span <span
style={{ opacity: browserDetected ? '1' : '0' }} 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> <span className="sr-only">Press </span>
<kbd className="font-sans"> <kbd className="font-sans">

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

@ -51,7 +51,7 @@ export default function DocumentationPage({
/> />
<button <button
type="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} onClick={toggleNav}
> >
<span className="sr-only">Open site navigation</span> <span className="sr-only">Open site navigation</span>
@ -60,9 +60,9 @@ export default function DocumentationPage({
height="24" height="24"
fill="none" fill="none"
className={cx( 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" height="24"
fill="none" fill="none"
className={cx( 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="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</Head> </Head>
<div className="documentation-app text-gray-700 antialiased bg-white"> <div className="documentation-app bg-white text-gray-700 antialiased">
<Component {...pageProps} /> <Component {...pageProps} />
</div> </div>
{/* Global Site Tag (gtag.js) - Google Analytics */} {/* 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() { export default function Document() {
return ( return (
<Html <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" lang="en"
> >
<Head /> <Head />

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

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

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

@ -42,19 +42,19 @@ export function ConfPage() {
}} }}
> >
<div <div
className="w-full overflow-hidden bg-blue-nx-base" className="bg-blue-nx-base w-full overflow-hidden"
style={{ style={{
background: 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\")", "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*/} {/*INTRO*/}
<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 py-48 flex lg:flex-row flex-col items-start"> <div className="mt-24 flex flex-col items-start py-48 lg:flex-row">
<div className="w-full lg:w-2/5 flex flex-col lg:pb-0 pb-10 mt-8 lg:mt-0 relative"> <div className="relative mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-2/5 lg:pb-0">
<svg <svg
id="nx-conf-glow" id="nx-conf-glow"
className="z-0 absolute w-full" className="absolute z-0 w-full"
style={{ style={{
transform: 'scale(1.5, 1.5) translate3d(-12%, -25%, 0)', transform: 'scale(1.5, 1.5) translate3d(-12%, -25%, 0)',
}} }}
@ -143,7 +143,7 @@ export function ConfPage() {
</svg> </svg>
<svg <svg
id="nx-conf-logo" id="nx-conf-logo"
className="z-10 -left-60 -top-60 w-full" className="-left-60 -top-60 z-10 w-full"
role="img" role="img"
width="446" width="446"
height="86" height="86"
@ -179,16 +179,16 @@ export function ConfPage() {
/> />
</svg> </svg>
</div> </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"> <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"> <span className="hidden">
Announcing the first ever Nx Conf on{' '} Announcing the first ever Nx Conf on{' '}
</span>{' '} </span>{' '}
September 16 & 17, 2021 September 16 & 17, 2021
</div> </div>
</h2> </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 Nx Conf is a new, online & free-to-attend, 2-day conference
featuring members of the Nx team and community. Watch us as we featuring members of the Nx team and community. Watch us as we
share our ideas and expertise about making development faster, 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 Grab your FREE Nx Conf ticket and save your workshop seat
today! today!
</p> */} </p> */}
<div className="flex mt-16"> <div className="mt-16 flex">
<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=oG2QbFquraA" href="https://www.youtube.com/watch?v=oG2QbFquraA"
> >
<span className="group-hover:underline">Watch Day 1</span> <span className="group-hover:underline">Watch Day 1</span>
<svg <svg
xmlns="http://www.w3.org/2000/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" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -298,13 +298,13 @@ export function ConfPage() {
</svg> </svg>
</a> </a>
<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" href="https://www.youtube.com/watch?v=hlGOaGDsWKg"
> >
<span className="group-hover:underline">Watch Day 2</span> <span className="group-hover:underline">Watch Day 2</span>
<svg <svg
xmlns="http://www.w3.org/2000/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" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -324,9 +324,9 @@ export function ConfPage() {
</div> </div>
<div className="w-full overflow-hidden"> <div className="w-full overflow-hidden">
{/*NAVIGATION*/} {/*NAVIGATION*/}
<div className="hidden md:block border-t border-b border-gray-600"> <div className="hidden border-t border-b border-gray-600 md:block">
<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="md:grid grid-cols-7 items-center text-center font-input-mono divide-x divide-gray-600"> <div className="font-input-mono grid-cols-7 items-center divide-x divide-gray-600 text-center md:grid">
<div className="p-8"> <div className="p-8">
<svg <svg
id="nx-conf-logo" id="nx-conf-logo"
@ -365,22 +365,22 @@ export function ConfPage() {
</svg> </svg>
</div> </div>
<Link href="#agenda"> <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 Agenda
</a> </a>
</Link> </Link>
<Link href="#speakers"> <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 Speakers
</a> </a>
</Link> </Link>
<Link href="#workshop"> <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 Workshop
</a> </a>
</Link> </Link>
<Link href="#sponsors"> <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 Sponsors
</a> </a>
</Link> </Link>
@ -389,9 +389,9 @@ export function ConfPage() {
</div> </div>
{/*AGENDA*/} {/*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"> <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) Agenda (EST)
</h2> </h2>
</div> </div>
@ -399,19 +399,19 @@ export function ConfPage() {
<ConfSchedule /> <ConfSchedule />
{/*SPEAKERS*/} {/*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"> <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 Speakers
</h2> </h2>
</div> </div>
</div> </div>
<ConfSpeakers /> <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*/} {/*WORKSHOP*/}
<div className="mt-24"> <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 Workshop
</h2> </h2>
</div> </div>
@ -419,16 +419,16 @@ export function ConfPage() {
<ConfWorkshop /> <ConfWorkshop />
{/*SPONSORS*/} {/*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"> <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 Sponsors
</h2> </h2>
</div> </div>
</div> </div>
<ConfSponsors /> <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*/} {/*SPONSORS*/}
{/*<div className="my-24">*/} {/*<div className="my-24">*/}
{/* <h2 id="sponsors" className="my-20 text-3xl font-input-mono">*/} {/* <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*/} {/*INTRO COMPONENT*/}
<header <header
id="animated-background" 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={{ style={{
backgroundImage: 'url(/images/background/hero-bg-large.svg)', 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="md:py-18 mx-auto max-w-screen-lg px-4 py-4 xl:max-w-screen-xl">
<div className="my-8 md:my-18 2xl:my-24 flex flex-col items-center justify-center"> <div className="md:my-18 my-8 flex flex-col items-center justify-center 2xl:my-24">
<div className="w-full text-center flex flex-col"> <div className="flex w-full flex-col text-center">
<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"> <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"> <span className="block lg:inline">
Smart, Fast and Extensible Smart, Fast and Extensible
</span>{' '} </span>{' '}
Build System Build System
</h1> </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 Next generation build system with first class monorepo
support and powerful integrations. support and powerful integrations.
</h2> </h2>
</div> </div>
<div <div
aria-hidden="true" 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 /> <NpxCreateNxWorkspace />
</div> </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"> <Link href="#getting-started">
<a <a
title="Start using Nx by creating a workspace" 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 Create Nx Workspace
</a> </a>
@ -93,7 +93,7 @@ export function Index() {
<Link href="/migration/adding-to-monorepo"> <Link href="/migration/adding-to-monorepo">
<a <a
title="Add Nx to existing Monorepo" 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 Add Nx to Monorepo
</a> </a>
@ -103,7 +103,7 @@ export function Index() {
</div> </div>
</header> </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*/} {/*COMPANIES*/}
<NxUsersShowcase /> <NxUsersShowcase />
</div> </div>
@ -111,7 +111,7 @@ export function Index() {
{/*NX FEATURES*/} {/*NX FEATURES*/}
<div <div
id="features" id="features"
className="relative bg-gray-50 py-12 overflow-hidden" className="relative overflow-hidden bg-gray-50 py-12"
> >
{/*MONOREPO*/} {/*MONOREPO*/}
<MonorepoFeatures /> <MonorepoFeatures />
@ -128,7 +128,7 @@ export function Index() {
<EcosystemFeatures /> <EcosystemFeatures />
</div> </div>
<div className="bg-gray-50 relative transform-gpu"> <div className="relative transform-gpu bg-gray-50">
<img <img
className="w-full" className="w-full"
src="/images/background/hero-bg-large-3.svg" src="/images/background/hero-bg-large-3.svg"
@ -141,17 +141,17 @@ export function Index() {
{/*NX FEATURE DETAILS*/} {/*NX FEATURE DETAILS*/}
<article <article
id="features-in-depth" 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"> <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 Monorepo done right
</h1> </h1>
<p className="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl"> <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 Works for Projects of Any Size
</p> </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 Whether you have one project or one thousand, Nx will keep
your CI fast and your workspace maintainable. your CI fast and your workspace maintainable.
</p> </p>
@ -176,15 +176,15 @@ export function Index() {
id="getting-started" id="getting-started"
className="relative bg-white pt-16 sm:pt-24 lg:pt-32" 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> <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> Getting Started <span className="sr-only">With Nx</span>
</h1> </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 TypeScript, React, Angular, Node and more
</p> </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 Nx has first-class support for many frontend and backend
technologies, so its documentation comes in multiple flavours. technologies, so its documentation comes in multiple flavours.
</p> </p>
@ -196,13 +196,13 @@ export function Index() {
<div <div
id="learning-materials" 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"> <div className="text-center">
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl"> <p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
Free Courses and Videos Free Courses and Videos
</p> </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 For visual learners we have created high-quality courses walking
you through building real-world examples step by step. you through building real-world examples step by step.
</p> </p>
@ -220,7 +220,7 @@ export function Index() {
<NxPlaybook /> <NxPlaybook />
</div> </div>
<div className="bg-white relative transform-gpu"> <div className="relative transform-gpu bg-white">
<img <img
className="w-full" className="w-full"
loading="lazy" loading="lazy"
@ -232,15 +232,15 @@ export function Index() {
{/*COMMUNITY*/} {/*COMMUNITY*/}
<article id="community" className="bg-white"> <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"> <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 Community
</h1> </h1>
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl"> <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 Used by Popular Open Source Projects
</p> </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 Nx works equally well for the teams building apps and for the
communities building open source libraries and tools. communities building open source libraries and tools.
</p> </p>

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

@ -37,10 +37,10 @@ export function InlineCommand({
> >
<button <button
type="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="flex items-center overflow-auto text-gray-800">
<span className="hidden sm:inline text-gray-500" aria-hidden="true"> <span className="hidden text-gray-500 sm:inline" aria-hidden="true">
$ $
</span> </span>
<SyntaxHighlighter <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"> <h2 id="footer-heading" className="sr-only">
Footer Footer
</h2> </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="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 <svg
className="h-14 subpixel-antialiased" className="h-14 subpixel-antialiased"
role="img" role="img"
@ -151,10 +151,10 @@ export function Footer({ useDarkBackground }: FooterProps) {
))} ))}
</div> </div>
</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 className="md:grid md:grid-cols-2 md:gap-8">
<div> <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 Resources
</h3> </h3>
<ul role="list" className="mt-4 space-y-4"> <ul role="list" className="mt-4 space-y-4">
@ -177,7 +177,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</ul> </ul>
</div> </div>
<div className="mt-12 md:mt-0"> <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 Help
</h3> </h3>
<ul role="list" className="mt-4 space-y-4"> <ul role="list" className="mt-4 space-y-4">
@ -202,7 +202,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</div> </div>
<div className="md:grid md:grid-cols-2 md:gap-8"> <div className="md:grid md:grid-cols-2 md:gap-8">
<div> <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 Community
</h3> </h3>
<ul role="list" className="mt-4 space-y-4"> <ul role="list" className="mt-4 space-y-4">
@ -225,7 +225,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
</ul> </ul>
</div> </div>
<div className="mt-12 md:mt-0"> <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 Solutions
</h3> </h3>
<ul role="list" className="mt-4 space-y-4"> <ul role="list" className="mt-4 space-y-4">
@ -255,7 +255,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
&copy; 2022 made with{' '} &copy; 2022 made with{' '}
<svg <svg
xmlns="http://www.w3.org/2000/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" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -269,7 +269,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
<Link href="https://nrwl.io/?utm_source=nx.dev"> <Link href="https://nrwl.io/?utm_source=nx.dev">
<a target="_blank" rel="nofollow"> <a target="_blank" rel="nofollow">
<svg <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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" 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 ( return (
<div <div
className={cx( 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' 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*/} {/*LOGO*/}
<div className="flex items-center"> <div className="flex items-center">
<a href="/" className="flex items-center"> <a href="/" className="flex items-center">
@ -58,14 +58,14 @@ export function Header(props: HeaderProps) {
{/*SEARCH*/} {/*SEARCH*/}
<div className="inline">{!!showSearch ? <AlgoliaSearch /> : null}</div> <div className="inline">{!!showSearch ? <AlgoliaSearch /> : null}</div>
{/*NAVIGATION*/} {/*NAVIGATION*/}
<div className="text-sm flex-shrink-0"> <div className="flex-shrink-0 text-sm">
<nav className="flex items-justified justify-center space-x-1"> <nav className="items-justified flex justify-center space-x-1">
<h2 className="sr-only">Main navigation</h2> <h2 className="sr-only">Main navigation</h2>
<Link href="/getting-started/intro"> <Link href="/getting-started/intro">
<a <a
title="Check Nx documentation" title="Check Nx documentation"
className={cx( className={cx(
'px-3 py-2 text-white leading-tight', 'px-3 py-2 leading-tight text-white',
!!props.isDocViewer ? 'font-bold' : '' !!props.isDocViewer ? 'font-bold' : ''
)} )}
> >
@ -75,7 +75,7 @@ export function Header(props: HeaderProps) {
<Link href="/using-nx/nx-devkit"> <Link href="/using-nx/nx-devkit">
<a <a
title="Check Nx available plugins" 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 Plugins
</a> </a>
@ -83,7 +83,7 @@ export function Header(props: HeaderProps) {
<Link href="/community"> <Link href="/community">
<a <a
title="Check Nx community" 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 Community
</a> </a>
@ -91,7 +91,7 @@ export function Header(props: HeaderProps) {
<Link href="/conf"> <Link href="/conf">
<a <a
title="Check Nx conference" 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 Nx Conf
</a> </a>
@ -102,7 +102,7 @@ export function Header(props: HeaderProps) {
href="https://nx.app/?utm_source=nx.dev" href="https://nx.app/?utm_source=nx.dev"
target="_blank" target="_blank"
rel="noreferrer" 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 Nx Cloud
</a> </a>
@ -111,7 +111,7 @@ export function Header(props: HeaderProps) {
href="https://nrwl.io/services/?utm_source=nx.dev" href="https://nrwl.io/services/?utm_source=nx.dev"
target="_blank" target="_blank"
rel="noreferrer" 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 Nx Consulting
</a> </a>

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

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

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

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

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

@ -18,11 +18,11 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
{({ open }) => ( {({ open }) => (
<> <>
<div className="relative mt-1"> <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="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 <SelectorIcon
className="w-5 h-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
@ -39,7 +39,7 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
> >
<Listbox.Options <Listbox.Options
static 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) => ( {props.items.map((item, personIdx) => (
<Listbox.Option <Listbox.Option
@ -47,16 +47,16 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
className={({ active }) => className={({ active }) =>
`${ `${
active active
? 'text-white bg-blue-nx-base' ? 'bg-blue-nx-base text-white'
: 'text-gray-500' : '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} value={item}
> >
{({ selected, active }) => ( {({ selected, active }) => (
<> <>
<span className={'font-medium block truncate'}> <span className={'block truncate font-medium'}>
{item.label} {item.label}
</span> </span>
{selected || item.value === props.selected.value ? ( {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`} absolute inset-y-0 left-0 flex items-center pl-3`}
> >
<CheckIcon <CheckIcon
className="w-5 h-5" className="h-5 w-5"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>

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

@ -3,13 +3,13 @@ import React from 'react';
export function Testimonials() { export function Testimonials() {
return ( return (
<section className="bg-blue-nx-base"> <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="mx-auto max-w-7xl 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="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="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 <svg
role="img" role="img"
className="w-8 h-8" className="h-8 w-8"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" fill="currentColor"
@ -19,10 +19,10 @@ export function Testimonials() {
<span className="ml-2 font-bold ">TypeScript-ESLint</span> <span className="ml-2 font-bold ">TypeScript-ESLint</span>
</div> </div>
</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"> <div className="relative text-lg font-medium text-white md:flex-grow">
<svg <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" fill="currentColor"
viewBox="0 0 32 32" viewBox="0 0 32 32"
aria-hidden="true" aria-hidden="true"
@ -35,7 +35,7 @@ export function Testimonials() {
</div> </div>
<footer className="mt-8"> <footer className="mt-8">
<div className="flex items-start"> <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 <img
className="h-12 w-12 rounded-full" className="h-12 w-12 rounded-full"
src="https://avatars.githubusercontent.com/u/900523?v=4" src="https://avatars.githubusercontent.com/u/900523?v=4"
@ -54,11 +54,11 @@ export function Testimonials() {
</footer> </footer>
</blockquote> </blockquote>
</div> </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="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 <svg
className="w-10 h-auto" className="h-auto w-10"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -69,10 +69,10 @@ export function Testimonials() {
<span className="ml-2 font-bold ">Storybook</span> <span className="ml-2 font-bold ">Storybook</span>
</div> </div>
</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"> <div className="relative text-lg font-medium text-white md:flex-grow">
<svg <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" fill="currentColor"
viewBox="0 0 32 32" viewBox="0 0 32 32"
> >
@ -85,7 +85,7 @@ export function Testimonials() {
</div> </div>
<footer className="mt-8"> <footer className="mt-8">
<div className="flex items-start"> <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 <img
className="h-12 w-12 rounded-full" 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" 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -76,7 +76,7 @@ export function AffectedCommand(): ReactComponentElement<any> {
<Link href="/using-nx/affected"> <Link href="/using-nx/affected">
<a <a
title="Nx allows you to see what is affected by your changes" 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" Learn about "nx affected"
</a> </a>
@ -86,13 +86,13 @@ export function AffectedCommand(): ReactComponentElement<any> {
</div> </div>
</div> </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" 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 <motion.div
variants={opacityTranslateXVariant} 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 <Image
src="/images/nx-affected.webp" src="/images/nx-affected.webp"
@ -105,35 +105,35 @@ export function AffectedCommand(): ReactComponentElement<any> {
<motion.div <motion.div
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
custom={0.25} 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 <div
className="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased className="coding inverse-toggle overflow-hidden rounded-lg bg-gray-800 px-5 pt-4 pb-6 pt-4
bg-gray-800 pb-6 pt-4 rounded-lg leading-normal overflow-hidden" font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
> >
<div className="top mb-2 flex"> <div className="top mb-2 flex">
<div className="h-3 w-3 bg-red-500 rounded-full" /> <div className="h-3 w-3 rounded-full bg-red-500" />
<div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" /> <div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
<div className="ml-2 h-3 w-3 bg-green-500 rounded-full" /> <div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
</div> </div>
<div className="mt-4 flex"> <div className="mt-4 flex">
<span className="text-green-400">/workspace ➜</span> <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 nx affected:test --parallel
</p> </p>
</div> </div>
<div className="mt-2 flex"> <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="text-green-400">{'>'}</span>{' '}
<span className="px-1 py-0.5 bg-blue-nx-base">NX</span> <span className="bg-blue-nx-base px-1 py-0.5">NX</span>
<span className="ml-1 px-1 py-0.5 bg-yellow-500"> <span className="ml-1 bg-yellow-500 px-1 py-0.5">
NOTE NOTE
</span>{' '} </span>{' '}
Affected criteria defaulted to --base=master --head=HEAD Affected criteria defaulted to --base=master --head=HEAD
<br /> <br />
<br /> <br />
<span className="text-green-400">{'>'}</span>{' '} <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): Running target test for 3 project(s):
<br /> <br />
- nx-dev <br /> - nx-dev <br />
@ -144,10 +144,10 @@ export function AffectedCommand(): ReactComponentElement<any> {
<span className="text-green-400">{'>'}</span> nx run <span className="text-green-400">{'>'}</span> nx run
nx-dev:test RUNS nx-dev nx-dev:test RUNS nx-dev
<br /> <br />
<span className="px-1 py-0.5 bg-green-nx-base"> <span className="bg-green-nx-base px-1 py-0.5">
RUNS RUNS
</span>{' '} </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 nx-dev
</span>{' '} </span>{' '}
nx-dev/nx-dev/specs/index.spec.tsx 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -75,7 +75,7 @@ export function CloudSupport(): ReactComponentElement<any> {
<Link href="https://nx.app"> <Link href="https://nx.app">
<a <a
title="Enable Nx generation monorepo tooling with NxCloud" 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 Enable Nx Cloud
</a> </a>
@ -86,12 +86,12 @@ export function CloudSupport(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <motion.div
variants={opacityTranslateXVariant} 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 <Image
src="/images/nx-cloud.webp" src="/images/nx-cloud.webp"
@ -104,7 +104,7 @@ export function CloudSupport(): ReactComponentElement<any> {
<motion.div <motion.div
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
custom={0.25} 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 <Image
src="/images/github-app.webp" 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -73,7 +73,7 @@ export function DependencyGraph(): ReactComponentElement<any> {
<Link href="/structure/dependency-graph"> <Link href="/structure/dependency-graph">
<a <a
title="Nx graph tool to visally interact with monorepo dependencies" 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" Learn about "nx graph"
</a> </a>
@ -84,15 +84,15 @@ export function DependencyGraph(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <motion.div
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
className="relative px-4 lg:px-0 lg:h-full" className="relative px-4 lg:h-full lg:px-0"
> >
<video <video
preload="true" 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} autoPlay={true}
loop loop
muted 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -217,27 +217,27 @@ export function EcosystemFeatures(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="md:mt-16 lg:mt-0 lg:col-start-2"> <div className="md:mt-16 lg:col-start-2 lg:mt-0">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full"> <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => ( {featureItems.map((item, index: number) => (
<motion.div <motion.div
key={'monorepo-feature-' + index} key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
className={cx( 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' [2, 3].includes(index) && 'lg:left-8'
)} )}
> >
<div <div
className={cx( className={cx(
'flex-shrink-0 p-2 rounded-full text-white ', 'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames item.classNames
)} )}
> >
{item.svg} {item.svg}
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href={item.link}> <Link href={item.link}>
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 ( return (
<article <article
id="egghead-course" 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 <motion.div
ref={ref} 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"> <div className="lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl"> <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Scale React Development</span> <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" title="Start learning how to create React application that scale with Nx"
rel="nofollow" rel="nofollow"
target="_blank" 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 Start learning now
</a> </a>
@ -57,11 +57,11 @@ export function EggheadCourses(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <img
loading="lazy" 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" src="/images/nx-egghead-course.webp"
alt="nx egghead course" 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> { export function EventBanner(): ReactComponentElement<any> {
return ( return (
<div className="relative bg-green-nx-base"> <div className="bg-green-nx-base relative">
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl py-4 px-3 sm:px-6 lg:px-8">
<div className="pr-16 sm:text-center sm:px-16"> <div className="pr-16 sm:px-16 sm:text-center">
<p className="font-medium text-white"> <p className="font-medium text-white">
New event! We're excited to announce a new Nx workshop on December. New event! We're excited to announce a new Nx workshop on December.
<span className="block sm:ml-2 sm:inline-block"> <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" href="https://ti.to/nrwl/nx-workshop-12-2021?utm_source=nx.dev"
target="_blank" target="_blank"
rel="nofollow" rel="nofollow"
className="text-white font-bold underline group" className="group font-bold text-white underline"
> >
{' '} {' '}
Register now{' '} Register now{' '}
<span <span
aria-hidden="true" aria-hidden="true"
className="inline-block group-hover:translate-x-2 transition" className="inline-block transition group-hover:translate-x-2"
> >
&rarr; &rarr;
</span> </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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -212,27 +212,27 @@ export function ExperienceFeatures(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="md:mt-16 lg:mt-0 lg:col-start-1"> <div className="md:mt-16 lg:col-start-1 lg:mt-0">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full"> <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => ( {featureItems.map((item, index: number) => (
<motion.div <motion.div
key={'monorepo-feature-' + index} key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
className={cx( 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' [2, 3].includes(index) && 'lg:left-8'
)} )}
> >
<div <div
className={cx( className={cx(
'flex-shrink-0 p-2 rounded-full text-white ', 'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames item.classNames
)} )}
> >
{item.svg} {item.svg}
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href={item.link}> <Link href={item.link}>
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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; setActiveTab: (id: string) => void;
}): ReactComponentElement<any> { }): ReactComponentElement<any> {
return ( return (
<div className="mt-12 max-w-3xl mx-auto"> <div className="mx-auto mt-12 max-w-3xl">
<div> <div>
<div className="px-4 sm:hidden"> <div className="px-4 sm:hidden">
<label htmlFor="getting-started-tabs" className="sr-only"> <label htmlFor="getting-started-tabs" className="sr-only">
@ -31,7 +31,7 @@ function Tabs({
<select <select
id="getting-started-tabs" id="getting-started-tabs"
name="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} value={tabs.find((tab) => tab.id === activeTab)?.id}
onChange={(event) => setActiveTab(event.target.value)} onChange={(event) => setActiveTab(event.target.value)}
> >
@ -44,7 +44,7 @@ function Tabs({
</div> </div>
<div className="hidden sm:block"> <div className="hidden sm:block">
<nav <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" aria-label="Tabs"
> >
<h2 className="sr-only"> <h2 className="sr-only">
@ -56,10 +56,10 @@ function Tabs({
key={tab.name} key={tab.name}
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={cx( 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 tab.id === activeTab
? 'text-gray-600 font-bold' ? 'font-bold text-gray-600'
: 'text-gray-400 hover:text-gray-600 font-medium', : 'font-medium text-gray-400 hover:text-gray-600',
tabIdx === 0 ? 'rounded-l-lg' : '', tabIdx === 0 ? 'rounded-l-lg' : '',
tabIdx === tabs.length - 1 ? 'rounded-r-lg' : '' tabIdx === tabs.length - 1 ? 'rounded-r-lg' : ''
)} )}
@ -123,25 +123,25 @@ function AngularPane(): ReactComponentElement<any> {
exit="hidden" exit="hidden"
className="mt-8" 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="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 className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden"> <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200"> <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 Create an Angular Workspace with Nx
</h2> </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 Get an application up and running in minutes. No need to figure
out webpack, e2e and unit test runners, linting. It all works out out webpack, e2e and unit test runners, linting. It all works out
of the box. of the box.
</p> </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 You get better linting, better testing, a faster CLI, support for
popular modern tools and libraries. popular modern tools and libraries.
</p> </p>
<div className="relative my-6 pl-14 pr-4"> <div className="relative my-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -152,7 +152,7 @@ function AngularPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
Angular{' '} Angular{' '}
<Link href="/angular-tutorial/01-create-application"> <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) (follow our Angular tutorial)
</a> </a>
</Link>{' '} </Link>{' '}
@ -170,7 +170,7 @@ function AngularPane(): ReactComponentElement<any> {
</div> </div>
<div className="relative my-6 pl-14 pr-4"> <div className="relative my-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -181,7 +181,7 @@ function AngularPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
Full-stack app built with Angular and Nest.js{' '} Full-stack app built with Angular and Nest.js{' '}
<Link href="/angular-tutorial/01-create-application"> <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) (follow our Angular tutorial)
</a> </a>
</Link>{' '} </Link>{' '}
@ -199,8 +199,8 @@ function AngularPane(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2"> <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full"> <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe <iframe
loading="lazy" loading="lazy"
className="max-w-screen-sm" className="max-w-screen-sm"
@ -210,18 +210,18 @@ function AngularPane(): ReactComponentElement<any> {
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" 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 <motion.div
custom={0.2} custom={0.2}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/migration-angular"> <Link href="/migration/migration-angular">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 AngularCLI migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -232,11 +232,11 @@ function AngularPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <svg
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
className="w-6 h-6 text-[#DD0031]" className="h-6 w-6 text-[#DD0031]"
fill="currentColor" 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" /> <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>
</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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -267,14 +267,14 @@ function AngularPane(): ReactComponentElement<any> {
<motion.div <motion.div
custom={0.6} custom={0.6}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/migration-angularjs"> <Link href="/migration/migration-angularjs">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 AngularJS migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -284,11 +284,11 @@ function AngularPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <svg
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
className="w-6 h-6 text-[#E23237]" className="h-6 w-6 text-[#E23237]"
fill="currentColor" 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" /> <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>
</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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -365,13 +365,13 @@ function NodeJsPane(): ReactComponentElement<any> {
exit="hidden" exit="hidden"
className="mt-8" 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="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 className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden"> <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200"> <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 Create a Node Workspace with Nx
</h2> </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 Get an application up and running in minutes. No need to figure
out TypeScript compilation, e2e and unit test runners, linting. It out TypeScript compilation, e2e and unit test runners, linting. It
all works out of the box. all works out of the box.
@ -379,7 +379,7 @@ function NodeJsPane(): ReactComponentElement<any> {
<div className="relative mt-6 pl-14 pr-4"> <div className="relative mt-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -390,7 +390,7 @@ function NodeJsPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
NestJS{' '} NestJS{' '}
<Link href="/node-tutorial/01-create-application"> <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) (follow our Nest tutorial)
</a> </a>
</Link>{' '} </Link>{' '}
@ -408,7 +408,7 @@ function NodeJsPane(): ReactComponentElement<any> {
</div> </div>
<div className="relative my-6 pl-14 pr-4"> <div className="relative my-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -430,8 +430,8 @@ function NodeJsPane(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2"> <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full"> <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe <iframe
loading="lazy" loading="lazy"
className="max-w-screen-sm" className="max-w-screen-sm"
@ -441,18 +441,18 @@ function NodeJsPane(): ReactComponentElement<any> {
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" 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 <motion.div
custom={0.2} custom={0.2}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/adding-to-monorepo"> <Link href="/migration/adding-to-monorepo">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 Lerna migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -462,16 +462,16 @@ function NodeJsPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <img
className="h-6 w-6 filter invert" className="h-6 w-6 invert filter"
src="/images/lerna-logo.svg" src="/images/lerna-logo.svg"
alt="Migrating to Nx from Lerna" alt="Migrating to Nx from Lerna"
/> />
</div> </div>
</div> </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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -540,13 +540,13 @@ function ReactPane(): ReactComponentElement<any> {
exit="hidden" exit="hidden"
className="mt-8" 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="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 className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden"> <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200"> <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 Create a React Workspace with Nx
</h2> </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 Get an application up and running in minutes. No need to figure
out webpack, e2e and unit test runners, linting. It all works out out webpack, e2e and unit test runners, linting. It all works out
of the box. of the box.
@ -554,7 +554,7 @@ function ReactPane(): ReactComponentElement<any> {
<div className="relative mt-6 pl-14 pr-4"> <div className="relative mt-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -565,7 +565,7 @@ function ReactPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
React{' '} React{' '}
<Link href="/react-tutorial/01-create-application"> <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) (follow our React tutorial)
</a> </a>
</Link>{' '} </Link>{' '}
@ -594,7 +594,7 @@ function ReactPane(): ReactComponentElement<any> {
</svg>*/} </svg>*/}
<h3 className="mt-2 font-semibold">React Native</h3> <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 <InlineCommand
language={'bash'} language={'bash'}
command={'npx create-nx-workspace --preset=react-native'} 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"> <div className="relative my-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -618,7 +618,7 @@ function ReactPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
Next.js{' '} Next.js{' '}
<Link href="/next/overview"> <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) (follow our Next.js guide)
</a> </a>
</Link>{' '} </Link>{' '}
@ -636,8 +636,8 @@ function ReactPane(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2"> <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full"> <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe <iframe
loading="lazy" loading="lazy"
className="max-w-screen-sm" className="max-w-screen-sm"
@ -647,18 +647,18 @@ function ReactPane(): ReactComponentElement<any> {
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" 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 <motion.div
custom={0.2} custom={0.2}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/migration-cra"> <Link href="/migration/migration-cra">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 CRA migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -668,10 +668,10 @@ function ReactPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
className="w-6 h-6 text-[#09D3AC]" className="h-6 w-6 text-[#09D3AC]"
fill="currentColor" 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" /> <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>
</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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -700,14 +700,14 @@ function ReactPane(): ReactComponentElement<any> {
<motion.div <motion.div
custom={0.6} custom={0.6}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/adding-to-monorepo"> <Link href="/migration/adding-to-monorepo">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 Lerna migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -717,16 +717,16 @@ function ReactPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <img
className="h-6 w-6 filter invert" className="h-6 w-6 invert filter"
src="/images/lerna-logo.svg" src="/images/lerna-logo.svg"
alt="Migrating to Nx from Lerna" alt="Migrating to Nx from Lerna"
/> />
</div> </div>
</div> </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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -795,13 +795,13 @@ function TypescriptPane(): ReactComponentElement<any> {
exit="hidden" exit="hidden"
className="mt-8" 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="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 className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden"> <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
<h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200"> <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 Create a TypeScript/JavaScript Workspace with Nx
</h2> </h2>
<p className="mt-4 mx-4"> <p className="mx-4 mt-4">
Create an empty workspace where you can create TypeScript or Create an empty workspace where you can create TypeScript or
JavaScript projects. You can build/test/lint them either yourself JavaScript projects. You can build/test/lint them either yourself
or using Nx plugins. or using Nx plugins.
@ -809,7 +809,7 @@ function TypescriptPane(): ReactComponentElement<any> {
<div className="relative my-6 pl-14 pr-4"> <div className="relative my-6 pl-14 pr-4">
<svg <svg
className="absolute left-4 top-0 w-6 h-6" className="absolute left-4 top-0 h-6 w-6"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -820,7 +820,7 @@ function TypescriptPane(): ReactComponentElement<any> {
<h3 className="mt-2 font-semibold"> <h3 className="mt-2 font-semibold">
TypeScript/JavaScript{' '} TypeScript/JavaScript{' '}
<Link href="/getting-started/nx-and-typescript"> <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) (follow our Nx and TypeScript tutorial)
</a> </a>
</Link> </Link>
@ -838,8 +838,8 @@ function TypescriptPane(): ReactComponentElement<any> {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2"> <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full"> <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe <iframe
loading="lazy" loading="lazy"
className="max-w-screen-sm" className="max-w-screen-sm"
@ -849,18 +849,18 @@ function TypescriptPane(): ReactComponentElement<any> {
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" 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 <motion.div
custom={0.2} custom={0.2}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/getting-started/nx-and-typescript"> <Link href="/getting-started/nx-and-typescript">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 Nx and TypeScript
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -871,9 +871,9 @@ function TypescriptPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <svg
className="p-0.5 w-6 h-6" className="h-6 w-6 p-0.5"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -884,7 +884,7 @@ function TypescriptPane(): ReactComponentElement<any> {
</div> </div>
</div> </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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -907,14 +907,14 @@ function TypescriptPane(): ReactComponentElement<any> {
<motion.div <motion.div
custom={0.6} custom={0.6}
variants={opacityTranslateYVariant} 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 w-full px-4 py-3">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href="/migration/adding-to-monorepo"> <Link href="/migration/adding-to-monorepo">
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 Lerna migration
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
@ -924,16 +924,16 @@ function TypescriptPane(): ReactComponentElement<any> {
</Link> </Link>
</div> </div>
<div className="flex-shrink-0"> <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 <img
className="h-6 w-6 filter invert" className="h-6 w-6 invert filter"
src="/images/lerna-logo.svg" src="/images/lerna-logo.svg"
alt="Migrating to Nx from Lerna" alt="Migrating to Nx from Lerna"
/> />
</div> </div>
</div> </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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4" className="h-4 w-4"
@ -970,7 +970,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
className={cx( 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' active ? 'text-[#3178C6]' : 'text-gray-400'
)} )}
fill="currentColor" fill="currentColor"
@ -986,7 +986,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
className={cx( 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' active ? 'text-[#52C1DE]' : 'text-gray-400'
)} )}
fill="currentColor" fill="currentColor"
@ -1002,7 +1002,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
className={cx( 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' active ? 'text-[#E2431F]' : 'text-gray-400'
)} )}
fill="currentColor" fill="currentColor"
@ -1018,7 +1018,7 @@ export function GettingStarted(): ReactComponentElement<any> {
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
className={cx( 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' active ? 'text-[#77AE64]' : 'text-gray-400'
)} )}
fill="currentColor" 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -225,26 +225,26 @@ export function MonorepoFeatures(): ReactComponentElement<any> {
</div> </div>
</div> </div>
<div className="mm:mt-16 lg:mt-0"> <div className="mm:mt-16 lg:mt-0">
<div className="px-4 m-0 lg:px-0 lg:relative lg:h-full"> <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
<div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
{featureItems.map((item, index: number) => ( {featureItems.map((item, index: number) => (
<motion.div <motion.div
key={'monorepo-feature-' + index} key={'monorepo-feature-' + index}
variants={opacityTranslateXVariant} variants={opacityTranslateXVariant}
className={cx( 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' [2, 3].includes(index) && 'lg:-left-8'
)} )}
> >
<div <div
className={cx( className={cx(
'flex-shrink-0 p-2 rounded-full text-white ', 'flex-shrink-0 rounded-full p-2 text-white ',
item.classNames item.classNames
)} )}
> >
{item.svg} {item.svg}
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<Link href={item.link}> <Link href={item.link}>
<a className="focus:outline-none"> <a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 ( return (
<article <article
id="nx-playbook" 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 <motion.div
ref={ref} 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="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 relative"> <div className="relative lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl"> <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Premium courses</span> <span className="block">Premium courses</span>
<span className="block">to know everything</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" title="Dedicated carefully created Nx courses to get you up and running in no time"
rel="nofollow" rel="nofollow"
target="_blank" 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 Check the courses on NxPlaybook
</a> </a>
@ -59,11 +59,11 @@ export function NxPlaybook(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <img
loading="lazy" 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" src="/images/nx-playbook.webp"
alt="nx courses on nxplaybook.com" 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>[] = [ const featureItems: ReactComponentElement<any>[] = [
<svg <svg
id="typescript-logo" 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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@ -13,7 +13,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>, </svg>,
<svg <svg
id="python-logo" 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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@ -21,14 +21,14 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>, </svg>,
<svg <svg
id="go-logo" 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" 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" /> <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>,
<svg <svg
id="rust-logo" 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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@ -36,7 +36,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>, </svg>,
<svg <svg
id="kotlin-logo" 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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@ -44,7 +44,7 @@ const featureItems: ReactComponentElement<any>[] = [
</svg>, </svg>,
<svg <svg
id=".net-logo" 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" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
@ -84,7 +84,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
return ( return (
<article <article
id="open-platform" 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 <motion.div
ref={ref} 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>
<div className="mt-6"> <div className="mt-6">
@ -135,7 +135,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
<motion.div <motion.div
key={'open-platform-' + index} key={'open-platform-' + index}
variants={opacityTranslateXVariant} 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} {svg}
</motion.div> </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!', 'The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#FF4785]" className="h-auto w-10 text-[#FF4785]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" 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.', 'Fluent UI web represents a collection of utilities, React components, and web components for building web applications.',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#5E5E5E]" className="h-auto w-10 text-[#5E5E5E]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -46,7 +46,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
description: 'Reactive libraries for Angular.', description: 'Reactive libraries for Angular.',
icon: ( icon: (
<svg <svg
className="w-10 h-auto" className="h-auto w-10"
role="img" role="img"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 1000" 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.', 'NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#3655FF]" className="h-auto w-10 text-[#3655FF]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" 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', 'Monorepo for all the tooling which enables ESLint to support TypeScript',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#3178C6]" className="h-auto w-10 text-[#3178C6]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" 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.', 'The Homebridge UI. Monitor, configure and backup Homebridge from a browser.',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#491F59]" className="h-auto w-10 text-[#491F59]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -154,7 +154,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
'Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)', 'Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)',
icon: ( icon: (
<svg <svg
className="w-10 h-auto" className="h-auto w-10"
role="img" role="img"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 27" 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.', 'WooCommerce is a customizable, open-source eCommerce platform built on WordPress. Get started quickly and make your way.',
icon: ( icon: (
<svg <svg
className="w-10 h-auto text-[#96588A]" className="h-auto w-10 text-[#96588A]"
fill="currentColor" fill="currentColor"
role="img" role="img"
viewBox="0 0 24 24" 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) => ( {projectList.map((project, index: number) => (
<motion.div <motion.div
key={project.title + '-' + index} key={project.title + '-' + index}
@ -278,11 +278,11 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
index === projectList.length - 1 index === projectList.length - 1
? 'rounded-br-lg rounded-bl-none' ? '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> <div>
<span className="rounded-lg inline-flex">{project.icon}</span> <span className="inline-flex rounded-lg">{project.icon}</span>
</div> </div>
<div className="sm:mt-2"> <div className="sm:mt-2">
<p className="text-lg font-medium"> <p className="text-lg font-medium">
@ -298,12 +298,12 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
</a> </a>
</Link> </Link>
</p> </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} {project.description}
</p> </p>
</div> </div>
<span <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" aria-hidden="true"
> >
<svg <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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -107,7 +107,7 @@ export function Performance(): ReactComponentElement<any> {
</div> </div>
</div> </div>
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:col-start-1"> <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 className="text-lg text-gray-600">Up to</div>
<div <div
aria-hidden="true" aria-hidden="true"
@ -121,7 +121,7 @@ export function Performance(): ReactComponentElement<any> {
reduction in CI time for mid-size projects with standard CI setups reduction in CI time for mid-size projects with standard CI setups
</div> </div>
</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 className="text-lg text-gray-600">Up to</div>
<div <div
aria-hidden="true" aria-hidden="true"
@ -135,7 +135,7 @@ export function Performance(): ReactComponentElement<any> {
reduction in CI time for large projects with standard CI setups reduction in CI time for large projects with standard CI setups
</div> </div>
</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 className="text-lg text-gray-600">Up to</div>
<div <div
aria-hidden="true" aria-hidden="true"
@ -150,7 +150,7 @@ export function Performance(): ReactComponentElement<any> {
distributed CI setups distributed CI setups
</div> </div>
</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 className="text-lg text-gray-600">Average</div>
<div <div
aria-hidden="true" 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>
<div className="mt-6"> <div className="mt-6">
<motion.h1 <motion.h1
@ -75,7 +75,7 @@ export function VscodePlugin(): ReactComponentElement<any> {
<Link href="/using-nx/console"> <Link href="/using-nx/console">
<a <a
title="Get a better monorepo experience with Nx Console" 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 Install Nx Console
</a> </a>
@ -86,12 +86,12 @@ export function VscodePlugin(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <motion.div
variants={opacityTranslateXVariant} 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 <Image
src="/images/nx-console.webp" 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 ( return (
<article <article
id="youtube-channel" 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 <motion.div
ref={ref} 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"> <div className="lg:self-center">
<h1 className="text-3xl font-extrabold text-white sm:text-4xl"> <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">A dedicated</span> <span className="block">A dedicated</span>
@ -49,7 +49,7 @@ export function YoutubeChannel(): ReactComponentElement<any> {
title="Get the latest resources about Nx" title="Get the latest resources about Nx"
rel="nofollow" rel="nofollow"
target="_blank" 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 Check the Nx Youtube channel
</a> </a>
@ -58,11 +58,11 @@ export function YoutubeChannel(): ReactComponentElement<any> {
</div> </div>
<div <div
aria-hidden="true" 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 <img
loading="lazy" 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" src="/images/nrwlio-channel.webp"
alt="nrwl youtube channel" 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 { export function MemberCard(data: Member): JSX.Element {
return ( return (
<figure className="py-6 grid grid-cols-5 md:grid-cols-3 gap-12 align-center items-center justify-center"> <figure className="align-center grid grid-cols-5 items-center justify-center gap-12 py-6 md:grid-cols-3">
<div className="rounded-full col-span-2 md:col-span-1"> <div className="col-span-2 rounded-full md:col-span-1">
<Image <Image
src={data.imageUrl} src={data.imageUrl}
alt={data.name} alt={data.name}
@ -20,11 +20,11 @@ export function MemberCard(data: Member): JSX.Element {
/> />
</div> </div>
<div className="col-span-3 md:col-span-2"> <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> <p className="text-gray-400">{data.description}</p>
{data.twitter ? ( {data.twitter ? (
<a <a
className="mt-6 block font-input-mono" className="font-input-mono mt-6 block"
href={'https://twitter.com/' + data.twitter} href={'https://twitter.com/' + data.twitter}
target="_blank" target="_blank"
rel="nofollow" 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) { export function SponsorCard(data: Sponsor) {
return ( 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"> <div className="rounded-full md:col-span-1">
<a <a
className="cursor-pointer" className="cursor-pointer"
@ -20,7 +20,7 @@ export function SponsorCard(data: Sponsor) {
</a> </a>
</div> </div>
<div className="md:col-span-2"> <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> <p className="text-gray-400">{data.description}</p>
</div> </div>
</figure> </figure>

1
package.json
View File

@ -201,6 +201,7 @@
"postcss-url": "^10.1.1", "postcss-url": "^10.1.1",
"precise-commits": "1.0.2", "precise-commits": "1.0.2",
"prettier": "2.5.1", "prettier": "2.5.1",
"prettier-plugin-tailwindcss": "^0.1.5",
"pretty-quick": "^3.1.0", "pretty-quick": "^3.1.0",
"protractor": "5.4.3", "protractor": "5.4.3",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",

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" resolved "https://registry.npmjs.org/prettier-bytes/-/prettier-bytes-1.0.4.tgz"
integrity sha1-mUsCqkb2mcULYle1+qp/4lV+YtY= 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: prettier@2.5.1:
version "2.5.1" version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"