Implement hextra/hero-container with optional front-page logo

[fmunteanu]

Feature Description

Hi @imfing,

On Hextra front-page, there is a lot of unused space on the right side of headline, ideal to insert a logo image.

Proposed Solution

I created the following layouts/shortcodes/hextra/hero-container.html shortcode, implementing a container with optional logo image and related link:

{{- $class := .Get "class" -}}
{{- $cols := .Get "cols" | default 2 -}}
{{- $image := .Get "image" -}}
{{- $imageClass := .Get "imageClass" -}}
{{- $imageLink := .Get "imageLink" -}}
{{- $imageLinkExternal := hasPrefix $imageLink "http" -}}
{{- $imageTitle := .Get "imageTitle" -}}
{{- $imageWidth := .Get "imageWidth" | default 350 -}}
{{- $imageHeight := .Get "imageHeight" | default 350 -}}
{{- $style := .Get "style" -}}

{{- $css := printf "--hextra-feature-grid-cols: %v; %s" $cols $style -}}
{{- $href := cond (hasPrefix $imageLink "/") ($imageLink | relURL) $imageLink -}}

<div
  class="{{ $class }} hextra-feature-grid hx-grid sm:max-lg:hx-grid-cols-2 max-sm:hx-grid-cols-1 hx-gap-4 hx-w-max not-prose"
  {{ with $css }}style="{{ . | safeCSS }}"{{ end }}
>
  <div class="grid-col-span-1">
    {{ .Inner }}
  </div>
  {{- with $image }}
  <div class="hx-mx-auto hx-px-6">
    {{ with $href }}<a href="{{ $href }}" {{ with $imageLinkExternal }}target="_blank" rel="noreferrer"{{ end }}>{{ end }}
      <img
        {{ with $imageClass }}class="{{ $imageClass }}"{{ end }} src="{{ $image }}" 
        width="{{ $imageWidth }}" height="{{ $imageHeight }}" {{ with $imageTitle }}alt="{{ $imageTitle }}"{{ end }}
      />
    {{ with $href }}</a>{{ end }}
  </div>
  {{ end -}}
</div>

Code Usage

Based on my tests, an image with 350px height will perfectly align with the existing Hextra badge, headline and subtile group. Example of hextra/hero-container shortcode usage, with image pulled from /static/images directory:

{{< hextra/hero-container
  image="images/logo-services.svg"
  imageLink="https://github.com/axivo/k3s-cluster"
  imageTitle="Kubernetes Services"
>}}
{{< hextra/hero-badge link="https://github.com/axivo/k3s-cluster">}}
  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
  <span>Contribute</span>
  {{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}}

<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
  <span class="hx-whitespace-nowrap">
    High Availability K3s Cluster
  </span><br class="sm:hx-block hx-hidden" />
  Deployed with Ansible
{{< /hextra/hero-headline >}}
</div>

<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
  <span class="hx-whitespace-nowrap">
    Documentation and tutorials to deploy, manage and monitor
  </span><br class="sm:hx-block hx-hidden" />
  your Kubernetes cluster and related components, in style.
{{< /hextra/hero-subtitle >}}
</div>

<div class="hx-mb-6">
{{< hextra/hero-button text="Get Started" link="wiki" >}}
</div>
{{< /hextra/hero-container >}}

Implementation Result

Hovering the mouse over logo image will open the related link into a new tab:

[fmunteanu]

@imfing I created #389.