Add an optional input text field for specifying the filename to download

Author: airalpha

.github/workflows/docker.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   push_to_registry:
-    name: Push Docker image to Docker Hub
+    name: Build Docker image and push to Docker Hub on master
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

Cargo.lock

@@ -28,17 +28,23 @@
             padding: 1em;
         }
 
+        /* Class is automatically added to textarea elements, see https://codemirror.net/5/doc/manual.html#styling. */
         .CodeMirror {
             border-radius: 1em;
             padding: 1em;
             height: auto;
         }
 
-        select {
+        select, input {
             padding: 0.5em;
             border-radius: 0.2em;
         }
 
+        code {
+            background: #4f5a6b;
+            padding: 0.125em 0.25em;
+        }
+
         button {
             background: #c2d94c;
             color: #0a0e14;
@@ -65,7 +71,7 @@ <h1 hidden="hidden">md-to-pdf</h1>
 <label for="markdown">Markdown</label>
 <br>
 <br>
-<textarea id="markdown" class="markdown">
+<textarea id="markdown">
 # md-to-pdf
 
 A web service for converting markdown to PDF
@@ -110,7 +116,7 @@ <h1 hidden="hidden">md-to-pdf</h1>
 <label for="css">CSS</label>
 <br>
 <br>
-<textarea id="css" class="css">
+<textarea id="css">
 /* You can add some CSS styles too, if you want. */
 
 h1, h2 {
@@ -133,14 +139,25 @@ <h1 hidden="hidden">md-to-pdf</h1>
 
 <br>
 
-<label for="engine">Conversion Engine (just try which works better for you)</label>
-<br />
-<br />
-<select id="engine">
-    <option>weasyprint</option>
-    <option>wkhtmltopdf</option>
-    <option label="pdflatex (CSS will have no effect)">pdflatex</option>
-</select>
+<div style="display: flex; flex-direction: row; gap: 5em;">
+    <div>
+        <label for="engine">Conversion Engine (just try which works better for you)</label>
+        <br />
+        <br />
+        <select id="engine">
+            <option>weasyprint</option>
+            <option>wkhtmltopdf</option>
+            <option label="pdflatex (CSS will have no effect)">pdflatex</option>
+        </select>
+    </div>
+
+    <div>
+        <label for="filename">Filename (defaults to <code>md-to-pdf</code>, extension <code>.pdf</code> is always added)</label>
+        <br />
+        <br />
+        <input type="text" id="filename">
+    </div>
+</div>
 
 <br>
 <br>
@@ -150,11 +167,11 @@ <h1 hidden="hidden">md-to-pdf</h1>
 <script>
     const markdown = CodeMirror.fromTextArea(
         document.querySelector('#markdown'),
-        {mode: 'markdown', theme: 'ayu-dark'}
+        { mode: 'markdown', theme: 'ayu-dark' },
     );
     const css = CodeMirror.fromTextArea(
         document.querySelector('#css'),
-        {mode: 'css', theme: 'ayu-dark'}
+        { mode: 'css', theme: 'ayu-dark' },
     );
 
     async function mdToPdf() {
@@ -179,9 +196,10 @@ <h1 hidden="hidden">md-to-pdf</h1>
     function downloadBlob(blob) {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
+        const filename = document.querySelector('#filename').value || 'md-to-pdf'
 
         a.href = url;
-        a.download = 'md-to-pdf.pdf';
+        a.download = `${filename}.pdf`;
 
         const clickHandler = () => {
             setTimeout(() => {
@@ -197,7 +215,9 @@ <h1 hidden="hidden">md-to-pdf</h1>
 
 <footer>
     <a href="https://github.com/spawnia/md-to-pdf" title="md-to-pdf GitHub repository">
-        <svg height="30" width="30" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+        <svg height="30" width="30" viewBox="0 0 16 16">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+        </svg>
     </a>
 </footer>
 </body>