Skip to content

Commit 6a247d6

Browse files
EvieePyEvieePy
authored
Feature/language selector (#41)
* Small style change. * Add language selector to saved pastes. * Add version to scripts/stylesheets * Mobile CSS adjustments. * Increase paste hash by one byte
1 parent e489d85 commit 6a247d6

File tree

9 files changed

+169
-21
lines changed

9 files changed

+169
-21
lines changed

‎core/utils.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535

3636
def generate_id() -> str:
37-
return secrets.token_hex(8)
37+
return secrets.token_hex(9)
3838

3939

4040
def generate_safety_token() -> str:

‎views/htmx.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ def highlight_code(self, filename: str, content: str, *, index: int, raw_url: st
5656
return f"""
5757
<div id="__paste_a_{index}" class="pasteArea">
5858
<div class="pasteHeader">
59-
<div style="display: flex; gap: 1rem; align-items: center;">
59+
<div style="display: flex; gap: 0.5rem; align-items: center;">
6060
<span class="filenameArea">{filename}</span>
6161
<span class="pasteButton" onclick="hideFile(this, {index})">Hide</span>
6262
<span id="__paste_copy_{index}" class="pasteButton" onclick="copyFile({index})">Copy</span>

‎web/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<!-- STYLESHEETS -->
2424
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
2525
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
26-
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
26+
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
2727

2828
<!-- FONTS -->
2929
<link rel="preconnect" href="https://fonts.googleapis.com">

‎web/maint.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<!-- STYLESHEETS -->
1717
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
18-
<link rel="stylesheet" type="text/css" href="static/styles/global.css?v=4" />
18+
<link rel="stylesheet" type="text/css" href="static/styles/global.css?v=5" />
1919

2020

2121
<!-- FONTS -->

‎web/password.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
<script src="/static/scripts/initialTheme.js?v=1"></script>
2121
<script src="/static/scripts/themes.js?v=1" defer></script>
2222
<script src="/static/scripts/hidecopy.js?v=1" defer></script>
23-
<script src="/static/scripts/highlightsHTMX.js?v=2"></script>
23+
<script src="/static/scripts/highlightsHTMX.js?v=3"></script>
2424

2525
<!-- STYLESHEETS -->
2626
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
2727
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
28-
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
28+
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
2929
<link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
3030

3131
<!-- FONTS -->

‎web/paste.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
<script src="/static/scripts/initialTheme.js?v=1"></script>
2020
<script src="/static/scripts/themes.js?v=1" defer></script>
2121
<script src="/static/scripts/hidecopy.js?v=1" defer></script>
22-
<script src="/static/scripts/highlights.js?v=3" defer></script>
22+
<script src="/static/scripts/highlights.js?v=4" defer></script>
2323

2424
<!-- STYLESHEETS -->
2525
<!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
2626
<!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
27-
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
27+
<link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
2828
<link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
2929

3030
<!-- FONTS -->

‎web/static/scripts/highlights.js

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,59 @@
11
let pasteStores = [];
22

3+
const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
4+
const LANGUAGES = hljs.listLanguages();
5+
let DlCount = 0;
36

4-
const codes = document.querySelectorAll("pre > code");
5-
for (let code of codes) {
7+
for (let area of HIGHLIGHT_AREAS) {
8+
let code = area.querySelector("pre > code");
69
pasteStores.push(code.textContent);
10+
11+
// Highlight Code Block and get Language Details...
12+
let details = hljs.highlightAuto(code.textContent);
13+
let highlightedLang = details.language ? details.language : "plaintext";
14+
15+
code.innerHTML = details.value;
16+
17+
// Add Line Numbers...
18+
hljs.lineNumbersBlock(code, { singleLine: true });
19+
20+
let header = area.querySelector(".pasteHeader");
21+
let langOpts = "";
22+
23+
for (let lang of LANGUAGES) {
24+
if (lang == highlightedLang) {
25+
continue
26+
}
27+
langOpts += `<option value="${lang}">${lang}</option>`
28+
}
29+
30+
langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
31+
let html = `
32+
<div class="langSelectContainer">
33+
<label>
34+
<input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
35+
<datalist id="langs">
36+
${langOpts}
37+
</datalist>
38+
</div>`
39+
40+
header.insertAdjacentHTML("beforeend", html);
41+
DlCount++;
742
}
843

9-
hljs.highlightAll();
10-
hljs.initLineNumbersOnLoad({ singleLine: true });
44+
function changeLang(inp, area, index) {
45+
let chosen = inp.value;
46+
47+
if (!chosen) { return }
48+
if (!LANGUAGES.includes(chosen)) { return }
49+
50+
if (inp.placeholder === chosen) { return }
51+
52+
let code = area.querySelector("pre > code");
53+
let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
54+
code.innerHTML = highlighted.value;
55+
56+
// Add Line Numbers...
57+
hljs.lineNumbersBlock(code, { singleLine: true });
58+
inp.placeholder = chosen;
59+
}

‎web/static/scripts/highlightsHTMX.js

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,70 @@
11
let pasteStores = [];
22

3+
const LANGUAGES = hljs.listLanguages();
4+
let DlCount = 0;
5+
36

47
document.addEventListener("htmx:afterRequest", function (evt) {
58
if (evt.detail.xhr.status != 200) {
69
return
710
}
811

912
if (evt.detail.target.id == "pastecontainer" || evt.detail.target.id == "content") {
10-
const codes = document.querySelectorAll("pre > code");
11-
for (let code of codes) {
13+
const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
14+
15+
for (let area of HIGHLIGHT_AREAS) {
16+
let code = area.querySelector("pre > code");
1217
pasteStores.push(code.textContent);
18+
19+
// Highlight Code Block and get Language Details...
20+
let details = hljs.highlightAuto(code.textContent);
21+
let highlightedLang = details.language ? details.language : "plaintext";
22+
23+
code.innerHTML = details.value;
24+
25+
// Add Line Numbers...
26+
hljs.lineNumbersBlock(code, { singleLine: true });
27+
28+
let header = area.querySelector(".pasteHeader");
29+
let langOpts = "";
30+
31+
for (let lang of LANGUAGES) {
32+
if (lang == highlightedLang) {
33+
continue
34+
}
35+
langOpts += `<option value="${lang}">${lang}</option>`
36+
}
37+
38+
langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
39+
let html = `
40+
<div class="langSelectContainer">
41+
<label>
42+
<input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
43+
<datalist id="langs">
44+
${langOpts}
45+
</datalist>
46+
</div>`
47+
48+
header.insertAdjacentHTML("beforeend", html);
49+
DlCount++;
1350
}
14-
15-
hljs.highlightAll();
16-
hljs.initLineNumbersOnLoad({ singleLine: true });
1751
}
18-
});
52+
});
53+
54+
55+
function changeLang(inp, area, index) {
56+
let chosen = inp.value;
57+
58+
if (!chosen) { return }
59+
if (!LANGUAGES.includes(chosen)) { return }
60+
61+
if (inp.placeholder === chosen) { return }
62+
63+
let code = area.querySelector("pre > code");
64+
let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
65+
code.innerHTML = highlighted.value;
66+
67+
// Add Line Numbers...
68+
hljs.lineNumbersBlock(code, { singleLine: true });
69+
inp.placeholder = chosen;
70+
}

‎web/static/styles/global.css

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,8 @@ textarea {
400400
.identifierHeader {
401401
display: flex;
402402
flex-direction: row;
403-
gap: 2rem;
403+
gap: 1rem;
404+
align-items: baseline;
404405
}
405406

406407
.identifierHeaderLeft {
@@ -411,6 +412,7 @@ textarea {
411412

412413
.identifierHeaderLeft>a {
413414
font-weight: 600;
415+
text-decoration: none;
414416
}
415417

416418
.identifierHeaderLeft>span {
@@ -498,6 +500,37 @@ textarea {
498500
color: var(--color-security);
499501
}
500502

503+
.langSelectContainer {
504+
display: flex;
505+
align-items: center;
506+
}
507+
508+
.langSelectContainer>label {
509+
background-color: var(--color-background--resizer);
510+
color: var(--color-foreground);
511+
padding: 0.25rem;
512+
border-radius: 0.25rem;
513+
border: 1px solid var(--color-foreground--border);
514+
outline: none;
515+
}
516+
517+
.langSelectContainer>label>input {
518+
background-color: transparent;
519+
color: var(--color-foreground--dim);
520+
outline: none;
521+
border: none;
522+
padding: 0.25rem;
523+
}
524+
525+
.langSelectContainer>label:hover {
526+
cursor: pointer;
527+
filter: brightness(1.1);
528+
}
529+
530+
.langSelectContainer>label>input:hover {
531+
cursor: pointer;
532+
}
533+
501534
/* Theme Switch */
502535
.themeSwitch {
503536
--size: 1.5rem;
@@ -544,7 +577,7 @@ textarea {
544577
.annotations {
545578
font-size: 0.8em;
546579
}
547-
580+
548581
.savePaste {
549582
padding: 0.75rem;
550583
font-size: 0.8em;
@@ -574,7 +607,7 @@ textarea {
574607
}
575608

576609
.filenameArea {
577-
font-size: 0.7em;
610+
font-size: 0.6em;
578611
}
579612

580613
.content {
@@ -588,4 +621,18 @@ textarea {
588621
.pasteArea>textarea {
589622
font-size: 0.8em;
590623
}
624+
625+
.langSelectContainer>label {
626+
max-width: 6rem;
627+
padding: 0;
628+
}
629+
630+
.langSelectContainer>label>input {
631+
max-width: 6rem;
632+
font-size: 0.7em;
633+
}
634+
635+
.pasteHeader {
636+
padding: 0.5rem;
637+
}
591638
}

0 commit comments

Comments
 (0)