lytedev/site.lyte.dev
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Better maybe

Browse source
This commit is contained in:
Daniel Flanagan 2023-05-11 14:40:11 -05:00
parent 418766dca5
commit c8c021b527
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
3 changed files with 48 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/stylus/core.styl
View file

@ -12,17 +12,33 @@ a
a > svg a > svg
margin-right: 0.5em margin-right: 0.5em
button.copy-code-button .copy-code-button-container
display none
position absolute position absolute
top 0.5em // top 1em
right 0.5em right 0.5em
overflow visible
padding 0
margin 0
max-width 100%
width 100%
display flex
button.copy-code-button
color var(--link-fg) color var(--link-fg)
text-decoration underline text-decoration underline
z-index 10 z-index 10
position relative
margin-left auto
pre.chroma:hover > button.copy-code-button @media (max-width: 600px)
display block opacity 0.75
&:hover
opacity 1.0
@media (max-width: 600px)
pre.chroma:hover > button.copy-code-button
opacity 0.9
img, embed, frame, iframe { max-width: 100vw } img, embed, frame, iframe { max-width: 100vw }
@ -204,6 +220,7 @@ form
text-align left text-align left
h1, h2, h3, h4, h5, h6, form, ul, ol, p h1, h2, h3, h4, h5, h6, form, ul, ol, p
position relative
max-width 600px max-width 600px
margin-left auto margin-left auto
margin-right auto margin-right auto
@ -212,9 +229,9 @@ form
border-left 0 border-left 0
pre.chroma pre.chroma
position relative
padding 0 padding 0
display flex display flex
flex-direction column
width auto width auto
flex 1 flex 1
justify-content center justify-content center

7
src/stylus/syntax-highlighting.styl
View file

@ -1,14 +1,17 @@
main > .highlight .chroma-highlight, main > .highlight > pre.chroma
main > .highlight pre.chroma
border 0 border 0
padding 0.25em 0.5em padding 0.25em 0.5em
border-left solid 0.25em var(--syntax-left-edge) border-left solid 0.25em var(--syntax-left-edge)
overflow-y visible
overflow-x auto overflow-x auto
background-color var(--syntax-bg) background-color var(--syntax-bg)
-moz-tab-size 2 -moz-tab-size 2
tab-size 2 tab-size 2
color var(--fg) color var(--fg)
main > .highlight > pre.chroma > code > .line
margin-right 5em
.chroma .chroma
.err .err
color var(--syntax-err) color var(--syntax-err)

25
static/global.js
View file

@ -77,15 +77,30 @@ function initCodeCopyButtons() {
const codeBlocks = document.querySelectorAll("pre.chroma"); const codeBlocks = document.querySelectorAll("pre.chroma");
codeBlocks.forEach((block) => { codeBlocks.forEach((block) => {
const code = block.querySelectorAll("code")[0]; const code = block.querySelectorAll("code")[0];
const buttonContainer = document.createElement("p");
buttonContainer.classList.add("copy-code-button-container");
const button = document.createElement("button"); const button = document.createElement("button");
buttonContainer.appendChild(button);
button.classList.add("copy-code-button"); button.classList.add("copy-code-button");
block.appendChild(button); block.parentNode.parentNode.insertBefore(buttonContainer, block.parentNode);
button.textContent = "Copy"; button.textContent = "Copy";
button.addEventListener("click", (_ev) => { button.addEventListener("click", (_ev) => {
navigator.clipboard.writeText(code.textContent); button.disabled = true;
const lastText = button.textContent; navigator.clipboard.writeText(code.textContent).catch(() => {
button.textContent = "Copied to clipbooard!"; const lastText = button.textContent;
setTimeout(() => button.textContent = lastText, 3000); button.textContent = "Error Copying";
setTimeout(() => {
button.disabled = false;
button.textContent = lastText;
}, 500);
}).then(() => {
const lastText = button.textContent;
button.textContent = "Copied to clipbooard!";
setTimeout(() => {
button.disabled = false;
button.textContent = lastText;
}, 3000);
});
}); });
}); });
} }