Skip to content

Commit

Permalink
feat(nx-dev): Add tailwind plugin and remove redirect for nx-cloud
Browse files Browse the repository at this point in the history
Add up to date data for time-saved API
  • Loading branch information
ndcunningham committed Jul 9, 2024
1 parent 9c91040 commit 0445b4e
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
CallToAction,
} from '@nx/nx-dev/ui-cloud';

export default function NxCloud() {
export function NxCloud(): JSX.Element {
const router = useRouter();

return (
Expand Down Expand Up @@ -41,10 +41,9 @@ export default function NxCloud() {
}}
/>
<Layout>
<div>
<Hero />
<TrustedBy />
</div>
<Hero />
<TrustedBy />

<div className="mt-32 lg:mt-56">
<FasterAndCheaper />
</div>
Expand All @@ -70,3 +69,5 @@ export default function NxCloud() {
</>
);
}

export default NxCloud;
1 change: 0 additions & 1 deletion nx-dev/nx-dev/redirect-rules.js
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,6 @@ const nxCloudUrls = {
'/ci': '/ci/intro/ci-with-nx',
'/concepts/more-concepts/illustrated-dte':
'/ci/concepts/parallelization-distribution',
'/nx-cloud/:path*': '/ci/:path*',
'/core-features/:path*': '/features/:path*',
'/ci/recipes/set-up/connect-to-cloud': '/ci/intro/connect-to-cloud',
};
Expand Down
17 changes: 17 additions & 0 deletions nx-dev/nx-dev/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ const path = require('path');
const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
const plugin = require('tailwindcss/plugin');

const {
default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette');

if (!createGlobPatternsForDependencies(__dirname).length)
throw Error('GRAPH ISSUE: No dependency found when many are expected.');

Expand All @@ -24,6 +28,18 @@ const FlipAnimation = plugin(function ({ addUtilities }) {
});
});

// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
function addVariablesForColors({ addBase, theme }) {
let allColors = flattenColorPalette(theme('colors'));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);

addBase({
':root': newVars,
});
}

module.exports = {
experimental: {
optimizeUniversalDefaults: true,
Expand Down Expand Up @@ -61,5 +77,6 @@ module.exports = {
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
FlipAnimation,
addVariablesForColors,
],
};
13 changes: 12 additions & 1 deletion nx-dev/ui-cloud/src/lib/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { ComponentProps, Fragment, useState } from 'react';
import { ButtonLink } from '@nx/nx-dev/ui-common';
import { SectionHeading } from './elements/section-tags';
import { MovingBorder } from './elements/moving-border';
import Link from 'next/link';
import Image from 'next/image';

export function Hero(): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
Expand All @@ -32,10 +34,19 @@ export function Hero(): JSX.Element {
>
Get started
</ButtonLink>
<ButtonLink
href="/ci/intro/ci-with-nx"
title="Learn More"
variant="secondary"
size="default"
>
Learn More
</ButtonLink>
<a
href="https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438/overview"
target="_blank"
rel="noreferrer"
title="Live demo"
className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"
>
Live demo{' '}
Expand All @@ -57,7 +68,7 @@ export function Hero(): JSX.Element {
</MovingBorder>
</div>
<picture className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-xl border border-slate-100 bg-slate-50 antialiased backdrop-blur-xl dark:border-slate-900 dark:bg-slate-900/[0.8]">
<img
<Image
src="/images/cloud/nrwl-ocean.avif"
alt="App screenshot: overview"
width={2550}
Expand Down
8 changes: 5 additions & 3 deletions nx-dev/ui-cloud/src/lib/statistics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,12 @@ function fetchTimeSaved(): Promise<{
}>
)
.catch(() => ({
// TODO: Remove this mock data once the API is ready.
// Below is the latest data as of 2024-07-08.
date: new Date(),
last7days: Math.round(Math.random() * 1000000000),
last30days: Math.round(Math.random() * 100000000000),
sinceStart: Math.round(Math.random() * 10000000000000),
last7days: 184326783183,
last30days: 853784967976,
sinceStart: 27250634509494,
}));
}

Expand Down

0 comments on commit 0445b4e

Please sign in to comment.