PythonistaGuild · AbstractUmbra · May 17, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/core/utils.py b/core/utils.py
@@ -34,7 +34,7 @@
 
 
 def generate_id() -> str:
-    return secrets.token_hex(8)
+    return secrets.token_hex(9)
 
 
 def generate_safety_token() -> str:

diff --git a/views/htmx.py b/views/htmx.py
@@ -56,7 +56,7 @@ def highlight_code(self, filename: str, content: str, *, index: int, raw_url: st
         return f"""
         <div id="__paste_a_{index}" class="pasteArea">
             <div class="pasteHeader">
-                <div style="display: flex; gap: 1rem; align-items: center;">
+                <div style="display: flex; gap: 0.5rem; align-items: center;">
                     <span class="filenameArea">{filename}</span>
                     <span class="pasteButton" onclick="hideFile(this, {index})">Hide</span>
                     <span id="__paste_copy_{index}" class="pasteButton" onclick="copyFile({index})">Copy</span>

diff --git a/web/index.html b/web/index.html
@@ -23,7 +23,7 @@
   <!-- STYLESHEETS -->
   <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
   <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-  <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
+  <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
 
   <!-- FONTS -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

diff --git a/web/maint.html b/web/maint.html
@@ -15,7 +15,7 @@
 
     <!-- STYLESHEETS -->
     <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=4" />
+    <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=5" />
 
 
   <!-- FONTS -->

diff --git a/web/password.html b/web/password.html
@@ -20,12 +20,12 @@
     <script src="/static/scripts/initialTheme.js?v=1"></script>
     <script src="/static/scripts/themes.js?v=1" defer></script>
     <script src="/static/scripts/hidecopy.js?v=1" defer></script>
-    <script src="/static/scripts/highlightsHTMX.js?v=2"></script>
+    <script src="/static/scripts/highlightsHTMX.js?v=3"></script>
 
     <!-- STYLESHEETS -->
     <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
     <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->

diff --git a/web/paste.html b/web/paste.html
@@ -19,12 +19,12 @@
     <script src="/static/scripts/initialTheme.js?v=1"></script>
     <script src="/static/scripts/themes.js?v=1" defer></script>
     <script src="/static/scripts/hidecopy.js?v=1" defer></script>
-    <script src="/static/scripts/highlights.js?v=3" defer></script>
+    <script src="/static/scripts/highlights.js?v=4" defer></script>
 
     <!-- STYLESHEETS -->
     <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
     <!-- <link rel="preload" href="static/styles/highlights.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=4" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=5" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->

diff --git a/web/static/scripts/highlights.js b/web/static/scripts/highlights.js
@@ -1,10 +1,59 @@
 let pasteStores = [];
 
+const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
+const LANGUAGES = hljs.listLanguages();
+let DlCount = 0;
 
-const codes = document.querySelectorAll("pre > code");
-for (let code of codes) {
+for (let area of HIGHLIGHT_AREAS) {
+    let code = area.querySelector("pre > code");
     pasteStores.push(code.textContent);
+
+    // Highlight Code Block and get Language Details...
+    let details = hljs.highlightAuto(code.textContent);
+    let highlightedLang = details.language ? details.language : "plaintext";
+
+    code.innerHTML = details.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+
+    let header = area.querySelector(".pasteHeader");
+    let langOpts = "";
+
+    for (let lang of LANGUAGES) {
+        if (lang == highlightedLang) {
+            continue
+        }
+        langOpts += `<option value="${lang}">${lang}</option>`
+    }
+
+    langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
+    let html = `
+    <div class="langSelectContainer">
+        <label>
+        <input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
+        <datalist id="langs">
+            ${langOpts}
+        </datalist>
+    </div>`
+
+    header.insertAdjacentHTML("beforeend", html);
+    DlCount++;
 }
 
-hljs.highlightAll();
-hljs.initLineNumbersOnLoad({ singleLine: true });
+function changeLang(inp, area, index) {
+    let chosen = inp.value;
+
+    if (!chosen) { return }
+    if (!LANGUAGES.includes(chosen)) { return }
+
+    if (inp.placeholder === chosen) { return }
+
+    let code = area.querySelector("pre > code");
+    let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
+    code.innerHTML = highlighted.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+    inp.placeholder = chosen;
+}
diff --git a/web/static/scripts/highlightsHTMX.js b/web/static/scripts/highlightsHTMX.js
@@ -1,18 +1,70 @@
 let pasteStores = [];
 
+const LANGUAGES = hljs.listLanguages();
+let DlCount = 0;
+
 
 document.addEventListener("htmx:afterRequest", function (evt) {
     if (evt.detail.xhr.status != 200) {
         return
     }
 
     if (evt.detail.target.id == "pastecontainer" || evt.detail.target.id == "content") {
-        const codes = document.querySelectorAll("pre > code");
-        for (let code of codes) {
+        const HIGHLIGHT_AREAS = document.querySelectorAll(".pasteArea");
+
+        for (let area of HIGHLIGHT_AREAS) {
+            let code = area.querySelector("pre > code");
             pasteStores.push(code.textContent);
+
+            // Highlight Code Block and get Language Details...
+            let details = hljs.highlightAuto(code.textContent);
+            let highlightedLang = details.language ? details.language : "plaintext";
+
+            code.innerHTML = details.value;
+
+            // Add Line Numbers...
+            hljs.lineNumbersBlock(code, { singleLine: true });
+
+            let header = area.querySelector(".pasteHeader");
+            let langOpts = "";
+
+            for (let lang of LANGUAGES) {
+                if (lang == highlightedLang) {
+                    continue
+                }
+                langOpts += `<option value="${lang}">${lang}</option>`
+            }
+
+            langOpts = `<option value="${highlightedLang}">${highlightedLang}</option>\n${langOpts}`
+            let html = `
+            <div class="langSelectContainer">
+                <label>
+                <input id="__lang_select_${DlCount}" list="langs" name="langSelect" placeholder="${highlightedLang}" onchange="changeLang(this, ${area.id}, ${DlCount})" /></label>
+                <datalist id="langs">
+                    ${langOpts}
+                </datalist>
+            </div>`
+
+            header.insertAdjacentHTML("beforeend", html);
+            DlCount++;
         }
-
-        hljs.highlightAll();
-        hljs.initLineNumbersOnLoad({ singleLine: true });
     }
-});
+});
+
+
+function changeLang(inp, area, index) {
+    let chosen = inp.value;
+
+    if (!chosen) { return }
+    if (!LANGUAGES.includes(chosen)) { return }
+
+    if (inp.placeholder === chosen) { return }
+
+    let code = area.querySelector("pre > code");
+    let highlighted = hljs.highlight(pasteStores[index], { language: chosen });
+    code.innerHTML = highlighted.value;
+
+    // Add Line Numbers...
+    hljs.lineNumbersBlock(code, { singleLine: true });
+    inp.placeholder = chosen;
+}
diff --git a/web/static/styles/global.css b/web/static/styles/global.css
@@ -400,7 +400,8 @@ textarea {
 .identifierHeader {
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  gap: 1rem;
+  align-items: baseline;
 }
 
 .identifierHeaderLeft {
@@ -411,6 +412,7 @@ textarea {
 
 .identifierHeaderLeft>a {
   font-weight: 600;
+  text-decoration: none;
 }
 
 .identifierHeaderLeft>span {
@@ -498,6 +500,37 @@ textarea {
   color: var(--color-security);
 }
 
+.langSelectContainer {
+  display: flex;
+  align-items: center;
+}
+
+.langSelectContainer>label {
+  background-color: var(--color-background--resizer);
+  color: var(--color-foreground);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-foreground--border);
+  outline: none;
+}
+
+.langSelectContainer>label>input {
+  background-color: transparent;
+  color: var(--color-foreground--dim);
+  outline: none;
+  border: none;
+  padding: 0.25rem;
+}
+
+.langSelectContainer>label:hover {
+  cursor: pointer;
+  filter: brightness(1.1);
+}
+
+.langSelectContainer>label>input:hover {
+  cursor: pointer;
+}
+
 /* Theme Switch */
 .themeSwitch {
   --size: 1.5rem;
@@ -544,7 +577,7 @@ textarea {
   .annotations {
     font-size: 0.8em;
   }
-  
+
   .savePaste {
     padding: 0.75rem;
     font-size: 0.8em;
@@ -574,7 +607,7 @@ textarea {
   }
 
   .filenameArea {
-    font-size: 0.7em;
+    font-size: 0.6em;
   }
 
   .content {
@@ -588,4 +621,18 @@ textarea {
   .pasteArea>textarea {
     font-size: 0.8em;
   }
+
+  .langSelectContainer>label {
+    max-width: 6rem;
+    padding: 0;
+  }
+
+  .langSelectContainer>label>input {
+    max-width: 6rem;
+    font-size: 0.7em;
+  }
+
+  .pasteHeader {
+    padding: 0.5rem;
+  }
 }