From 867ad4c9775121a7c4e3d21a02e4005f66401d44 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sat, 15 Jan 2022 16:30:18 -0500 Subject: [PATCH] remove all styled-jsx from components --- components/loading/Loading.module.css | 22 +++++++++++ components/loading/Loading.tsx | 53 +++++++++------------------ components/notes/Comments.module.css | 6 +++ components/notes/Comments.tsx | 7 ++-- components/notes/Meta.module.css | 2 +- components/projects/RepoCard.tsx | 8 +--- pages/contact.tsx | 1 + pages/notes/[slug].tsx | 26 +++++-------- pages/previously.tsx | 1 + pages/projects.tsx | 50 ++++++++++++------------- 10 files changed, 85 insertions(+), 91 deletions(-) create mode 100644 components/loading/Loading.module.css create mode 100644 components/notes/Comments.module.css diff --git a/components/loading/Loading.module.css b/components/loading/Loading.module.css new file mode 100644 index 00000000..57bad190 --- /dev/null +++ b/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); + } +} diff --git a/components/loading/Loading.tsx b/components/loading/Loading.tsx index 4d16f6bd..0b337bcc 100644 --- a/components/loading/Loading.tsx +++ b/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( -
- {boxStyles} -
+
); } return ( -
+
{divs} - -
); }; diff --git a/components/notes/Comments.module.css b/components/notes/Comments.module.css new file mode 100644 index 00000000..5ab31e49 --- /dev/null +++ b/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; +} diff --git a/components/notes/Comments.tsx b/components/notes/Comments.tsx index 18c773f1..9e69694f 100644 --- a/components/notes/Comments.tsx +++ b/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:last-of-type { /* fix potential layout shift when number of hits loads */ - min-width: 6.5em; + min-width: 7em; margin-right: 0; } diff --git a/components/projects/RepoCard.tsx b/components/projects/RepoCard.tsx index a4e4620e..1bfe2855 100644 --- a/components/projects/RepoCard.tsx +++ b/components/projects/RepoCard.tsx @@ -15,13 +15,7 @@ const RepoCard = (props: RepoType) => (
{props.language && (
- - - + {props.language.name}
)} diff --git a/pages/contact.tsx b/pages/contact.tsx index 7f40930e..e7a29e17 100644 --- a/pages/contact.tsx +++ b/pages/contact.tsx @@ -38,6 +38,7 @@ const Contact = () => ( .

+
diff --git a/pages/notes/[slug].tsx b/pages/notes/[slug].tsx index 38a55d88..41272c8a 100644 --- a/pages/notes/[slug].tsx +++ b/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: () => ( -
- -
- ), - }); return ( <> @@ -73,7 +59,13 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => { {frontMatter.noComments !== true && ( -
{commentsInView && }
+ + {({ inView, ref }) => ( +
+ {inView && } +
+ )} + )} ); diff --git a/pages/previously.tsx b/pages/previously.tsx index 13c98dde..b0509be6 100644 --- a/pages/previously.tsx +++ b/pages/previously.tsx @@ -201,6 +201,7 @@ const Previously = () => ( + {/* a complete sh*tshow of overrides, mainly to compensate for font change */}
-

+

View more on GitHub... - -

+ + );