jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 05:25:26 -04:00
Code Issues

switch to shiki for syntax highlighting

Browse Source
This commit is contained in:
Jake Jarvis 2025-03-15 21:19:57 -04:00
parent bc65285c08
commit 7c4144a1e7
Signed by: jake
SSH Key Fingerprint: SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
32 changed files with 577 additions and 482 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/contact/form.module.css
View File

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

2
app/global.css
View File

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

2
app/hillary/page.tsx
View File

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

2
app/leo/page.tsx
View File

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

4
app/page.tsx
View File

@ -28,7 +28,7 @@ const Link = ({
href={uniqueId} href={uniqueId}
precedence={styles.page} 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> </style>
</UnstyledLink> </UnstyledLink>
); );
@ -150,7 +150,7 @@ const Page = () => {
> >
the Tooth Fairy the Tooth Fairy
</Link> </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>
<p> <p>

2
app/previously/page.module.css
View File

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

7
app/previously/page.tsx
View File

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

4
app/projects/page.module.css
View File

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

58
app/themes.css
View File

@ -1,59 +1,37 @@
:root { :root {
--colors-backgroundInner: #ffffff; --colors-background-inner: #ffffff;
--colors-backgroundOuter: #fcfcfc; --colors-background-outer: #fcfcfc;
--colors-backgroundHeader: rgb(252 252 252 / 70%); --colors-background-header: rgb(252 252 252 / 70%);
--colors-text: #202020; --colors-text: #202020;
--colors-mediumDark: #515151; --colors-medium-dark: #515151;
--colors-medium: #5e5e5e; --colors-medium: #5e5e5e;
--colors-mediumLight: #757575; --colors-medium-light: #757575;
--colors-light: #d2d2d2; --colors-light: #d2d2d2;
--colors-kindaLight: #e3e3e3; --colors-kinda-light: #e3e3e3;
--colors-superLight: #f4f4f4; --colors-super-light: #f4f4f4;
--colors-superDuperLight: #fbfbfb; --colors-super-duper-light: #fbfbfb;
--colors-link: #0e6dc2; --colors-link: #0e6dc2;
--colors-linkUnderline: rgb(14 109 194 / 40%); --colors-link-underline: rgb(14 109 194 / 40%);
--colors-success: #44a248; --colors-success: #44a248;
--colors-error: #ff1b1b; --colors-error: #ff1b1b;
--colors-warning: #f78200; --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"] { [data-theme="dark"] {
--colors-backgroundInner: #1e1e1e; --colors-background-inner: #1e1e1e;
--colors-backgroundOuter: #252525; --colors-background-outer: #252525;
--colors-backgroundHeader: rgb(37 37 37 / 85%); --colors-background-header: rgb(37 37 37 / 85%);
--colors-text: #f1f1f1; --colors-text: #f1f1f1;
--colors-mediumDark: #d7d7d7; --colors-medium-dark: #d7d7d7;
--colors-medium: #b1b1b1; --colors-medium: #b1b1b1;
--colors-mediumLight: #959595; --colors-medium-light: #959595;
--colors-light: #646464; --colors-light: #646464;
--colors-kindaLight: #535353; --colors-kinda-light: #535353;
--colors-superLight: #272727; --colors-super-light: #272727;
--colors-superDuperLight: #1f1f1f; --colors-super-duper-light: #1f1f1f;
--colors-link: #88c7ff; --colors-link: #88c7ff;
--colors-linkUnderline: rgb(136 199 255 / 40%); --colors-link-underline: rgb(136 199 255 / 40%);
--colors-success: #78df55; --colors-success: #78df55;
--colors-error: #ff5151; --colors-error: #ff5151;
--colors-warning: #f2b702; --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;
} }

46
app/zip/page.tsx
View File

@ -1,5 +1,4 @@
import Link from "../../components/Link"; import Link from "../../components/Link";
import CodeBlock from "../../components/CodeBlock/CodeBlock";
import { addMetadata } from "../../lib/helpers/metadata"; import { addMetadata } from "../../lib/helpers/metadata";
import backgroundImg from "./sundar.jpg"; import backgroundImg from "./sundar.jpg";
@ -16,54 +15,57 @@ const Page = () => {
return ( return (
<div <div
style={{ style={{
position: "relative",
width: "100%",
margin: "1em auto",
backgroundImage: `url(${backgroundImg.src})`, backgroundImage: `url(${backgroundImg.src})`,
backgroundRepeat: "repeat", backgroundRepeat: "repeat",
backgroundPosition: "center", backgroundPosition: "center",
borderRadius: "0.6em", borderRadius: "0.6em",
}} }}
> >
<CodeBlock <code
style={{ style={{
backgroundColor: "var(--colors-backgroundHeader)", backgroundColor: "var(--colors-background-header)",
backdropFilter: "saturate(180%) blur(5px))", 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: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>: <span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>mv</span> /root
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
<span style={{ color: "var(--colors-codeLiteral)" }}>mv</span> /root
<Link href="https://killedbygoogle.com/" style={{ color: "inherit" }} plain> <Link href="https://killedbygoogle.com/" style={{ color: "inherit" }} plain>
/stable_products_that_people_rely_on/ /stable_products_that_people_rely_on/
</Link> </Link>
googledomains.zip /tmp/ googledomains.zip /tmp/
<br /> <br />
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@ <span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>: <span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>crontab</span>{" "}
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "} <span style={{ color: "#fd992a" }}>-l</span>
<span style={{ color: "var(--colors-codeLiteral)" }}>crontab</span>{" "}
<span style={{ color: "var(--colors-codeVariable)" }}>-l</span>
<br /> <br />
<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 # 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 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 & 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> </span>
<br /> <br />
<span style={{ color: "var(--colors-codeAttribute)" }}>@monthly</span>&nbsp;&nbsp;&nbsp;&nbsp; <span style={{ color: "#78df55" }}>@monthly</span>&nbsp;&nbsp;&nbsp;&nbsp;
<span style={{ color: "var(--colors-codeLiteral)" }}>rm</span>{" "} <span style={{ color: "#d588fb" }}>rm</span> <span style={{ color: "#fd992a" }}>-f</span> /tmp/
<span style={{ color: "var(--colors-codeVariable )" }}>-f</span> /tmp/
<Link href="https://fuckyougoogle.zip/" style={{ color: "inherit" }} plain> <Link href="https://fuckyougoogle.zip/" style={{ color: "inherit" }} plain>
*.zip *.zip
</Link> </Link>
<br /> <br />
<br /> <br />
<span style={{ color: "var(--colors-codeNamespace)" }}>sundar</span>@ <span style={{ color: "#f95757" }}>sundar</span>@<span style={{ color: "#3b9dd2" }}>google</span>:
<span style={{ color: "var(--colors-codeKeyword)" }}>google</span>: <span style={{ color: "#78df55" }}>~</span>$ <span style={{ color: "#d588fb" }}>reboot</span> 0
<span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "} </code>
<span style={{ color: "var(--colors-codeLiteral)" }}>reboot</span> 0
</CodeBlock>
</div> </div>
); );
}; };

2
components/Blockquote/Blockquote.module.css
View File

@ -2,5 +2,5 @@
margin-left: 0; margin-left: 0;
padding-left: 1.25em; padding-left: 1.25em;
border-left: 0.25em solid var(--colors-link); border-left: 0.25em solid var(--colors-link);
color: var(--colors-mediumDark); color: var(--colors-medium-dark);
} }

85
components/Code/Code.module.css Normal file
View File

@ -0,0 +1,85 @@
figure:has(.highlighted) {
margin: 1em auto;
position: relative;
width: 100%;
background-color: var(--colors-background-header);
}
.highlighted {
display: block;
overflow-x: auto;
padding: 1em;
font-size: 0.9em;
tab-size: 2px;
border: 1px solid var(--colors-kinda-light);
border-radius: 0.6em;
}
.highlighted span {
color: var(--shiki-light);
font-style: var(--shiki-light-font-style);
font-weight: var(--shiki-light-font-weight);
text-decoration: var(--shiki-light-text-decoration);
}
[data-theme="dark"] .highlighted span {
color: var(--shiki-dark);
font-style: var(--shiki-dark-font-style);
font-weight: var(--shiki-dark-font-weight);
text-decoration: var(--shiki-dark-text-decoration);
}
.highlighted[data-line-numbers] {
counter-reset: line;
}
.highlighted[data-line-numbers] > [data-line]::before {
display: inline-block;
width: 1em;
margin-right: 1.5em;
text-align: right;
color: var(--colors-medium-light);
counter-increment: line;
content: counter(line);
user-select: none;
}
.highlighted[data-line-numbers-max-digits="2"] > [data-line]::before {
width: 1.25rem;
}
.highlighted[data-line-numbers-max-digits="3"] > [data-line]::before {
width: 1.75rem;
}
.inline {
padding: 0.2em 0.3em;
font-size: 0.925em;
page-break-inside: avoid;
background-color: var(--colors-background-outer);
border: 1px solid var(--colors-kinda-light);
border-radius: 0.6em;
}
.copyButton {
position: absolute;
top: 0;
right: 0;
height: 3em;
width: 3em;
color: var(--colors-medium-dark);
border: 1px solid var(--colors-kinda-light);
border-top-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
background-color: var(--colors-background-header);
backdrop-filter: saturate(180%) blur(5px);
}
.copyButton > svg {
vertical-align: middle;
}
.copyButton:hover,
.copyButton:focus-visible {
color: var(--colors-link);
}

43
components/Code/Code.tsx
View File

@ -1,38 +1,41 @@
import CodeBlock from "../CodeBlock"; import clsx from "clsx";
import CodeInline from "../CodeInline"; import CopyButton from "../CopyButton";
import type { ComponentPropsWithoutRef } from "react"; import type { ComponentPropsWithoutRef } from "react";
import styles from "./Code.module.css";
export type CodeProps = ComponentPropsWithoutRef<"code"> & { export type CodeProps = ComponentPropsWithoutRef<"code"> & {
forceBlock?: boolean; "data-language"?: string;
"data-theme"?: string;
}; };
// a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
// highlighting & a clipboard button) // highlighting & a clipboard button)
const Code = ({ forceBlock, className, children, ...rest }: CodeProps) => { const Code = ({
// detect if this input has already been touched by prism.js via rehype "data-language": dataLanguage,
const classNames = className?.split(" "); "data-theme": dataTheme, // eslint-disable-line @typescript-eslint/no-unused-vars
const prismEnabled = classNames?.includes("code-highlight"); className,
children,
if (prismEnabled || forceBlock) { ...rest
}: CodeProps) => {
// detect if this input has already been touched by shiki via rehype-pretty-code
if (dataLanguage) {
// full multi-line code blocks with copy-to-clipboard button // full multi-line code blocks with copy-to-clipboard button
// automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
return ( return (
<CodeBlock <>
highlight={prismEnabled && !classNames?.includes("language-plaintext")} <CopyButton className={styles.copyButton} source={children} />
withCopyButton <code className={clsx(styles.highlighted, className)} {...rest}>
className={className} {children}
{...rest} </code>
> </>
{children}
</CodeBlock>
); );
} }
// simple inline code in paragraphs, headings, etc. (never highlighted) // simple inline code in paragraphs, headings, etc. (never highlighted)
return ( return (
<CodeInline className={className} {...rest}> <code className={clsx(styles.inline, className)} {...rest}>
{children} {children}
</CodeInline> </code>
); );
}; };

122
components/CodeBlock/CodeBlock.module.css
View File

@ -1,122 +0,0 @@
.codeBlock {
position: relative;
width: 100%;
margin: 1em auto;
color: var(--colors-codeText);
}
.codeBlock .code {
display: block;
overflow-x: auto;
padding: 1em;
font-size: 0.9em;
tab-size: 2px;
background-color: var(--colors-codeBackground);
border: 1px solid var(--colors-kindaLight);
border-radius: 0.6em;
}
.codeBlock :global(.line-number)::before {
display: inline-block;
width: 1.5em;
margin-right: 1.5em;
text-align: right;
color: var(--colors-codeComment);
content: attr(line);
font-variant-numeric: tabular-nums;
user-select: none;
}
.codeBlock :global(.code-line):first-of-type {
margin-right: 3em;
}
.codeBlock.highlight :global(.token.comment),
.codeBlock.highlight :global(.token.prolog),
.codeBlock.highlight :global(.token.cdata) {
color: var(--colors-codeComment);
}
.codeBlock.highlight :global(.token.delimiter),
.codeBlock.highlight :global(.token.boolean),
.codeBlock.highlight :global(.token.keyword),
.codeBlock.highlight :global(.token.selector),
.codeBlock.highlight :global(.token.important),
.codeBlock.highlight :global(.token.doctype),
.codeBlock.highlight :global(.token.atrule),
.codeBlock.highlight :global(.token.url) {
color: var(--colors-codeKeyword);
}
.codeBlock.highlight :global(.token.tag),
.codeBlock.highlight :global(.token.builtin),
.codeBlock.highlight :global(.token.regex) {
color: var(--colors-codeNamespace);
}
.codeBlock.highlight :global(.token.property),
.codeBlock.highlight :global(.token.constant),
.codeBlock.highlight :global(.token.variable),
.codeBlock.highlight :global(.token.attr-value),
.codeBlock.highlight :global(.token.class-name),
.codeBlock.highlight :global(.token.string),
.codeBlock.highlight :global(.token.char) {
color: var(--colors-codeVariable);
}
.codeBlock.highlight :global(.token.literal-property),
.codeBlock.highlight :global(.token.attr-name) {
color: var(--colors-codeAttribute);
}
.codeBlock.highlight :global(.token.function) {
color: var(--colors-codeLiteral);
}
.codeBlock.highlight :global(.token.tag .punctuation),
.codeBlock.highlight :global(.token.attr-value .punctuation) {
color: var(--colors-codePunctuation);
}
.codeBlock.highlight :global(.token.inserted) {
color: var(--colors-codeAddition);
}
.codeBlock.highlight :global(.token.deleted) {
color: var(--colors-codeDeletion);
}
.codeBlock.highlight :global(.token.url) {
text-decoration: underline;
}
.codeBlock.highlight :global(.token.bold) {
font-weight: bold;
}
.codeBlock.highlight :global(.token.italic) {
font-style: italic;
}
.cornerCopyButton {
position: absolute;
top: 0;
right: 0;
height: 3em;
width: 3em;
color: var(--colors-mediumDark);
border: 1px solid var(--colors-kindaLight);
border-top-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
background-color: var(--colors-backgroundHeader);
backdrop-filter: saturate(180%) blur(5px);
}
.cornerCopyButton > svg {
vertical-align: middle;
}
.cornerCopyButton:hover,
.cornerCopyButton:focus-visible {
color: var(--colors-link);
}

23
components/CodeBlock/CodeBlock.tsx
View File

@ -1,23 +0,0 @@
import clsx from "clsx";
import CopyButton from "../CopyButton";
import type { ComponentPropsWithoutRef } from "react";
import styles from "./CodeBlock.module.css";
export type CodeBlockProps = ComponentPropsWithoutRef<"div"> & {
highlight?: boolean;
withCopyButton?: boolean;
};
const CodeBlock = ({ highlight, withCopyButton, className, children, ...rest }: CodeBlockProps) => {
return (
<div className={clsx(styles.codeBlock, highlight && styles.highlight)}>
{withCopyButton && <CopyButton className={styles.cornerCopyButton} source={children} />}
<code className={clsx(styles.code, className)} {...rest}>
{children}
</code>
</div>
);
};
export default CodeBlock;

2
components/CodeBlock/index.ts
View File

@ -1,2 +0,0 @@
export * from "./CodeBlock";
export { default } from "./CodeBlock";

8
components/CodeInline/CodeInline.module.css
View File

@ -1,8 +0,0 @@
.codeInline {
padding: 0.175em 0.3em;
font-size: 0.925em;
page-break-inside: avoid;
background-color: var(--colors-codeBackground);
border: 1px solid var(--colors-kindaLight);
border-radius: 0.6em;
}

12
components/CodeInline/CodeInline.tsx
View File

@ -1,12 +0,0 @@
import clsx from "clsx";
import type { ComponentPropsWithoutRef } from "react";
import styles from "./CodeInline.module.css";
export type CodeInlineProps = ComponentPropsWithoutRef<"code">;
const CodeInline = ({ className, ...rest }: CodeInlineProps) => (
<code className={clsx(styles.codeInline, className)} {...rest} />
);
export default CodeInline;

2
components/CodeInline/index.ts
View File

@ -1,2 +0,0 @@
export * from "./CodeInline";
export { default } from "./CodeInline";

10
components/Footer/Footer.module.css
View File

@ -2,9 +2,9 @@
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: 1.25em 1.5em; padding: 1.25em 1.5em;
border-top: 1px solid var(--colors-kindaLight); border-top: 1px solid var(--colors-kinda-light);
background-color: var(--colors-backgroundOuter); background-color: var(--colors-background-outer);
color: var(--colors-mediumDark); color: var(--colors-medium-dark);
} }
.row { .row {
@ -17,7 +17,7 @@
} }
.link { .link {
color: var(--colors-mediumDark) !important; color: var(--colors-medium-dark) !important;
} }
.link:has(.icon):hover, .link:has(.icon):hover,
@ -32,7 +32,7 @@
.link.underline:hover, .link.underline:hover,
.link.underline:focus-visible { .link.underline:focus-visible {
border-bottom-color: var(--colors-kindaLight); border-bottom-color: var(--colors-kinda-light);
} }
.icon { .icon {

8
components/Header/Header.module.css
View File

@ -2,8 +2,8 @@
width: 100%; width: 100%;
height: 4.5em; height: 4.5em;
padding: 0.7em 1.5em; padding: 0.7em 1.5em;
border-bottom: 1px solid var(--colors-kindaLight); border-bottom: 1px solid var(--colors-kinda-light);
background-color: var(--colors-backgroundHeader); background-color: var(--colors-background-header);
/* make sticky */ /* make sticky */
position: sticky; position: sticky;
@ -25,7 +25,7 @@
display: inline-flex; display: inline-flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
color: var(--colors-mediumDark) !important; color: var(--colors-medium-dark) !important;
} }
.homeLink:hover, .homeLink:hover,
@ -63,7 +63,7 @@
.homeLink:hover .homeImage, .homeLink:hover .homeImage,
.homeLink:focus-visible .homeImage { .homeLink:focus-visible .homeImage {
border-color: var(--colors-linkUnderline); border-color: var(--colors-link-underline);
} }
.name { .name {

2
components/Heading/Heading.module.css
View File

@ -10,7 +10,7 @@
.h.divider { .h.divider {
padding-bottom: 0.25em; padding-bottom: 0.25em;
border-bottom: 1px solid var(--colors-kindaLight); border-bottom: 1px solid var(--colors-kinda-light);
} }
.anchor { .anchor {

2
components/Link/Link.module.css
View File

@ -3,7 +3,7 @@
text-decoration: none; text-decoration: none;
/* fancy underline */ /* fancy underline */
background-image: linear-gradient(var(--colors-linkUnderline), var(--colors-linkUnderline)); background-image: linear-gradient(var(--colors-link-underline), var(--colors-link-underline));
background-position: 0% 100%; background-position: 0% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0% 2px; background-size: 0% 2px;

2
components/Loading/Loading.module.css
View File

@ -7,7 +7,7 @@
display: inline-block; display: inline-block;
height: 100%; height: 100%;
animation: loading 1.5s infinite ease-in-out both; animation: loading 1.5s infinite ease-in-out both;
background-color: var(--colors-mediumLight); background-color: var(--colors-medium-light);
} }
@keyframes loading { @keyframes loading {

6
components/MenuItem/MenuItem.module.css
View File

@ -1,19 +1,19 @@
.link { .link {
display: inline-block; display: inline-block;
color: var(--colors-mediumDark) !important; color: var(--colors-medium-dark) !important;
padding: 0.6em; padding: 0.6em;
} }
/* indicate active page/section */ /* indicate active page/section */
.link.current { .link.current {
margin-bottom: -0.2em; margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--colors-linkUnderline); border-bottom: 0.2em solid var(--colors-link-underline);
} }
.link:not(.current):hover, .link:not(.current):hover,
.link:not(.current):focus-visible { .link:not(.current):focus-visible {
margin-bottom: -0.2em; margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--colors-kindaLight); border-bottom: 0.2em solid var(--colors-kinda-light);
} }
.icon { .icon {

2
components/PageTitle/PageTitle.module.css
View File

@ -9,6 +9,6 @@
.slug::before { .slug::before {
content: "\002E\002F"; /* "./" */ content: "\002E\002F"; /* "./" */
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--colors-mediumLight); color: var(--colors-medium-light);
margin-right: -0.1em; margin-right: -0.1em;
} }

4
components/SkipToContent/SkipToContent.module.css
View File

@ -21,8 +21,8 @@ https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css */
width: auto; width: auto;
height: auto; height: auto;
clip: auto; clip: auto;
background: var(--colors-superDuperLight); background: var(--colors-super-duper-light);
color: var(--colors-link); color: var(--colors-link);
border: 2px solid var(--colors-kindaLight); border: 2px solid var(--colors-kinda-light);
text-decoration: underline; text-decoration: underline;
} }

2
components/ThemeToggle/ThemeToggle.module.css
View File

@ -4,7 +4,7 @@
margin-right: -0.6em; margin-right: -0.6em;
background: none; background: none;
cursor: pointer; cursor: pointer;
color: var(--colors-mediumDark); color: var(--colors-medium-dark);
} }
.toggle:hover, .toggle:hover,

2
lib/helpers/remark-rehype-plugins.ts
View File

@ -1,5 +1,5 @@
export { default as rehypeMdxImportMedia } from "rehype-mdx-import-media"; export { default as rehypeMdxImportMedia } from "rehype-mdx-import-media";
export { default as rehypePrism } from "rehype-prism-plus"; export { default as rehypePrettyCode } from "rehype-pretty-code";
export { default as rehypeSanitize } from "rehype-sanitize"; export { default as rehypeSanitize } from "rehype-sanitize";
export { default as rehypeSlug } from "rehype-slug"; export { default as rehypeSlug } from "rehype-slug";
export { default as rehypeStringify } from "rehype-stringify"; export { default as rehypeStringify } from "rehype-stringify";

14
next.config.ts
View File

@ -143,7 +143,19 @@ const withMDX = createMDX({
rehypePlugins: [ rehypePlugins: [
mdxPlugins.rehypeUnwrapImages, mdxPlugins.rehypeUnwrapImages,
mdxPlugins.rehypeSlug, mdxPlugins.rehypeSlug,
[mdxPlugins.rehypePrism, { ignoreMissing: true }], [
mdxPlugins.rehypePrettyCode,
{
theme: {
light: "material-theme-lighter",
dark: "material-theme-darker",
},
bypassInlineCode: true,
defaultLang: "plaintext",
grid: false,
keepBackground: false,
},
],
mdxPlugins.rehypeMdxImportMedia, mdxPlugins.rehypeMdxImportMedia,
], ],
}, },

13
package.json
View File

@ -22,9 +22,9 @@
"@giscus/react": "^3.1.0", "@giscus/react": "^3.1.0",
"@mdx-js/loader": "^3.1.0", "@mdx-js/loader": "^3.1.0",
"@mdx-js/react": "^3.1.0", "@mdx-js/react": "^3.1.0",
"@next/bundle-analyzer": "15.3.0-canary.9", "@next/bundle-analyzer": "15.3.0-canary.10",
"@next/mdx": "15.3.0-canary.9", "@next/mdx": "15.3.0-canary.10",
"@next/third-parties": "15.3.0-canary.9", "@next/third-parties": "15.3.0-canary.10",
"@octokit/graphql": "^8.2.1", "@octokit/graphql": "^8.2.1",
"@octokit/graphql-schema": "^15.26.0", "@octokit/graphql-schema": "^15.26.0",
"@prisma/client": "^6.5.0", "@prisma/client": "^6.5.0",
@ -38,7 +38,7 @@
"html-entities": "^2.5.2", "html-entities": "^2.5.2",
"lucide-react": "0.482.0", "lucide-react": "0.482.0",
"modern-normalize": "^3.0.1", "modern-normalize": "^3.0.1",
"next": "15.3.0-canary.9", "next": "15.3.0-canary.10",
"obj-str": "^1.1.0", "obj-str": "^1.1.0",
"p-map": "^7.0.3", "p-map": "^7.0.3",
"p-memoize": "^7.1.1", "p-memoize": "^7.1.1",
@ -53,7 +53,7 @@
"react-turnstile": "^1.1.4", "react-turnstile": "^1.1.4",
"react-tweet": "^3.2.2", "react-tweet": "^3.2.2",
"rehype-mdx-import-media": "^1.2.0", "rehype-mdx-import-media": "^1.2.0",
"rehype-prism-plus": "^2.0.0", "rehype-pretty-code": "^0.14.1",
"rehype-sanitize": "^6.0.0", "rehype-sanitize": "^6.0.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"rehype-stringify": "^10.0.1", "rehype-stringify": "^10.0.1",
@ -63,6 +63,7 @@
"remark-rehype": "^11.1.1", "remark-rehype": "^11.1.1",
"remark-smartypants": "^3.0.2", "remark-smartypants": "^3.0.2",
"resend": "^4.1.2", "resend": "^4.1.2",
"shiki": "^3.2.1",
"unified": "^11.0.5", "unified": "^11.0.5",
"zod": "^3.24.2" "zod": "^3.24.2"
}, },
@ -79,7 +80,7 @@
"@types/react-is": "^19.0.0", "@types/react-is": "^19.0.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^9.22.0", "eslint": "^9.22.0",
"eslint-config-next": "15.3.0-canary.9", "eslint-config-next": "15.3.0-canary.10",
"eslint-config-prettier": "^10.1.1", "eslint-config-prettier": "^10.1.1",
"eslint-plugin-css-modules": "^2.12.0", "eslint-plugin-css-modules": "^2.12.0",
"eslint-plugin-import": "^2.31.0", "eslint-plugin-import": "^2.31.0",

560
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff