70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
|
import { NRenderer } from "@/components/notion/renderer";
|
||
|
|
import { NotionAPI } from "notion-client";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { getPageImageUrls, getPageTitle } from "notion-utils";
|
||
|
|
import "@/components/notion/notion.scss";
|
||
|
|
import "react-notion-x/src/styles.css";
|
||
|
|
import "prismjs/themes/prism-tomorrow.css";
|
||
|
|
|
||
|
|
import {
|
||
|
|
BackgroundGradentProvider,
|
||
|
|
GradientProvider,
|
||
|
|
SymetricGradProvider,
|
||
|
|
} from "@/components/gradient-provider";
|
||
|
|
import GrainProvider from "@/components/grain";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Footer } from "../Footer";
|
||
|
|
import { Connect } from "../Connect";
|
||
|
|
|
||
|
|
export default async function Story({
|
||
|
|
searchParams,
|
||
|
|
}: {
|
||
|
|
searchParams: { id?: string };
|
||
|
|
}) {
|
||
|
|
if (!searchParams.id) return null;
|
||
|
|
|
||
|
|
const notion = new NotionAPI();
|
||
|
|
|
||
|
|
const recordMap = await notion.getPage(searchParams.id);
|
||
|
|
|
||
|
|
const title = getPageTitle(recordMap);
|
||
|
|
|
||
|
|
const images = getPageImageUrls(recordMap, { mapImageUrl: (url) => url });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<article suppressHydrationWarning className="relative">
|
||
|
|
<GrainProvider
|
||
|
|
grain_options={{
|
||
|
|
patternWidth: 200,
|
||
|
|
patternHeight: 200,
|
||
|
|
grainOpacity: 0.1,
|
||
|
|
grainDensity: 1,
|
||
|
|
grainWidth: 1,
|
||
|
|
grainHeight: 1,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<BackgroundGradentProvider className="-z-10 h-screen w-full opacity-90" />
|
||
|
|
<SymetricGradProvider gradient_class={cn("rotate-0")} className="w-full">
|
||
|
|
<Image
|
||
|
|
width={400}
|
||
|
|
height={300}
|
||
|
|
src={images[0]}
|
||
|
|
alt={title}
|
||
|
|
className="w-full h-48 object-cover opacity-70 backdrop-saturate-200 backdrop-contrast-200 -z-50"
|
||
|
|
/>
|
||
|
|
</SymetricGradProvider>
|
||
|
|
<div className="container py-12 max-w-2xl">
|
||
|
|
<h1 className="text-2xl text-center text-pretty font-medium">
|
||
|
|
{title}
|
||
|
|
</h1>
|
||
|
|
<NRenderer recordMap={recordMap} />
|
||
|
|
<section className="connect-section">
|
||
|
|
<Connect />
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Footer className="max-w-2xl" />
|
||
|
|
</article>
|
||
|
|
);
|
||
|
|
}
|