codeblock copy

This commit is contained in:
Jacky Zhao 2023-06-06 21:19:00 -07:00
parent 0813f127a3
commit 1cb4dadf13
10 changed files with 98 additions and 10 deletions

View File

@ -1,4 +1,5 @@
import { QuartzConfig } from "./quartz/cfg" import { QuartzConfig } from "./quartz/cfg"
import Body from "./quartz/components/Body"
import Head from "./quartz/components/Head" import Head from "./quartz/components/Head"
import Header from "./quartz/components/Header" import Header from "./quartz/components/Header"
import { import {
@ -68,7 +69,8 @@ const config: QuartzConfig = {
emitters: [ emitters: [
new ContentPage({ new ContentPage({
Head: Head, Head: Head,
Header: Header Header: Header,
Body: Body
}) })
] ]
}, },

View File

@ -0,0 +1,18 @@
import { ComponentChildren } from "preact"
import clipboardScript from './scripts/clipboard.inline'
import clipboardStyle from './styles/clipboard.scss'
export interface BodyProps {
title?: string
children: ComponentChildren
}
export default function Body({ title, children }: BodyProps) {
return <article>
{title && <h1>{title}</h1>}
{children}
</article>
}
Body.afterDOMLoaded = clipboardScript
Body.css = clipboardStyle

View File

@ -2,7 +2,7 @@
// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads // modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads
// see: https://v8.dev/features/modules#defer // see: https://v8.dev/features/modules#defer
import darkmodeScript from "./scripts/darkmode.inline" import darkmodeScript from "./scripts/darkmode.inline"
import styles from '../styles/darkmode.scss' import styles from './styles/darkmode.scss'
export default function Darkmode() { export default function Darkmode() {
return <div class="darkmode"> return <div class="darkmode">

View File

@ -1,6 +1,6 @@
import { resolveToRoot } from "../path" import { resolveToRoot } from "../path"
import Darkmode from "./Darkmode" import Darkmode from "./Darkmode"
import style from '../styles/header.scss' import style from './styles/header.scss'
export interface HeaderProps { export interface HeaderProps {
title: string title: string

View File

@ -0,0 +1,32 @@
const description = "Initialize copy for codeblocks"
export default description
const svgCopy =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>'
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
const els = document.getElementsByTagName("pre")
for (let i = 0; i < els.length; i++) {
const codeBlock = els[i].getElementsByTagName("code")[0]
const source = codeBlock.innerText.replace(/\n\n/g, "\n")
const button = document.createElement("button")
button.className = "clipboard-button"
button.type = "button"
button.innerHTML = svgCopy
button.ariaLabel = "Copy source"
button.addEventListener("click", () => {
navigator.clipboard.writeText(source).then(
() => {
button.blur()
button.innerHTML = svgCheck
setTimeout(() => {
button.innerHTML = svgCopy
button.style.borderColor = ""
}, 2000)
},
(error) => console.error(error),
)
})
els[i].prepend(button)
}

View File

@ -0,0 +1,37 @@
.clipboard-button {
position: absolute;
display: flex;
float: right;
right: 0;
padding: 0.4rem;
margin: -0.2rem 0.3rem;
color: var(--gray);
border-color: var(--dark);
background-color: var(--light);
border: 1px solid;
border-radius: 5px;
z-index: 1;
opacity: 0;
transition: 0.2s;
& > svg {
fill: var(--light);
filter: contrast(0.3);
}
&:hover {
cursor: pointer;
border-color: var(--secondary);
}
&:focus {
outline: 0;
}
}
pre {
&:hover > .clipboard-button {
opacity: 1;
transition: 0.2s;
}
}

View File

@ -9,10 +9,12 @@ import { GlobalConfiguration } from "../../cfg"
import { HeaderProps } from "../../components/Header" import { HeaderProps } from "../../components/Header"
import { QuartzComponent } from "../../components/types" import { QuartzComponent } from "../../components/types"
import { resolveToRoot } from "../../path" import { resolveToRoot } from "../../path"
import { BodyProps } from "../../components/Body"
interface Options { interface Options {
Head: QuartzComponent<HeadProps> Head: QuartzComponent<HeadProps>
Header: QuartzComponent<HeaderProps> Header: QuartzComponent<HeaderProps>
Body: QuartzComponent<BodyProps>
} }
export class ContentPage extends QuartzEmitterPlugin { export class ContentPage extends QuartzEmitterPlugin {
@ -31,7 +33,7 @@ export class ContentPage extends QuartzEmitterPlugin {
async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> { async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {
const fps: string[] = [] const fps: string[] = []
const { Head, Header } = this.opts const { Head, Header, Body } = this.opts
for (const [tree, file] of content) { for (const [tree, file] of content) {
// @ts-ignore (preact makes it angry) // @ts-ignore (preact makes it angry)
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' }) const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
@ -42,7 +44,7 @@ export class ContentPage extends QuartzEmitterPlugin {
js: [ js: [
{ src: baseDir + "/prescript.js", loadTime: "beforeDOMReady" }, { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady" },
...resources.js, ...resources.js,
{ src: baseDir + "/postscript.js", loadTime: "afterDOMReady" } { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", type: 'module' }
] ]
} }
@ -56,10 +58,7 @@ export class ContentPage extends QuartzEmitterPlugin {
<body> <body>
<div id="quartz-root" class="page"> <div id="quartz-root" class="page">
<Header title={cfg.siteTitle} slug={file.data.slug!} /> <Header title={cfg.siteTitle} slug={file.data.slug!} />
<article> <Body title={file.data.slug === "index" ? undefined : title}>{content}</Body>
{file.data.slug !== "index" && <h1>{title}</h1>}
{content}
</article>
</div> </div>
</body> </body>
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} {...resource} />)} {pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} {...resource} />)}

View File

@ -40,7 +40,7 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
componentResources.beforeDOMLoaded.push(beforeDOMLoaded) componentResources.beforeDOMLoaded.push(beforeDOMLoaded)
} }
if (afterDOMLoaded) { if (afterDOMLoaded) {
componentResources.beforeDOMLoaded.push(afterDOMLoaded) componentResources.afterDOMLoaded.push(afterDOMLoaded)
} }
} }