feat: add dark mode and full theming support (#81)

.eslintrc

@@ -10,6 +10,7 @@
   "plugins": ["prettier", "@typescript-eslint"],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
   }
 }

README.md

@@ -1,3 +1,3 @@
-# hey pal, here is the code that builds my website
+# hi friend, here is the code that builds my website
 
 made with [preact](https://preactjs.com/), [next.js](https://nextjs.org/), [typescript](https://www.typescriptlang.org/), [goober](https://github.com/cristianbote/goober), [storeon](https://github.com/storeon/storeon), and a whole lotta googling.

SHITLIST.md

@@ -2,8 +2,9 @@ still to do
 
 - [ ] visual regression testing
 - [x] 404 page
-- [ ] themeing & dark mode
-- [ ] easter egg
-- [ ] accessibility (contrast/reduce motion) options
+- [x] themeing & dark mode
+- [x] easter egg
+- [x] accessibility (contrast/reduce motion) options
 - [x] add api routes for custom status and location check-in
 - [x] add 'my work' page
+- [x] move blog to craft

next.config.js

@@ -14,14 +14,12 @@ module.exports = withPreact({
     }
     return config;
   },
-  rewrites: async () => {
-    return [
-      {
-        source: '/work',
-        destination: '/',
-      },
-    ];
-  },
+  rewrites: async () => [
+    {
+      source: '/work',
+      destination: '/',
+    },
+  ],
   experimental: {
     modern: true,
   },

src/components/Bio/About.tsx

@@ -1,16 +1,13 @@
 import { FC } from 'react';
 
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
 import { Link, Text } from 'components/core';
 import DynamicTime from 'components/DynamicTime';
 import DynamicTagline from 'components/DynamicTagline';
 import DynamicCurrentStatus from 'components/DynamicCurrentStatus';
 
 const About: FC = () => {
-  const { talkingPoint, currentCity } = useSiteStore(
-    'talkingPoint',
-    'currentCity'
-  );
+  const { talkingPoint, currentCity } = useStore('talkingPoint', 'currentCity');
 
   return (
     <>

src/components/Bio/Work.tsx

@@ -2,10 +2,10 @@ import { FC, memo } from 'react';
 
 import { Link, Text } from 'components/core';
 import { PAST_EXPERIENCE } from 'services/copy';
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
 
 const Work: FC = memo(() => {
-  const { githubStats } = useSiteStore('githubStats');
+  const { githubStats } = useStore('githubStats');
   const latestRepo = githubStats?.reposCommittedTo[0] ?? null;
 
   return (
@@ -39,8 +39,10 @@ const Work: FC = memo(() => {
           return (
             <>
               {isLast ? ' and ' : ' '}
-              <Link href={href} newTab style={{ color }} bare>
-                <Text bold>{label}</Text>
+              <Link href={href} newTab bare>
+                <Text bold color={color}>
+                  {label}
+                </Text>
               </Link>
               {isLast ? '.' : ','}
             </>

src/components/Bio/index.tsx

@@ -1,8 +1,8 @@
 import { FC, useEffect } from 'react';
 import { styled } from 'goober';
 
-import { useSiteStore } from 'services/store';
-import { screen } from 'services/utils';
+import { useStore } from 'services/store';
+import { screen } from 'services/style';
 
 import About from './About';
 import Work from './Work';
@@ -31,7 +31,7 @@ const Subcontainer = styled('div')`
 `;
 
 const Bio: FC = () => {
-  const { dispatch, displayedSection } = useSiteStore('displayedSection');
+  const { dispatch, displayedSection } = useStore('displayedSection');
 
   useEffect(() => {
     if (process.browser && window.location.pathname === '/work') {

src/components/CoverArt.tsx

@@ -2,18 +2,13 @@ import { css, keyframes } from 'goober';
 import { FC, memo } from 'react';
 
 import { useStoreFocusListeners } from 'services/store/utils';
-import { screen } from 'services/utils';
+import { screen } from 'services/style';
 
 type TCoverArtProps = { link: string; src: string; color: string };
 
 const rotate = keyframes`
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 `;
 
 const CoverArtLink = css`

src/components/DynamicCurrentStatus.tsx

@@ -1,7 +1,7 @@
 import { memo, FC, useCallback, useEffect } from 'react';
 import TextLoop from 'react-text-loop';
 
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
 import { TNowPlayingData, isNowPlayingData } from 'services/now-playing';
 import {
   textLoopIntervals,
@@ -45,7 +45,7 @@ const nowPlayingMarkup = ({
 };
 
 const DynamicCurrentStatus: FC = memo(() => {
-  const { dispatch, statuses } = useSiteStore('statuses');
+  const { dispatch, statuses } = useStore('statuses');
   const statusesMarkup = statuses.map((status) =>
     isNowPlayingData(status) ? nowPlayingMarkup(status) : status.split(' ')
   );

src/components/DynamicFavicon.tsx

@@ -3,17 +3,16 @@ import { useState, FC } from 'react';
 
 import { useVisibilityChange } from 'services/utils';
 
-const DynamicFavicon: FC = () => {
+const DynamicFavicon: FC<{ face?: 'smile' | 'mad' }> = ({ face }) => {
   const [isAway, setAway] = useState(false);
   useVisibilityChange(setAway);
 
+  const dynamicFace = face ?? isAway ? 'mad' : 'smile';
+  const href = dynamicFace === 'mad' ? '/favicon-away.png' : '/favicon.png';
+
   return (
     <Head>
-      <link
-        rel="shortcut icon"
-        type="image/png"
-        href={isAway ? '/favicon-away.png' : '/favicon.png'}
-      />
+      <link rel="shortcut icon" type="image/png" href={href} />
     </Head>
   );
 };

src/components/DynamicTagline.tsx

@@ -1,10 +1,10 @@
 import { memo, FC } from 'react';
 import TextLoop from 'react-text-loop';
 
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
 
 const DynamicTagline: FC = memo(() => {
-  const { taglines } = useSiteStore('taglines');
+  const { taglines } = useStore('taglines');
 
   return <TextLoop children={taglines} />;
 });

src/components/DynamicTime.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useEffect } from 'react';
 import TextLoop from 'react-text-loop';
 
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
 import { textLoopIntervals } from 'services/utils';
 import GradientText from 'components/GradientText';
 
@@ -71,7 +71,7 @@ const timeToGradient = (hour: number, time: string): TextGradientInfo => {
 };
 
 const DynamicTime: FC = () => {
-  const { currentDate } = useSiteStore('currentDate');
+  const { currentDate } = useStore('currentDate');
   const [dates, setDates] = useState<Date[]>([currentDate]);
 
   useEffect(() => {

src/components/Footer.tsx

@@ -3,7 +3,8 @@ import { styled } from 'goober';
 
 import { LINKS } from 'services/copy';
 import { Link, Text } from 'components/core';
-import { useSiteStore } from 'services/store';
+import { useStore } from 'services/store';
+import { onClickListeners } from 'services/utils';
 
 const Container = styled('footer')`
   display: flex;
@@ -13,28 +14,31 @@ const Container = styled('footer')`
 
   margin: 0 0 2em 0;
 
-  & > a {
+  & > * {
     margin: 0 6px;
   }
 `;
 
 const Footer: FC = memo(() => {
-  const { dispatch, displayedSection } = useSiteStore('displayedSection');
+  const { dispatch, displayedSection } = useStore('displayedSection');
   return (
     <Container>
       {LINKS.map(({ label, href }) => (
-        <Link href={href} newTab>
-          <Text>{label}</Text>
-        </Link>
+        <Text>
+          <Link href={href} newTab>
+            {label}
+          </Link>
+        </Text>
       ))}
-      <Link
-        onClick={() => dispatch('section/toggle')}
-        onKeyUp={(e) => (e.key === 'Enter' ? dispatch('section/toggle') : null)}
-        role="button"
-        tabIndex={0}
-      >
-        <Text>{displayedSection === 'about' ? 'my work' : 'about me'}</Text>
-      </Link>
+      <Text>
+        <Link
+          {...onClickListeners(() => dispatch('section/toggle'))}
+          role="button"
+          tabIndex={0}
+        >
+          {displayedSection === 'about' ? 'my work' : 'about me'}
+        </Link>
+      </Text>
     </Container>
   );
 });