simonyiszk · AndrisBorbas · Mar 20, 2023 · Mar 20, 2023
diff --git a/src/@types/generated/TypeParagraph.ts b/src/@types/generated/TypeParagraph.ts
@@ -1,6 +1,7 @@
 import type { Asset, Entry, EntryFields } from "contentful";
 
 export interface TypeParagraphFields {
+    id: EntryFields.Symbol;
     name: EntryFields.Symbol;
     content: EntryFields.Text;
     image?: Asset;

diff --git a/src/components/giveaway/GiveawaySection.tsx b/src/components/giveaway/GiveawaySection.tsx
@@ -1,7 +1,9 @@
 import clsx from "clsx";
 import Image from "next/image";
+import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
+import { FaArrowRight } from "react-icons/fa";
 import { FiExternalLink } from "react-icons/fi";
 
 import { Highlighted } from "@/components/highlight/Highlighted";
@@ -35,7 +37,11 @@ function LinkWrapper(
 	);
 }
 
-export function GiveawaySection() {
+export function GiveawaySection({
+	showDetailsLink,
+}: {
+	showDetailsLink?: boolean;
+}) {
 	const { t, i18n } = useTranslation("common");
 
 	const [counter, setCounter] = React.useState(0);
@@ -91,6 +97,18 @@ export function GiveawaySection() {
 						/>
 					</p>
 					<p className="text-2xl">{t("raffle.items.attendance")}</p>
+					{showDetailsLink && (
+						<Link
+							href="/nyeremenyjatek"
+							className={clsx(
+								"bg-gradient-to-r from-konf-primary-blue to-konf-primary-green bg-clip-text text-2xl font-bold text-transparent",
+								"group transition-all duration-200 hover:text-konf-accent-yellow",
+							)}
+						>
+							További részletek{" "}
+							<FaArrowRight className=" inline-block pb-1 text-white transition-all group-hover:text-konf-accent-yellow" />{" "}
+						</Link>
+					)}
 				</div>
 			</div>
 		</section>

diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -147,7 +147,7 @@ export function Header() {
 						className="py-2 pl-1 pr-4"
 					>
 						<Link
-							href="/#nyeremenyjatek"
+							href="/nyeremenyjatek"
 							className="text-xl font-semibold hover:text-konf-accent-yellow active:text-konf-accent-yellow"
 							scroll={router.pathname !== "/"}
 						>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -90,7 +90,7 @@ export default function Index({
 			<PresentationSection presentations={presentations} />
 			<CharlesSection {...charlesSimonyiPresentation} />
 			<VideoSection videoId={videoId} />
-			<GiveawaySection />
+			<GiveawaySection showDetailsLink />
 
 			<GallerySection albums={galleryAlbums} />
 			<SponsorSection {...sponsors} />

diff --git a/src/pages/nyeremenyjatek.tsx b/src/pages/nyeremenyjatek.tsx
@@ -0,0 +1,137 @@
+import clsx from "clsx";
+import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { MDXRemote } from "next-mdx-remote";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+import { GiveawaySection } from "@/components/giveaway/GiveawaySection";
+import { Layout } from "@/components/layout/Layout";
+import { LayoutContent } from "@/components/layout/LayoutContent";
+import { Seo } from "@/components/layout/Seo";
+import { getParagraphs } from "@/utils/contentful";
+import { useEffectOnce } from "@/utils/hooks";
+
+export const components = {
+	p: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLParagraphElement>,
+			HTMLParagraphElement
+		>,
+	) => <p className="my-2 text-base " {...props} />,
+	code: (
+		props: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>,
+	) => (
+		<code
+			className="rounded bg-slate-900 px-1 text-base text-gray-300"
+			{...props}
+		/>
+	),
+	h1: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLHeadingElement>,
+			HTMLHeadingElement
+		>,
+	) => (
+		<h1 className="mb-8  text-4xl font-bold" {...props}>
+			{props.children}
+		</h1>
+	),
+	h2: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLHeadingElement>,
+			HTMLHeadingElement
+		>,
+	) => (
+		<h2 className="my-4 text-2xl font-semibold" {...props}>
+			{props.children}
+		</h2>
+	),
+	h3: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLHeadingElement>,
+			HTMLHeadingElement
+		>,
+	) => (
+		<h3 className="mb-4 text-xl font-semibold" {...props}>
+			{props.children}
+		</h3>
+	),
+	a: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLAnchorElement>,
+			HTMLAnchorElement
+		>,
+	) => (
+		<a
+			className="text-konf-accent-yellow underline"
+			{...props}
+			target="_blank"
+			rel="noreferrer"
+		>
+			{props.children}
+		</a>
+	),
+	ul: (
+		props: DetailedHTMLProps<
+			HTMLAttributes<HTMLUListElement>,
+			HTMLUListElement
+		>,
+	) => <ul className="list-inside list-disc" {...props} />,
+};
+
+export default function GiveawayPage({
+	buildDate,
+	paragraph,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+	const { t } = useTranslation("common");
+
+	useEffectOnce(() => {
+		document.documentElement.style.setProperty(
+			"--randomHeight",
+			`${Math.floor(Math.random() * 300)}vh`,
+		);
+	});
+
+	return (
+		<Layout buildDate={buildDate} className="pt-8">
+			<Seo title={t("raffle.title")} />
+			<LayoutContent>
+				<h1
+					className={clsx(
+						"text-center text-4xl font-black sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl",
+						"bg-gradient-to-r bg-clip-text text-transparent",
+						"from-konf-primary-blue to-konf-primary-green",
+						"animate-text pb-4",
+					)}
+				>
+					{t("raffle.title")}
+				</h1>
+				<div className="my-12 sm:my-32">
+					<GiveawaySection />
+				</div>
+				{paragraph?.mdxSource && (
+					<section className="backdrop-blur-safari mx-auto w-full max-w-6xl rounded-2xl bg-white/10 px-8 py-10 text-white backdrop-blur">
+						<MDXRemote {...paragraph.mdxSource} components={components} />
+					</section>
+				)}
+			</LayoutContent>
+		</Layout>
+	);
+}
+
+export async function getStaticProps({ locale }: GetStaticPropsContext) {
+	const i18n = await serverSideTranslations(locale ?? "hu", ["common"]);
+	const paragraph =
+		(await getParagraphs())
+			.filter((p) => p.fields.id === "nyeremenyjatek-szabalyzat")
+			.at(0) ?? null;
+
+	return {
+		props: {
+			...i18n,
+			buildDate: Date.now(),
+			paragraph,
+		},
+	};
+}
diff --git a/src/utils/contentful.ts b/src/utils/contentful.ts
@@ -28,7 +28,6 @@ const client = createClient({
 export async function getParagraphs() {
 	const paragraphs = await client.getEntries<TypeParagraphFields>({
 		content_type: "paragraph",
-		order: "fields.order",
 	});
 
 	const renderedParagraphs = await Promise.all(