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

correct some flex/grid spacings

Browse Source
This commit is contained in:
Jake Jarvis
2025-05-08 10:07:40 -04:00
parent d98c3bb775
commit eab84bfee9
19 changed files with 84 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/code-block.tsx
+16 -33
View File
@@ -1,6 +1,6 @@
import { codeToHtml } from "shiki";
import reactToText from "react-to-text";
import { CodeIcon } from "lucide-react";
import { CodeIcon, TerminalIcon } from "lucide-react";
import CopyButton from "@/components/copy-button";
import { cn } from "@/lib/utils";
import type { ComponentProps, ComponentPropsWithoutRef } from "react";
@@ -38,37 +38,11 @@ const CodeBlock = async ({
},
});
const getFullLang = (lang: string) => {
// replace the file extension with the full language name when it makes sense to
switch (lang.toLowerCase()) {
case "js":
return "JavaScript";
case "jsx":
return "JavaScript (JSX)";
case "ts":
return "TypeScript";
case "tsx":
return "TypeScript (JSX)";
case "sh":
case "bash":
case "zsh":
return "Shell";
case "py":
return "Python";
case "md":
return "Markdown";
case "mdx":
return "Markdown (MDX)";
default:
return lang;
}
};
return (
<div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono", className)}>
<div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
<div
className={cn(
"grid max-h-[500px] w-full overflow-x-auto p-4 **:bg-transparent! data-language:pt-9 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
"grid max-h-[500px] w-full overflow-x-auto overscroll-x-none p-4 **:bg-transparent! data-language:pt-10 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",
"data-line-numbers:[&_.line]:before:text-muted-foreground data-line-numbers:[counter-reset:line] data-line-numbers:[&_.line]:[counter-increment:line] data-line-numbers:[&_.line]:before:mr-5 data-line-numbers:[&_.line]:before:inline-block data-line-numbers:[&_.line]:before:w-5 data-line-numbers:[&_.line]:before:text-right data-line-numbers:[&_.line]:before:content-[counter(line)]"
)}
@@ -77,15 +51,24 @@ const CodeBlock = async ({
dangerouslySetInnerHTML={{ __html: codeHighlighted }}
/>
{lang && (
<span className="text-foreground/75 bg-muted/40 absolute top-0 left-0 flex items-center rounded-tl-md rounded-br-lg border-r-2 border-b-2 py-[5px] pr-[10px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-xs select-none">
<CodeIcon className="stroke-primary/90 mr-[8px] ml-[10px] inline-block size-[14px]" />
<span>{getFullLang(lang)}</span>
<span className="[&_svg]:stroke-primary/90 text-foreground/75 bg-muted/40 absolute top-0 left-0 z-10 flex items-center gap-[8px] rounded-tl-md rounded-br-lg border-r-2 border-b-2 px-[10px] py-[5px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-xs select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
{["sh", "bash", "zsh"].includes(lang) ? (
<>
<TerminalIcon />
<span>Shell</span>
</>
) : (
<>
<CodeIcon />
<span>{lang}</span>
</>
)}
</span>
)}
{showCopyButton && (
<CopyButton
source={codeString}
className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 z-10 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
/>
)}
</div>