Merge pull request #98 from celestiaorg/feature/remove-newsletter

fix: removed newsletter and fixed next hydration errors

Author: alex-beckett

src/app/page.js

@@ -7,6 +7,7 @@ import Blog from "@/components/Resources/Blog/Blog";
 import HomepageScrollText from "@/components/ScrollText/views/HomepageScrollText";
 import { ANALYTICS_EVENTS } from "@/constants/analytics";
 import { Link } from "@/micros/TertiaryPageMicors/TertiaryPageMicors";
+import React from "react";
 
 export default async function Home() {
 	const posts = await getPosts();
@@ -71,10 +72,10 @@ export default async function Home() {
 						title: "Onchain Abundance",
 						body: [
 							"Build expressive applications previously unimaginable onchain.",
-							<>
+							<React.Fragment key='roadmap-text'>
 								Celestia&apos;s <Link href={"https://blog.celestia.org/roadmap/"}>roadmap</Link> has a core objective: relentlessly
 								scale beyond 1 GB/s data throughput, removing crypto&apos;s ultimate scaling bottleneck.
-							</>,
+							</React.Fragment>,
 						],
 						buttons: [
 							{
@@ -125,7 +126,7 @@ export const getPosts = async () => {
 		const res = await fetch(
 			"https://blog.celestia.org/ghost/api/v3/content/posts/?key=91c2a7dc379b796be090aeab63&limit=6&fields=title,text,feature_image,url,excerpt,published_at&formats=plaintext"
 		);
-		
+
 		if (!res.ok) {
 			console.error(`Ghost API responded with status: ${res.status}`);
 			throw new Error(`Ghost API responded with status: ${res.status}`);
@@ -135,13 +136,13 @@ export const getPosts = async () => {
 		const posts = responseJson.posts;
 
 		if (!posts) {
-			console.error('No posts found in response:', responseJson);
+			console.error("No posts found in response:", responseJson);
 			throw new Error("Failed to fetch blog posts");
 		}
 
 		return posts;
 	} catch (error) {
-		console.error('Error fetching blog posts:', error);
+		console.error("Error fetching blog posts:", error);
 		throw error;
 	}
 };

src/components/AlternatingMediaRows/MediaRow.js

@@ -4,6 +4,7 @@ import PrimaryButton from "@/macros/Buttons/PrimaryButton";
 import SecondaryButton from "@/macros/Buttons/SecondaryButton";
 import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";
 import { usePlausible } from "next-plausible";
+import React from "react";
 
 const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows }) => {
 	const videoRight = index % 2 === 0 ? true : false;
@@ -51,7 +52,7 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 				</div>
 				{buttons.map((button, index) => {
 					return (
-						<>
+						<React.Fragment key={`button-${index}`}>
 							{button.type === "primary" ? (
 								<PrimaryButton
 									key={index}
@@ -75,7 +76,7 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 									{button.text}
 								</SecondaryButton>
 							)}
-						</>
+						</React.Fragment>
 					);
 				})}
 			</div>

src/components/Ecosystem/EcosytemExplorer/EcosytemExplorer.js

@@ -7,15 +7,28 @@ import Link from "next/link";
 import "./EcosystemExplorer.scss";
 import { stringToId } from "@/utils/stringToId";
 import { usePlausible } from "next-plausible";
+import { useEffect, useState } from "react";
 
 const EcosytemExplorer = ({ trackEvent: trackEventName }) => {
 	const trackEvent = usePlausible();
-	// randomly select 22 ecosystem items and mix them up
-	const randomEcosystemItems = ecosystemItems.sort(() => Math.random() - 0.5);
+	// Use state to store the randomly sorted ecosystem items
+	const [randomItems, setRandomItems] = useState([]);
+	const [isClient, setIsClient] = useState(false);
 
-	// split the 22 ecosystem items into 12 foregroundItems and 10 backgroundItems
-	const foregroundItems = randomEcosystemItems.slice(0, 12);
-	const backgroundItems = randomEcosystemItems.slice(12, 22);
+	useEffect(() => {
+		// Only run the random sorting on the client side after hydration
+		setIsClient(true);
+		// randomly select 22 ecosystem items and mix them up
+		const shuffledItems = [...ecosystemItems].sort(() => Math.random() - 0.5);
+		setRandomItems(shuffledItems);
+	}, []);
+
+	// Use the first 22 items for server-side rendering, and randomItems after client-side hydration
+	const itemsToRender = isClient ? randomItems : ecosystemItems.slice(0, 22);
+
+	// split the ecosystem items into 12 foregroundItems and 10 backgroundItems
+	const foregroundItems = itemsToRender.slice(0, 12);
+	const backgroundItems = itemsToRender.slice(12, 22);
 
 	const handleViewAllClick = () => {
 		if (!trackEventName) return;

src/components/Footer/Footer.js

@@ -30,19 +30,38 @@ const Footer = () => {
 							<Heading size='lg' className={`mb-12`}>
 								Build whatever with Celestia underneath
 							</Heading>
-							<Newsletter />
+							<div className='flex flex-row lg:justify-start gap-4 mb-8'>
+								{columns[columns.length - 1].links.map((link, linkIndex) => {
+									const isInternal = isInternalLink(link.url);
+									return (
+										<Link
+											key={linkIndex}
+											href={link.url}
+											target={isInternal ? "_self" : "_blank"}
+											rel={isInternal ? "" : "noopener noreferrer"}
+											className={`flex items-center group`}
+										>
+											{link.icon && (
+												<Icon
+													Icon={<link.icon dark />}
+													hover
+													HoverIcon={<link.icon dark className='opacity-50' />}
+													size='sm'
+													border={false}
+													transparentBg
+													direction='up'
+												/>
+											)}
+										</Link>
+									);
+								})}
+							</div>
+							{/* <Newsletter /> */}
 						</div>
 						<div className={`flex flex-wrap lg:flex-nowrap w-full lg:1/2 lg:gap-6 lg:justify-end ml-auto mr-0`}>
-							{columns.map((column, index) => {
+							{columns.slice(0, -1).map((column, index) => {
 								return (
-									<ul
-										key={index}
-										className={`block ${
-											index === columns.length - 1
-												? "w-full flex flex-row justify-center lg:justify-end gap-4 order-last lg:order-none lg:flex-col lg:w-auto"
-												: "w-1/2 lg:w-1/5"
-										} ${index === columns.length - 1 ? "" : "mb-10 lg:mb-0"}`}
-									>
+									<ul key={index} className={`block w-1/2 lg:w-1/5 mb-10 lg:mb-0`}>
 										{column.links.map((link, linkIndex) => {
 											const isInternal = isInternalLink(link.url);
 											return (

src/utils/scrollLock.js

@@ -13,6 +13,8 @@ export const ScrollPositionProvider = ({ children }) => {
 	};
 	const [scrollIsLocked, setScrollIsLocked] = useState(false);
 	const [menuIsOpen, setMenuIsOpen] = useState(false);
+	// State for body styles to prevent hydration issues
+	const [bodyStyles, setBodyStyles] = useState({});
 
 	// Get the height of each navigation section
 	const primaryNavRef = useRef(null);
@@ -121,22 +123,53 @@ export const ScrollPositionProvider = ({ children }) => {
 		}
 	}, [pathname, navHeights]);
 
-	// Lock scroll when the menu is open
+	// Lock scroll when the menu is open - only runs on client-side
 	useEffect(() => {
+		// Skip during server-side rendering to prevent hydration issues
+		if (typeof window === "undefined") return;
+
 		if (scrollIsLocked) {
-			// Save the current scroll position and apply styles to lock scroll
+			// Save the current scroll position and set lock styles
 			const currentY = window.scrollY;
 			setScrollY(currentY);
-			document.body.style.cssText += `position: fixed; top: -${currentY}px; width: 100%; overflow: hidden;`;
+			// Update body styles through state
+			setBodyStyles({
+				position: "fixed",
+				top: `-${currentY}px`,
+				width: "100%",
+				overflow: "hidden",
+				overscrollBehaviorX: "none",
+			});
 		} else {
-			// Reset styles and scroll to the saved position
-			const bodyStyle = document.body.style;
-			bodyStyle.position = "";
-			bodyStyle.top = "";
-			bodyStyle.overflow = "";
+			// Reset styles when unlocked
+			setBodyStyles({});
+			// Restore scroll position if needed
+			if (scrollY.current !== 0) {
+				window.scrollTo(0, scrollY.current);
+			}
 		}
 	}, [scrollIsLocked]);
 
+	// Apply body styles using an effect that only runs on the client
+	useEffect(() => {
+		// Skip during server-side rendering
+		if (typeof window === "undefined") return;
+
+		// Apply styles directly to body element
+		Object.entries(bodyStyles).forEach(([prop, value]) => {
+			document.body.style[prop] = value;
+		});
+
+		// Clean up function to reset styles when component unmounts
+		return () => {
+			document.body.style.position = "";
+			document.body.style.top = "";
+			document.body.style.width = "";
+			document.body.style.overflow = "";
+			document.body.style.overscrollBehaviorX = "";
+		};
+	}, [bodyStyles]);
+
 	useEffect(() => {
 		setMenuIsOpen(false);
 	}, [pathname]);