jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:06:38 -04:00
Code Issues Activity

try removing transition blocking stuff

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-19 09:19:46 -05:00
parent 7bffc22050
commit d24d29a04e
4 changed files with 18 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Layout/Layout.tsx
View File

@ -1,5 +1,4 @@
import Head from "next/head";
import Script from "next/script";
import { useTheme } from "next-themes";
import classNames from "classnames";
import Header from "../Header/Header";
@ -21,6 +20,7 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
<Head>
{/* convert themes object into inlined css variables */}
<style
id="theme-colors"
dangerouslySetInnerHTML={{
__html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
}}
@ -30,12 +30,6 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
<meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} />
</Head>
{/* this script removes the CSS that blocks transitions (see _document.tsx) once the page is finished loading...
...and removes itself after it has done that: */}
<Script id="unblock-transitions" strategy="lazyOnload">
{`try{document.getElementById("block-transitions").remove();document.getElementById("unblock-transitions").remove()}catch(e){}`}
</Script>
<div className={classNames(styles.flex, className)} {...rest}>
<Header sticky={stickyHeader} />

2
package.json
View File

@ -94,7 +94,7 @@
"cross-env": "^7.0.3",
"eslint": "~8.9.0",
"eslint-config-next": "12.1.0",
"eslint-config-prettier": "~8.3.0",
"eslint-config-prettier": "~8.4.0",
"eslint-plugin-import": "~2.25.4",
"eslint-plugin-mdx": "~1.16.0",
"eslint-plugin-prettier": "~4.0.0",

6
pages/_document.tsx
View File

@ -5,11 +5,7 @@ import * as config from "../lib/config";
const Document = () => {
return (
<Html lang={config.siteLocale?.replace("_", "-")}>
<Head>
{/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load. */}
{/* removed by `<Layout />` once the page is completely finished loading. */}
<style id="block-transitions">{`*,::before,::after{transition:none!important}`}</style>
</Head>
<Head />
<body>
<Main />
<NextScript />

30
yarn.lock
View File

@ -2046,9 +2046,9 @@ braces@^3.0.1, braces@~3.0.2:
fill-range "^7.0.1"
browserslist@^4.17.5, browserslist@^4.19.1:
version "4.19.2"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.2.tgz#9ba98791192a39e1242f0670bb265ceee1baf0a4"
integrity sha512-97XU1CTZ5TwU9Qy/Taj+RtiI6SQM1WIhZ9osT7EY0oO2aWXGABZT2OZeRL+6PfaQsiiMIjjwIoYFPq4APgspgQ==
version "4.19.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.3.tgz#29b7caad327ecf2859485f696f9604214bedd383"
integrity sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==
dependencies:
caniuse-lite "^1.0.30001312"
electron-to-chromium "^1.4.71"
@ -2770,10 +2770,10 @@ eslint-config-next@12.1.0:
eslint-plugin-react "^7.27.0"
eslint-plugin-react-hooks "^4.3.0"
eslint-config-prettier@~8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
eslint-config-prettier@~8.4.0:
version "8.4.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
version "0.3.6"
@ -5545,10 +5545,10 @@ pretty-bytes@^5.3.0:
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
prismjs@~1.26.0:
version "1.26.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"
integrity sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==
prismjs@~1.27.0:
version "1.27.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
@ -5743,15 +5743,15 @@ redent@^3.0.0:
strip-indent "^3.0.0"
refractor@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.4.0.tgz#093c3391c95e36e0fa1b630d7b13216cd7a0f643"
integrity sha512-JmpsdoB9Va7BxQAAsuFW4cvN6plRKmSVNua8vUjbB6uRv+9cwm5JDH67P8qYr0OAFXWE1D4WlrIAPzQNcyEaoQ==
version "4.5.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.5.0.tgz#1568fc3a5d6e0c5e4b76caafba7afde0b747fd15"
integrity sha512-cN0XFpjsjAefSRddH6/Ov0k5NrJozG2O5cvSnuLy3j9FDbknf0HswfQq4C9rOrIkFfLcdtZ9cEpm7TOKe+YDjw==
dependencies:
"@types/hast" "^2.0.0"
"@types/prismjs" "^1.0.0"
hastscript "^7.0.0"
parse-entities "^4.0.0"
prismjs "~1.26.0"
prismjs "~1.27.0"
regenerate-unicode-properties@^10.0.1:
version "10.0.1"