yagich/porom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add code blocks + copy

Browse Source
This commit is contained in:
Lera Elvoé 2025-05-24 05:12:46 +03:00
parent 66318698e5
commit 69bfaa8db0
Signed by: yagich
SSH Key Fingerprint: SHA256:6xjGb6uA7lAVcULa7byPEN//rQ0wPoG+UzYVMfZnbvc
5 changed files with 90 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
data/static/style.css
View File

@ -105,7 +105,43 @@ body {
.post-content {
grid-area: post-content;
padding: 5px 20px;
padding: 20px;
margin-right: 25%;
}
pre code {
display: block;
background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
font-size: 1rem;
color: white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-left: 10px solid rgb(229.84, 231.92, 227.28);
padding: 20px;
}
.copy-code-container {
position: sticky;
width: calc(100% - 4px);
display: flex;
justify-content: space-between;
align-items: last baseline;
font-family: sans-serif;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: #c1ceb1;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
}
.copy-code-container::before {
content: "code block";
font-style: italic;
margin-left: 10px;
}
.copy-code {
margin-right: 10px;
}
.user-posts {
@ -340,6 +376,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
overflow: hidden;
text-overflow: ellipsis;
display: inline;
margin-right: 25%;
}
.topic {

7
js/copy-code.js Normal file
View File

@ -0,0 +1,7 @@
for (let button of document.querySelectorAll(".copy-code")) {
button.addEventListener("click", async () => {
await navigator.clipboard.writeText(button.value)
button.textContent = "Copied!"
setTimeout(() => {button.textContent = "Copy"}, 1000.0)
})
}

4
lib/babycode.lua
View File

@ -44,7 +44,9 @@ function babycode.to_html(s, escape_html)
-- replace code block placeholders back with their original contents
text = text:gsub("\1CODE:(%d+)\1", function(n)
return "<pre><code>"..code_blocks[tonumber(n)].."</code></pre>"
local code = code_blocks[tonumber(n)]
local button = ("<button type=button class=\"copy-code\" value=\"%s\">Copy</button>"):format(code)
return "<pre><span class=\"copy-code-container\">" .. button .. "</span><code>"..code.."</code></pre>"
end)
return text

42
sass/style.scss
View File

@ -6,6 +6,7 @@ $accent_color: #c1ceb1;
$dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%);
$dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%);
$verydark: color.scale($accent_color, $lightness: -80%, $saturation: -70%);
$light: color.scale($accent_color, $lightness: 40%, $saturation: -60%);
$lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
@ -140,7 +141,45 @@ body {
.post-content {
grid-area: post-content;
padding: 5px 20px;
padding: 20px;
margin-right: 25%;
}
pre code {
display: block;
background-color: $verydark;
font-size: 1rem;
color: white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-left: 10px solid $lighter;
padding: 20px;
}
.copy-code-container {
position: sticky;
// width: 100%;
width: calc(100% - 4px);
display: flex;
justify-content: space-between;
align-items: last baseline;
font-family: sans-serif;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: $accent_color;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
&::before {
content: "code block";
font-style: italic;
margin-left: 10px;
}
}
.copy-code {
margin-right: 10px;
}
.user-posts {
@ -341,6 +380,7 @@ input[type="text"], input[type="password"], textarea, select {
overflow: hidden;
text-overflow: ellipsis;
display: inline;
margin-right: 25%;
}
.topic {

1
views/base.etlua
View File

@ -13,5 +13,6 @@
<body>
<% render("views.common.topnav") -%>
<% content_for("inner") %>
<script src="/static/js/copy-code.js"></script>
</body>
</html>