Skip to content

Commit c229729

Browse files
juristrjuristr
committed
feat(nx-dev): add the new Nx blog home
1 parent 312351b commit c229729

File tree

2 files changed

+181
-11
lines changed

2 files changed

+181
-11
lines changed

‎nx-dev/nx-dev/pages/blog/index.tsx

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import { Footer, Header, SectionHeading } from '@nx/nx-dev/ui-common';
2+
import { NextSeo } from 'next-seo';
3+
import { useRouter } from 'next/router';
4+
5+
export default function Blog(): JSX.Element {
6+
const router = useRouter();
7+
8+
return (
9+
<>
10+
<NextSeo
11+
title="Nx Blog"
12+
description="Latest news from the Nx & Nx Cloud core team"
13+
openGraph={{
14+
url: 'https://nx.dev' + router.asPath,
15+
title: 'Nx Blog',
16+
description:
17+
'Stay updated with the latest news, articles, and updates from the Nx & Nx Cloud team.',
18+
images: [
19+
{
20+
url: 'https://nx.dev/socials/nx-media.png',
21+
width: 800,
22+
height: 421,
23+
alt: 'Nx: Smart, Fast and Extensible Build System',
24+
type: 'image/jpeg',
25+
},
26+
],
27+
siteName: 'NxDev',
28+
type: 'website',
29+
}}
30+
/>
31+
<Header />
32+
<main id="main" role="main">
33+
<div className="w-full">
34+
<div className="py-8 bg-slate-50 dark:bg-slate-800/40">
35+
<article className="mx-auto py-4 px-4 sm:px-6 lg:items-center lg:py-4 lg:px-8">
36+
<header className="md:py-8">
37+
<div>
38+
<SectionHeading as="h1" variant="display" id="blog-title">
39+
The Nx Blog
40+
</SectionHeading>
41+
<p className="pt-5 text-lg text-slate-700 dark:text-slate-400">
42+
Coming soon...
43+
</p>
44+
</div>
45+
</header>
46+
</article>
47+
<article className="mx-auto px-4 sm:px-6 lg:items-center lg:px-8">
48+
<p className="pt-5 text-lg text-slate-700 dark:text-slate-400">
49+
And while we're working on getting our new shiny blog up and
50+
running, check out our current blog posts on Medium and Dev.to.
51+
Or sit back, relax and watch some of our video content on
52+
Youtube.
53+
</p>
54+
<main className="grid grid-cols-1 gap-5 md:grid-cols-3 pt-10 pb-24">
55+
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-slate-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-slate-900 dark:hover:bg-slate-800">
56+
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
57+
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-slate-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-slate-800" />
58+
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#000000] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
59+
<svg
60+
fill="currentColor"
61+
className="relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
62+
role="img"
63+
viewBox="0 0 24 24"
64+
xmlns="http://www.w3.org/2000/svg"
65+
>
66+
<title>Medium</title>
67+
<path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
68+
</svg>
69+
</div>
70+
<h4 className="mb-2 text-lg font-bold">
71+
Current, official "Nrwl" blog
72+
</h4>
73+
<a
74+
href="https://blog.nrwl.io"
75+
rel="noreferrer"
76+
target="_blank"
77+
title="Nrwl Blog"
78+
className="focus:outline-none"
79+
>
80+
<span
81+
className="absolute inset-0"
82+
aria-hidden="true"
83+
></span>
84+
<p className="leading-relaxed">
85+
Read all of the latest news on our current - soon to be
86+
sunset - official Nx aka Nrwl Blog.
87+
</p>
88+
</a>
89+
</div>
90+
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-indigo-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-indigo-900 dark:hover:bg-slate-800">
91+
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
92+
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-indigo-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-indigo-900" />
93+
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#5865F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
94+
<svg
95+
role="img"
96+
fill="currentColor"
97+
className="relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
98+
viewBox="0 0 24 24"
99+
xmlns="http://www.w3.org/2000/svg"
100+
>
101+
<title>dev.to</title>
102+
<path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.6.9.27.43.29.6.32 2.57.05 2.23-.02 2.73-.47 3.3zm5.09-5.47h-2.47v1.77h1.52v1.28l-.72.04-.75.03v1.77l1.22.03 1.2.04v1.28h-1.6c-1.53 0-1.6-.01-1.87-.3l-.3-.28v-3.16c0-3.02.01-3.18.25-3.48.23-.31.25-.31 1.88-.31h1.64v1.3zm4.68 5.45c-.17.43-.64.79-1 .79-.18 0-.45-.15-.67-.39-.32-.32-.45-.63-.82-2.08l-.9-3.39-.45-1.67h.76c.4 0 .75.02.75.05 0 .06 1.16 4.54 1.26 4.83.04.15.32-.7.73-2.3l.66-2.52.74-.04c.4-.02.73 0 .73.04 0 .14-1.67 6.38-1.8 6.68z" />
103+
</svg>
104+
</div>
105+
<h4 className="mb-2 text-lg font-bold">
106+
We're on Dev.to, too!
107+
</h4>
108+
<a
109+
href="https://blog.nrwl.io"
110+
rel="noreferrer"
111+
target="_blank"
112+
title="Nrwl Blog"
113+
className="focus:outline-none"
114+
>
115+
<span
116+
className="absolute inset-0"
117+
aria-hidden="true"
118+
></span>
119+
<p className="leading-relaxed">
120+
You're not really into Medium? Prefer dev.to? Good news,
121+
we cross-post most of our articles to a Dev.to collection.
122+
</p>
123+
</a>
124+
</div>
125+
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-red-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-red-900 dark:hover:bg-slate-800">
126+
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
127+
<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 dark:bg-red-900" />
128+
<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" />
129+
<svg
130+
fill="currentColor"
131+
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"
132+
role="img"
133+
viewBox="0 0 24 24"
134+
xmlns="http://www.w3.org/2000/svg"
135+
>
136+
<title>YouTube</title>
137+
<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" />
138+
</svg>
139+
</div>
140+
<h4 className="mb-2 text-lg font-bold">
141+
Prefer Video Content?
142+
</h4>
143+
<a
144+
href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx.dev"
145+
rel="noreferrer"
146+
target="_blank"
147+
title="Nx Youtube channel"
148+
className="focus:outline-none"
149+
>
150+
<span
151+
className="absolute inset-0"
152+
aria-hidden="true"
153+
></span>
154+
<p className="leading-relaxed">
155+
Not into reading right now? Then go to our YT channel to
156+
enjoy some short informative clips, release videos or live
157+
Q&A sessions. Don't forget to subscribe while you're
158+
there!
159+
</p>
160+
</a>
161+
</div>
162+
</main>
163+
</article>
164+
</div>
165+
</div>
166+
</main>
167+
<Footer />
168+
</>
169+
);
170+
}

‎nx-dev/ui-common/src/lib/header.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,16 @@ export function Header(): JSX.Element {
6262
description: 'Jump right in and start building!',
6363
href: '/getting-started/intro',
6464
},
65+
{
66+
name: 'Blog',
67+
description: 'Latest news from the Nx & Nx Cloud core team',
68+
href: '/blog',
69+
},
6570
{
6671
name: 'Community',
6772
description: "Check how to reach out and be part of Nx' community.",
6873
href: '/community',
6974
},
70-
{
71-
name: 'Extending Nx',
72-
description: 'Add capabilities to your workspace with plugins.',
73-
href: '/extending-nx/intro/getting-started',
74-
},
7575
{
7676
name: 'Nx Conf',
7777
description: 'Be part of the next Nx conference!',
@@ -179,18 +179,18 @@ export function Header(): JSX.Element {
179179
Enterprise
180180
</Link>
181181
<Link
182-
href="/community"
183-
title="Nx Community: Join us!"
182+
href="/blog"
183+
title="Blog"
184184
className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
185185
>
186-
Community
186+
Blog
187187
</Link>
188188
<Link
189-
href="/extending-nx/registry"
190-
title="Check Nx available plugins"
189+
href="/community"
190+
title="Nx Community: Join us!"
191191
className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
192192
>
193-
Plugins registry
193+
Community
194194
</Link>
195195
<Link
196196
href="/conf"

0 commit comments

Comments
 (0)