Adding ability to add links to icons and titles on homepage section2 + fixing social media icons in footer

hugo.yaml

@@ -115,12 +115,14 @@ params:
         The Mothership project is a collection of tools and services
         to archive RPM package source and attest to their authenticity.
       icon: mship_gopher_dark
+      url: https://github.com/openela/mothership
     - title: ELValidated
       text: |
         ELValidated is a verification and interoperability suite for Enterprise
         Linux operating systems that gives organizations and developers the
         ability to verify the compatibility of their Enterprise Linux distributions.
       icon: elvalidated
+      url: /elvalidated/
   section3:
     title: OpenELA
     image: illustrations/github.svg
@@ -133,16 +135,16 @@ params:
     socialmediatitle: Follow Us
     socialmedia:
     - link: https://github.com/openela
-      icon: brands fa-github
+      icon: fa-brands fa-github
       target: _blank
     - link: https://x.com/@openelaorg
-      icon: brands fa-x-twitter
+      icon: fa-brands fa-x-twitter
       target: _blank
     - link: https://fosstodon.org/@openela
-      icon: brands fa-mastodon
+      icon: fa-brands fa-mastodon
       target: _blank
     - link: https://www.linkedin.com/company/openela
-      icon: brands fa-linkedin
+      icon: fa-brands fa-linkedin
       target: _blank
     quicklinks:
       column1:

layouts/partials/css.html

@@ -0,0 +1,21 @@
+{{- $inServerMode := .Site.IsServer }}
+{{- $sass         := "style.sass" }}
+{{- $cssTarget    := "css/style.css" }}
+{{- $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }}
+{{- $fontName     := .Site.Params.font.name | default "Open Sans" }}
+{{- $fontFace     := replace $fontName " " "+" }}
+{{- $fontSizes    := delimit (.Site.Params.font.sizes | default (slice 300 400 600 700)) "," }}
+{{- $fontUrl      := printf "https://fonts.googleapis.com/css?family=%s:%s" $fontFace $fontSizes }}
+<link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
+<link href="{{ $fontUrl }}" rel="stylesheet">
+{{- if $inServerMode }}
+{{- $css := resources.Get $sass | toCSS $cssOpts }}
+<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
+{{- else }}
+{{- $css := resources.Get $sass | toCSS $cssOpts | minify | fingerprint }}
+<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+{{- end }}
+<link rel="stylesheet" type="text/css" href="{{ "fontawesome/css/fontawesome.min.css" | relURL }}">
+<link rel="stylesheet" type="text/css" href="{{ "fontawesome/css/brands.min.css" | relURL }}">
+<link rel="stylesheet" type="text/css" href="{{ "fontawesome/css/solid.min.css" | relURL }}">
+<link rel="stylesheet" type="text/css" href="{{ "fontawesome/css/v4-font-face.min.css" | relURL }}">

layouts/partials/footer.html

@@ -0,0 +1,57 @@
+{{- $footer      := .Site.Params.footer }}
+{{- $logo        := index $footer "logo" }}
+{{- $quickLinks  := index $footer "quicklinks" }}
+{{- $socialMedia := index $footer "socialmedia" }}
+{{- $bulmaLogo   := index $footer "bulmalogo" }}
+{{- $socialMediaTitle    := index $footer "socialmediatitle" }}
+<footer class="footer footer-dark">
+  <div class="container">
+    <div class="columns">
+      <div class="column">
+        <div class="footer-logo">
+          <img src="{{ printf "/images/logos/%s" $logo | relURL }}">
+        </div>
+      </div>
+      {{- range $quickLinks }}
+        <div class="column">
+          <div class="footer-column">
+            <div class="footer-header">
+                <h3>{{ .title }}</h3>
+            </div>
+            <ul class="link-list">
+              {{- range .links }}
+              <li>
+                <a href="{{ .link }}">
+                  {{ .text }}
+                </a>
+              </li>
+              {{- end }}
+            </ul>
+          </div>
+        </div>
+      {{- end }}
+      <div class="column">
+        <div class="footer-column">
+          <div class="footer-header">
+            <h3>{{ $socialMediaTitle }}</h3>
+            <nav class="level is-mobile">
+              <div class="level-left">
+                {{- range $socialMedia }}
+                <a class="level-item" href="{{ .link }}"{{- with .target }} target="{{ . }}"{{- end }}>
+                  <span class="icon"><i class="{{ .icon }}"></i></span>
+                </a>
+                {{- end }}
+              </div>
+            </nav>
+
+            {{- if $bulmaLogo }}
+            <a href="https://bulma.io" target="_blank">
+              <img src="{{ "/images/logos/made-with-bulma.png" | relURL }}" alt="Made with Bulma" width="128" height="24">
+            </a>
+            {{- end }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

layouts/partials/section2.html

@@ -26,14 +26,26 @@ <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
           <figure class="media-left">
             <p class="image">
               {{ if $iconPath }}
-              <img src="{{ $iconPath }}" alt="{{ $iconName }}">
+                {{ if .url }}
+                <a href="{{ .url }}">
+                  <img src="{{ $iconPath }}" alt="{{ $iconName }}">
+                </a>
+                {{ else }}
+                <img src="{{ $iconPath }}" alt="{{ $iconName }}">
+                {{ end }}
               {{ end }}
             </p>
           </figure>
           <div class="media-content mt-50">
             <div class="content">
               <p>
+                {{ if .url }}
+                <a href="{{ .url }}">
+                  <span class="icon-box-title">{{ .title }}</span>
+                </a>
+                {{ else }}
                 <span class="icon-box-title">{{ .title }}</span>
+                {{ end }}
 
                 <span class="icon-box-text">{{ .text | markdownify }}</span>
               </p>