docs(core): new year tips
This commit is contained in:
Isaac Mann
Miroslav Jonaš
parent
49a8d84023
commit
ab5379eb26
@ -1,277 +0,0 @@
|
|||||||
import {
|
|
||||||
FlipCard,
|
|
||||||
FlipCardBack,
|
|
||||||
FlipCardBackYoutube,
|
|
||||||
Footer,
|
|
||||||
Header,
|
|
||||||
Modal,
|
|
||||||
ModalHeader,
|
|
||||||
SectionHeading,
|
|
||||||
YouTube,
|
|
||||||
} from '@nx/nx-dev/ui-common';
|
|
||||||
import { NextSeo } from 'next-seo';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import { ReactNode, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
interface NewYearTip {
|
|
||||||
day: number;
|
|
||||||
cardBack: ReactNode;
|
|
||||||
modalHeader: ReactNode;
|
|
||||||
modalContent: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tips: NewYearTip[] = [
|
|
||||||
{
|
|
||||||
day: 1,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://www.youtube.com/watch?v=-_4WMl-Fn0w"
|
|
||||||
title="Soo...what is Nx?"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 1st, 2024</h3>,
|
|
||||||
modalContent: (
|
|
||||||
<>
|
|
||||||
<SectionHeading as="p" variant="display" className="mt-4">
|
|
||||||
What is Nx?
|
|
||||||
</SectionHeading>
|
|
||||||
<div className="mx-auto my-8 max-w-3xl">
|
|
||||||
<YouTube
|
|
||||||
src="https://www.youtube.com/watch?v=-_4WMl-Fn0w"
|
|
||||||
title="Soo...what is Nx?"
|
|
||||||
caption=""
|
|
||||||
width="100%"
|
|
||||||
></YouTube>
|
|
||||||
</div>
|
|
||||||
<p>Here is some text about what Nx is</p>
|
|
||||||
<p>
|
|
||||||
Read more in our{' '}
|
|
||||||
<Link
|
|
||||||
href="/getting-started/intro"
|
|
||||||
className="underline text-slate-900 dark:text-slate-100"
|
|
||||||
>
|
|
||||||
Intro to Nx
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 2,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://www.youtube.com/watch?v=ArmERpNvC8Y"
|
|
||||||
title="Package based vs Integrated Style - Use Nx however it works best for you"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 2nd, 2024</h3>,
|
|
||||||
modalContent: (
|
|
||||||
<>
|
|
||||||
<SectionHeading as="p" variant="display" className="mt-4">
|
|
||||||
Which Style of Workspace is Right for You?
|
|
||||||
</SectionHeading>
|
|
||||||
<div className="mx-auto my-8 max-w-3xl">
|
|
||||||
<YouTube
|
|
||||||
src="https://www.youtube.com/watch?v=ArmERpNvC8Y"
|
|
||||||
title="Package based vs Integrated Style - Use Nx however it works best for you"
|
|
||||||
caption=""
|
|
||||||
width="100%"
|
|
||||||
></YouTube>
|
|
||||||
</div>
|
|
||||||
<p>Here is some text about ways to use Nx</p>
|
|
||||||
<p>
|
|
||||||
Read more in our{' '}
|
|
||||||
<Link
|
|
||||||
href="/concepts/integrated-vs-package-based"
|
|
||||||
className="underline text-slate-900 dark:text-slate-100"
|
|
||||||
>
|
|
||||||
Types of Repos Guide
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 3,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://www.youtube.com/watch?v=NZF0ZJpgaJM"
|
|
||||||
title="What is Nx Cloud?"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 3rd, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 4,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBack>
|
|
||||||
<h3 className="text-center">Add Nx to an Existing Project</h3>
|
|
||||||
</FlipCardBack>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 4th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 5,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://www.youtube.com/watch?v=dotA6ZSmNL4"
|
|
||||||
title="Superpowered Micro Frontends with Monorepos"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 5th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 8,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBack>
|
|
||||||
<h3 className="text-center">Explore Example Repos</h3>
|
|
||||||
</FlipCardBack>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 8th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 9,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBack>
|
|
||||||
<h3 className="text-center">Let's Build a CLI</h3>
|
|
||||||
</FlipCardBack>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 9th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 10,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBack>
|
|
||||||
<h3 className="text-center">Optimizing Your CI/CD</h3>
|
|
||||||
</FlipCardBack>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 10th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 11,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://www.youtube.com/watch?v=ztNpLf2Zl-c"
|
|
||||||
title="Graduating Your Standalone Nx Repo To A Monorepo"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 11th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: 12,
|
|
||||||
cardBack: (
|
|
||||||
<FlipCardBackYoutube
|
|
||||||
src="https://youtu.be/Ss6MfcXi0jE"
|
|
||||||
title="Run Code Migrations to Update your Codebase"
|
|
||||||
></FlipCardBackYoutube>
|
|
||||||
),
|
|
||||||
modalHeader: <h3 className="text-xl font-semibold">January 12th, 2024</h3>,
|
|
||||||
modalContent: <div></div>,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function NewYear(): JSX.Element {
|
|
||||||
const currentDay =
|
|
||||||
new Date().getFullYear() === 2023 ? new Date().getDate() : 0;
|
|
||||||
const router = useRouter();
|
|
||||||
const [cards, setCards] = useState({});
|
|
||||||
const [currentModal, setCurrentModal] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const cards = JSON.parse(localStorage.getItem('cards') || '{}');
|
|
||||||
if (cards) {
|
|
||||||
setCards(cards);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem('cards', JSON.stringify(cards));
|
|
||||||
}, [cards]);
|
|
||||||
const onFlip = (text, isFlipped) => {
|
|
||||||
setCards({ ...cards, [text]: isFlipped });
|
|
||||||
};
|
|
||||||
function getIsFlippable(day: number) {
|
|
||||||
return currentDay >= day;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NextSeo
|
|
||||||
title="Nx New Year Tune-Up"
|
|
||||||
description="There are many ways you can connect with the open-source Nx community. The community is rich and dynamic offering Nx plugins and help on multiple platforms like GitHub, Discord and Twitter"
|
|
||||||
openGraph={{
|
|
||||||
url: 'https://nx.dev' + router.asPath,
|
|
||||||
title: 'Nx Community',
|
|
||||||
description:
|
|
||||||
'There are many ways you can connect with the open-source Nx community. The community is rich and dynamic offering Nx plugins and help on multiple platforms like GitHub, Discord and Twitter',
|
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url: 'https://nx.dev/socials/nx-media.png',
|
|
||||||
width: 800,
|
|
||||||
height: 421,
|
|
||||||
alt: 'Nx: Smart, Fast and Extensible Build System',
|
|
||||||
type: 'image/jpeg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
siteName: 'NxDev',
|
|
||||||
type: 'website',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Header />
|
|
||||||
<main id="main" role="main">
|
|
||||||
<div className="w-full pt-10 bg-slate-50 dark:bg-slate-800/40">
|
|
||||||
<div
|
|
||||||
id="new-year"
|
|
||||||
className="py-18 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
|
|
||||||
>
|
|
||||||
<article id="nx-new-year-challenge" className="relative">
|
|
||||||
<SectionHeading as="h1" variant="display" className="my-4">
|
|
||||||
Nx New Year Challenge
|
|
||||||
</SectionHeading>
|
|
||||||
<p>
|
|
||||||
Each day, during the first two weeks of January, a new card will
|
|
||||||
be unlocked for you to flip.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mx-auto items-stretch py-12 grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-5 lg:py-16">
|
|
||||||
{tips.map((tip) => (
|
|
||||||
<FlipCard
|
|
||||||
key={tip.day}
|
|
||||||
isFlippable={getIsFlippable(tip.day)}
|
|
||||||
onFlip={onFlip}
|
|
||||||
isFlipped={cards[tip.day]}
|
|
||||||
day={tip.day}
|
|
||||||
onClick={() => setCurrentModal(tip.day)}
|
|
||||||
>
|
|
||||||
{tip.cardBack}
|
|
||||||
</FlipCard>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{tips.map((tip) => (
|
|
||||||
<Modal
|
|
||||||
key={tip.day}
|
|
||||||
isOpen={currentModal === tip.day}
|
|
||||||
onClose={() => setCurrentModal(0)}
|
|
||||||
>
|
|
||||||
<ModalHeader onClose={() => setCurrentModal(0)}>
|
|
||||||
{tip.modalHeader}
|
|
||||||
</ModalHeader>
|
|
||||||
<div className="p-6">{tip.modalContent}</div>
|
|
||||||
</Modal>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user