Compare commits

..

11 Commits

Author SHA1 Message Date
ac580e1995
WIP 2023-01-22 18:57:52 -06:00
cee1cd3a82
WIP 2023-01-22 18:57:52 -06:00
3fae019148
Finish support for list page subtitle
Fixes #27 (as long as I didn't miss anything)
2023-01-22 16:43:09 -06:00
8ef1e3840a
Change color when hovering over share buttons 2023-01-22 16:31:08 -06:00
629b3758b9
Change print button to an <a> to match the rest of the buttons
Also makes it have pointer cursor
2023-01-22 16:28:24 -06:00
9412906b4f
Make the left bar of blockquote lined up with rest of text 2023-01-22 16:26:43 -06:00
f8cfad647f
Fix contrast of code block Copy button 2023-01-22 16:23:03 -06:00
b200623dca
Fix keyboard accessibility of code block copy button 2023-01-22 16:22:51 -06:00
80f5994d96
Improve code block copy text
- Use JS to get it directly from the code block instead of needing a
  separate `pre.code-raw` to get it from. That makes it possible to:
- bashsession: Don't copy prompt or command output
2023-01-22 00:09:34 -06:00
342710a755
Reduce gap between elements in subsections list 2023-01-21 23:34:34 -06:00
8eb642dbc8
Remove <hr> separator before footer 2023-01-21 23:32:32 -06:00
8 changed files with 42 additions and 18 deletions

View File

@ -46,6 +46,7 @@
--text-gray-1: #919191; /* lch(60, 0, X) */
--link-0: #3a94fb; /* lch(60, 60, 270) */
--link-1: #4ea1ff; /* lch(65, 60, 270) -- out of sRGB */
--figure-border: #1f5593; /* lch(35, 40, 270) */
@ -289,7 +290,7 @@
.sections {
display: flex;
flex-direction: column;
gap: 40px;
gap: 10px;
}
.section {
@ -440,16 +441,15 @@
justify-content: center;
}
.share-buttons button,
.share-buttons a {
background-color: var(--background-2);
color: var(--text-2);
padding: 4px;
border-radius: 8px;
}
.share-buttons button {
border: none;
.share-buttons a:hover {
background-color: var(--background-3);
color: var(--text-3);
}
.share-buttons svg {
@ -602,6 +602,7 @@ body {
}
footer {
margin-top: 20px;
text-align: center;
}
@ -649,6 +650,7 @@ a:hover {
blockquote {
border-left: 5px solid var(--background-2);
padding-left: 15px;
margin-left: 0;
}
hr {
@ -722,6 +724,9 @@ table.markdown {
margin: auto 0;
}
/* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button {
color: var(--link-1);
}
.code-block > .code-header > .code-copy-button:hover {
cursor: pointer;
}

View File

@ -12,14 +12,19 @@ window.onscroll = function() {
window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button");
// TODO: maybe get this from HTMLElement.innerText on the actual code block content element
// but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
// lang will not be unset because we default it to text
// clone it so it doesn't change the actual DOM element
const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
// bashsession: remove command output lines
codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
// bashsession: remove prompt symbol
codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
const rawCode = codeElem.innerText;
const originalCopyText = button.innerHTML;
button.onclick = event => {
navigator.clipboard.writeText(rawCode);
console.log(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!";
setTimeout(() => {

View File

@ -1,13 +1,15 @@
{{ $type := "text" }}
{{ with .Type }}
{{ $type = . }}
{{ end }}
<div class="code-block">
<div class="code-header">
<span class="code-type">{{ .Type }}</span>
<a class="code-copy-button">
<span class="code-type">{{ $type }}</span>
<a href="javascript:void(0)" class="code-copy-button">
{{ i18n "copy_to_clipboard" }}
</a>
</div>
{{/* a div.highlight is already created by highlight function */}}
{{ highlight .Inner .Type }}
{{/* for copy to clipboard */}}
<pre class="code-raw" style="display: none;">{{ .Inner }}</pre>
{{/* a div.highlight is already created by highlight function */}}
{{ highlight .Inner $type }}
</div>

View File

@ -21,7 +21,6 @@
</main>
{{ if or .Site.Copyright .Site.Params.footer }}
<hr>
<footer>
<small>
{{ with .Site.Copyright }}

View File

@ -5,6 +5,10 @@
{{ partial "rss-link.html" . }}
</h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="list-page-content">
{{ with .Sections }}
<div class="sections">

View File

@ -4,6 +4,10 @@
{{ .Title | markdownify }}
</h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="page-list">
{{ with .Paginator.Pages }}
{{ range . }}

View File

@ -54,9 +54,10 @@
*/}}
{{ if .Site.Params.shareButtons.print }}
<button class="print-share"
<a class="print-share"
href="javascript:void(0)"
onclick="window.print(); share_event('Print');">
{{- partial "icon.html" "printer" -}}
</button>
</a>
{{ end }}
</div>

View File

@ -4,6 +4,10 @@
{{ .Title | markdownify }}
</h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="series-taxonomy-list">
{{ with .Pages }}
{{ range . }}