hostr-image-upload

hostr-image-upload
usage:
⎗
1	./hostr-image-upload.sh image.png image.html
uploader:
⎗
✓
t=$(cat <<EOF
<html>
  <head>
    <meta property="og:type" content="image" />
    <meta property="og:title" content="{IMAGE_TITLE}" />
    <meta property="og:site_name" content="hostr" />
    <meta property="og:description" content="image description" />
    <meta property="og:image" content="data:image/webp;base64,{IMAGE_DATA}"/>
    <meta property="og:image:width" content="2160" />
    <meta property="og:image:height" content="1080" />
    <style>
    body {
      margin: 0;
      text-align: center;
      background: black;
    }
    img {
      width: {IMAGE_WIDTH}px;
      height: {IMAGE_HEIGHT}px;
    }
    img {
      object-fit: cover;
    }
    div:not(.active) img {
      max-width: 100vw;
      max-height: 100vh;
    }
    </style>
  </head>
  <body>
    <div></div>
    <script>
    img = document.createElement("img")
    img.src = document.querySelector('meta[property="og:image"]').content
    document.querySelector("div").append(img)
    img.onclick = function(){
      this.parentElement.classList.toggle("active")
    }
    </script>
  </body>
</html>
EOF
)

convert $1 -background black -resize 2160x1080 -compose Copy -gravity center -extent 2160x1080 -quality 57 image.webp
image=$(cat image.webp | base64 -w 0)
title=$(basename $1)
width=$(identify -format "%[fx:w]" $1)
height=$(identify -format "%[fx:h]" $1)
nheight=1080
nwidth=$(echo "scale=1; $width / $height * $nheight" | bc | grep -oP "^\d+")
t=${t/"{IMAGE_DATA}"/$image}
t=${t/"{IMAGE_TITLE}"/$title}
t=${t//"{IMAGE_WIDTH}"/$nwidth}
t=${t//"{IMAGE_HEIGHT}"/$nheight}

mkdir -p $PWD/tmp
echo -e "$t" > $PWD/tmp/index.html
hostr deploy -d $2 -p $PWD/tmp/
Warning
