jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 01:45:25 -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-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);
}

2
app/global.css
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,

2
app/hillary/page.tsx
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{" "}

2
app/leo/page.tsx
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{" "}

4
app/page.tsx
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>

2
app/previously/page.module.css
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,

7
app/previously/page.tsx
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>

4
app/projects/page.module.css
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 {

58
app/themes.css
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;
}

46
app/zip/page.tsx
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>
);
};

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

@ -2,5 +2,5 @@
margin-left: 0;
padding-left: 1.25em;
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 CodeInline from "../CodeInline";
import clsx from "clsx";
import CopyButton from "../CopyButton";
import type { ComponentPropsWithoutRef } from "react";
import styles from "./Code.module.css";
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
// highlighting & a clipboard button)
const Code = ({ forceBlock, className, children, ...rest }: CodeProps) => {
// detect if this input has already been touched by prism.js via rehype
const classNames = className?.split(" ");
const prismEnabled = classNames?.includes("code-highlight");
if (prismEnabled || forceBlock) {
const Code = ({
"data-language": dataLanguage,
"data-theme": dataTheme, // eslint-disable-line @typescript-eslint/no-unused-vars
className,
children,
...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
// automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
return (
<CodeBlock
highlight={prismEnabled && !classNames?.includes("language-plaintext")}
withCopyButton
className={className}
{...rest}
>
{children}
</CodeBlock>
<>
<CopyButton className={styles.copyButton} source={children} />
<code className={clsx(styles.highlighted, className)} {...rest}>
{children}
</code>
</>
);
}
// simple inline code in paragraphs, headings, etc. (never highlighted)
return (
<CodeInline className={className} {...rest}>
<code className={clsx(styles.inline, className)} {...rest}>
{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;
width: 100%;
padding: 1.25em 1.5em;
border-top: 1px solid var(--colors-kindaLight);
background-color: var(--colors-backgroundOuter);
color: var(--colors-mediumDark);
border-top: 1px solid var(--colors-kinda-light);
background-color: var(--colors-background-outer);
color: var(--colors-medium-dark);
}
.row {
@ -17,7 +17,7 @@
}
.link {
color: var(--colors-mediumDark) !important;
color: var(--colors-medium-dark) !important;
}
.link:has(.icon):hover,
@ -32,7 +32,7 @@
.link.underline:hover,
.link.underline:focus-visible {
border-bottom-color: var(--colors-kindaLight);
border-bottom-color: var(--colors-kinda-light);
}
.icon {

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

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

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

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

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

@ -3,7 +3,7 @@
text-decoration: none;
/* 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-repeat: no-repeat;
background-size: 0% 2px;

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

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

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

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

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

@ -9,6 +9,6 @@
.slug::before {
content: "\002E\002F"; /* "./" */
letter-spacing: 0.1em;
color: var(--colors-mediumLight);
color: var(--colors-medium-light);
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;
height: auto;
clip: auto;
background: var(--colors-superDuperLight);
background: var(--colors-super-duper-light);
color: var(--colors-link);
border: 2px solid var(--colors-kindaLight);
border: 2px solid var(--colors-kinda-light);
text-decoration: underline;
}

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

@ -4,7 +4,7 @@
margin-right: -0.6em;
background: none;
cursor: pointer;
color: var(--colors-mediumDark);
color: var(--colors-medium-dark);
}
.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 rehypePrism } from "rehype-prism-plus";
export { default as rehypePrettyCode } from "rehype-pretty-code";
export { default as rehypeSanitize } from "rehype-sanitize";
export { default as rehypeSlug } from "rehype-slug";
export { default as rehypeStringify } from "rehype-stringify";

14
next.config.ts
View File

@ -143,7 +143,19 @@ const withMDX = createMDX({
rehypePlugins: [
mdxPlugins.rehypeUnwrapImages,
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,
],
},

13
package.json
View File

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

560
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff