diff --git a/src/components/Marquee.js b/src/components/Marquee.js index 16d11c3..ce27a92 100644 --- a/src/components/Marquee.js +++ b/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 (