Merge pull request #1 from ginkoid/daniel/dev

ginkoid · Jul 1, 2023 · 728b2e8 · 728b2e8
2 parents 6854841 + 8e40b3a
commit 728b2e8
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/client/app.css b/client/app.css
@@ -49,15 +49,15 @@ summary {
   padding: 1rem;
   background: #FFE3E3;
   border-radius: 0.25rem;
-  margin-top: 0;
+  margin: 0;
 }
 
 .code {
   border: 0.5px solid #ADB5BD;
   padding: 1rem;
   background: #F1F3F5;
   border-radius: 0.25rem;
-  margin-top: 0;
+  margin: 0.25rem 0;
   white-space: pre-wrap;
 }
 
@@ -68,10 +68,16 @@ summary {
   transition: filter 0.1s ease-in-out;
 }
 
-#download {
+#actions {
+  display: flex;
+  gap: 0.5rem;
   position: absolute;
   bottom: 0.5rem;
   right: 0.5rem;
+}
+
+.action {
+  cursor: pointer;
   opacity: 0;
   transition: opacity 0.2s ease-in-out, filter 0.1s ease-in-out;
   width: 2rem;
@@ -82,14 +88,14 @@ summary {
   background: #FFF;
 }
 
-.card:hover #download {
+.card:hover .action {
   opacity: 1;
 }
 
-.dirty #download {
+.dirty .action {
   pointer-events: none;
 }
 
-.dirty #image, .dirty #download, .dirty #error {
+.dirty #image, .dirty .action, .dirty #error {
   filter: opacity(0.5);
 }
diff --git a/client/app.js b/client/app.js
@@ -6,6 +6,7 @@ import { indentWithTab } from '@codemirror/commands'
 import './app.css'
 import preamble from '../render/preamble.tex'
 
+const maximumUrlLength = 2000
 const initialValue = String.raw`
 \TeX.flag.sh can render \textbf{text}, \( m \alpha \tau h \), and even pictures:
 \center{\scalebox{0.3}{\begin{tikzpicture} \duck[hat] \end{tikzpicture}}}
@@ -25,7 +26,9 @@ void (async () => {
   }
 
   const imageEl = document.getElementById('image')
+  const actionsEl = document.getElementById('actions')
   const downloadEl = document.getElementById('download')
+  const copyEl = document.getElementById('copy-link')
   const errorEl = document.getElementById('error')
   const renderEl = document.getElementById('render')
 
@@ -36,7 +39,7 @@ void (async () => {
     imageEl.srcset = ''
     imageEl.classList.add('hidden')
     downloadEl.href = ''
-    downloadEl.classList.add('hidden')
+    actionsEl.classList.add('hidden')
   }
 
   let lastAbort
@@ -62,7 +65,7 @@ void (async () => {
         imageEl.srcset = `${lastObjectUrl} 2x`
         imageEl.classList.remove('hidden')
         downloadEl.href = lastObjectUrl
-        downloadEl.classList.remove('hidden')
+        actionsEl.classList.remove('hidden')
       }
     } catch (err) {
       if (err instanceof DOMException && err.name === 'AbortError') {
@@ -74,9 +77,28 @@ void (async () => {
     }
   }
   const debouncedUpdateImage = debounce(200, updateImage)
+
+  let imageUrl
+  const updateLink = (content) => {
+    const url = new URL(`/render/${encodeURIComponent(content)}`, location)
+    if (url.href.length > maximumUrlLength) {
+      imageUrl = undefined
+      copyEl.classList.add('hidden')
+    } else {
+      imageUrl = url.href
+      copyEl.classList.remove('hidden')
+    }
+  }
+  copyEl.addEventListener('click', () => {
+    if (imageUrl) {
+      navigator.clipboard.writeText(imageUrl)
+    }
+  })
+
   const handleInput = (content) => {
     localStorage.content = content
     renderEl.classList.add('dirty')
+    updateLink(content)
     debouncedUpdateImage(content)
   }
 
@@ -95,5 +117,5 @@ void (async () => {
     ],
     parent: document.getElementById('editor'),
   })
-  updateImage(view.state.doc.toString())
+  handleInput(view.state.doc.toString())
 })()
diff --git a/client/public/index.html b/client/public/index.html
@@ -27,11 +27,18 @@ <h2>TeX.flag.sh</h2>
         <div id="editor"></div>
         <pre id="error" class="error hidden"></pre>
         <img id="image" class="hidden">
-        <a id="download" class="hidden" download="tex.png">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="#212529" fill="none">
-            <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2M7 11l5 5l5 -5M12 4l0 12" />
-          </svg>
-        </a>
+        <span id="actions" class="hidden">
+          <a class="action" id="copy-link">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="#212529" fill="none">
+              <path d="M9 15l6 -6M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+            </svg>
+          </a>
+          <a class="action" id="download" download="tex.png">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="#212529" fill="none">
+              <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2M7 11l5 5l5 -5M12 4l0 12" />
+            </svg>
+          </a>
+        </span>
       </div>
     </div>
     <script src="/assets/app.js"></script>