jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 18:26:38 -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

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>
</>
);
};