From ee1b708b99fd300aab731f709f300b7248728eca Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sun, 6 Feb 2022 12:25:48 -0500 Subject: [PATCH] prevent fading into dark theme if we're immediately setting it on load --- components/Footer/Footer.module.css | 1 + components/Heading/Heading.module.css | 1 + components/Layout/Layout.tsx | 17 +++++--- components/Link/Link.module.css | 1 + components/MenuLink/MenuLink.module.css | 1 + components/NoteMeta/NoteMeta.module.css | 1 + components/NoteTitle/NoteTitle.module.css | 1 + components/OctocatLink/OctocatLink.module.css | 1 + components/PageTitle/PageTitle.module.css | 1 + .../RepositoryCard/RepositoryCard.module.css | 1 + components/Selfie/Selfie.module.css | 1 + package.json | 2 +- pages/_app.tsx | 4 +- pages/_document.tsx | 3 +- styles/index.css | 7 ---- yarn.lock | 42 ++++++++++--------- 16 files changed, 50 insertions(+), 35 deletions(-) diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css index bd23c5db..80e53d40 100644 --- a/components/Footer/Footer.module.css +++ b/components/Footer/Footer.module.css @@ -11,6 +11,7 @@ .link { color: inherit; + text-decoration: none; } .row { diff --git a/components/Heading/Heading.module.css b/components/Heading/Heading.module.css index 02d8e13d..48f5acec 100644 --- a/components/Heading/Heading.module.css +++ b/components/Heading/Heading.module.css @@ -22,6 +22,7 @@ padding: 0 0.25em; color: var(--medium-light); font-weight: 300; + text-decoration: none; opacity: 0; /* overridden on hover below (except on small screens) */ } .anchor::before { diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index e168d932..4579dc2c 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -1,4 +1,5 @@ import Head from "next/head"; +import Script from "next/script"; import { useTheme } from "next-themes"; import classNames from "classnames"; import Header from "../Header/Header"; @@ -18,11 +19,17 @@ const Layout = ({ noContainer, className, children, ...rest }: Props) => { return ( <> - {resolvedTheme && ( - - - - )} + + {resolvedTheme && } + + {/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */} + + + + {/* remove the `.loading` class above from body once the page is finished loading */} +
diff --git a/components/Link/Link.module.css b/components/Link/Link.module.css index 9a19c764..d245e8f8 100644 --- a/components/Link/Link.module.css +++ b/components/Link/Link.module.css @@ -4,6 +4,7 @@ background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% var(--link-underline-size); + text-decoration: none; padding-bottom: 0.2rem; /* background-size is for hover animation, color & border are for theme fading: */ diff --git a/components/MenuLink/MenuLink.module.css b/components/MenuLink/MenuLink.module.css index fce6612e..a6fb1ba8 100644 --- a/components/MenuLink/MenuLink.module.css +++ b/components/MenuLink/MenuLink.module.css @@ -3,6 +3,7 @@ align-items: center; color: var(--medium-dark); line-height: 1; + text-decoration: none; padding: 0.6em; } diff --git a/components/NoteMeta/NoteMeta.module.css b/components/NoteMeta/NoteMeta.module.css index 4daa9d03..078ed937 100644 --- a/components/NoteMeta/NoteMeta.module.css +++ b/components/NoteMeta/NoteMeta.module.css @@ -45,6 +45,7 @@ .date_link, .edit_link { color: inherit; + text-decoration: none; } .views { diff --git a/components/NoteTitle/NoteTitle.module.css b/components/NoteTitle/NoteTitle.module.css index a4ecaa1f..89c3132d 100644 --- a/components/NoteTitle/NoteTitle.module.css +++ b/components/NoteTitle/NoteTitle.module.css @@ -11,6 +11,7 @@ .link { color: inherit; + text-decoration: none; } @media screen and (max-width: 768px) { diff --git a/components/OctocatLink/OctocatLink.module.css b/components/OctocatLink/OctocatLink.module.css index f85a5c9c..2d14cece 100644 --- a/components/OctocatLink/OctocatLink.module.css +++ b/components/OctocatLink/OctocatLink.module.css @@ -1,6 +1,7 @@ .link { margin: 0 0.4em; color: var(--text); + text-decoration: none; } .link:hover { diff --git a/components/PageTitle/PageTitle.module.css b/components/PageTitle/PageTitle.module.css index c7529ac7..391d0eee 100644 --- a/components/PageTitle/PageTitle.module.css +++ b/components/PageTitle/PageTitle.module.css @@ -7,6 +7,7 @@ .link { color: inherit; + text-decoration: none; } @media screen and (max-width: 768px) { diff --git a/components/RepositoryCard/RepositoryCard.module.css b/components/RepositoryCard/RepositoryCard.module.css index 8140d853..0900f810 100644 --- a/components/RepositoryCard/RepositoryCard.module.css +++ b/components/RepositoryCard/RepositoryCard.module.css @@ -37,6 +37,7 @@ .meta_link { color: inherit; + text-decoration: none; } .meta_link:hover { diff --git a/components/Selfie/Selfie.module.css b/components/Selfie/Selfie.module.css index ba03c60b..0fcc89f5 100644 --- a/components/Selfie/Selfie.module.css +++ b/components/Selfie/Selfie.module.css @@ -2,6 +2,7 @@ display: inline-flex; align-items: center; color: var(--medium-dark); + text-decoration: none; } .link:hover { diff --git a/package.json b/package.json index f4f9684e..7c1c5834 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "node-fetch": "^3.2.0", "p-retry": "^5.0.0", "prop-types": "^15.8.1", - "query-string": "^7.1.0", + "query-string": "^7.1.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-gist": "^1.2.4", diff --git a/pages/_app.tsx b/pages/_app.tsx index 2d1958bf..443be0af 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -68,6 +68,8 @@ const App = ({ Component, pageProps }: Props) => { return ( <> + {getLayout()} + {/* all SEO config is in ./lib/seo.ts except for canonical URLs, which require access to next router */} { dangerouslySetAllPagesToNoFollow={process.env.NEXT_PUBLIC_VERCEL_ENV !== "production"} /> - - {getLayout()} ); }; diff --git a/pages/_document.tsx b/pages/_document.tsx index bf04548b..0f538923 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,4 +1,5 @@ import Document, { Html, Head, Main, NextScript } from "next/document"; +import classNames from "classnames"; import * as config from "../lib/config"; import type { DocumentContext } from "next/document"; @@ -13,7 +14,7 @@ class MyDocument extends Document { return ( - +
diff --git a/styles/index.css b/styles/index.css index 4f361b40..6ec0eafa 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,17 +1,10 @@ body { - width: 100%; - height: 100%; - margin: 0 auto; background-color: var(--background-inner); /* light-dark theme switch fading */ transition: background 0.25s ease; } -a { - text-decoration: none; -} - /* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */ @media (prefers-reduced-motion: reduce) { *, diff --git a/yarn.lock b/yarn.lock index bc0f52a4..7d34e6e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3,12 +3,11 @@ "@ampproject/remapping@^2.0.0": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.0.3.tgz#899999b5b7a5ce570d6d9bafdcc1e62cea466cf3" - integrity sha512-DmIAguV77yFP0MGVFWknCMgSLAtsLR3VlRTteR6xgMpIfYtwaZuMvjGv5YlpiqN7S/5q87DHyuIx8oa15kiyag== + version "2.0.4" + resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.0.4.tgz#ab4b6d858526ebee0d6c3aa5c3fb56a941c0d7be" + integrity sha512-zU3pj3pf//YhaoozRTYKaL20KopXrzuZFc/8Ylc49AuV8grYKH23TTq9JJoR70F8zQbil58KjSchZTWeX+jrIQ== dependencies: - "@jridgewell/sourcemap-codec" "^1.4.9" - "@jridgewell/trace-mapping" "^0.2.7" + "@jridgewell/trace-mapping" "^0.3.0" "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7": version "7.16.7" @@ -1124,18 +1123,18 @@ resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz#b876e3feefb9c8d3aa84014da28b5e52a0640d72" integrity sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg== -"@jridgewell/sourcemap-codec@^1.4.9": +"@jridgewell/sourcemap-codec@^1.4.10": version "1.4.10" resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz#baf57b4e2a690d4f38560171f91783656b7f8186" integrity sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg== -"@jridgewell/trace-mapping@^0.2.7": - version "0.2.7" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.2.7.tgz#d45be64544788e32c7ea5c8faa16a7000d840b5b" - integrity sha512-ZKfRhw6eK2vvdWqpU7DQq49+BZESqh5rmkYpNhuzkz01tapssl2sNNy6uMUIgrTtUWQDijomWJzJRCoevVrfgw== +"@jridgewell/trace-mapping@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.2.tgz#e051581782a770c30ba219634f2019241c5d3cde" + integrity sha512-9KzzH4kMjA2XmBRHfqG2/Vtl7s92l6uNDd0wW7frDE+EUvQFGqNXhWp0UGJjSkt3v2AYjzOZn1QO9XaTNJIt1Q== dependencies: "@jridgewell/resolve-uri" "^3.0.3" - "@jridgewell/sourcemap-codec" "^1.4.9" + "@jridgewell/sourcemap-codec" "^1.4.10" "@mdx-js/mdx@^2.0.0-rc.2": version "2.0.0" @@ -1539,16 +1538,21 @@ dependencies: "@types/estree" "*" -"@types/estree@*", "@types/estree@^0.0.50": - version "0.0.50" - resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83" - integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw== +"@types/estree@*": + version "0.0.51" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" + integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== "@types/estree@^0.0.46": version "0.0.46" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe" integrity sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg== +"@types/estree@^0.0.50": + version "0.0.50" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83" + integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw== + "@types/hast@^2.0.0": version "2.3.4" resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc" @@ -5567,10 +5571,10 @@ punycode@^2.1.0: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -query-string@^7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.0.tgz#96b88f27b39794f97b8c8ccd060bc900495078ef" - integrity sha512-wnJ8covk+S9isYR5JIXPt93kFUmI2fQ4R/8130fuq+qwLiGVTurg7Klodgfw4NSz/oe7xnyi09y3lSrogUeM3g== +query-string@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1" + integrity sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w== dependencies: decode-uri-component "^0.2.0" filter-obj "^1.1.0"