color pick background image from hugo built html file

readme.md

issues installing colorific on alpine docker image see this post for dependencies https://stackoverflow.com/a/44044479

color.sh

#!/usr/bin/env bash

# color pick the homepage
image_filename="public/$(sed -n 's/.*data-color="\([^"]*\).*/\1/p' public/index.html)"
echo "Picking color from : ${image_filename}"
if type "colorific" > /dev/null && [ -f $image_filename ]; then
    picked_color=$(echo $image_filename | colorific | cut -d# -f7)
    echo "Picked color : ${picked_color}"
    sed -i "/^[[:space:]]*.home-blog-bg/,/}$/ s/background-color:.*/background-color: #$picked_color;}/g" public/index.html
else
    echo "image or library not found"
fi

index.html

<!-- this is public/index.html -->

<style type="text/css">
   .home-blog,
   .home-blog-bg {
      background-color: #FFFFFF;
   }
</style>

<div class="row">
    <div class="col-md-7" data-color="img/blog/some-blog-post/some-blog-post-hero.jpg"></div>
    <div class="col-xs-12 col-md-2">
        <div class="home-blog-bg">
          <p>Blah blah here is the content from the post</p>
        </div>
    </div>
</div>

output

Picking color from : public/img/blog/some-blog-post/some-blog-post-hero.jpg
Picked color : 7292fe


...


<style type="text/css">
   .home-blog,
   .home-blog-bg {
      background-color: #7292fe;
   }
</style>

requirements.txt

colorific==0.3