jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-19 11:55:30 -04:00
Code Issues Activity

some more arguably unnecessary refactoring

Browse Source
This commit is contained in:
Jake Jarvis
2025-05-05 22:24:25 -04:00
parent 27e6ca2a4b
commit 62e95e3cfe
50 changed files with 669 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/code-block.tsx
+15 -16
View File
@@ -1,14 +1,15 @@
import { codeToHtml } from "shiki";
import reactToText from "react-to-text";
import CopyButton from "@/components/copy-button";
import { cn } from "@/lib/utils";
import type { JSX } from "react";
import type { ComponentProps, ComponentPropsWithoutRef } from "react";
const CodeBlock = async ({
lineNumbers,
lineNumbers = false,
className,
children,
...rest
}: JSX.IntrinsicElements["pre"] & {
}: ComponentPropsWithoutRef<"pre"> & {
lineNumbers?: boolean;
}) => {
// escape hatch if this code wasn't meant to be highlighted
@@ -20,11 +21,13 @@ const CodeBlock = async ({
);
}
const codeProps = children.props as JSX.IntrinsicElements["code"];
const codeRaw = String(codeProps.children).trim();
const codeProps = children.props as ComponentProps<"code">;
const codeString = reactToText(codeProps.children).trim();
// the language set in the markdown is passed as a className
const lang = codeProps.className?.split("language-")[1] ?? "";
const codeHighlighted = await codeToHtml(codeRaw.trim(), {
const codeHighlighted = await codeToHtml(codeString, {
lang,
themes: {
light: "material-theme-lighter",
@@ -33,24 +36,20 @@ const CodeBlock = async ({
});
return (
<div
className={cn(
"bg-muted/35 border-border relative my-4 w-full rounded-lg border-2 font-mono [font-variant-ligatures:none]",
className
)}
>
<div className={cn("bg-muted/35 relative rounded-lg border-2 font-mono", className)}>
<div
className={cn(
"grid w-full overflow-x-auto p-4 text-sm leading-none [counter-reset:line] dark:**:text-[var(--shiki-dark)]! [&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:whitespace-pre [&_.line]:after:hidden [&>pre]:bg-transparent! [&>pre]:whitespace-normal",
"grid max-h-[500px] w-full overflow-x-auto p-4 **:bg-transparent! md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
"[&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:leading-none [&_.line]:whitespace-pre [&_.line]:after:hidden",
lineNumbers &&
"[&_.line]:before:text-muted-foreground [&_.line]:before:mr-4 [&_.line]:before:inline-block [&_.line]:before:w-5 [&_.line]:before:text-right [&_.line]:before:content-[counter(line)] [&_.line]:before:[counter-increment:line]"
"[&_.line]:before:text-muted-foreground [counter-reset:line] [&_.line]:before:mr-5 [&_.line]:before:inline-block [&_.line]:before:w-5 [&_.line]:before:text-right [&_.line]:before:content-[counter(line)] [&_.line]:before:[counter-increment:line]"
)}
data-language={lang}
dangerouslySetInnerHTML={{ __html: codeHighlighted }}
/>
<CopyButton
source={codeRaw}
className="border-border text-foreground/85 hover:text-primary bg-muted/10 absolute top-0 right-0 size-[40px] rounded-tr-lg rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs [&>svg]:my-auto [&>svg]:inline-block [&>svg]:size-[18px] [&>svg]:align-middle"
source={codeString}
className="text-foreground/85 hover:text-primary bg-muted/10 absolute top-0 right-0 size-10 rounded-tr-lg rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs *:[svg]:my-auto *:[svg]:inline-block *:[svg]:size-4.5 *:[svg]:align-text-bottom"
/>
</div>
);