codeblock copy
This commit is contained in:
parent
0813f127a3
commit
1cb4dadf13
@ -1,4 +1,5 @@
|
||||
import { QuartzConfig } from "./quartz/cfg"
|
||||
import Body from "./quartz/components/Body"
|
||||
import Head from "./quartz/components/Head"
|
||||
import Header from "./quartz/components/Header"
|
||||
import {
|
||||
@ -68,7 +69,8 @@ const config: QuartzConfig = {
|
||||
emitters: [
|
||||
new ContentPage({
|
||||
Head: Head,
|
||||
Header: Header
|
||||
Header: Header,
|
||||
Body: Body
|
||||
})
|
||||
]
|
||||
},
|
||||
|
18
quartz/components/Body.tsx
Normal file
18
quartz/components/Body.tsx
Normal 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
|
@ -2,7 +2,7 @@
|
||||
// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads
|
||||
// see: https://v8.dev/features/modules#defer
|
||||
import darkmodeScript from "./scripts/darkmode.inline"
|
||||
import styles from '../styles/darkmode.scss'
|
||||
import styles from './styles/darkmode.scss'
|
||||
|
||||
export default function Darkmode() {
|
||||
return <div class="darkmode">
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { resolveToRoot } from "../path"
|
||||
import Darkmode from "./Darkmode"
|
||||
import style from '../styles/header.scss'
|
||||
import style from './styles/header.scss'
|
||||
|
||||
export interface HeaderProps {
|
||||
title: string
|
||||
|
32
quartz/components/scripts/clipboard.inline.ts
Normal file
32
quartz/components/scripts/clipboard.inline.ts
Normal 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)
|
||||
}
|
37
quartz/components/styles/clipboard.scss
Normal file
37
quartz/components/styles/clipboard.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -9,10 +9,12 @@ import { GlobalConfiguration } from "../../cfg"
|
||||
import { HeaderProps } from "../../components/Header"
|
||||
import { QuartzComponent } from "../../components/types"
|
||||
import { resolveToRoot } from "../../path"
|
||||
import { BodyProps } from "../../components/Body"
|
||||
|
||||
interface Options {
|
||||
Head: QuartzComponent<HeadProps>
|
||||
Header: QuartzComponent<HeaderProps>
|
||||
Body: QuartzComponent<BodyProps>
|
||||
}
|
||||
|
||||
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[]> {
|
||||
const fps: string[] = []
|
||||
|
||||
const { Head, Header } = this.opts
|
||||
const { Head, Header, Body } = this.opts
|
||||
for (const [tree, file] of content) {
|
||||
// @ts-ignore (preact makes it angry)
|
||||
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
|
||||
@ -42,7 +44,7 @@ export class ContentPage extends QuartzEmitterPlugin {
|
||||
js: [
|
||||
{ src: baseDir + "/prescript.js", loadTime: "beforeDOMReady" },
|
||||
...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>
|
||||
<div id="quartz-root" class="page">
|
||||
<Header title={cfg.siteTitle} slug={file.data.slug!} />
|
||||
<article>
|
||||
{file.data.slug !== "index" && <h1>{title}</h1>}
|
||||
{content}
|
||||
</article>
|
||||
<Body title={file.data.slug === "index" ? undefined : title}>{content}</Body>
|
||||
</div>
|
||||
</body>
|
||||
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} {...resource} />)}
|
||||
|
@ -40,7 +40,7 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
|
||||
componentResources.beforeDOMLoaded.push(beforeDOMLoaded)
|
||||
}
|
||||
if (afterDOMLoaded) {
|
||||
componentResources.beforeDOMLoaded.push(afterDOMLoaded)
|
||||
componentResources.afterDOMLoaded.push(afterDOMLoaded)
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user