Private server-side fetched async gravatar component in Phlex

gravatar.rb

# frozen_string_literal: true

class Components::Gravatar < Ode::Base
	include Flecks

	prop :size, Integer, default: 80
	prop :alt, String
	prop :email, String do |value|
		value.to_s.strip.downcase
	end

	def view_template
		div(**attributes) do
			Slot(fetch) do |slot|
				slot.content do |data|
					img(
						src: "data:image/png;base64,#{data}",
						width: @size,
						height: @size,
						alt: @alt,
					)
				end
			end
		end
	end

	private

	def fetch
		proc do
			Base64.strict_encode64(
				Net::HTTP.get_response(
					URI("https://www.gravatar.com/avatar/#{digest}?s=#{@size * 2}"),
				).body,
			)
		end
	end

	def digest
		Digest::MD5.hexdigest(@email)
	end

	def attributes
		{
			class: "rounded-full overflow-clip inline-block bg-zinc-200",
			style: {
				width: "#{@size}px",
				height: "#{@size}px",
			},
		}
	end
end