Added configuration

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

src/BindIt.js

@@ -0,0 +1,138 @@
+function bindIt(obj, base = '', withFuncs = {}, onUpdate = ()=>{}) {
+  let arrayHandler = {
+    apply: function (fn, arr, argumentsList) {
+      obj[prop]._push(argumentsList);
+      triggerUpdate(bindKey, obj[prop]);
+    }
+  };
+
+  for (let key in obj) {
+    // Make sure all child objects are proxied too
+    if (obj.hasOwnProperty(key) && Object.prototype.toString.call(obj[key]) === '[object Object]') {
+      obj[key] = bindIt(obj[key], `${base ? base + '.' : ''}${key}`, withFuncs, onUpdate);
+    }
+    // ...as well as arrays
+    if (obj.hasOwnProperty(key) && Object.prototype.toString.call(obj[key]) === '[object Array]') {
+      obj[key] = new Proxy(obj[key], arrayHander);
+    }
+  }
+
+  function wrapArray(obj, prop, bindKey) {
+    if (Object.prototype.toString.call(obj[prop]) === '[object Array]') {
+      obj[prop]._push = obj[prop].push;
+      obj[prop].push = new Proxy(obj[prop].push, arrayHandler);
+    }
+  }
+
+  function triggerUpdate(bindKey, value) {
+    let elements = document.querySelectorAll(`[bind-it-to='${bindKey}']`);
+    requestAnimationFrame(() => {
+      for (let element of elements) {
+        let bindType = element.getAttribute('bind-it-with') || 'innerText';
+        switch (bindType) {
+          case 'innerText':
+            element.innerText = value;
+            break;
+          case 'innerHTML':
+            element.innerHTML = value;
+            break;
+          case 'value':
+            element.value = value;
+            break;
+          case 'checked':
+            element.checked = value;
+            break;
+          case 'visible':
+            if (value == false || value == "") {
+              element.style.display = 'none';
+            } else {
+              element.style.display = '';
+            }
+            break;
+          default:
+            if (typeof withFuncs[bindType] === 'function') {
+              withFuncs[bindType].apply(element, [value]);
+            } else if (typeof window[bindType] === 'function') {
+              window[bindType].apply(element, [value]);
+            }
+            break;
+        }
+      }
+      if (onUpdate !== undefined) {
+        requestAnimationFrame(() => {
+          onUpdate();
+        });
+      }
+    });
+  }
+
+  let handler = {
+    get: function (obj, key) {
+      if (typeof key === 'string') {
+        // Ensure safe deep get/set (no need to set up the structute)
+        if (obj[key] === undefined) obj[key] = bindIt({}, `${base ? base + '.' : ''}${key}`, withFuncs, onUpdate);
+        return obj[key];
+      }
+    },
+
+    set: function (obj, prop, value) {
+      const bindKey = `${base ? base + '.' : ''}${prop}`;
+      // Set the new value
+      obj[prop] = value;
+      // Handle arrays
+      wrapArray(obj, prop, bindKey);
+      // Handle bindings
+      triggerUpdate(bindKey, obj[prop]);
+      return obj;
+    }
+  };
+
+  let proxied = new Proxy(obj, handler);
+
+  // Handle two-way and initial bind
+  if (base === '') {
+    let elements = document.querySelectorAll(`[bind-it-to]`);
+    for (let element of elements) {
+      let key = element.getAttribute('bind-it-to');
+      let keyParts = key.split('.');
+      let wantedValue = obj;
+      while (keyParts.length) {
+        wantedValue = wantedValue[keyParts.splice(0, 1)];
+      }
+      triggerUpdate(key, wantedValue);
+    }
+
+    let twoWayElements = document.querySelectorAll(`[bind-it-two-way]`);
+    const setObjPath = (t, path, value) => {
+      if (typeof t != "object") throw Error("non-object")
+      if (path == "") throw Error("empty path")
+      const pos = path.indexOf(".")
+      return pos == -1
+        ? (t[path] = value, value)
+        : setObjPath(t[path.slice(0, pos)], path.slice(pos + 1), value)
+    }
+    for (let element of twoWayElements) {
+      element.addEventListener('change', function () {
+        let prop = this.getAttribute('bind-it-to');
+        let bindType = this.getAttribute('bind-it-with') || 'value';
+
+        switch (bindType) {
+          case 'innerText':
+            setObjPath(proxied, prop, this.innerText);
+            break;
+          case 'innerHTML':
+            setObjPath(proxied, prop, this.innerHTML);
+            break;
+          case 'checked':
+            setObjPath(proxied, prop, this.checked);
+            break;
+          default:
+            setObjPath(proxied, prop, this.value);
+            break;
+        }
+      });
+    }
+  }
+
+  return proxied;
+}

src/dom-to-image.min.js

@@ -0,0 +1,2 @@
+/*! dom-to-image 10-06-2017 */
+!function(a){"use strict";function b(a,b){function c(a){return b.bgcolor&&(a.style.backgroundColor=b.bgcolor),b.width&&(a.style.width=b.width+"px"),b.height&&(a.style.height=b.height+"px"),b.style&&Object.keys(b.style).forEach(function(c){a.style[c]=b.style[c]}),a}return b=b||{},g(b),Promise.resolve(a).then(function(a){return i(a,b.filter,!0)}).then(j).then(k).then(c).then(function(c){return l(c,b.width||q.width(a),b.height||q.height(a))})}function c(a,b){return h(a,b||{}).then(function(b){return b.getContext("2d").getImageData(0,0,q.width(a),q.height(a)).data})}function d(a,b){return h(a,b||{}).then(function(a){return a.toDataURL()})}function e(a,b){return b=b||{},h(a,b).then(function(a){return a.toDataURL("image/jpeg",b.quality||1)})}function f(a,b){return h(a,b||{}).then(q.canvasToBlob)}function g(a){"undefined"==typeof a.imagePlaceholder?v.impl.options.imagePlaceholder=u.imagePlaceholder:v.impl.options.imagePlaceholder=a.imagePlaceholder,"undefined"==typeof a.cacheBust?v.impl.options.cacheBust=u.cacheBust:v.impl.options.cacheBust=a.cacheBust}function h(a,c){function d(a){var b=document.createElement("canvas");if(b.width=c.width||q.width(a),b.height=c.height||q.height(a),c.bgcolor){var d=b.getContext("2d");d.fillStyle=c.bgcolor,d.fillRect(0,0,b.width,b.height)}return b}return b(a,c).then(q.makeImage).then(q.delay(100)).then(function(b){var c=d(a);return c.getContext("2d").drawImage(b,0,0),c})}function i(a,b,c){function d(a){return a instanceof HTMLCanvasElement?q.makeImage(a.toDataURL()):a.cloneNode(!1)}function e(a,b,c){function d(a,b,c){var d=Promise.resolve();return b.forEach(function(b){d=d.then(function(){return i(b,c)}).then(function(b){b&&a.appendChild(b)})}),d}var e=a.childNodes;return 0===e.length?Promise.resolve(b):d(b,q.asArray(e),c).then(function(){return b})}function f(a,b){function c(){function c(a,b){function c(a,b){q.asArray(a).forEach(function(c){b.setProperty(c,a.getPropertyValue(c),a.getPropertyPriority(c))})}a.cssText?b.cssText=a.cssText:c(a,b)}c(window.getComputedStyle(a),b.style)}function d(){function c(c){function d(a,b,c){function d(a){var b=a.getPropertyValue("content");return a.cssText+" content: "+b+";"}function e(a){function b(b){return b+": "+a.getPropertyValue(b)+(a.getPropertyPriority(b)?" !important":"")}return q.asArray(a).map(b).join("; ")+";"}var f="."+a+":"+b,g=c.cssText?d(c):e(c);return document.createTextNode(f+"{"+g+"}")}var e=window.getComputedStyle(a,c),f=e.getPropertyValue("content");if(""!==f&&"none"!==f){var g=q.uid();b.className=b.className+" "+g;var h=document.createElement("style");h.appendChild(d(g,c,e)),b.appendChild(h)}}[":before",":after"].forEach(function(a){c(a)})}function e(){a instanceof HTMLTextAreaElement&&(b.innerHTML=a.value),a instanceof HTMLInputElement&&b.setAttribute("value",a.value)}function f(){b instanceof SVGElement&&(b.setAttribute("xmlns","http://www.w3.org/2000/svg"),b instanceof SVGRectElement&&["width","height"].forEach(function(a){var c=b.getAttribute(a);c&&b.style.setProperty(a,c)}))}return b instanceof Element?Promise.resolve().then(c).then(d).then(e).then(f).then(function(){return b}):b}return c||!b||b(a)?Promise.resolve(a).then(d).then(function(c){return e(a,c,b)}).then(function(b){return f(a,b)}):Promise.resolve()}function j(a){return s.resolveAll().then(function(b){var c=document.createElement("style");return a.appendChild(c),c.appendChild(document.createTextNode(b)),a})}function k(a){return t.inlineAll(a).then(function(){return a})}function l(a,b,c){return Promise.resolve(a).then(function(a){return a.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(a)}).then(q.escapeXhtml).then(function(a){return'<foreignObject x="0" y="0" width="100%" height="100%">'+a+"</foreignObject>"}).then(function(a){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+b+'" height="'+c+'">'+a+"</svg>"}).then(function(a){return"data:image/svg+xml;charset=utf-8,"+a})}function m(){function a(){var a="application/font-woff",b="image/jpeg";return{woff:a,woff2:a,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:b,jpeg:b,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}function b(a){var b=/\.([^\.\/]*?)$/g.exec(a);return b?b[1]:""}function c(c){var d=b(c).toLowerCase();return a()[d]||""}function d(a){return a.search(/^(data:)/)!==-1}function e(a){return new Promise(function(b){for(var c=window.atob(a.toDataURL().split(",")[1]),d=c.length,e=new Uint8Array(d),f=0;f<d;f++)e[f]=c.charCodeAt(f);b(new Blob([e],{type:"image/png"}))})}function f(a){return a.toBlob?new Promise(function(b){a.toBlob(b)}):e(a)}function g(a,b){var c=document.implementation.createHTMLDocument(),d=c.createElement("base");c.head.appendChild(d);var e=c.createElement("a");return c.body.appendChild(e),d.href=b,e.href=a,e.href}function h(){var a=0;return function(){function b(){return("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)}return"u"+b()+a++}}function i(a){return new Promise(functioLine truncated

src/index.html

@@ -16,12 +16,11 @@
   <meta property="og:image" content="https://opengraph.cluster.fun/opengraph/?siteTitle=&title=Bsky%20Screenshot&tags=bluesky%2Cimage%2Cscreenshot&image=https%3A%2F%2Fbsky-screenshot.cluster.fun%2Ficon.png&bluesky=&fediverse=&github=&website=bsky-screenshot.cluster.fun&bgColor=%2370c9d0&fgColor=%230b1415">
   <meta name="twitter:image" content="https://opengraph.cluster.fun/opengraph/?siteTitle=&title=Bsky%20Screenshot&tags=bluesky%2Cimage%2Cscreenshot&image=https%3A%2F%2Fbsky-screenshot.cluster.fun%2Ficon.png&bluesky=&fediverse=&github=&website=bsky-screenshot.cluster.fun&bgColor=%2370c9d0&fgColor=%230b1415">
 
-  <script tpye="application/javascript" src="https://cdn.githubraw.com/AverageMarcus/BindIt.js/refs/heads/master/BindIt.js"></script>
-  <script tpye="application/javascript" src="https://cdn.githubraw.com/tsayen/dom-to-image/refs/heads/master/dist/dom-to-image.min.js"></script>
+  <script tpye="application/javascript" src="BindIt.js"></script>
+  <script tpye="application/javascript" src="dom-to-image.min.js"></script>
 
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
-  <link rel="stylesheet" href="https://githubraw.com/AverageMarcus/milligram/master/dist/milligram.min.css">
+  <link rel="stylesheet" href="normalize.min.css">
+  <link rel="stylesheet" href="milligram.min.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -39,33 +38,34 @@
       <div class="column">
         <div class="form">
           <input type="text" id="post-url" bind-it-to="bskyPost.url" bind-it-with="value" />
-          <button id="submit">Fetch</button>
         </div>
-        <!-- Config is still WiP -->
-        <!--
-          <details>
+          <details class="config">
             <summary>Advanced Config</summary>
             <div>
-              <label>CORS Proxy: <input type="text" bind-it-to="config.corsProxy" bind-it-with="value" bind-it-two-way /></label>
-              <label>Width: <input type="number" bind-it-to="config.width" bind-it-with="value" bind-it-two-way /></label>
-              <label>Window Decoration: <input type="checkbox" bind-it-to="config.windowDecoration" bind-it-with="checked" bind-it-two-way /></label>
+              <label><span>CORS Proxy:</span><input type="text" bind-it-to="config.corsProxy" bind-it-with="value" bind-it-two-way /></label>
+              <label><span>Width:</span><input type="number" bind-it-to="config.width" bind-it-with="value" bind-it-two-way /></label>
+              <label><span>Title:</span><input type="text" bind-it-to="config.windowTitle" bind-it-with="value" bind-it-two-way /></label>
+              <label><span>Window Decoration:</span><input type="checkbox" bind-it-to="config.windowDecoration" bind-it-with="checked" bind-it-two-way /></label>
+              <label><span>Show Border:</span><input type="checkbox" bind-it-to="config.showBorder" bind-it-with="checked" bind-it-two-way /></label>
+              <label><span>Interactions:</span><input type="checkbox" bind-it-to="config.showInteractions" bind-it-with="checked" bind-it-two-way /></label>
+              <label><span>Post Date:</span><input type="checkbox" bind-it-to="config.showDate" bind-it-with="checked" bind-it-two-way /></label>
             </div>
           </details>
-        -->
       </div>
     </div>
+
     <div class="row">
       <div class="column post-wrapper">
 
-        <div id="post" bind-it-to="config.width" bind-it-with="setWidth">
-          <div class="post border" bind-it-to="config.width" bind-it-with="setWidth">
-            <div class="windowDecoration" bind-it-to="config.windowDecoration" bind-it-with="shouldShow">
+        <div id="post" class="border"  bind-it-to="config.showBorder" bind-it-with="showBorder">
+          <div class="post" bind-it-to="config.width" bind-it-with="setWidth">
+            <div class="windowDecoration" bind-it-to="config.windowDecoration" bind-it-with="visible">
               <div class="buttons">
                 <div class="roundButton" style="background-color: #ff544d; border-color: #dd3a33"></div>
                 <div class="roundButton" style="background-color: #feb429; border-color: #da9211"></div>
                 <div class="roundButton" style="background-color: #d9d8d7; border-color: #b7b5b5"></div>
               </div>
-              <div class="title" bind-it-to="bskyPost.handle"></div>
+              <div class="title"></div>
               <div class="spacer"></div>
             </div>
             <div class="header">
@@ -78,21 +78,21 @@
             <div class="body" bind-it-to="bskyPost.text" bind-it-with="asHTML"></div>
 
             <div class="embeds">
-              <div class="images" bind-it-to="bskyPost.images.exists" bind-it-with="shouldShow">
-                <div bind-it-to="bskyPost.images.image1" bind-it-with="shouldShow">
+              <div class="images" bind-it-to="bskyPost.images.exists" bind-it-with="visible">
+                <div bind-it-to="bskyPost.images.image1" bind-it-with="visible">
                   <img bind-it-to="bskyPost.images.image1" bind-it-with="imageSrc" />
                 </div>
-                <div bind-it-to="bskyPost.images.image2" bind-it-with="shouldShow">
+                <div bind-it-to="bskyPost.images.image2" bind-it-with="visible">
                   <img bind-it-to="bskyPost.images.image2" bind-it-with="imageSrc" />
                 </div>
-                <div bind-it-to="bskyPost.images.image3" bind-it-with="shouldShow">
+                <div bind-it-to="bskyPost.images.image3" bind-it-with="visible">
                   <img bind-it-to="bskyPost.images.image3" bind-it-with="imageSrc" />
                 </div>
-                <div bind-it-to="bskyPost.images.image4" bind-it-with="shouldShow">
+                <div bind-it-to="bskyPost.images.image4" bind-it-with="visible">
                   <img bind-it-to="bskyPost.images.image4" bind-it-with="imageSrc" />
                 </div>
               </div>
-              <div class="externalLink" bind-it-to="bskyPost.externalLink.exists" bind-it-with="shouldShow">
+              <div class="externalLink" bind-it-to="bskyPost.externalLink.exists" bind-it-with="visible">
                 <img id="externalLinkImage" bind-it-to="bskyPost.externalLink.image" bind-it-with="imageSrc" />
                 <div class="linkMeta">
                   <div class="linkTitle" bind-it-to="bskyPost.externalLink.title"></div>
@@ -106,7 +106,7 @@
             </div>
 
             <div class="footer">
-              <div class="interactions" bind-it-to="config.interactions" bind-it-with="shouldShow">
+              <div class="interactions" bind-it-to="config.showInteractions" bind-it-with="visible">
                 <span class="replies">
                   <svg fill="none" width="18" viewBox="0 0 24 24" height="18" style="color: rgb(111, 134, 159); pointer-events: none;"><path fill="hsl(211, 20%, 53%)" fill-rule="evenodd" clip-rule="evenodd" d="M2.002 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2h-1a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-14Z"></path></svg>
                   <span bind-it-to="bskyPost.replies"></span> replies
@@ -120,7 +120,9 @@
                   <span bind-it-to="bskyPost.likes"></span> likes
                 </span>
               </div>
-              <div class="createdAt" bind-it-to="bskyPost.createdAt"></div>
+              <div bind-it-to="config.showDate" bind-it-with="visible">
+                <div class="createdAt" bind-it-to="bskyPost.createdAt"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -128,7 +130,6 @@
       </div>
     </div>
 
-
     <div class="row">
       <div class="column">
         <img src="" id="result-image" />
@@ -140,17 +141,14 @@
         <button id="download">Download Image</button>
       </div>
     </div>
-
-    <div class="container">
-      <div class="row">
-        <div class="column column-60 column-offset-20" style="text-align: center;">
-          Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
-        </div>
-      </div>
-    </div>
   </div>
 
   <div class="container">
+    <div class="row">
+      <div class="column column-60 column-offset-20" style="text-align: center;">
+        Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
+      </div>
+    </div>
     <div class="row">
       <div class="column column-60 column-offset-20">
         <footer>

src/milligram.min.css

@@ -0,0 +1,3 @@
+*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#27162a;font-family:'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6;padding:1em}footer{text-align:center;margin-top:2em;padding-top:1em;padding-bottom:1em;border-top:1px solid #27162a}footer a{white-space:nowrap}blockquote{border-left:0.3rem solid #27162a;margin-left:0;margin-right:0;padding:1rem 1.5rem;font-weight:bold}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#ef71a8;border:0.1rem solid #ef71a8;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#89aee1;border-color:#89aee1;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#89aee1;border-color:#89aee1}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#ef71a8}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#89aee1;color:#89aee1}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#89aee1}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#ef71a8}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#89aee1}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#89aee1}code{background:#e1e1e1;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem}pre{background:#e1e1e1;border-left:0.3rem solid #ef71a8;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #89aee1;margin:3.0rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:0.1rem solid #27162a;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='texLine truncated
+
+/*# sourceMappingURL=milligram.min.css.map */

src/normalize.min.css

@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+/*# sourceMappingURL=normalize.min.css.map */

src/script.js

@@ -1,76 +1,100 @@
-function imageSrc(value) {
-  if (value) {
-    this.setAttribute('src', value);
-  } else {
-    this.setAttribute('src', "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==");
-  }
-}
-
-function asHTML(value) {
-  this.innerHTML = value;
-}
-
-function shouldShow(value) {
-  if (value == false || value == "") {
-    this.style.display = 'none';
-  } else {
-    this.style.display = '';
-  }
-}
-
-function setWidth(value) {
-  this.style.width = `${value}px`;
-}
-
-var updateImageTimeout;
-function updateImage() {
-  if (updateImageTimeout) {
-    window.cancelAnimationFrame(updateImageTimeout);
-  }
-  updateImageTimeout = window.requestAnimationFrame(function() {
-    domtoimage.toPng(document.getElementById('post'), { cacheBust: false })
-      .then(function (dataUrl) {
-        document.getElementById('result-image').src = dataUrl;
-      });
-
-  });
-}
-[...document.querySelectorAll('#post img'), ...document.querySelectorAll('#input-form input')].forEach(el => el.addEventListener('load', updateImage));
-
 (() => {
-  let {bskyPost, config} = bindIt({
-    config: {
-      corsProxy: `https://corsproxy.io/?url=`,
-      width: 600,
-      windowDecoration: true,
-      showInteractions: true
-    },
-    bskyPost: {
-      url: 'https://bsky.app/profile/averagemarcus.bsky.social/post/3lwyxxwjnxc2k',
-      handle: '',
-      displayName: '',
-      avatar: '',
-      text: '',
-      createdAt: '',
-      likes: 0,
-      reposts: 0,
-      replies: 0,
-      externalLink: {
-        exists: false,
-        title: "",
-        description: "",
-        image: "",
-        domain: ""
+  let {bskyPost, config} = bindIt(
+    {
+      config: {
+        corsProxy: `https://corsproxy.io/?url=`,
+        width: 600,
+        windowTitle: "$handle", // $handle, $displayName, $url
+        windowDecoration: true,
+        showInteractions: true,
+        showDate: true,
+        showBorder: true
       },
-      images: {
-        exists: false,
-        image1: "",
-        image2: "",
-        image3: "",
-        image4: "",
+      bskyPost: {
+        url: 'https://bsky.app/profile/averagemarcus.bsky.social/post/3lwyxxwjnxc2k',
+        handle: '',
+        displayName: '',
+        avatar: '',
+        text: '',
+        createdAt: '',
+        likes: 0,
+        reposts: 0,
+        replies: 0,
+        externalLink: {
+          exists: false,
+          title: "",
+          description: "",
+          image: "",
+          domain: ""
+        },
+        images: {
+          exists: false,
+          image1: "",
+          image2: "",
+          image3: "",
+          image4: "",
+        }
       }
+    },
+    "",
+    {
+      imageSrc: function(value) {
+        if (value) {
+          this.setAttribute('src', value);
+        } else {
+          this.setAttribute('src', "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==");
+        }
+      },
+      asHTML: function(value) {
+        this.innerHTML = value;
+      },
+      setWidth: function(value) {
+        this.style.width = `${value}px`;
+      },
+      showBorder: function(value) {
+        if (value) {
+          this.style.borderStyle = "double";
+        } else {
+          this.style.borderStyle = "none";
+        }
+      }
+    },
+    updateImage
+  );
+
+  var updateImageTimeout;
+  function updateImage() {
+    if (updateImageTimeout) {
+      window.cancelAnimationFrame(updateImageTimeout);
     }
-  });
+    setWindowTitle();
+    updateImageTimeout = window.requestAnimationFrame(function() {
+      domtoimage.toPng(document.getElementById('post'), { cacheBust: false })
+        .then(function (dataUrl) {
+          document.getElementById('result-image').src = dataUrl;
+        });
+
+    });
+  }
+  [...document.querySelectorAll('#post img')].forEach(el => el.addEventListener('load', updateImage));
+  [...document.querySelectorAll('#input-form input')].forEach(el => el.addEventListener('change', updateImage));
+
+  function setWindowTitle() {
+    switch (config.windowTitle) {
+      case "$handle":
+        document.querySelector('.windowDecoration .title').innerText = bskyPost.handle;
+        break;
+      case "$displayName":
+        document.querySelector('.windowDecoration .title').innerText = bskyPost.displayName;
+        break;
+      case "$url":
+        document.querySelector('.windowDecoration .title').innerText = bskyPost.url.replaceAll("https://", "");
+        break;
+      default:
+        document.querySelector('.windowDecoration .title').innerText = config.windowTitle;
+        break;
+    }
+  }
 
   function isValidHttpUrl(string) {
     let url;
@@ -176,9 +200,13 @@ function updateImage() {
     updateImage();
   }
 
-  document.getElementById('submit').addEventListener('click', loadPost);
   document.getElementById('post-url').addEventListener('change', loadPost);
   document.getElementById('post-url').addEventListener('keyup', loadPost);
+  document.getElementById('post-url').addEventListener('paste', (ev) =>{
+    let data = ev.clipboardData.getData("text/plain");
+    document.getElementById('post-url').value = data;
+    loadPost();
+  });
   window.requestAnimationFrame(loadPost);
 
   document.getElementById('download').addEventListener('click', function() {
@@ -187,4 +215,8 @@ function updateImage() {
     link.href = document.getElementById('result-image').src;
     link.click();
   });
+
+  window.debugBskyPost = function() {
+    console.log(bskyPost, config);
+  }
 })();

src/style.css

@@ -11,6 +11,27 @@ body {
   margin: 2px;
 }
 
+.config > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 24px;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  flex-direction: row;
+  text-align: center;
+}
+.config > div label input {
+  margin: 0;
+  display: block;
+}
+.config > div label input[type=checkbox] {
+  margin: 15px auto;
+  scale: 2;
+}
+.config > div label:nth-of-type(1) {
+  flex-basis: 100%;
+}
+
 .post-wrapper {
   overflow: hidden;
   position: relative;
@@ -20,7 +41,6 @@ body {
   position: absolute;
   left: -9999;
   top: -9999;
-  width: 600px;
   margin-left: -10px;
 }