How to set custom logo in a container?

[air3ijai]

I'm checking for a way to set a custom image for the faucet, deployed in the container.

Configuration key faucetImage, in the config, uses full path which is relative to the /app/static folder which is a part of the container. In that way, we can't point it to the persistent volume.

Is there a way to put image inside the --datadir=/data or any other custom location?

faucetImage: "/data/custom-logo.jpg"

[pk910]

Heya @air3ijai

The value specified by faucetImage needs to be a reachable URL. For customization, I usually just point it to another domain and host the image on a separate static site, eg.

faucetImage: "https://faucets.pk910.de/custom-logo.jpg"

To include some custom image in the container, you'll need to mount it to the webroot directory within the container. The webroot within the container is located at /app/static.

You could mount some additional "custom" folder like this:

docker run -d --restart unless-stopped --name=powfaucet -v $(pwd):/config -v $(pwd)/custom:/app/static/custom -p 8080:8080 -it pk910/powfaucet:v2-stable --datadir=/config

The contents of that folder will then be accessible via https://your-faucet.xy/custom/..., so you can reference your own logo as

faucetImage: "/custom/custom-logo.png"

The datadir itself (/data in your example) should never be accessible from public, as it'd be fatal to serve the config file with proivate keys via a public accessible URL.

[air3ijai]

@pk910, thank you for the clarifications, just pointed faucet to the logo on S3 and it works fine.

Second option with a custom path looks good, but in Kubernetes it would be one more PVC, so S3 option works well for now.

[air3ijai]

And a quick question, just to not open a separate issue - is there a way to center faucetTitle: "Holesky PoW Faucet"?

[pk910]

Not out of the box right now.

There is a hacky way to inject custom html to every page. Add the following setting to your faucet-config.yaml:

faucetStatus:
  yaml: "/data/faucet-status.yaml"

Then create a faucet-status.yaml in your datadir with the following content:

- key: hacky-css-injection
  prio: 1
  ishtml: true
  text: |
    <span id='dummy-inject-marker'></span>
    <img onload="(function() { var e = document.getElementById('dummy-inject-marker').parentElement; e.parentElement.style.display = 'none'; })()" src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' />
    <style>.faucet-title h1 { text-align: center; } </style>
  level: none

It's extremely hacky, it abuses the notification system to inject some custom html code. The js snippet within the img onload tag prevents the notification from being displayed on the page. But you can pass along custom css or js code that modifies the page. Notifications are displayed consistently on all faucet pages, that's basically the way how I'm injecting the custom header bar to each of the public instances without touching the code for it.

As said, extremely hacky :D I'll probably gonna add a setting to pass some custom code to all pages in a less hacky way when I have some time to take care of it :)

[air3ijai]

Thank you, works as expected!

[air3ijai]

It works even if we comment faucetStatus key, probably because of the default value?

https://github.com/pk910/PoWFaucet/blob/0718e1c3a8cc1a5c64876f887c523e786272d031/src/config/DefaultConfig.ts#L65