remove all styled-jsx from components

components/loading/Loading.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+  display: inline-block;
+  text-align: center;
+}
+
+.box {
+  display: inline-block;
+  height: 100%;
+  animation: loading 1.5s infinite ease-in-out both;
+  background-color: var(--medium-light);
+}
+
+@keyframes loading {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(0.6);
+  }
+}

components/loading/Loading.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
-import css from "styled-jsx/css";
+
+import styles from "./Loading.module.css";
 
 type Props = {
   width: number; // of entire container, in pixels
@@ -11,51 +12,31 @@ const Loading = ({ width, boxes = 3, timing = 0.1 }: Props) => {
   // each box is just an empty div
   const divs = [];
 
-  // box styles (extracted here so they're not defined for each individual box)
-  const { className: boxClassName, styles: boxStyles } = css.resolve`
-    div {
-      display: inline-block;
-      width: ${width / (boxes + 1)}px;
-      height: 100%;
-      animation: loading 1.5s infinite ease-in-out both;
-      background-color: var(--medium-light);
-    }
-
-    @keyframes loading {
-      0%,
-      80%,
-      100% {
-        transform: scale(0);
-      }
-      40% {
-        transform: scale(0.6);
-      }
-    }
-  `;
-
   // allow a custom number of pulsing boxes (defaults to 3)
   for (let i = 0; i < boxes; i++) {
     // width of each box correlates with number of boxes (with a little padding)
     // each individual box's animation has a staggered start in corresponding order
     divs.push(
-      <div key={i} className={boxClassName} style={{ animationDelay: `${i * timing}s` }}>
+      <div
-        {boxStyles}
+        key={i}
-      </div>
+        className={styles.box}
+        style={{
+          width: `${width / (boxes + 1)}px`,
+          animationDelay: `${i * timing}s`,
+        }}
+      />
     );
   }
 
   return (
-    <div>
+    <div
+      className={styles.wrapper}
+      style={{
+        width: `${width}px`,
+        height: `${width / 2}px`,
+      }}
+    >
       {divs}
-
-      <style jsx>{`
-        div {
-          width: ${width}px;
-          height: ${width / 2}px;
-          display: inline-block;
-          text-align: center;
-        }
-      `}</style>
     </div>
   );
 };

components/notes/Comments.module.css

@@ -0,0 +1,6 @@
+.wrapper :global(.giscus) {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 2px solid var(--light);
+  min-height: 350px;
+}

components/notes/Comments.tsx

@@ -3,6 +3,8 @@ import { Giscus } from "@giscus/react";
 import { giscusConfig } from "../../lib/config";
 import type { GiscusProps } from "@giscus/react";
 
+import styles from "./Comments.module.css";
+
 type Props = {
   title: string;
 };
@@ -11,10 +13,7 @@ const Comments = ({ title }: Props) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div
+    <div className={styles.wrapper}>
-      id="comments"
-      style={{ marginTop: "2em", paddingTop: "1em", borderTop: "2px solid var(--light)", minHeight: "350px" }}
-    >
       <Giscus
         {...(giscusConfig as GiscusProps)}
         term={title}

components/notes/Meta.module.css

@@ -21,7 +21,7 @@
 
 .meta > div:last-of-type {
   /* fix potential layout shift when number of hits loads */
-  min-width: 6.5em;
+  min-width: 7em;
   margin-right: 0;
 }
 

components/projects/RepoCard.tsx

@@ -15,13 +15,7 @@ const RepoCard = (props: RepoType) => (
     <div className={styles.meta}>
       {props.language && (
         <div className={styles.meta_item}>
-          <span className={styles.language_color}>
+          <span className={styles.language_color} style={{ backgroundColor: props.language.color }} />
-            <style jsx>{`
-              span {
-                background-color: ${props.language.color};
-              }
-            `}</style>
-          </span>
           <span>{props.language.name}</span>
         </div>
       )}

pages/contact.tsx

@@ -38,6 +38,7 @@ const Contact = () => (
           </a>
           .
         </p>
+
         <ContactForm />
       </div>
     </Content>

pages/notes/[slug].tsx

@@ -1,12 +1,11 @@
 import { useMemo } from "react";
-import { useInView } from "react-intersection-observer";
+import { InView } from "react-intersection-observer";
-import dynamic from "next/dynamic";
 import { NextSeo, ArticleJsonLd } from "next-seo";
 import { escape } from "html-escaper";
 import { getMDXComponent } from "mdx-bundler/client";
 import Content from "../../components/Content";
 import Meta from "../../components/notes/Meta";
-import Loading from "../../components/loading/Loading";
+import Comments from "../../components/notes/Comments";
 import CustomCode from "../../components/code-block/Code";
 import { getNote, getNoteSlugs } from "../../lib/parse-notes";
 import * as config from "../../lib/config";
@@ -15,19 +14,6 @@ import type { NoteType } from "../../types";
 
 const Note = ({ frontMatter, mdxSource }: NoteType) => {
   const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
-  const [commentsRef, commentsInView] = useInView({
-    rootMargin: "100px", // start loading comments script 100px from end of content
-    triggerOnce: true, // don't unload one it's loaded (if user scrolls back up)
-    fallbackInView: true,
-  });
-  const Comments = dynamic(() => import("../../components/notes/Comments"), {
-    ssr: false,
-    loading: () => (
-      <div style={{ display: "block", margin: "5em auto 3.5em auto", textAlign: "center" }}>
-        <Loading boxes={3} width={50} />
-      </div>
-    ),
-  });
 
   return (
     <>
@@ -73,7 +59,13 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
         <MDXComponent components={{ code: CustomCode }} />
       </Content>
       {frontMatter.noComments !== true && (
-        <div ref={commentsRef}>{commentsInView && <Comments title={frontMatter.title} />}</div>
+        <InView rootMargin="140px" triggerOnce={true} fallbackInView={true}>
+          {({ inView, ref }) => (
+            <div id="comments" ref={ref}>
+              {inView && <Comments title={frontMatter.title} />}
+            </div>
+          )}
+        </InView>
       )}
     </>
   );

pages/previously.tsx

@@ -201,6 +201,7 @@ const Previously = () => (
       </figure>
     </Content>
 
+    {/* a complete sh*tshow of overrides, mainly to compensate for font change */}
     <style jsx global>{`
       body {
         font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;

pages/projects.tsx

@@ -19,42 +19,40 @@ const Projects = (props: { repos: RepoType[] }) => (
       <ProjectsIcon /> Projects
     </PageTitle>
 
-    <div>
+    <div className="wrapper">
       {props.repos.map((repo: RepoType) => (
-        <div key={repo.name} className="repo_card">
+        <div key={repo.name} className="card">
           <RepoCard {...repo} />
         </div>
       ))}
-
-      <style jsx>{`
-        div {
-          display: flex;
-          flex-flow: row wrap;
-          justify-content: space-between;
-          align-items: flex-start;
-          width: 100%;
-        }
-
-        div .repo_card {
-          flex-grow: 1;
-          margin: 0.5em;
-          width: 370px;
-        }
-      `}</style>
     </div>
 
-    <p>
+    <p className="view_more">
       <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
         View more on GitHub...
       </a>
-
-      <style jsx>{`
-        p {
-          text-align: center;
-          margin-bottom: 0;
-        }
-      `}</style>
     </p>
+
+    <style jsx>{`
+      .wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+        align-items: flex-start;
+        width: 100%;
+      }
+
+      .card {
+        flex-grow: 1;
+        margin: 0.5em;
+        width: 370px;
+      }
+
+      .view_more {
+        text-align: center;
+        margin-bottom: 0;
+      }
+    `}</style>
   </>
 );