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

extract syntax highlighting styles into a CSS module

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-13 09:04:02 -05:00
parent b51e8a38ce
commit 1a0541776e
10 changed files with 190 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Content.module.css
View File

@ -61,7 +61,7 @@
text-align: center;
}
.content figure > :global(.image_wrapper) {
.content figure :global(.image_wrapper) {
margin-bottom: 0;
}

66
components/home/ColorLink.tsx Normal file
View File

@ -0,0 +1,66 @@
import { memo } from "react";
import Link from "next/link";
import css from "styled-jsx/css";
import isAbsoluteUrl from "is-absolute-url";
import type { ReactNode } from "react";
type ColorLinkProps = {
children: ReactNode;
href: string;
lightColor: string;
darkColor: string;
title?: string;
external?: boolean;
};
const getFancyLinkStyles = ({ lightColor, darkColor }: Partial<ColorLinkProps>) => {
// spits out a linear-gradient (that's not realy a gradient) with translucent color in rgba() format
const linearGradient = (hex: string, alpha = 0.4) => {
// hex -> rgb, adapted from https://github.com/sindresorhus/hex-rgb/blob/main/index.js
hex = hex.replace(/^#/, "");
const number = Number.parseInt(hex, 16);
const red = number >> 16;
const green = (number >> 8) & 255;
const blue = number & 255;
const rgbaString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
return `linear-gradient(${rgbaString}, ${rgbaString})`;
};
return css.resolve`
a {
color: ${lightColor};
background-image: ${linearGradient(lightColor)};
}
:global([data-theme="dark"]) a {
color: ${darkColor};
background-image: ${linearGradient(darkColor)};
}
`;
};
const ColorLink = ({ href, title, lightColor, darkColor, external = false, children }: ColorLinkProps) => {
external = external || isAbsoluteUrl(href);
const { className, styles } = getFancyLinkStyles({ lightColor, darkColor });
return (
<>
<Link href={href} passHref={true} prefetch={false}>
<a
className={className}
title={title}
target={external ? "_blank" : undefined}
rel={external ? "noopener noreferrer" : undefined}
>
{children}
</a>
</Link>
{styles}
</>
);
};
export default memo(ColorLink);

5
components/loading/Loading.tsx
View File

@ -38,10 +38,9 @@ const Loading = ({ width, boxes = 3, timing = 0.1 }: Props) => {
// width of each box correlates with number of boxes (with a little padding)
// each individual box's animation has a staggered start in corresponding order
divs.push(
<>
<div key={i} className={boxClassName} style={{ animationDelay: `${i * timing}s` }} />
<div key={i} className={boxClassName} style={{ animationDelay: `${i * timing}s` }}>
{boxStyles}
</>
</div>
);
}

98
components/media/Code.module.css Normal file
View File

@ -0,0 +1,98 @@
.code_block {
position: relative;
width: 100%;
overflow-x: scroll;
margin: 1em auto;
}
/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
.code_block :global(.code-highlight) {
display: block;
overflow-x: auto;
padding: 1em;
tab-size: 2;
color: var(--code-text);
background-color: var(--code-background);
}
/* leave room for clipboard button to the right of the first line */
.code_block :global(.code-highlight) > :global(.code-line:first-of-type) {
margin-right: 3em;
}
.code_block :global(.code-highlight) > :global(.code-line.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 */
}
.code_block :global(.code-highlight) :global(.token.comment),
.code_block :global(.code-highlight) :global(.token.prolog),
.code_block :global(.code-highlight) :global(.token.cdata) {
color: var(--code-comment);
}
.code_block :global(.code-highlight) :global(.token.delimiter),
.code_block :global(.code-highlight) :global(.token.boolean),
.code_block :global(.code-highlight) :global(.token.keyword),
.code_block :global(.code-highlight) :global(.token.selector),
.code_block :global(.code-highlight) :global(.token.important),
.code_block :global(.code-highlight) :global(.token.doctype),
.code_block :global(.code-highlight) :global(.token.atrule),
.code_block :global(.code-highlight) :global(.token.url) {
color: var(--code-keyword);
}
.code_block :global(.code-highlight) :global(.token.tag),
.code_block :global(.code-highlight) :global(.token.builtin),
.code_block :global(.code-highlight) :global(.token.regex) {
color: var(--code-namespace);
}
.code_block :global(.code-highlight) :global(.token.property),
.code_block :global(.code-highlight) :global(.token.constant),
.code_block :global(.code-highlight) :global(.token.variable),
.code_block :global(.code-highlight) :global(.token.attr-value),
.code_block :global(.code-highlight) :global(.token.class-name),
.code_block :global(.code-highlight) :global(.token.string),
.code_block :global(.code-highlight) :global(.token.char) {
color: var(--code-variable);
}
.code_block :global(.code-highlight) :global(.token.literal-property),
.code_block :global(.code-highlight) :global(.token.attr-name) {
color: var(--code-attribute);
}
.code_block :global(.code-highlight) :global(.token.function) {
color: var(--code-literal);
}
.code_block :global(.code-highlight) :global(.token.tag .punctuation),
.code_block :global(.code-highlight) :global(.token.attr-value .punctuation) {
color: var(--code-punctuation);
}
.code_block :global(.code-highlight) :global(.token.inserted) {
background-color: var(--code-addition);
}
.code_block :global(.code-highlight) :global(.token.deleted) {
background-color: var(--code-deletion);
}
.code_block :global(.code-highlight) :global(.token.url) {
text-decoration: underline;
}
.code_block :global(.code-highlight) :global(.token.bold) {
font-weight: bold;
}
.code_block :global(.code-highlight) :global(.token.italic) {
font-style: italic;
}

107
components/media/Code.tsx
View File

@ -1,6 +1,8 @@
import dynamic from "next/dynamic";
import CopyButton from "../clipboard/CopyButton";
import type { ReactNode } from "react";
import styles from "./Code.module.css";
type CustomCodeProps = {
className?: string;
children: ReactNode;
@ -8,114 +10,13 @@ type CustomCodeProps = {
const CustomCode = (props: CustomCodeProps) => {
if (props.className?.split(" ").includes("code-highlight")) {
const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
// full multi-line code blocks with prism highlighting and copy-to-clipboard button
return (
<>
<div className="code-block">
<div className={styles.code_block}>
<CopyButton source={props.children} />
<code {...props}>{props.children}</code>
</div>
<style jsx global>{`
.code-block {
position: relative;
width: 100%;
overflow-x: scroll;
margin: 1em auto;
}
.code-highlight {
display: block;
overflow-x: auto;
padding: 1em;
tab-size: 2;
color: var(--code-text);
background-color: var(--code-background);
}
/* leave room for clipboard button to the right of the first line */
.code-highlight > .code-line:first-of-type {
margin-right: 3em;
}
.code-highlight > .code-line.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 */
}
.code-highlight .token.comment,
.code-highlight .token.prolog,
.code-highlight .token.cdata {
color: var(--code-comment);
}
.code-highlight .token.delimiter,
.code-highlight .token.boolean,
.code-highlight .token.keyword,
.code-highlight .token.selector,
.code-highlight .token.important,
.code-highlight .token.doctype,
.code-highlight .token.atrule,
.code-highlight .token.url {
color: var(--code-keyword);
}
.code-highlight .token.tag,
.code-highlight .token.builtin,
.code-highlight .token.regex {
color: var(--code-namespace);
}
.code-highlight .token.property,
.code-highlight .token.constant,
.code-highlight .token.variable,
.code-highlight .token.attr-value,
.code-highlight .token.class-name,
.code-highlight .token.string,
.code-highlight .token.char {
color: var(--code-variable);
}
.code-highlight .token.literal-property,
.code-highlight .token.attr-name {
color: var(--code-attribute);
}
.code-highlight .token.function {
color: var(--code-literal);
}
.code-highlight .token.tag .punctuation,
.code-highlight .token.attr-value .punctuation {
color: var(--code-punctuation);
}
.code-highlight .token.inserted {
background-color: var(--code-addition);
}
.code-highlight .token.deleted {
background-color: var(--code-deletion);
}
.code-highlight .token.url {
text-decoration: underline;
}
.code-highlight .token.bold {
font-weight: bold;
}
.code-highlight .token.italic {
font-style: italic;
}
`}</style>
</>
);
} else {

2
components/page-footer/Footer.module.css
View File

@ -22,7 +22,7 @@
}
.view_source {
padding-bottom: 2px;
padding-bottom: 2px !important;
border-bottom: 1px solid;
border-color: var(--light);
}