1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 11:26:37 -04:00

switch to shiki for syntax highlighting

This commit is contained in:
2025-03-15 21:19:57 -04:00
parent bc65285c08
commit 7c4144a1e7
32 changed files with 577 additions and 482 deletions

View File

@ -5,7 +5,7 @@
border: 2px solid var(--colors-light);
border-radius: 0.6em;
color: var(--colors-text);
background-color: var(--colors-superDuperLight);
background-color: var(--colors-super-duper-light);
}
.input:focus {
@ -41,12 +41,12 @@
user-select: none;
font-weight: 500;
color: var(--colors-text);
background-color: var(--colors-kindaLight);
background-color: var(--colors-kinda-light);
}
.submitButton:hover,
.submitButton:focus-visible {
color: var(--colors-superDuperLight);
color: var(--colors-super-duper-light);
background-color: var(--colors-link);
}

View File

@ -1,6 +1,6 @@
body {
font-family: var(--fonts-sans) !important;
background-color: var(--colors-backgroundInner);
background-color: var(--colors-background-inner);
}
code,

View File

@ -33,7 +33,7 @@ const Page = () => {
fontSize: "0.9em",
lineHeight: 1.8,
margin: "1.25em 1em 0 1em",
color: "var(--colors-mediumLight)",
color: "var(--colors-medium-light)",
}}
>
Video is property of{" "}

View File

@ -26,7 +26,7 @@ const Page = () => {
fontSize: "0.9em",
lineHeight: 1.8,
margin: "1.25em 1em 0 1em",
color: "var(--colors-mediumLight)",
color: "var(--colors-medium-light)",
}}
>
Video is property of{" "}

View File

@ -28,7 +28,7 @@ const Link = ({
href={uniqueId}
precedence={styles.page}
>
{`.t_${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .t_${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}
{`.t_${uniqueId}{--colors-link:${lightColor};--colors-link-underline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .t_${uniqueId}{--colors-link:${darkColor};--colors-link-underline:${rgba(darkColor, 0.4)}}`}
</style>
</UnstyledLink>
);
@ -150,7 +150,7 @@ const Page = () => {
>
the Tooth Fairy
</Link>
. <span style={{ color: "var(--colors-mediumLight)" }}>I've improved a bit since then, I think? 🤷</span>
. <span style={{ color: "var(--colors-medium-light)" }}>I've improved a bit since then, I think? 🤷</span>
</p>
<p>

View File

@ -23,7 +23,7 @@ body:has(.wackyWrapper) a {
width: 100%;
display: block;
margin: 0.6em 0;
border: 2px solid var(--colors-kindaLight);
border: 2px solid var(--colors-kinda-light);
}
.screenshot,

View File

@ -1,7 +1,6 @@
import PageTitle from "../../components/PageTitle";
import Link from "../../components/Link";
import Figure from "../../components/Figure";
import CodeInline from "../../components/CodeInline";
import HorizontalRule from "../../components/HorizontalRule";
import { addMetadata } from "../../lib/helpers/metadata";
@ -50,14 +49,14 @@ const Page = () => {
<p style={{ textAlign: "center", margin: "0.5em 0" }}>
🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
<CodeInline
<code
style={{
fontSize: "0.8em",
fontSize: "0.9em",
fontWeight: 400,
}}
>
color: <span style={{ color: "#32cd32" }}>limegreen</span>
</CodeInline>{" "}
</code>{" "}
ahead...
</p>

View File

@ -12,10 +12,10 @@
flex-grow: 1;
width: 370px;
padding: 1.2em 1.2em 0.8em;
border: 1px solid var(--colors-kindaLight);
border: 1px solid var(--colors-kinda-light);
border-radius: 1em;
font-size: 0.9em;
color: var(--colors-mediumDark);
color: var(--colors-medium-dark);
}
.card .name {

View File

@ -1,59 +1,37 @@
:root {
--colors-backgroundInner: #ffffff;
--colors-backgroundOuter: #fcfcfc;
--colors-backgroundHeader: rgb(252 252 252 / 70%);
--colors-background-inner: #ffffff;
--colors-background-outer: #fcfcfc;
--colors-background-header: rgb(252 252 252 / 70%);
--colors-text: #202020;
--colors-mediumDark: #515151;
--colors-medium-dark: #515151;
--colors-medium: #5e5e5e;
--colors-mediumLight: #757575;
--colors-medium-light: #757575;
--colors-light: #d2d2d2;
--colors-kindaLight: #e3e3e3;
--colors-superLight: #f4f4f4;
--colors-superDuperLight: #fbfbfb;
--colors-kinda-light: #e3e3e3;
--colors-super-light: #f4f4f4;
--colors-super-duper-light: #fbfbfb;
--colors-link: #0e6dc2;
--colors-linkUnderline: rgb(14 109 194 / 40%);
--colors-link-underline: rgb(14 109 194 / 40%);
--colors-success: #44a248;
--colors-error: #ff1b1b;
--colors-warning: #f78200;
--colors-codeText: #313131;
--colors-codeBackground: #fdfdfd;
--colors-codeComment: #656e77;
--colors-codeKeyword: #029cb9;
--colors-codeAttribute: #70a800;
--colors-codeNamespace: #f92672;
--colors-codeLiteral: #ae81ff;
--colors-codePunctuation: #111111;
--colors-codeVariable: #d88200;
--colors-codeAddition: #44a248;
--colors-codeDeletion: #ff1b1b;
}
[data-theme="dark"] {
--colors-backgroundInner: #1e1e1e;
--colors-backgroundOuter: #252525;
--colors-backgroundHeader: rgb(37 37 37 / 85%);
--colors-background-inner: #1e1e1e;
--colors-background-outer: #252525;
--colors-background-header: rgb(37 37 37 / 85%);
--colors-text: #f1f1f1;
--colors-mediumDark: #d7d7d7;
--colors-medium-dark: #d7d7d7;
--colors-medium: #b1b1b1;
--colors-mediumLight: #959595;
--colors-medium-light: #959595;
--colors-light: #646464;
--colors-kindaLight: #535353;
--colors-superLight: #272727;
--colors-superDuperLight: #1f1f1f;
--colors-kinda-light: #535353;
--colors-super-light: #272727;
--colors-super-duper-light: #1f1f1f;
--colors-link: #88c7ff;
--colors-linkUnderline: rgb(136 199 255 / 40%);
--colors-link-underline: rgb(136 199 255 / 40%);
--colors-success: #78df55;
--colors-error: #ff5151;
--colors-warning: #f2b702;
--colors-codeText: #e4e4e4;
--colors-codeBackground: #212121;
--colors-codeComment: #929292;
--colors-codeKeyword: #3b9dd2;
--colors-codeAttribute: #78df55;
--colors-codeNamespace: #f95757;
--colors-codeLiteral: #d588fb;
--colors-codePunctuation: #cccccc;
--colors-codeVariable: #fd992a;
--colors-codeAddition: #78df55;
--colors-codeDeletion: #ff5151;
}

View File

@ -1,5 +1,4 @@
import Link from "../../components/Link";
import CodeBlock from "../../components/CodeBlock/CodeBlock";
import { addMetadata } from "../../lib/helpers/metadata";
import backgroundImg from "./sundar.jpg";
@ -16,54 +15,57 @@ const Page = () => {
return (
<div
style={{
position: "relative",
width: "100%",
margin: "1em auto",
backgroundImage: `url(${backgroundImg.src})`,
backgroundRepeat: "repeat",
backgroundPosition: "center",
borderRadius: "0.6em",
}}
>
<CodeBlock
<code
style={{
backgroundColor: "var(--colors-backgroundHeader)",
backgroundColor: "var(--colors-background-header)",
backdropFilter: "saturate(180%) blur(5px))",
display: "block",
overflowX: "auto",
padding: "1em",
fontSize: "0.9em",
tabSize: 2,
border: "1px solid var(--colors-kinda-light)",
borderRadius: "0.6em",
}}
>
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
<span style={{ color: "var(--colors-codeLiteral)" }}>mv</span> /root
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>mv</span> /root
<Link href="https://killedbygoogle.com/" style={{ color: "inherit" }} plain>
/stable_products_that_people_rely_on/
</Link>
googledomains.zip /tmp/
<br />
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
<span style={{ color: "var(--colors-codeLiteral)" }}>crontab</span>{" "}
<span style={{ color: "var(--colors-codeVariable)" }}>-l</span>
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>crontab</span>{" "}
<span style={{ color: "#fd992a" }}>-l</span>
<br />
<br />
<span style={{ color: "var(--colors-codeComment)" }}>
<span style={{ color: "#929292" }}>
# TODO(someone else): make super duper sure this only deletes actual zip files and *NOT* the sketchy domains
ending with file extensions released by us & purchased on our registrar (which i just yeeted btw cuz i'm bored
& also my evil superpowers are fueled by my reckless disregard for the greater good of the internet). - xoxo
sundar <span style={{ color: "var(--colors-codeNamespace)" }}>&lt;3</span>
sundar <span style={{ color: "#f95757" }}>&lt;3</span>
</span>
<br />
<span style={{ color: "var(--colors-codeAttribute)" }}>@monthly</span>&nbsp;&nbsp;&nbsp;&nbsp;
<span style={{ color: "var(--colors-codeLiteral)" }}>rm</span>{" "}
<span style={{ color: "var(--colors-codeVariable )" }}>-f</span> /tmp/
<span style={{ color: "#78df55" }}>@monthly</span>&nbsp;&nbsp;&nbsp;&nbsp;
<span style={{ color: "#d588fb" }}>rm</span> <span style={{ color: "#fd992a" }}>-f</span> /tmp/
<Link href="https://fuckyougoogle.zip/" style={{ color: "inherit" }} plain>
*.zip
</Link>
<br />
<br />
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>:
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
<span style={{ color: "var(--colors-codeLiteral)" }}>reboot</span> 0
</CodeBlock>
<span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>reboot</span> 0
</code>
</div>
);
};