Donation qr code not generated

[mrfoxie]

bitcoin = "bitcoin address"
buymeacoffee = "https://www.buymeacoffee.com/username"

[sysadmin-info]

See donation.html It contains the QR code, but I have no idea what to do there to fix the problem.

 {{ else }}
          <div class="donation__item donation__dropup" title="{{ $name }}" aria-label="{{ $name }}" data-type="donation">
            {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
            <div class="donation__dropup--content">
              <img data-src="{{ $path | relURL }}" alt="{{ $name }} QR Code" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload"/>
            </div>
          </div>
        {{ end }}

[sysadmin-info]

I think it requires properly generated and formatted QR code.

The simplest option is provided here. Someone just generated QR code and saved it as a png file. See the screenshot.

Add support visitor count, page view count, donation component

Below there is a more complicated approach

The result you can see on my website: Sysadmin

See an example for buymeacoffee else condition. You add this in params.toml under [donationOptions] just by adding buymeacoffee = "https://www.buymeacoffee.com/username"

Then you have to modify the donation.html file and of course add a proper SVG icon for a donate system in directory /layouts/partials/svgs/donation, like I did by adding buymeacoffee.svg there. I can share the SVG icon for buy me a coffee if you are interested in.

See a modified donation.html

{{ if $.Param "donationOptions.enable" }}
<div class="donation">
  <div class="donation__message">
    {{ i18n "donate-message" }}
  </div>
  <div class="donation__icons">
    {{ range $name, $path := $.Param "donationOptions" }}
      {{ if (and $path (ne $name "enable")) }}
        {{ if in $name "patreon" }}
          <a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}" class="donation__item" target="_blank" rel="noreferrer" data-type="donation">
            {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
          </a>
        {{ else if in $name "paypal" }}
          <a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}" class="donation__item" target="_blank" rel="noreferrer" data-type="donation">
            {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
          </a>
        {{ else if in $name "buymeacoffee" }}
        <div class="donation__item donation__dropup" title="{{ $name }}" aria-label="{{ $name }}" data-type="donation">          
            <a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}" class="donation__item" target="_blank" rel="noreferrer" data-type="donation">
              {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
            </a>
          <div class="donation__dropup--content">
            <img src="data:image/svg+xml,here should go converted QR code (URL-encoded)" alt="{{ $name }} QR Code" class="lazyload"/>
          </div>
        </div>        
        {{ else if in $name "buycoffee" }}
          <div class="donation__item donation__dropup" title="{{ $name }}" aria-label="{{ $name }}" data-type="donation">          
            <a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}" class="donation__item" target="_blank" rel="noreferrer" data-type="donation">
              {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
            </a>
          <div class="donation__dropup--content">
            <img src="data:image/svg+xml,here should go converted QR code (URL-encoded)" alt="{{ $name }} QR Code" class="lazyload"/>
            </div>
          </div>
        {{ else }}
          <div class="donation__item donation__dropup" title="{{ $name }}" aria-label="{{ $name }}" data-type="donation">
            {{ partial (print "svgs/donation/" $name ".svg") (dict "width" 35 "height" 35) }}
            <div class="donation__dropup--content">
              <img data-src="{{ $path | relURL }}" alt="{{ $name }} QR Code" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload"/>
            </div>
          </div>        
        {{ end }}
      {{ end }}
    {{ end }}
  </div>
</div>
{{ end }}

The problem is that for wechat, alipay and bitcoin you have to perform exactly the same steps as I did for the buymeacoffee and create 'elses' separately for each donate.

I am wondering how the original QR code has been generated. I converted it to SVG format but in fact this is not a QR code.

So the best option is to use some online QR generator and then use a python script to URL-encode the SVG.

To convert the provided SVG to a URL-encoded string suitable for embedding in an HTML img tag, follow these steps:

1. Minimize the SVG content by removing unnecessary spaces and line breaks.
2. URL-encode the minimized SVG content.

Here's the process:

Step 1: Minimize and URL-encode the SVG

You can use an online URL encoder or write a simple script in Python to minimize and URL-encode the SVG content. Here is a Python script to do that:

echo "import re
import urllib.parse

# Place your SVG content here
svg_content = ''''''

# Function to remove unnecessary whitespace and comments
def minimize_svg(svg):
    # Remove XML declaration
    svg = re.sub(r'<\?xml.*?\?>', '', svg)
    # Remove comments
    svg = re.sub(r'<!--.*?-->', '', svg, flags=re.DOTALL)
    # Remove unnecessary whitespace between tags
    svg = re.sub(r'>\s+<', '><', svg)
    # Remove whitespace at the beginning and end
    svg = svg.strip()
    return svg

# Minimize the SVG content
minimized_svg = minimize_svg(svg_content)

# Encode the minimized SVG content
encoded_svg = urllib.parse.quote(minimized_svg)

# Generate the data URI
data_uri = f"data:image/svg+xml,{encoded_svg}"

print(data_uri)
" > svg-converter.py

You can see I am using echo, because this way you will be able to save it to a file.

The you will execute it by typing in command line:

python3 svg-converter.py

This script will produce a URL-encoded SVG data URI that you can use directly in an HTML img tag.

Resulting Data URI

Once you run the script, you will get a long string that starts with data:image/svg+xml, followed by the URL-encoded SVG content. This is the string you should use as the src attribute in your img tag. Here is a simplified example:

<img src="data:image/svg+xml,<your-encoded-svg>" alt="SVG Image">

Replace <your-encoded-svg> with the output of the Python script.