Dynamic content via gist

src/components/Marquee.js

@@ -2,21 +2,31 @@ import React, { useEffect, useState } from 'react';
 
 const Marquee = () => {
 	const [position, setPosition] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);
+	const [content, setContent] = useState('');
 
-	const text = `Visit my Twitter to take my AI-generated Mario quiz! Every day at 9:00 AM EDT my Mario Quiz Bot asks OpenAI (ChatGPT) to generate a quiz, then the bot posts the quiz as a Twitter poll and ultimately posts the answer at 5:00 PM EDT. Try it out and turn on notifications from my profile for a daily reminder!`;
+	const fetchContent = async () => {
+		const gistUrl = 'https://api.github.com/gists/ce0eb2a14fd6e6b98f3e82fc7b82e656';
+		const gist = await fetch(gistUrl).then((res) => res.json());
+		const gistContent = gist?.files['personal-site-content']?.content;
+		if (gistContent) {
+			const { scrollingSkyText } = JSON.parse(gistContent);
+			setContent(scrollingSkyText);
+		}
+	};
 
 	useEffect(() => {
+		fetchContent();
 		const interval = setInterval(() => {
 			setPosition((prevPos) => {
 				const newPos = prevPos - 1;
-				if (newPos < -text.length * 1.75 * 10) {
+				if (newPos < -content.length * 1.75 * 10) {
 					return window.innerWidth;
 				}
 				return newPos;
 			});
 		}, 5);
 		return () => clearInterval(interval);
-	}, [text]);
+	}, [content]);
 
 	return (
 		<div
@@ -28,7 +38,7 @@ const Marquee = () => {
 				marginTop: '32px',
 			}}
 		>
-			{text}
+			{content}
 		</div>
 	);
 };