remove all styled-jsx from components

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 dynamic from "next/dynamic";
+import { InView } from "react-intersection-observer";
 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>
   </>
 );