jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-13 23:55:35 -04:00
Code Issues Activity

styled-jsx sheets weren't being rendered server-side 🤦

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-12 11:31:03 -05:00
parent c9f00d567a
commit 12d0959629
3 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -69,7 +69,6 @@
"remark-gfm": "^3.0.1",
"sanitize-html": "^2.6.1",
"simple-icons": "^6.6.0",
"styled-jsx": "^4.0.1",
"swr": "^1.1.2",
"twemoji": "github:twitter/twemoji#v13.1.0"
},

33
pages/index.tsx
View File

@@ -19,21 +19,24 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
const hexToRgba = (hex: string, alpha = 0.4) => hexRgb(hex, { alpha, format: "css" });
return (
<Link href={href} passHref={true} prefetch={false}>
<a title={title} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>
{children}
<style jsx>{`
a {
color: ${lightColor};
background-image: linear-gradient(${hexToRgba(lightColor)}, ${hexToRgba(lightColor)});
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: linear-gradient(${hexToRgba(darkColor)}, ${hexToRgba(darkColor)});
}
`}</style>
</a>
</Link>
<>
<Link href={href} passHref={true} prefetch={false}>
<a title={title} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>
{children}
</a>
</Link>
<style jsx>{`
a {
color: ${lightColor};
background-image: linear-gradient(${hexToRgba(lightColor)}, ${hexToRgba(lightColor)});
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: linear-gradient(${hexToRgba(darkColor)}, ${hexToRgba(darkColor)});
}
`}</style>
</>
);
};

14
yarn.lock
View File

@@ -6264,20 +6264,6 @@ styled-jsx@5.0.0-beta.6:
stylis "3.5.4"
stylis-rule-sheet "0.0.10"
styled-jsx@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.1.tgz#ae3f716eacc0792f7050389de88add6d5245b9e9"
integrity sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==
dependencies:
"@babel/plugin-syntax-jsx" "7.14.5"
"@babel/types" "7.15.0"
convert-source-map "1.7.0"
loader-utils "1.2.3"
source-map "0.7.3"
string-hash "1.1.3"
stylis "3.5.4"
stylis-rule-sheet "0.0.10"
stylelint-config-prettier@~9.0.3:
version "9.0.3"
resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"