feat: Add support for custom footer

[Gr3q]

See the documentation changes for explanation.

Still, I'm not sure if this is a feature that is wanted as is because it forces you to write html.

Unfortunately I couldn't find a way to use a markdown file as a partial instead unless it's like this https://stackoverflow.com/a/39800156.

[netlify]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	c36a1ef
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-hextra/deploys/676545f39cfe550008fd7006
😎 Deploy Preview	https://deploy-preview-518--hugo-hextra.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[imfing]

@Gr3q thank you, supporting custom footer is a nice feature to add.

I was thinking we can simplify your approach by adding custom/footer-end.html, and then update the footer.html to include it:

     <div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
       {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
       {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
+      {{ partial "custom/footer-end.html" . }}
     </div>

thus, we can use hugo template syntax like this to render markdown from either in the template or load a param from hugo config file

{{ "**hello**" | markdownify }}

<!-- or load from your own custom parameter -->
{{ site.Params.footer.customFooter | markdownify }}

example hugo.yaml

  footer:
    enable: true
    displayCopyright: false
    displayPoweredBy: false
    width: normal
    customFooter: "**custom footer**" # you can change or add your own param

output:

[Gr3q]

thus, we can use hugo template syntax like this to render markdown from either in the template or load a param from hugo config file

markdownify only supports markdown features as long as it resolves to a single paragraph, so I can't do tables headings etc if I want to (I don't, but some other layout would come handy). And I can do the same with the copyright string.

I was thinking we can simplify your approach by adding custom/footer-end.html, and then update the footer.html to include it:

I started with that and I found the padding around too limiting. Still it's a good idea, except the footer should be sandwiched between the copyright/powered by text and the theme buttons (if it's a page that has the theme buttons there) separated by dividers.

The reason is that most websites have the copyright section on the very bottom but I can't link to some dataset to back up that claim.

[Gr3q]

So I can change the PR to complement the copyright section instead of replacing it.

In that case I'll try to upstream some other things in more PRs like changing the footer background/text color and the copyright section layout (centered and in a row instead of having a column)

[imfing]

footerButtonColor is not necessary here right?

[Gr3q]

Not really, but the other option is to dig through the hextra codebase to match it. I'll remove it.

[imfing]

I would avoid adding a new flag if possible

[Gr3q]

I can remove it but then I don't know when I should show the separator and when I shouldn't.

[Gr3q]

Actually, I just remove the separator, people can add it back in their custom footer.

[Gr3q]

I also added a visually breaking change to only show footer section for Copyright and PoweredBy if at least one of them are enabled. This saves people that don't want the default layout of that section and they want to recreate it in the custom section.

Out of the box the footer is there unless people explicitly disable poweredby and the copyright section.

Edit: I added 2 necessary variables that you would have a hard time solving with css alone, especially if you want avoid duplicate dividers in all cases.

[imfing]

Let's keep the left and right padding.

I tried your change with a custom html footer in custom/footer.html

<div style="display: flex; justify-content: space-between; padding-top: 20px;">
  <div style="flex: 1;">
      <h4 style="margin-bottom: 10px; font-weight: 600;">About Us</h4>
      <p>Learn more about our company.</p>
  </div>
  <div style="flex: 1;">
      <h4 style="margin-bottom: 10px; font-weight: 600;">Services</h4>
      <ul style="list-style: none; padding: 0;">
          <li style="margin: 5px 0;">Web Design</li>
          <li style="margin: 5px 0;">SEO</li>
          <li style="margin: 5px 0;">Consulting</li>
      </ul>
  </div>
  <div style="flex: 1;">
      <h4 style="margin-bottom: 10px; font-weight: 600;">Contact</h4>
      <p>Email: [email protected]</p>
      <p>Phone: 123-456-7890</p>
  </div>
</div>

It works pretty well

[imfing]

I'd prefer keep the left and right padding, e.g.

<div class="{{ $footerWidth }} hx-mx-auto hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400" >

to make this section styling more consistent

[Gr3q]

Fair, but I will add a custom class so people can customize its style

[imfing]

what are these variables used for exactly?

[Gr3q]

aboveVisible - My use case is that I want to add a separator on the top of my custom footer but on pages where the theme/language switcher is above the footer I would end up with two separators that is visually noticeable.

Solving that with only CSS in custom.css might be impossible or extremely hacky, so it's useful to expose this in case users want to change the content or styling of the custom footer based on what is above.

belowVisible is the same thing for the PoweredBy/Copyright section but I admit I can't think of a concrete use case for this at the moment. Maybe an user wants to add extra margin on the bottom if the section is not visible? Although currently that section is not dynamic.