fix flash of content

Author: healeycodes

pages/about.tsx

@@ -4,17 +4,17 @@ import mePresenting from "../public/assets/presenting-high-res.jpg";
 import Image from "next/image";
 import Layout from "../components/layout";
 import Link from "next/link";
+import ms from "ms";
 
-export default function About() {
-  const daysSince1stJan2019 = Math.floor((new Date().getTime() - new Date("2019-01-01").getTime()) / (1000 * 60 * 60 * 24));
+export default function About({ daysSince }: { daysSince: number }) {
   return (
     <Layout title="About" description="About me.">
       <h1>About</h1>
       <main>
         <p>
           I write software and write about software. My research interests include programming language design, compilers, puzzle/game solvers, and distributed systems.</p>
         <p>
-          This <a href={siteConfig.REPO_URL}>open source</a> website is built with Next.js and is {daysSince1stJan2019} days old – some of the development is covered in <Link href="/notes">my notes</Link>. The very first version was built with Jekyll.
+          This <a href={siteConfig.REPO_URL}>open source</a> website is built with Next.js and is {daysSince} days old – some of the development is covered in <Link href="/notes">my notes</Link>. The very first version was built with Jekyll.
         </p>
         <p>
           Feel free to <a href="mailto:[email protected]">email me</a> with any questions or comments.
@@ -49,3 +49,13 @@ export default function About() {
     </Layout>
   );
 }
+
+export async function getStaticProps() {
+  const startDate = new Date("2019-01-01");
+  const daysSince = Math.floor((new Date().getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+  
+  return {
+    props: { daysSince },
+    revalidate: ms('1d') / 1000
+  }
+}

pages/projects.tsx

@@ -86,6 +86,6 @@ export async function getStaticProps() {
       totalStars,
       mostRecentPushFormatted,
     },
-    revalidate: ms('30min') / 1000, // TIL this is seconds
+    revalidate: ms('30min') / 1000,
   }
 }