Add post text

src/index.pug

@@ -9,10 +9,14 @@ html(lang="en")
         link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap")
     body
         header
-            h1 toot
-            p Share links on any Mastodon instance
+            h1 🐘 toot
+            p
+                | Quickly post on any Mastodon instance
         main
             form#form
+                section
+                    label(for="text") Post text
+                    textarea#text(rows=6, name="text", required)
                 section
                     label(for="instance") Mastodon instance URL
                     input#instance(type="url", name="instance", placeholder="https://", required)

src/script/index.js

@@ -3,14 +3,15 @@ if (remembered != null) {
     document.getElementById('instance').value = remembered;
 }
 
-var parsedQuery = {};
-
 var paramPairs = window.location.search.substr(1).split('&');
 var paramPairsLength = paramPairs.length;
 
 for (var i = 0; i < paramPairsLength; i++) {
     var paramPair = paramPairs[i].split('=');
-    parsedQuery[paramPair[0]] = paramPair[1];
+    if (paramPair[0] === 'text') {
+        document.getElementById('text').value = decodeURIComponent(paramPair[1]);
+        break;
+    }
 }
 delete i
 delete paramPair
@@ -19,6 +20,7 @@ document
   .getElementById('form')
   .addEventListener('submit', function (e) {
     e.preventDefault();
+    var text = e.target.elements['text'].value;
     var instance = e.target.elements['instance'].value;
     var remember = e.target.elements['remember'].checked;
 
@@ -34,6 +36,6 @@ document
         window.localStorage.setItem('mastodon_instance', instance);
     }
 
-    var shareUrl = instance + "share?text=" + parsedQuery.text;
+    var shareUrl = instance + "share?text=" + encodeURIComponent(text);
     window.open(shareUrl, '_blank', 'noopener,noreferrer')
 })

src/style/main.scss

@@ -71,32 +71,11 @@ main {
             display: inline-block;
         }
 
+        textarea,
         input {
             font-size: 1rem;
             border-radius: 4px;
 
-            &[type=url] {
-                color: inherit;
-                width: 100%;
-                outline: 0;
-                font-family: inherit;
-                resize: vertical;
-                background-color: $input-bg;
-                border: 1px solid color.scale($input-bg, $lightness: -25%);
-                padding: 10px;
-
-                &:focus,
-                &:active {
-                    border: 1px solid $button-bg;
-                    background-color: color.scale($input-bg, $lightness: +5%);
-                }
-
-                &::placeholder {
-                    color: inherit;
-                    opacity: 0.3;
-                }
-            }
-
             &[type=checkbox] {
                 margin-right: 8px;
             }
@@ -120,6 +99,29 @@ main {
 
             transition: background-color 300ms ease, border 300ms ease;
         }
+
+        textarea,
+        input[type=url] {
+            color: inherit;
+            width: 100%;
+            outline: 0;
+            font-family: inherit;
+            resize: vertical;
+            background-color: $input-bg;
+            border: 1px solid color.scale($input-bg, $lightness: -25%);
+            padding: 10px;
+
+            &:focus,
+            &:active {
+                border: 1px solid $button-bg;
+                background-color: color.scale($input-bg, $lightness: +5%);
+            }
+
+            &::placeholder {
+                color: inherit;
+                opacity: 0.3;
+            }
+        }
     }
 }