docs(nxdev): reskin community page (#8927)

This commit is contained in:
Benjamin Cabanes 2022-02-11 10:07:54 -05:00 committed by GitHub
parent 1f3fbab947
commit e5804afbc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 570 additions and 269 deletions

View File

@ -1,8 +1,14 @@
import Image from 'next/image';
import Link from 'next/link';
import {
BeakerIcon,
ChatIcon,
ClipboardListIcon,
ShareIcon,
} from '@heroicons/react/solid';
import { Footer, Header } from '@nrwl/nx-dev/ui-common';
import { ConnectWithUs, PluginDirectory } from '@nrwl/nx-dev/ui-community';
import { NextSeo } from 'next-seo';
import { useRouter } from 'next/router';
import { Footer, Header, PluginCard } from '@nrwl/nx-dev/ui-common';
import CreateNxPlugin from '../../ui-community/src/lib/create-nx-plugin';
declare const fetch: any;
@ -55,256 +61,80 @@ export function Community(props: CommunityProps) {
<Header useDarkBackground={false} showSearch={false} />
<main>
<div className="w-full">
{/*Intro component*/}
<div className="bg-gray-50">
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="mt-40">
<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.
<article
id="getting-started"
className="relative bg-gray-50 pt-16 sm:pt-24 lg:pt-32"
>
<header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
<div>
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
<span className="sr-only">Nx has </span> A strong and dynamic
community
</h1>
<p className="mb-10 max-w-screen-lg text-lg font-medium sm:mb-11 sm:text-2xl sm:leading-10">
There are many ways you can connect with the open-source Nx
community. Below, youll find details about various connection
points.
<p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
It's always better when we're together.
</p>
</div>
</div>
</div>
{/*Community*/}
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="mt-32 flex flex-col justify-center md:flex-row">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pb-0">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
GitHub & Slack
</h2>
</header>
<p className="mb-6 sm:text-lg">
At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
, you can file issues or contribute code back to the project.
</p>
<p className="mb-6 sm:text-lg">
<a
className="cursor-pointer underline"
target="_blank"
title="Join the Nx Community Slack"
href="https://go.nrwl.io/join-slack"
rel="noreferrer"
>
Join the Nx Community Slack
</a>{' '}
to meet a friendly community of Nx users. This is a perfect
place to ask clarifying questions or to talk through new ideas
that you want to try with Nx. There's also a channel dedicated
to sharing articles about Nx and most of the authors of
community plugins can be reached there.
</p>
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
Livestreams & Twitter
</h2>
<p className="mb-6 sm:text-lg">
The Nx Show takes place every second and fourth Monday, from
1:00 - 2:00 PM EST on the{' '}
<a
className="cursor-pointer underline"
target="_blank"
href="https://www.youtube.com/nrwl_io"
rel="noreferrer"
>
Nrwl YouTube channel
</a>
. Info about upcoming sessions is shared on the{' '}
<a
className="cursor-pointer underline"
target="_blank"
href="https://twitter.com/NxDevTools"
rel="noreferrer"
>
@NxDevTools
</a>{' '}
Twitter account and the Nrwl+Nx Newsletter. You can find past
live-streams on the{' '}
<a
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
>
'Nx Show' Youtube Playlist
</a>
.
</p>
<p className="mb-6 sm:text-lg">
In each session, members of the Nx core team answer your
questions, help get you up and running with Nx, and address
particular challenges. If you have a question or topic youd
like to see covered during The Nx Show, you can{' '}
<a
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
aria-label="Nx Show Questions and Suggestions Form"
title="Nx Show Questions and Suggestions Form"
href="https://forms.gle/ehzCjzcF1xxNaviC7"
>
submit them here
</a>
</p>
<p className="mb-6 sm:text-lg">
For the latest news about Nx,{' '}
<a
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://twitter.com/NxDevTools"
>
follow @NxDevTools on Twitter
</a>
.
</p>
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
We also have a newsletter
</h2>
<p className="mb-6 sm:text-lg">
You can also{' '}
<a
className="cursor-pointer underline"
target="_blank"
rel="noreferrer"
href="https://go.nrwl.io/nx-newsletter"
>
subscribe to the Nx Newsletter
</a>
: a monthly email digest from the Nx core team at Nrwl.
Subscribers receive news about Nx releases, posts about new Nx
features, details about new plugins, links to community
resources, and additional Nx content.
</p>
</div>
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pl-16 md:pb-0">
<Image
src="/images/community.svg"
width={555}
height={735}
alt="community illustration"
/>
</div>
</div>
</div>
{/*How to plugin*/}
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="my-32 flex flex-col items-start justify-center md:flex-row">
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pb-0 lg:w-2/5">
<h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
Community plugin
</h2>
<p className="mb-6 sm:text-lg">
Core Nx plugins are created and maintained by the Nx team at
Nrwl and you can see all the available plugins when you run
the{' '}
<code className="rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
nx list
</code>{' '}
command in your workspace.
</p>
<p className="mb-6 sm:text-lg">
<b>The community plugins listed below</b> are created and
maintained by members of the Nx community, will allow you to
use the full power of the workspace while using different
technologies!
</p>
<div className="mb-6">
<a
href="#community-plugin-list"
className="cursor-pointer underline"
>
Check the community plugins right now!
<div className="mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="hover:border-green-nx-base relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition">
<ChatIcon className="text-green-nx-base mb-5 inline-block h-10 w-10" />
<h4 className="mb-2 text-lg font-bold">Community</h4>
<a className="focus:outline-none" href="#community">
<span className="absolute inset-0" aria-hidden="true" />
<p className="leading-relaxed text-gray-600">
There are many ways you can connect with the open-source
Nx community: Slack, Youtube, Twitter and email newletter
are available to keep you on top of all the Nx things!
</p>
</a>
</div>
<h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800">
How to Install
</h3>
<p className="mb-6 sm:text-lg">
Each of the plugins listed below have a yarn and an npm icon.
Clicking on either of these copies the relevant command to
install the dependency for your project.
</p>
</div>
<div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pl-16 lg:w-3/5">
<div className="w-full border border-gray-100 bg-gray-50 py-4 px-6">
<h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
How to Create Your Own
</h3>
<p className="mb-6 sm:text-lg">
Get started with building your own plugin!
</p>
<iframe
loading="lazy"
width="560"
height="315"
title="YouTube video player"
src="https://www.youtube.com/embed/XYO689PAhow"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
className="w-full"
/>
<div className="relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition hover:border-blue-500">
<BeakerIcon className="mb-5 inline-block h-10 w-10 text-blue-500" />
<h4 className="mb-2 text-lg font-bold">
Create and Share your own{' '}
<span className="sr-only">Nx plugin</span>
</h4>
<a className="focus:outline-none" href="#create-nx-plugin">
<span className="absolute inset-0" aria-hidden="true" />
<p className="leading-relaxed text-gray-600">
Core Nx plugins are created and maintained by the Nx team
at Nrwl but you can easily create your own! Follow our
documentation on how to create your own plugin.
</p>
</a>
</div>
<div className="relative rounded-lg border-2 border-white bg-white p-5 shadow-sm transition hover:border-pink-500 sm:col-span-2 lg:col-span-1">
<ClipboardListIcon className="mb-5 inline-block h-10 w-10 text-pink-500" />
<h4 className="mb-2 text-lg font-bold">
Browse the community plugin directory
</h4>
<a className="focus:outline-none" href="#plugin-directory">
<span className="absolute inset-0" aria-hidden="true" />
<p className="leading-relaxed text-gray-600">
Check all the community plugins available for Nx! These
plugins have been approved by the Nx core team, are well
maintained and regularly updated to make sure they work
with the latest versions.
</p>
</a>
</div>
</div>
</div>
</article>
<div id="connect-with-us" className="relative overflow-hidden py-24">
<ConnectWithUs />
</div>
{/*Call out*/}
<div className="bg-blue-nx-base text-white">
<div className="mx-auto my-12 max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
<span className="block">Ready to dive in?</span>
<span className="block text-gray-200">
Start using Nx today.
</span>
</h2>
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div className="inline-flex rounded-md shadow">
<Link href="/getting-started/intro">
<a className="text-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium">
Get started with Nx
</a>
</Link>
</div>
</div>
</div>
<div id="create-nx-plugin" className="relative overflow-hidden py-24">
<CreateNxPlugin />
</div>
{/*Plugins*/}
<div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
<div className="my-32 flex flex-col justify-center sm:flex-row">
<div className="mt-8 w-full py-6 lg:w-3/5">
<h2
id="community-plugin-list"
className="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 sm:text-2xl lg:text-3xl"
>
Community Plugins Directory
</h2>
</div>
<div className="mt-8 w-full py-6 text-right lg:w-2/5">
<a
href="/nx-plugin/overview#listing-your-nx-plugin"
className="bg-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent px-5 py-3 text-base font-medium text-white"
>
Add your Nx plugin to the list!
</a>
</div>
</div>
<div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{props.pluginList.map((plugin) => (
<PluginCard
key={plugin.name}
name={plugin.name}
description={plugin.description}
url={plugin.url}
/>
))}
</div>
<div id="plugin-directory" className="relative overflow-hidden py-24">
<PluginDirectory pluginList={props.pluginList} />
</div>
</div>
</main>

View File

@ -1,6 +1,3 @@
import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
/* eslint-disable-next-line */
export interface PluginCardProps {
name: string;
@ -9,28 +6,10 @@ export interface PluginCardProps {
}
export function PluginCard({ name, description, url }: PluginCardProps) {
const [copied, setCopied] = useState(false);
useEffect(() => {
let t: NodeJS.Timeout;
if (copied) {
t = setTimeout(() => {
setCopied(false);
}, 3000);
}
return () => {
t && clearTimeout(t);
};
}, [copied]);
return (
<div className="flex w-full flex-col rounded-md border border-gray-100 py-8 px-6">
<h3 className="mb-4 text-lg font-semibold leading-tight">
<a
href={url}
target="_blank"
rel="nofollow"
title="Github repository"
className="flex items-center"
>
<div className="focus-within:ring-blue-nx-base relative flex w-full 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="flex w-full flex-col px-4 py-3">
<h3 className="mb-4 flex text-lg font-semibold leading-tight">
<svg
className="mr-3 h-5 w-5 text-gray-800"
role="img"
@ -41,9 +20,18 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>{' '}
{name}
</h3>
<a
href={url}
target="_blank"
rel="noreferrer"
title="Github repository"
className="focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="mb-6 sm:text-sm">{description}</p>
</a>
</h3>
<p className="mb-6 sm:text-lg">{description}</p>
</div>
</div>
);
}

View File

@ -0,0 +1,12 @@
{
"presets": [
[
"@nrwl/react/babel",
{
"runtime": "automatic",
"useBuiltIns": "usage"
}
]
],
"plugins": []
}

View File

@ -0,0 +1,18 @@
{
"extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}

View File

@ -0,0 +1,7 @@
# nx-dev-ui-community
This library was generated with [Nx](https://nx.dev).
## Running unit tests
Run `nx test nx-dev-ui-community` to execute the unit tests via [Jest](https://jestjs.io).

View File

@ -0,0 +1,9 @@
module.exports = {
displayName: 'nx-dev-ui-community',
preset: '../../jest.preset.js',
transform: {
'^.+\\.[tj]sx?$': 'babel-jest',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
coverageDirectory: '../../coverage/nx-dev/ui-community',
};

View File

@ -0,0 +1,23 @@
{
"root": "nx-dev/ui-community",
"sourceRoot": "nx-dev/ui-community/src",
"projectType": "library",
"tags": ["scope:nx-dev", "tag:ui"],
"targets": {
"lint": {
"executor": "@nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["nx-dev/ui-community/**/*.{ts,tsx,js,jsx}"]
}
},
"test": {
"executor": "@nrwl/jest:jest",
"outputs": ["coverage/nx-dev/ui-community"],
"options": {
"jestConfig": "nx-dev/ui-community/jest.config.js",
"passWithNoTests": true
}
}
}
}

View File

@ -0,0 +1,3 @@
export * from './lib/connect-with-us';
export * from './lib/create-nx-plugin';
export * from './lib/plugin-directory';

View File

@ -0,0 +1,149 @@
import { MailIcon } from '@heroicons/react/solid';
import { ReactComponentElement } from 'react';
export function ConnectWithUs(): ReactComponentElement<any> {
return (
<article
id="community"
className="flex flex-col space-y-12 p-4 lg:mx-auto lg:max-w-7xl lg:flex-row lg:items-center lg:space-y-0 lg:space-x-20"
>
<header className="space-y-10 md:py-12 lg:w-5/12 xl:w-5/12">
<div>
<h1 className="text-3xl font-extrabold tracking-tight text-gray-900">
Let's connect together!
</h1>
<p className="mt-4 text-lg text-gray-500">
There are many ways you can connect with the open-source Nx
community. Let's connect together!
</p>
</div>
</header>
<div className="relative flex-none lg:w-7/12 xl:w-7/12">
<div className="relative flex flex-col space-y-6 md:flex-row md:space-x-6 md:space-y-0">
<div className="space-y-6 md:mt-24 md:w-1/2">
<div className="group rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-violet-300">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-violet-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#4A154B] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
<svg
fill="currentColor"
className="hi-solid hi-adjustments relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>Slack</title>
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
</svg>
</div>
<h4 className="mb-2 text-lg font-bold">Join us on Slack</h4>
<a
href="https://go.nrwl.io/join-slack?utm_source=nx.dev"
rel="noreferrer"
target="_blank"
title="Nx Community Slack channel"
className="focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="leading-relaxed text-gray-600">
Join the Nx Community Slack to meet a friendly community of Nx
users. With more than{' '}
<span className="font-semibold">4k+ users</span>, this is a
really great place to ask questions or to talk new ideas!
</p>
</a>
</div>
<div className="group relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-red-300">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-red-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#FF0000] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
<svg
fill="currentColor"
className="hi-solid hi-chart-pie relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>YouTube</title>
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
</svg>
</div>
<h4 className="mb-2 text-lg font-bold">Livestreams on Youtube</h4>
<a
href="https://www.youtube.com/nrwl_io/videos?utm_source=nx.dev"
rel="noreferrer"
target="_blank"
title="Nx Youtube channel"
className="focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="leading-relaxed text-gray-600">
Get access to live Q&A sessions, podcasts and tutorials on our
Youtube channel updated regularly! Do not forget to subscribe
to the Nx Show animated by Nx core team's members!
</p>
</a>
</div>
</div>
<div className="space-y-6 md:w-1/2">
<div className="group relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-blue-300">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#1DA1F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
<svg
fill="currentColor"
className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>Twitter</title>
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
</div>
<h4 className="mb-2 text-lg font-bold">Follow us on Twitter</h4>
<a
href="https://twitter.com/NxDevTools?utm_source=nx.dev"
rel="noreferrer"
target="_blank"
title="Nx Twitter account"
className="focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="leading-relaxed text-gray-600">
Stay up to date on everything about Nx by following
@NxDevTools on Twitter.
</p>
</a>
</div>
<div className="group hover:border-nx-300 relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
<div className="bg-green-nx-base absolute inset-0 -rotate-6 transform rounded-2xl bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>
<MailIcon className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110" />
</div>
<h4 className="mb-2 text-lg font-bold">Nx monthly newsletter</h4>
<a
href="https://go.nrwl.io/nx-newsletter?utm_source=nx.dev"
rel="noreferrer"
target="_blank"
title="Nx monthly newsletter subscription"
className="focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="leading-relaxed text-gray-600">
Subscribe and receive news about Nx releases, posts about new
Nx features, details about new plugins, links to community
resources, and additional Nx content.
</p>
</a>
</div>
</div>
</div>
</div>
</article>
);
}
export default ConnectWithUs;

View File

@ -0,0 +1,130 @@
import {
BookOpenIcon,
DocumentAddIcon,
ShareIcon,
} from '@heroicons/react/solid';
import { ReactComponentElement } from 'react';
import Link from 'next/link';
export function CreateNxPlugin(): ReactComponentElement<any> {
return (
<article
id="create-nx-plugin"
className="items-center lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
>
<header className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:px-0">
<h1 className="mb-4 text-3xl font-extrabold tracking-tight text-gray-900">
<span className="sr-only">Nx </span>Community Plugins
</h1>
<p className="mb-4 text-lg text-gray-500">
Core Nx plugins are created and maintained by the Nx team at Nrwl and
you can see all the available plugins when you run the{' '}
<code className="break-normal rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
nx list
</code>{' '}
command in your workspace.
</p>
<p className="mb-4 text-lg text-gray-500">
The community plugins are created and maintained by members of the Nx
community, will allow you to use the full power of the workspace while
using different technologies!
</p>
<ul className="mx-4 mb-4 list-disc">
<li className="mb-2">
<Link href="/nx-plugin/overview#generating-a-plugin">
<a className="text-lg font-normal text-gray-500 hover:underline">
Create your Nx Plugin
</a>
</Link>
</li>
<li className="mb-2">
<Link href="/nx-plugin/overview#testing-your-plugin">
<a className="text-lg font-normal text-gray-500 hover:underline">
Test your plugin
</a>
</Link>
</li>
<li className="mb-2">
<Link href="/nx-plugin/overview#generating-a-plugin">
<a className="text-lg font-normal text-gray-500 hover:underline">
Publish your Nx Plugin
</a>
</Link>
</li>
</ul>
</header>
<div className="lg:col-start-2">
<div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
<iframe
loading="lazy"
className="max-w-screen-sm"
width="100%"
height="315"
src="https://www.youtube.com/embed/XYO689PAhow"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
/>
<div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
<div 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="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/nx-plugin/overview#generating-a-plugin">
<a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-md mb-0.5 font-bold text-gray-600">
Create a new Nx Plugin
</p>
<p className="text-xs text-gray-500">
Follow this guide to generate an Nx plugin to fit your
needs
</p>
</a>
</Link>
</div>
<div className="flex-shrink-0">
<div className="rounded-full border border-gray-100 bg-white p-2 text-white">
<DocumentAddIcon className="text-blue-nx-base h-6 w-6" />
</div>
</div>
</div>
<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">
<BookOpenIcon className="h-4 w-4" />
<p className="text-xs font-bold">nx-plugin/overview</p>
</div>
</div>
<div 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="flex w-full px-4 py-3">
<div className="min-w-0 flex-1">
<Link href="/nx-plugin/overview#publishing-your-nx-plugin">
<a className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-md mb-0.5 font-bold text-gray-600">
Publish an Nx Plugin
</p>
<p className="text-xs text-gray-500">
Follow this guide to publish your new and shiny Nx
plugin
</p>
</a>
</Link>
</div>
<div className="flex-shrink-0">
<div className="rounded-full border border-gray-100 bg-white p-2 text-white">
<ShareIcon className="text-blue-nx-base h-6 w-6" />
</div>
</div>
</div>
<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">
<BookOpenIcon className="h-4 w-4" />
<p className="text-xs font-bold">nx-plugin/overview</p>
</div>
</div>
</div>
</div>
</div>
</article>
);
}
export default CreateNxPlugin;

View File

@ -0,0 +1,64 @@
import { ReactComponentElement } from 'react';
import { useState } from 'react';
import { PluginCard } from '@nrwl/nx-dev/ui-common';
import { SearchIcon } from '@heroicons/react/solid';
interface Plugin {
description: string;
name: string;
url: string;
}
export function PluginDirectory({
pluginList,
}: {
pluginList: Plugin[];
}): ReactComponentElement<any> {
const [searchTerm, setSearchTerm] = useState('');
return (
<div
id="plugin-directory"
className="max-w-screen mx-auto p-4 lg:max-w-7xl"
>
<div className="flex w-full flex-col justify-between gap-8 md:flex-row ">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Nx Plugin Directory
</h2>
<div>
<label htmlFor="search" className="sr-only">
Quick search
</label>
<div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<SearchIcon className="h-5 w-5 text-gray-400" />
</div>
<input
id="search"
name="search"
className="focus:border-blue-nx-base focus:ring-blue-nx-base block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 sm:text-sm"
placeholder="Quick search"
onChange={(event) => setSearchTerm(event.target.value)}
type="search"
/>
</div>
</div>
</div>
<div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{pluginList
.filter((plugin) =>
!!searchTerm ? plugin.name.includes(searchTerm) : true
)
.map((plugin) => (
<PluginCard
key={plugin.name}
name={plugin.name}
description={plugin.description}
url={plugin.url}
/>
))}
</div>
</div>
);
}
export default PluginDirectory;

View File

@ -0,0 +1,25 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

View File

@ -0,0 +1,22 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": ["node"]
},
"files": [
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
"../../node_modules/@nrwl/react/typings/image.d.ts"
],
"exclude": [
"**/*.spec.ts",
"**/*.test.ts",
"**/*.spec.tsx",
"**/*.test.tsx",
"**/*.spec.js",
"**/*.test.js",
"**/*.spec.jsx",
"**/*.test.jsx"
],
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

View File

@ -0,0 +1,19 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"include": [
"**/*.test.ts",
"**/*.spec.ts",
"**/*.test.tsx",
"**/*.spec.tsx",
"**/*.test.js",
"**/*.spec.js",
"**/*.test.jsx",
"**/*.spec.jsx",
"**/*.d.ts"
]
}

View File

@ -307,4 +307,4 @@
"**/xmlhttprequest-ssl": "~1.6.2",
"immer": "~9.0.6"
}
}
}

View File

@ -59,6 +59,7 @@
],
"@nrwl/nx-dev/ui-commands": ["./nx-dev/ui-commands/src/index.ts"],
"@nrwl/nx-dev/ui-common": ["./nx-dev/ui-common/src/index.ts"],
"@nrwl/nx-dev/ui-community": ["nx-dev/ui-community/src/index.ts"],
"@nrwl/nx-dev/ui-home": ["./nx-dev/ui-home/src/index.ts"],
"@nrwl/nx-dev/ui-member-card": ["./nx-dev/ui-member-card/src/index.ts"],
"@nrwl/nx-dev/ui-sponsor-card": ["./nx-dev/ui-sponsor-card/src/index.ts"],

View File

@ -51,6 +51,7 @@
"nx-dev-feature-versions-and-flavors": "nx-dev/feature-versions-and-flavors",
"nx-dev-ui-commands": "nx-dev/ui-commands",
"nx-dev-ui-common": "nx-dev/ui-common",
"nx-dev-ui-community": "nx-dev/ui-community",
"nx-dev-ui-home": "nx-dev/ui-home",
"nx-dev-ui-member-card": "nx-dev/ui-member-card",
"nx-dev-ui-sponsor-card": "nx-dev/ui-sponsor-card",