mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-11-26 07:46:06 -05:00
CSS modules ➡️ Stitches 🧵 (#799)
This commit is contained in:
GitHub
@@ -1,133 +0,0 @@
|
||||
/* all code */
|
||||
.code {
|
||||
font-size: 0.925em;
|
||||
color: var(--code-text);
|
||||
page-break-inside: avoid;
|
||||
background-color: var(--code-background);
|
||||
border: 1px solid var(--kinda-light);
|
||||
border-radius: var(--rounded-edge-radius);
|
||||
|
||||
/* light-dark theme switch fading */
|
||||
transition: background 0.25s ease, border 0.25s ease;
|
||||
}
|
||||
|
||||
/* inline code in paragraphs/elsewhere (single backticks) */
|
||||
.inline {
|
||||
padding: 0.2em 0.3em;
|
||||
}
|
||||
|
||||
/* full-blown code blocks, with copy/paste button and (usually) line numbers */
|
||||
.block {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.block .code {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.copy_btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.65em;
|
||||
color: var(--medium-dark);
|
||||
background-color: var(--background-inner);
|
||||
border: 1px solid var(--kinda-light);
|
||||
border-top-right-radius: var(--rounded-edge-radius);
|
||||
border-end-start-radius: var(--rounded-edge-radius);
|
||||
|
||||
/* light-dark theme switch fading */
|
||||
transition: background 0.25s ease, border 0.25s ease;
|
||||
}
|
||||
|
||||
.copy_btn:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
/* the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file */
|
||||
|
||||
/* leave room for clipboard button to the right of the first line */
|
||||
.highlight > :global(.code-line:first-of-type) {
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
.highlight > :global(.line-number::before) {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
text-align: right;
|
||||
color: var(--code-comment);
|
||||
content: attr(line); /* added to spans by prism */
|
||||
}
|
||||
|
||||
.highlight :global(.token.comment),
|
||||
.highlight :global(.token.prolog),
|
||||
.highlight :global(.token.cdata) {
|
||||
color: var(--code-comment);
|
||||
}
|
||||
|
||||
.highlight :global(.token.delimiter),
|
||||
.highlight :global(.token.boolean),
|
||||
.highlight :global(.token.keyword),
|
||||
.highlight :global(.token.selector),
|
||||
.highlight :global(.token.important),
|
||||
.highlight :global(.token.doctype),
|
||||
.highlight :global(.token.atrule),
|
||||
.highlight :global(.token.url) {
|
||||
color: var(--code-keyword);
|
||||
}
|
||||
|
||||
.highlight :global(.token.tag),
|
||||
.highlight :global(.token.builtin),
|
||||
.highlight :global(.token.regex) {
|
||||
color: var(--code-namespace);
|
||||
}
|
||||
|
||||
.highlight :global(.token.property),
|
||||
.highlight :global(.token.constant),
|
||||
.highlight :global(.token.variable),
|
||||
.highlight :global(.token.attr-value),
|
||||
.highlight :global(.token.class-name),
|
||||
.highlight :global(.token.string),
|
||||
.highlight :global(.token.char) {
|
||||
color: var(--code-variable);
|
||||
}
|
||||
|
||||
.highlight :global(.token.literal-property),
|
||||
.highlight :global(.token.attr-name) {
|
||||
color: var(--code-attribute);
|
||||
}
|
||||
|
||||
.highlight :global(.token.function) {
|
||||
color: var(--code-literal);
|
||||
}
|
||||
|
||||
.highlight :global(.token.tag .punctuation),
|
||||
.highlight :global(.token.attr-value .punctuation) {
|
||||
color: var(--code-punctuation);
|
||||
}
|
||||
|
||||
.highlight :global(.token.inserted) {
|
||||
background-color: var(--code-addition);
|
||||
}
|
||||
|
||||
.highlight :global(.token.deleted) {
|
||||
background-color: var(--code-deletion);
|
||||
}
|
||||
|
||||
.highlight :global(.token.url) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.highlight :global(.token.bold) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight :global(.token.italic) {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -1,9 +1,109 @@
|
||||
import classNames from "classnames";
|
||||
import CopyButton from "../CopyButton/CopyButton";
|
||||
import { styled } from "../../lib/styles/stitches.config";
|
||||
import type { ComponentProps } from "react";
|
||||
|
||||
import styles from "./CodeBlock.module.css";
|
||||
const Code = styled("code", {
|
||||
fontSize: "0.925em",
|
||||
color: "$codeText",
|
||||
pageBreakInside: "avoid",
|
||||
backgroundColor: "$codeBackground",
|
||||
border: "1px solid $kindaLight",
|
||||
borderRadius: "$rounded",
|
||||
|
||||
export type CodeBlockProps = JSX.IntrinsicElements["code"] & {
|
||||
// light-dark theme switch fading
|
||||
transition: "background 0.25s ease, border 0.25s ease",
|
||||
|
||||
variants: {
|
||||
highlight: {
|
||||
// the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
|
||||
true: {
|
||||
// leave room for clipboard button to the right of the first line
|
||||
".code-line:first-of-type": {
|
||||
marginRight: "3em",
|
||||
},
|
||||
".line-number::before": {
|
||||
display: "inline-block",
|
||||
width: "1.5em",
|
||||
marginRight: "1.5em",
|
||||
textAlign: "right",
|
||||
color: "$codeComment",
|
||||
content: "attr(line)", // added to spans by prism
|
||||
userSelect: "none",
|
||||
},
|
||||
".token": {
|
||||
"&.comment, &.prolog, &.cdata": {
|
||||
color: "$codeComment",
|
||||
},
|
||||
"&.delimiter, &.boolean, &.keyword, &.selector, &.important, &.doctype, &.atrule, &.url": {
|
||||
color: "$codeKeyword",
|
||||
},
|
||||
"&.tag, &.builtin, &.regex": {
|
||||
color: "$codeNamespace",
|
||||
},
|
||||
"&.property, &.constant, &.variable, &.attr-value, &.class-name, &.string, &.char": {
|
||||
color: "$codeVariable",
|
||||
},
|
||||
"&.literal-property, &.attr-name": {
|
||||
color: "$codeAttribute",
|
||||
},
|
||||
"&.function": {
|
||||
color: "$codeLiteral",
|
||||
},
|
||||
"&.tag .punctuation, &.attr-value .punctuation": {
|
||||
color: "$codePunctuation",
|
||||
},
|
||||
"&.inserted": {
|
||||
color: "$codeAddition",
|
||||
},
|
||||
"&.deleted": {
|
||||
color: "$codeDeletion",
|
||||
},
|
||||
"&.url": { textDecoration: "underline" },
|
||||
"&.bold": { fontWeight: "bold" },
|
||||
"&.italic": { fontStyle: "italic" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const InlineCode = styled(Code, {
|
||||
padding: "0.2em 0.3em",
|
||||
});
|
||||
|
||||
const Block = styled("div", {
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
margin: "1em auto",
|
||||
|
||||
[`& ${Code}`]: {
|
||||
display: "block",
|
||||
overflowX: "auto",
|
||||
padding: "1em",
|
||||
tabSize: 2,
|
||||
},
|
||||
});
|
||||
|
||||
const CornerCopyButton = styled(CopyButton, {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
padding: "0.65em",
|
||||
color: "$mediumDark",
|
||||
backgroundColor: "$backgroundInner",
|
||||
border: "1px solid $kindaLight",
|
||||
borderTopRightRadius: "$radii$rounded",
|
||||
borderEndStartRadius: "$radii$rounded",
|
||||
|
||||
// light-dark theme switch fading
|
||||
transition: "background 0.25s ease, border 0.25s ease",
|
||||
|
||||
"&:hover": {
|
||||
color: "$link",
|
||||
},
|
||||
});
|
||||
|
||||
export type CodeBlockProps = ComponentProps<typeof Code> & {
|
||||
forceBlock?: boolean;
|
||||
};
|
||||
|
||||
@@ -15,26 +115,19 @@ const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps)
|
||||
// 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 (
|
||||
<div className={styles.block}>
|
||||
<CopyButton source={children} className={styles.copy_btn} />
|
||||
<code
|
||||
className={classNames(
|
||||
styles.code,
|
||||
prismEnabled && styles.highlight,
|
||||
className?.replace("code-highlight", "").trim()
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
<Block>
|
||||
<CornerCopyButton source={children} />
|
||||
<Code highlight={prismEnabled} className={className?.replace("code-highlight", "").trim()} {...rest}>
|
||||
{children}
|
||||
</code>
|
||||
</div>
|
||||
</Code>
|
||||
</Block>
|
||||
);
|
||||
} else {
|
||||
// inline code in paragraphs, headings, etc. (not highlighted)
|
||||
return (
|
||||
<code className={classNames(styles.code, styles.inline, className)} {...rest}>
|
||||
<InlineCode className={className} {...rest}>
|
||||
{children}
|
||||
</code>
|
||||
</InlineCode>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user