Feature/shortcuts (#53)

* Add shortcuts for Saving and Raw View * Add shortcuts tooltips * Invalidate CSS cache * Update icons and CSS * Fix a breaking bug; Breaking CSS.
PythonistaGuild · Jun 14, 2024 · 2e900f1 · 2e900f1
1 parent 90ccf83
commit 2e900f1
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 35 deletions.
diff --git a/views/htmx.py b/views/htmx.py
@@ -92,7 +92,12 @@ def highlight_code(self, *, files: list[dict[str, Any]]) -> str:
 
                 position += length + 1
 
-            content = bleach.clean(original.replace("<!", "&lt;&#33;"), attributes=[], tags=[], strip_comments=False)
+            content = bleach.clean(
+                original.replace("<!", "&lt;&#33;").replace("&#xa;", "&amp;#xa;"),
+                attributes=[],
+                tags=[],
+                strip_comments=False,
+            )
 
             lines: str = f"""<table class="lineNums"><tbody>\n{"".join(numbers)}\n</tbody></table>"""
             html += f"""
@@ -214,23 +219,31 @@ async def paste_raw(self, request: starlette_plus.Request) -> starlette_plus.Res
         password: str | None = request.headers.get("authorization", None)
         identifier: str = request.path_params["id"]
 
+        htmx_url: str | None = request.headers.get("HX-Current-URL", None)
+        if identifier == "0" and htmx_url:
+            identifier = htmx_url.removeprefix(f'{CONFIG["SERVER"]["domain"]}/')
+
+        headers: dict[str, str] = {"HX-Redirect": f"/raw/{identifier}"}
         paste = await self.app.database.fetch_paste(identifier, password=password)
+
         if not paste:
             return starlette_plus.JSONResponse(
                 {"error": f'A paste with the id "{identifier}" could not be found or has expired.'},
                 status_code=404,
+                headers=headers,
             )
 
         if paste.has_password and not paste.password_ok:
             return starlette_plus.JSONResponse(
                 {"error": "Unauthorized. Raw pastes can not be viewed when protected by passwords."},
                 status_code=401,
+                headers=headers,
             )
 
         to_return: dict[str, Any] = paste.serialize(exclude=["safety", "password", "password_ok"])
         text: str = "\n\n\n\n".join([f"# MystBin ! - {f['filename']}\n{f['content']}" for f in to_return["files"]])
 
-        return starlette_plus.PlainTextResponse(text)
+        return starlette_plus.PlainTextResponse(text, headers=headers)
 
     @starlette_plus.route("/raw/{id}/{page:int}", prefix=False)
     @starlette_plus.limit(**CONFIG["LIMITS"]["paste_get"])

diff --git a/web/index.html b/web/index.html
@@ -19,11 +19,12 @@
   <script src="/static/scripts/themes.js?v=1" defer></script>
   <script src="/static/scripts/files.js?v=4" defer></script>
   <script src="/static/scripts/dragDrop.js?v=1"></script>
+  <script src="/static/scripts/shortcuts.js?v=1" 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=6" />
+  <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=7" />
 
   <!-- FONTS -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -46,7 +47,13 @@
       <img src="/static/images/logo.svg" class="logo" />
       MystBin
     </a>
-    <div>
+    <div class="headerRight">
+      <span class="keyboardTool keyboardLight"
+        data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+          src="/static/images/keyboard-light.svg" class="keyboard" /></span>
+      <span class="keyboardTool keyboardDark"
+        data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+          src="/static/images/keyboard.svg" class="keyboard" /></span>
       <input id="themeSwitch" class="themeSwitch" type="checkbox" />
       <label for="themeSwitch"></label>
     </div>
@@ -55,7 +62,9 @@
   <form id="content" class="content" hx-swap-oob="true" hx-swap="outerHTML"
     hx-include="[name='fileName'] [name='fileContent'] [name='pastePassword']">
     <div id="pastecontainer" class="pasteContainer">
-      <div class="pasteArea" id="__file0" data-position="0" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
+      <div class="pasteArea" id="__file0" data-position="0" ondrop="fileDrop(event, this)"
+        ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)"
+        ondragleave="fileDragEnd(event, this)">
         <div class="pasteHeader">
           <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"
             spellcheck="false"></textarea>
@@ -65,21 +74,24 @@
 Filling in all current files will create a new one (Up to 5)" maxlength="300000" onkeyup="addFile(0)"></textarea>
       </div>
 
-      <div class="pasteArea smallArea" id="__file1" data-position="1" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
+      <div class="pasteArea smallArea" id="__file1" data-position="1" ondrop="fileDrop(event, this)"
+        ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)"
+        ondragleave="fileDragEnd(event, this)">
         <div class="pasteHeader">
           <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"
             spellcheck="false"></textarea>
           <span class="deleteFile" onclick="deleteFile('__file1')">Delete File</span>
         </div>
-        <textarea class="fileContent" name="fileContent" required autofocus spellcheck="false" placeholder="Paste code or text..."
-          maxlength="300000" onkeyup="addFile(1)"></textarea>
+        <textarea class="fileContent" name="fileContent" required autofocus spellcheck="false"
+          placeholder="Paste code or text..." maxlength="300000" onkeyup="addFile(1)"></textarea>
       </div>
     </div>
 
     <div class="pasteOptions">
       <hr class="hrLight" />
       <div class="pasteOptionsSection">
-        <span class="savePaste" hx-post="/htmx/save" hx-target="#content">Save Paste</span>
+        <span class="savePaste" hx-post="/htmx/save" hx-target="#content"
+          hx-trigger="click, keyup[ctrlKey&&key=='s'] from:body">Save Paste</span>
         <input name="pastePassword" class="filenameArea" rows="1" placeholder="Optional Password..." maxlength="100"
           type="password" autocomplete="off" />
       </div>

diff --git a/web/maint.html b/web/maint.html
@@ -8,14 +8,14 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <meta name="description" content="Easily share code and text." />
 
-    <!-- PACKAGES -->
-    <!-- SCRIPTS -->
-    <script src="static/scripts/initialTheme.js?v=1"></script>
-    <script src="static/scripts/themes.js?v=1" defer></script>
+  <!-- PACKAGES -->
+  <!-- SCRIPTS -->
+  <script src="static/scripts/initialTheme.js?v=1"></script>
+  <script src="static/scripts/themes.js?v=1" defer></script>
 
-    <!-- STYLESHEETS -->
-    <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
-    <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=6" />
+  <!-- STYLESHEETS -->
+  <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
+  <link rel="stylesheet" type="text/css" href="static/styles/global.css?v=7" />
 
 
   <!-- FONTS -->
@@ -39,7 +39,13 @@
       <img src="/static/images/logo.svg" class="logo" />
       MystBin
     </a>
-    <div>
+    <div class="headerRight">
+      <span class="keyboardTool keyboardLight"
+        data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+          src="/static/images/keyboard-light.svg" class="keyboard" /></span>
+      <span class="keyboardTool keyboardDark"
+        data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+          src="/static/images/keyboard.svg" class="keyboard" /></span>
       <input id="themeSwitch" class="themeSwitch" type="checkbox" />
       <label for="themeSwitch"></label>
     </div>

diff --git a/web/password.html b/web/password.html
@@ -20,11 +20,12 @@
     <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=5"></script>
+    <script src="/static/scripts/shortcuts.js?v=1" 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=6" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=7" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->
@@ -48,15 +49,21 @@
             <img src="/static/images/logo.svg" class="logo" />
             MystBin
         </a>
-        <div>
+        <div class="headerRight">
+            <span class="keyboardTool keyboardLight"
+                data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+                    src="/static/images/keyboard-light.svg" class="keyboard" /></span>
+            <span class="keyboardTool keyboardDark"
+                data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+                    src="/static/images/keyboard.svg" class="keyboard" /></span>
             <input id="themeSwitch" class="themeSwitch" type="checkbox" />
             <label for="themeSwitch"></label>
         </div>
     </div>
 
     <form id="content" class="content" hx-swap-oob="true" hx-get="/pass" hx-target="#pastecontainer"
-        hx-vals="js:{id: window.location.pathname}" hx-include="[name='pastePassword']" hx-trigger="keyup[keyCode==13] from:[name='pastePassword']"
-        onSubmit="return false;">
+        hx-vals="js:{id: window.location.pathname}" hx-include="[name='pastePassword']"
+        hx-trigger="keyup[keyCode==13] from:[name='pastePassword']" onSubmit="return false;">
         <div id="pastecontainer" class="pasteContainer">
             <div class="protected">
                 <h1>Password Protected!</h1>
@@ -85,6 +92,8 @@ <h1>Password Protected!</h1>
             <a href="https://github.com/PythonistaGuild">GitHub</a>
         </div>
     </div>
+    <!-- META DIV FOR KEYBOARD SHORTCUT -->
+    <div style="display: none;" hx-get="/raw/0" hx-trigger="keyup[ctrlKey&&shiftKey&&key=='R'] from:body"></div>
 </body>
 
 </html>
diff --git a/web/paste.html b/web/paste.html
@@ -9,7 +9,7 @@
     <meta name="description" content="Easily share code and text." />
 
     <!-- PACKAGES -->
-    <!-- <link rel="preload" href="static/packages/htmx.min.js" as="script"> -->
+    <script src="static/packages/htmx.min.js"></script>
     <!-- <link rel="preload" href="static/packages/highlight.min.js" as="script"> -->
     <!-- <link rel="preload" href="static/packages/highlight-ln.min.js" as="script"> -->
     <script src="/static/packages/highlight.min.js"></script>
@@ -19,11 +19,12 @@
     <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=5" defer></script>
+    <script src="/static/scripts/shortcuts.js?v=1" 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=6" />
+    <link rel="stylesheet" type="text/css" href="/static/styles/global.css?v=7" />
     <link rel="stylesheet" type="text/css" href="/static/styles/highlights.css" />
 
     <!-- FONTS -->
@@ -47,7 +48,13 @@
             <img src="/static/images/logo.svg" class="logo" />
             MystBin
         </a>
-        <div>
+        <div class="headerRight">
+            <span class="keyboardTool keyboardLight"
+                data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+                    src="/static/images/keyboard-light.svg" class="keyboard" /></span>
+            <span class="keyboardTool keyboardDark"
+                data-text="Ctrl + S&#xa;  Save Paste&#xa;&#xa;Ctrl + Shift + R&#xa;  View Raw"><img
+                    src="/static/images/keyboard.svg" class="keyboard" /></span>
             <input id="themeSwitch" class="themeSwitch" type="checkbox" />
             <label for="themeSwitch"></label>
         </div>
@@ -72,6 +79,8 @@
             <a href="https://github.com/PythonistaGuild">GitHub</a>
         </div>
     </div>
+    <!-- META DIV FOR KEYBOARD SHORTCUT -->
+    <div style="display: none;" hx-get="/raw/0" hx-trigger="keyup[ctrlKey&&shiftKey&&key=='R'] from:body"></div>
 </body>
 
 </html>
diff --git a/web/static/images/keyboard-light.svg b/web/static/images/keyboard-light.svg
diff --git a/web/static/images/keyboard.svg b/web/static/images/keyboard.svg
diff --git a/web/static/scripts/shortcuts.js b/web/static/scripts/shortcuts.js
@@ -0,0 +1,16 @@
+window.addEventListener("keydown", (e) => {
+
+    // Ctrl + s === Save Paste
+    if (e.ctrlKey && e.key === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+    }
+
+    // Ctrl + Shift + R === Raw Paste
+    else if (e.ctrlKey && e.shiftKey && e.key === "R") {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+    }
+});