tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Copy to clipboard feature for code block (#152)

Browse Source 
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Geoffrey Garrett 2022-07-03 20:42:35 +02:00 committed by GitHub
parent 4f088e1312
commit a47218d28c
6 changed files with 114 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/js/clipboard.js Normal file
View File

@ -0,0 +1,38 @@
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 addCopyButtons = () => {
let els = document.getElementsByClassName("highlight");
// for each highlight
for (let i = 0; i < els.length; i++) {
if (els[i].getElementsByClassName("clipboard-button").length) continue;
// find pre > code inside els[i]
let codeBlocks = els[i].getElementsByTagName("code");
// line numbers are inside first code block
let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
const button = document.createElement("button");
button.className = "clipboard-button";
button.type = "button";
button.innerHTML = svgCopy;
// remove every second newline from lastCodeBlock.innerText
button.addEventListener("click", () => {
navigator.clipboard.writeText(lastCodeBlock.innerText.replace(/\n\n/g, "\n")).then(
() => {
button.blur();
button.innerHTML = svgCheck;
setTimeout(() => (button.innerHTML = svgCopy), 2000);
},
(error) => (button.innerHTML = "Error")
);
});
// find chroma inside els[i]
let chroma = els[i].getElementsByClassName("chroma")[0];
els[i].insertBefore(button, chroma);
console.log(els[i].lastChild)
}
}

2
assets/js/darkmode.js
View File

@ -8,7 +8,7 @@ const syntaxTheme = document.querySelector("#theme-link");
if (currentTheme) {
document.documentElement.setAttribute('saved-theme', currentTheme);
(currentTheme === 'dark') ? syntaxTheme.href = '{{ $darkSyntax.Permalink }}' : syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
syntaxTheme.href = currentTheme === 'dark' ? '{{ $darkSyntax.Permalink }}' : '{{ $lightSyntax.Permalink }}';
}
const switchTheme = (e) => {

47
assets/styles/clipboard.scss Normal file
View File

@ -0,0 +1,47 @@
.clipboard-button {
position: absolute;
display: flex;
float: right;
right: 0;
padding: 0.69em;
margin: 0.5em;
color: var(--outlinegray);
border-color: var(--dark);
background-color: var(--lightgray);
filter: contrast(1.1);
border: 2px solid;
border-radius: 6px;
font-size: 0.8em;
z-index: 1;
opacity: 0;
transition: 0.12s;
& > svg {
fill: var(--light);
filter: contrast(0.3);
}
&:hover {
cursor: pointer;
border-color: var(--primary);
& > svg {
fill: var(--primary);
}
}
&:focus {
outline: 0;
}
}
.highlight {
position: relative;
&:hover > .clipboard-button {
opacity: 1;
transition: 0.2s;
}
}

19
content/notes/config.md
View File

@ -28,12 +28,15 @@ enableLinkPreview: true
# whether to render titles for code blocks
enableCodeBlockTitle: true
# whether to render copy buttons for code blocks
enableCodeBlockCopy: true
# whether to try to process Latex
enableLatex: true
# whether to enable single-page-app style rendering
# this prevents flahses of unstyled content and overall improves
# smoothness of quartz. More info in issue #109 on GitHub
# this prevents flashes of unstyled content and improves
# smoothness of Quartz. More info in issue #109 on GitHub
enableSPA: true
# whether to render a footer
@ -83,10 +86,10 @@ To add code block titles with Quartz:
```
**Note** that if `{title=<my-title>}` is included, and code block titles are not
enabled, no errors will occur and the title attribute will be ignored.
enabled, no errors will occur, and the title attribute will be ignored.
### HTML Favicons
If you would like to customize the favicons of your quartz-based website, you
If you would like to customize the favicons of your Quartz-based website, you
can add them to the `data/config.yaml` file. The **default** without any set
`favicon` key is:
@ -95,7 +98,7 @@ can add them to the `data/config.yaml` file. The **default** without any set
```
The default can be overridden by defining a value to the `favicon` key in your
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
`data/config.yaml` file. For example, here is a `List[Dictionary]` example format, which is
equivalent to the default:
```yaml {title="data/config.yaml", linenos=false}
@ -108,7 +111,7 @@ In this format, the keys are identical to their HTML representations.
If you plan to add multiple favicons generated by a website (see list below), it
may be easier to define it as HTML. Here is an example which appends the
**Apple touch icon** to quartz's default favicon:
**Apple touch icon** to Quartz's default favicon:
```yaml {title="data/config.yaml", linenos=false}
favicon: |
@ -118,7 +121,7 @@ favicon: |
This second favicon will now be used as a web page icon when someone adds your
webpage to the home screen of their Apple device. If you are interested in more
information about the current, and past, standards of favicons, you can read
information about the current and past standards of favicons, you can read
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).
**Note** that all generated favicon paths, defined by the `href`
@ -181,7 +184,7 @@ paths:
Want to go even more in-depth? You can add custom CSS styling and change existing colours through editing `assets/styles/custom.scss`. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in `/layouts/partials`.
### Partials
Partials are what dictate what actually gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.
Partials are what dictate what gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.
For example, the structure of the home page can be edited through `/layouts/index.html`. To customize the footer, you can edit `/layouts/partials/footer.html`

1
data/config.yaml
View File

@ -4,6 +4,7 @@ openToc: false
enableLinkPreview: true
enableLatex: true
enableCodeBlockTitle: true
enableCodeBlockCopy: true
enableSPA: true
enableFooter: true
enableContextualBacklinks: true

19
layouts/partials/head.html
View File

@ -54,6 +54,13 @@
<script src="{{$codeTitle.Permalink}}"></script>
{{end}}
{{ if $.Site.Data.config.enableCodeBlockCopy }}
{{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
{{ if (findRE "<pre" .Content 1) }}
<script src="{{$clipboard.Permalink}}"></script>
{{ end }}
{{ end }}
<!-- Preload page vars -->
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
"md5" | resources.Minify | }} {{$contentIndex := resources.Get
@ -85,6 +92,10 @@
const pathWindow = window.location.pathname;
const isHome = pathBase == pathWindow;
{{if $.Site.Data.config.enableCodeBlockCopy -}}
addCopyButtons();
{{ end }}
{{if $.Site.Data.config.enableSPA -}}
addTitleToCodeBlocks();
{{ end }}
@ -118,12 +129,12 @@
const init = (doc = document) => {
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
{{if $.Site.Data.config.enableCodeBlockCopy -}}
addCopyButtons();
{{ end }}
{{if $.Site.Data.config.enableCodeBlockTitle -}}
{{if $.Site.Data.config.enableSPA -}}
addTitleToCodeBlocks();
{{ else }}
window.addEventListener("DOMContentLoaded", addTitleToCodeBlocks);
{{- end -}}
{{- end -}}
{{if $.Site.Data.config.enableLatex}}
renderMathInElement(doc.body, {