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

fix unused components still loading on posts

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-06 09:10:25 -05:00
parent b29a2b8756
commit 6b756a54c1
9 changed files with 131 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/index.tsx
View File

@ -1,6 +1,6 @@
import Link from "next/link";
import hexRgb from "hex-rgb";
import isAbsoluteUrl from "is-absolute-url";
import { colord } from "colord";
import Layout from "../components/Layout";
import Container from "../components/Container";
import { WaveIcon, LockIcon } from "../components/icons";
@ -17,8 +17,9 @@ type ColorLinkProps = {
const ColorLink = ({ href, title, lightColor, darkColor, external = false, children }: ColorLinkProps) => {
external = external || isAbsoluteUrl(href);
// spits out an alpha color in rgb() that's compatible with linear-gradient()
const bgAlpha = (color: string) => hexRgb(color, { alpha: 0.4, format: "css" });
// spits out an alpha color in rgba() that's compatible with linear-gradient()
const underlineAlpha = 0.4;
const hexToRgba = (hex: string) => colord(hex).alpha(underlineAlpha).toRgbString();
return (
<Link href={href} passHref={true} prefetch={false}>
@ -27,11 +28,11 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
<style jsx>{`
a {
color: ${lightColor};
background-image: linear-gradient(${bgAlpha(lightColor)}, ${bgAlpha(lightColor)});
background-image: linear-gradient(${hexToRgba(lightColor)}, ${hexToRgba(lightColor)});
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: linear-gradient(${bgAlpha(darkColor)}, ${bgAlpha(darkColor)});
background-image: linear-gradient(${hexToRgba(darkColor)}, ${hexToRgba(darkColor)});
}
`}</style>
</a>