Action

Fancy Post

Posted by @jeffmueller, Last update about 1 month ago - Unlisted

Take an HTML prompt, and either post or save the post. Cancel to delete it forever. Because sometimes you don’t want to send a post. You can post to Micro.blog, Twitter, or both.

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
      <title>"Post Composer"</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
        @charset "utf-8";
    
        :root {
          --main-bg-color: white;
          --main-color: black;
          --alternate-bg-color: #efefef;
          --alternate-color: #222222;
          --main-border-color: #BBBBBB;
          --link-color: #48BB78;
        }
    
        @media (prefers-color-scheme: dark) {
          :root {
            --main-bg-color: #222222;
            --main-color: #eeeeee;
            --alternate-bg-color: #444444;
            --alternate-color: #cccccc;
            --main-border-color: #AAAAAA;
              --link-color: #48BB78;
          }
        }
    
        html {
          font-size: 100%;
          font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
          line-height: 1em;
          height: 100%;
        }
    
        body {
          margin: 0;
          padding: 1em;
          background-color: var(--main-bg-color);
          color: var(--main-color);
          height: 100%;
        }
    
        @media (max-device-width: 480px) {}
    
        @media (min-device-width: 481px) {
          body {
            margin: auto;
            max-width: 600px;
          }
        }
    
        blockquote {
          font-style: italic;
          margin: 1.5em 2em;
          padding: 1em;
          background-color: var(--alternate-bg-color);
          color: var(--alternate-color);
        }
    
        a {
          color: var(--link-color);
        }
    
        h4 {
        	margin: .25em 0;
        	padding: 0;
        }
    
        img {
          max-width: 90%;
        }
        
    	button {
    		color: #fff !important;
    		text-transform: uppercase;
    		text-decoration: none;
    		background: var(--link-color);
    		font-size: .9em;
    		padding: .5em 1em;
    		border-radius: 8px;
    		display: inline-block;
    		border: none;
    		transition: all 0.4s ease 0s;
    	}
    	button:hover {
    		letter-spacing: 1px;
    		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
    		transition: all 0.4s ease 0s;
    	}
            button.cancel {
                 background-color:#bbbbbb;
            }
           
           form {
    		background-color: var(--main-bg-color);
    		color: var(--main-color);
    	}
    
    	textarea {
    		padding: 1em;
    		border-radius: 5px;
    	}
    
    	@media (prefers-color-scheme: dark) {
    		textarea {
    			border-color: #fff;
    		}
    	}
    
      </style>
    </head>
    
    <body>
    <script>
    // scripting taken from https://www.codexworld.com/live-character-counter-javascript/
    function countChars(obj){
        var maxLength = 256;
        var strLength = obj.value.length;
        var charRemain = (maxLength - strLength);    
        if(charRemain < 0){
            document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
        }else{
            document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
        }
    }
    </script>
    
    <div id="prompt" style="margin: auto; width: 80%; height: 40%;">
    <h2 style="text-align: center;">Post Composer</h2>
    
    <form style="text-align:center"> <textarea id="postText" style="margin:auto;width:90%;height:120px;font-size:100%;background-color: var(--main-bg-color);color: var(--main-color);font-family: -apple-system, sans-serif;maxlength="512" autofocus="true" onkeyup="countChars(this)"></textarea>
    <p id="charNum" style="text-align:center;">256 characters remaining</p>
    
    <p style="text-align: center;"><input type="checkbox" id="tweet-it" checked="checked"><label for="tweet-it">Twitter</label> <input type="checkbox" id="blog-it" checked="checked"><label for="blog-it">Micro.blog</label></p>
    
    </form>
    
    <p style="text-align: center;">
    <button onclick="doCommand('postIt'); return false;">Post</button>
    <button onclick="doCommand('save'); return false;">Save</button>
    <button class="cancel" onclick="Drafts.cancel(); return false;"">Cancel</button>
    </p>
    
    <script>
    
    const text = document.getElementById('postText');
    const tweet = document.getElementById('tweet-it');
    const micro = document.getElementById('blog-it');
    
    function doCommand(cmd) {
    	Drafts.send("command", cmd);
    	Drafts.send("postText", text.value);
    	Drafts.send("twitter", tweet.checked)
    	Drafts.send("micro", micro.checked)
    	Drafts.continue();
    }
    
    document.getElementById('postText').focus();
    </script>
    </div>
    </body>
    
    </html>
  • script (iOS only)

    let f = () => {
      let cmd = context.previewValues["command"];
      let text = context.previewValues["postText"];
      let tweet_it = context.previewValues["twitter"];
      let micro = context.previewValues["micro"];
    	
      if (!cmd) { return; }
    	
      if (cmd == "postIt") {
        let d = new Draft();
        d.content = text;
        draft.addTag("status");
        draft.update();
    		
        if (tweet_it == true) {
          var twitter = Twitter.create();
          var success = twitter.updateStatus(text);
          if (success) {
            console.log(twitter.lastResponse);
          }
          else {
            console.log(twitter.lastError);
            context.fail();
          }
        }
    		
        if (micro == true) {
          var credential = Credential.create("Micro.blog", "Insert Micro.blog app token generated on Micro.blog account page.");
          credential.addTextField("apptoken", "App Token");
          credential.authorize();
          var appToken = credential.getValue("apptoken");
          var endpoint = "https://micro.blog/micropub";
          var http = HTTP.create();
          var response = http.request({
            "url": endpoint,
            "method": "POST",
            "encoding": "form",
            "data": {
              "h": "entry",
              "content": text
            },
            "headers": {
              "Authorization": "Bearer " + appToken
            }
          });
    
          console.log("Response: " + response.statusCode);
    
          if (response.statusCode != 200 && response.statusCode != 202) {
            context.fail();
          }
        }
      }
    };
    
    f();

Options

  • After Success Default
    Notification Info
    Log Level Info
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.