raj/raj.how
raj
/
raj.how
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixed hydration errors

This commit is contained in:
Raj 2024-02-18 21:25:43 +05:30
parent 352f303356
commit 61947e892c
5 changed files with 115 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
package-lock.json generated
View File

@ -21,7 +21,7 @@
"framer-motion": "^10.17.12", "framer-motion": "^10.17.12",
"lucide-react": "^0.306.0", "lucide-react": "^0.306.0",
"nanoid": "^5.0.4", "nanoid": "^5.0.4",
"next": "^14.0.4", "next": "^14.1.0",
"notion-client": "^6.16.0", "notion-client": "^6.16.0",
"notion-types": "^6.16.0", "notion-types": "^6.16.0",
"notion-utils": "^6.16.0", "notion-utils": "^6.16.0",
@ -817,8 +817,9 @@
} }
}, },
"node_modules/@next/env": { "node_modules/@next/env": {
"version": "14.0.4", "version": "14.1.0",
"license": "MIT" "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
"integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw=="
}, },
"node_modules/@next/eslint-plugin-next": { "node_modules/@next/eslint-plugin-next": {
"version": "14.0.4", "version": "14.0.4",
@ -848,11 +849,12 @@
} }
}, },
"node_modules/@next/swc-darwin-arm64": { "node_modules/@next/swc-darwin-arm64": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
"integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@ -862,9 +864,9 @@
} }
}, },
"node_modules/@next/swc-darwin-x64": { "node_modules/@next/swc-darwin-x64": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
"integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==", "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -877,9 +879,9 @@
} }
}, },
"node_modules/@next/swc-linux-arm64-gnu": { "node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
"integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==", "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -892,9 +894,9 @@
} }
}, },
"node_modules/@next/swc-linux-arm64-musl": { "node_modules/@next/swc-linux-arm64-musl": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
"integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==", "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -907,9 +909,9 @@
} }
}, },
"node_modules/@next/swc-linux-x64-gnu": { "node_modules/@next/swc-linux-x64-gnu": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
"integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==", "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -922,9 +924,9 @@
} }
}, },
"node_modules/@next/swc-linux-x64-musl": { "node_modules/@next/swc-linux-x64-musl": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
"integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==", "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -937,9 +939,9 @@
} }
}, },
"node_modules/@next/swc-win32-arm64-msvc": { "node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
"integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==", "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -952,9 +954,9 @@
} }
}, },
"node_modules/@next/swc-win32-ia32-msvc": { "node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
"integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==", "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
@ -967,9 +969,9 @@
} }
}, },
"node_modules/@next/swc-win32-x64-msvc": { "node_modules/@next/swc-win32-x64-msvc": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
"integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==", "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -2171,9 +2173,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001576", "version": "1.0.30001588",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
"integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==", "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -3674,7 +3676,8 @@
"node_modules/glob-to-regexp": { "node_modules/glob-to-regexp": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
"peer": true
}, },
"node_modules/globals": { "node_modules/globals": {
"version": "13.24.0", "version": "13.24.0",
@ -5782,18 +5785,17 @@
"peer": true "peer": true
}, },
"node_modules/next": { "node_modules/next": {
"version": "14.0.4", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz", "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz",
"integrity": "sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==", "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==",
"dependencies": { "dependencies": {
"@next/env": "14.0.4", "@next/env": "14.1.0",
"@swc/helpers": "0.5.2", "@swc/helpers": "0.5.2",
"busboy": "1.6.0", "busboy": "1.6.0",
"caniuse-lite": "^1.0.30001406", "caniuse-lite": "^1.0.30001579",
"graceful-fs": "^4.2.11", "graceful-fs": "^4.2.11",
"postcss": "8.4.31", "postcss": "8.4.31",
"styled-jsx": "5.1.1", "styled-jsx": "5.1.1"
"watchpack": "2.4.0"
}, },
"bin": { "bin": {
"next": "dist/bin/next" "next": "dist/bin/next"
@ -5802,15 +5804,15 @@
"node": ">=18.17.0" "node": ">=18.17.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"@next/swc-darwin-arm64": "14.0.4", "@next/swc-darwin-arm64": "14.1.0",
"@next/swc-darwin-x64": "14.0.4", "@next/swc-darwin-x64": "14.1.0",
"@next/swc-linux-arm64-gnu": "14.0.4", "@next/swc-linux-arm64-gnu": "14.1.0",
"@next/swc-linux-arm64-musl": "14.0.4", "@next/swc-linux-arm64-musl": "14.1.0",
"@next/swc-linux-x64-gnu": "14.0.4", "@next/swc-linux-x64-gnu": "14.1.0",
"@next/swc-linux-x64-musl": "14.0.4", "@next/swc-linux-x64-musl": "14.1.0",
"@next/swc-win32-arm64-msvc": "14.0.4", "@next/swc-win32-arm64-msvc": "14.1.0",
"@next/swc-win32-ia32-msvc": "14.0.4", "@next/swc-win32-ia32-msvc": "14.1.0",
"@next/swc-win32-x64-msvc": "14.0.4" "@next/swc-win32-x64-msvc": "14.1.0"
}, },
"peerDependencies": { "peerDependencies": {
"@opentelemetry/api": "^1.1.0", "@opentelemetry/api": "^1.1.0",
@ -8182,6 +8184,7 @@
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
"integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
"peer": true,
"dependencies": { "dependencies": {
"glob-to-regexp": "^0.4.1", "glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.1.2" "graceful-fs": "^4.1.2"

2
package.json
View File

@ -22,7 +22,7 @@
"framer-motion": "^10.17.12", "framer-motion": "^10.17.12",
"lucide-react": "^0.306.0", "lucide-react": "^0.306.0",
"nanoid": "^5.0.4", "nanoid": "^5.0.4",
"next": "^14.0.4", "next": "^14.1.0",
"notion-client": "^6.16.0", "notion-client": "^6.16.0",
"notion-types": "^6.16.0", "notion-types": "^6.16.0",
"notion-utils": "^6.16.0", "notion-utils": "^6.16.0",

1
src/app/(home)/page.tsx
View File

@ -4,7 +4,6 @@ import { StyledNotion } from "@/components/notion/styled";
import { ExternalLink, Sparkle } from "lucide-react"; import { ExternalLink, Sparkle } from "lucide-react";
import { Footer } from "./Footer"; import { Footer } from "./Footer";
import { Connect } from "./Connect"; import { Connect } from "./Connect";
import { motion } from "framer-motion";
export default function Page() { export default function Page() {
return ( return (

5
src/app/(home)/story/page.tsx
View File

@ -1,4 +1,3 @@
import { NRenderer } from "@/components/notion/renderer";
import { NotionAPI } from "notion-client"; import { NotionAPI } from "notion-client";
import Image from "next/image"; import Image from "next/image";
import { getPageImageUrls, getPageTitle } from "notion-utils"; import { getPageImageUrls, getPageTitle } from "notion-utils";
@ -12,6 +11,9 @@ import { Footer } from "../Footer";
import { Connect } from "../Connect"; import { Connect } from "../Connect";
import { Home } from "lucide-react"; import { Home } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import dynamic from "next/dynamic";
import { NRenderer } from "@/components/notion/renderer";
export default async function Story({ export default async function Story({
searchParams, searchParams,
@ -46,6 +48,7 @@ export default async function Story({
height={300} height={300}
src={images[0]} src={images[0]}
alt={title} alt={title}
priority
className="w-full h-48 object-cover opacity-70 backdrop-saturate-200 backdrop-contrast-200 -z-50" className="w-full h-48 object-cover opacity-70 backdrop-saturate-200 backdrop-contrast-200 -z-50"
/> />
<div className="container py-12 max-w-2xl"> <div className="container py-12 max-w-2xl">

80
src/components/notion/renderer.tsx
View File

@ -5,9 +5,16 @@ import dynamic from "next/dynamic";
import { NotionRenderer } from "react-notion-x"; import { NotionRenderer } from "react-notion-x";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Link from "next/link";
import Image from "next/image";
import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";
const Code = dynamic(() => const Code = dynamic(
import("react-notion-x/build/third-party/code").then((m) => m.Code), () => import("react-notion-x/build/third-party/code").then((m) => m.Code),
{
ssr: false,
},
); );
const Collection = dynamic(() => const Collection = dynamic(() =>
import("react-notion-x/build/third-party/collection").then( import("react-notion-x/build/third-party/collection").then(
@ -34,24 +41,53 @@ export function NRenderer({
className?: string; className?: string;
fullPage?: boolean; fullPage?: boolean;
}) { }) {
return ( const [render, setRender] = useState(false);
<motion.div
// blur and fade in and animate height to auto useEffect(() => {
initial={{ opacity: 0, filter: "blur(10px)" }} setRender(true);
animate={{ opacity: 1, filter: "blur(0px)" }} }, []);
className={cn("", className)}
> if (!render) {
<NotionRenderer return (
components={{ <motion.div
Code, initial={{ opacity: 0, filter: "blur(10px)" }}
Collection, animate={{ opacity: 1, filter: "blur(0px)" }}
Equation, className="h-[80vh] flex items-center flex-col justify-center"
Modal, >
}} <div className="pb-36">
mapPageUrl={(pageId) => `/story?id=${pageId}`} <div className="flex items-center gap-1">
fullPage={fullPage} <h2 className="text-foreground">./raj</h2>
recordMap={recordMap} <Loader2 size={12} className="animate-spin" />
/> </div>
</motion.div> <p className="italic text-xs text-muted-foreground">executing...</p>
); </div>
</motion.div>
);
}
if (render)
return (
<motion.div
initial={{ opacity: 0, filter: "blur(10px)", height: "0px" }}
animate={{ opacity: 1, filter: "blur(0px)", height: "auto" }}
className={cn("", className)}
suppressHydrationWarning
>
<NotionRenderer
components={{
Code,
Collection,
Equation,
Modal,
nextLink: Link,
Link: Link,
Image: Image,
nextImage: Image,
}}
mapPageUrl={(pageId) => `/story?id=${pageId}`}
fullPage={fullPage}
recordMap={recordMap}
/>
</motion.div>
);
} }