jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 13:18:26 -04:00
Code Issues

prevent fading into dark theme if we're immediately setting it on load

Browse Source
This commit is contained in:
Jake Jarvis 2022-02-06 12:25:48 -05:00
parent 4e7f235ed5
commit ee1b708b99
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
16 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/Footer/Footer.module.css
View File

@ -11,6 +11,7 @@
.link {
color: inherit;
text-decoration: none;
}
.row {

1
components/Heading/Heading.module.css
View File

@ -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 {

17
components/Layout/Layout.tsx
View File

@ -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 && (
<Head>
<meta name="theme-color" content={themeColors[resolvedTheme]} />
</Head>
)}
<Head>
{resolvedTheme && <meta name="theme-color" content={themeColors[resolvedTheme]} />}
{/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */}
<style>{`.page.loading,.page.loading *{transition:none!important}`}</style>
</Head>
{/* remove the `.loading` class above from body once the page is finished loading */}
<Script id="unblock-transitions" strategy="lazyOnload">
{`try{const cl=document.body.classList;cl.remove("loading");cl.add("loaded")}catch(e){}`}
</Script>
<div className={classNames(styles.flex, className)} {...rest}>
<Header />

1
components/Link/Link.module.css
View File

@ -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: */

1
components/MenuLink/MenuLink.module.css
View File

@ -3,6 +3,7 @@
align-items: center;
color: var(--medium-dark);
line-height: 1;
text-decoration: none;
padding: 0.6em;
}

1
components/NoteMeta/NoteMeta.module.css
View File

@ -45,6 +45,7 @@
.date_link,
.edit_link {
color: inherit;
text-decoration: none;
}
.views {

1
components/NoteTitle/NoteTitle.module.css
View File

@ -11,6 +11,7 @@
.link {
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 768px) {

1
components/OctocatLink/OctocatLink.module.css
View File

@ -1,6 +1,7 @@
.link {
margin: 0 0.4em;
color: var(--text);
text-decoration: none;
}
.link:hover {

1
components/PageTitle/PageTitle.module.css
View File

@ -7,6 +7,7 @@
.link {
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 768px) {

1
components/RepositoryCard/RepositoryCard.module.css
View File

@ -37,6 +37,7 @@
.meta_link {
color: inherit;
text-decoration: none;
}
.meta_link:hover {

1
components/Selfie/Selfie.module.css
View File

@ -2,6 +2,7 @@
display: inline-flex;
align-items: center;
color: var(--medium-dark);
text-decoration: none;
}
.link:hover {

2
package.json
View File

@ -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",

4
pages/_app.tsx
View File

@ -68,6 +68,8 @@ const App = ({ Component, pageProps }: Props) => {
return (
<>
<ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
{/* all SEO config is in ./lib/seo.ts except for canonical URLs, which require access to next router */}
<DefaultSeo
{...defaultSeo}
@ -81,8 +83,6 @@ const App = ({ Component, pageProps }: Props) => {
dangerouslySetAllPagesToNoFollow={process.env.NEXT_PUBLIC_VERCEL_ENV !== "production"}
/>
<SocialProfileJsonLd {...socialProfileJsonLd} />
<ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
</>
);
};

3
pages/_document.tsx
View File

@ -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 (
<Html lang={config.siteLocale?.replace("_", "-")}>
<Head />
<body>
<body className={classNames("page", "loading")}>
<Main />
<NextScript />
</body>

7
styles/index.css
View File

@ -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) {
*,

42
yarn.lock
View File

@ -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"