rename /work to /projects, add /fun

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# secrets
+.env
+
 # dependencies
 /node_modules
 /.pnp

_pages/fun.mdx

@@ -0,0 +1,10 @@
+---
+title: Fun
+---
+
+## Why not?
+
+I play a lot of Rocket League... this widget updates regularly with my latest time played according
+to Steam.
+
+<RocketLeague />

_pages/home.mdx

@@ -8,7 +8,7 @@ Hi! I'm Blake Mealey, and this is my little corner of the internet.
 
 What's on this site:
 
-- [~/work](/work): A list of projects I've built in my free
+- [~/projects](/projects): A list of projects I've built in my free
   time
 - [~/posts](/posts): A collection of my thoughts
 

_pages/work.mdx → _pages/projects.mdx

@@ -1,8 +1,8 @@
 ---
-title: Work
+title: Projects
 ---
 
-## Work
+## Projects
 
 A list of projects I've built in my free time.
 

components/Layout.tsx

@@ -56,11 +56,14 @@ const Layout: NextPage<LayoutProps> = ({ children, slug, meta }) => {
             <Link href="/home">home</Link>
           </li>
           <li>
-            <Link href="/work">work</Link>
+            <Link href="/projects">projects</Link>
           </li>
           <li>
             <Link href="/posts">posts</Link>
           </li>
+          <li>
+            <Link href="/fun">fun</Link>
+          </li>
         </ul>
       </nav>
 

components/MdxRenderer.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import createHeadingComponent from './createHeadingComponent';
 import Shortcut from './Shortcut';
 import Image from 'next/image';
+import RocketLeague from './RocketLeague';
 
 const shortcodes = {
   Shortcut,
@@ -19,6 +20,7 @@ const shortcodes = {
   h4: createHeadingComponent('h4'),
   h5: createHeadingComponent('h5'),
   h6: createHeadingComponent('h6'),
+  RocketLeague,
 };
 
 const MdxRenderer = function ({ source }: { source: any }) {

components/RocketLeague.tsx

@@ -0,0 +1,72 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './rocket-league.module.css';
+
+interface ResponseData {
+  minutes: number;
+}
+
+type State =
+  | {
+      status: 'loading';
+    }
+  | { status: 'loaded'; data: ResponseData }
+  | { status: 'error'; error: any };
+
+const numberFormatter = new Intl.NumberFormat('en-US', {
+  style: 'unit',
+  unit: 'hour',
+  unitDisplay: 'long',
+});
+
+interface ContentProps {
+  state: State;
+}
+
+const Content = ({ state }: ContentProps) => {
+  if (state.status === 'loading') {
+    return <div>...</div>;
+  }
+
+  if (state.status === 'error') {
+    console.error(state.error);
+    return <div>Something went wrong :(</div>;
+  }
+
+  if (state.status === 'loaded') {
+    return (
+      <div>
+        <div className={styles.label}>Time played</div>
+        <div>{numberFormatter.format(state.data.minutes / 60)}</div>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default function RocketLeague() {
+  const [state, setState] = useState<State>({
+    status: 'loading',
+  });
+  useEffect(() => {
+    fetch('/api/rocket-league')
+      .then((res) => {
+        res
+          .json()
+          .then((data) => setState({ status: 'loaded', data }))
+          .catch((error) => {
+            setState({ status: 'error', error });
+          });
+      })
+      .catch((error) => {
+        setState({ status: 'error', error });
+      });
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <img className={styles.logo} src="/images/rocket-league.svg" />
+      <Content state={state} />
+    </div>
+  );
+}

components/rocket-league.module.css

@@ -0,0 +1,21 @@
+.container {
+  font-size: 40px;
+  padding: var(--theme-spacing-2) var(--theme-spacing-2);
+  border: 2px solid var(--theme-primary);
+  border-radius: var(--theme-roundness);
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.logo {
+  width: 5em;
+}
+
+.label {
+  font-size: 0.5em;
+  font-weight: bold;
+  opacity: 0.75;
+  margin-bottom: -0.5em;
+}

next.config.js

@@ -8,6 +8,12 @@ module.exports = {
         destination: '/home',
         permanent: true,
       },
+      {
+        source: '/work',
+        destination: '/projects',
+        // Not totally sure that we want this to be permanent - maybe we want to have something else at /work in the future?
+        permanent: false,
+      },
     ];
   },
 };

pages/[slug].tsx

@@ -49,7 +49,7 @@ export const getStaticProps: GetStaticProps<PageProps> = async ({ params }) => {
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
-    paths: ['/home', '/work'],
+    paths: ['/home', '/projects', '/fun'],
     fallback: false,
   };
 };

pages/api/rocket-league.ts

@@ -0,0 +1,34 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const ROCKET_LEAGUE_APP_ID = 252950;
+
+async function getStats() {
+  const key = process.env.STEAM_API_KEY;
+
+  const request = encodeURIComponent(
+    JSON.stringify({
+      steamid: process.env.STEAM_ACCOUNT_ID,
+      appids_filter: [ROCKET_LEAGUE_APP_ID],
+    })
+  );
+
+  const response = await fetch(
+    `https://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=${key}&format=json&input_json=${request}`
+  );
+
+  return await response.json();
+}
+
+export default async function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const data = await getStats();
+  const game = data.response.games.find(
+    (game: any) => game.appid === ROCKET_LEAGUE_APP_ID
+  );
+
+  // Cache for an hour across all users
+  res.setHeader('Cache-Control', 'public, s-maxage=3600, must-revalidate');
+  res.status(200).json({ minutes: game.playtime_forever, time: Date.now() });
+}

styles/globals.css

@@ -124,12 +124,13 @@ h1 {
 
 a {
   color: var(--theme-secondary);
-  &:hover {
-    opacity: var(--theme-hover-opacity);
-  }
   transition: opacity 0.2s ease-in-out;
 }
 
+a:hover {
+  opacity: var(--theme-hover-opacity);
+}
+
 main h1,
 main h2,
 main h3,