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

View File

@ -12,14 +12,19 @@ window.onscroll = function() {
window.onload = () => { window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => { document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button"); 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) // lang will not be unset because we default it to text
const rawCode = codeBlock.querySelector("pre.code-raw").innerText; // 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; const originalCopyText = button.innerHTML;
button.onclick = event => { button.onclick = event => {
navigator.clipboard.writeText(rawCode); navigator.clipboard.writeText(rawCode);
console.log(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something // TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!"; event.target.innerHTML = "Copied!";
setTimeout(() => { setTimeout(() => {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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