Merge pull request #1876 from Victor-Chris/website/make-website-icons-clickable

Make icons corresponding to links clickable

Author: AkihiroSuda

website/content/en/_index.html

@@ -22,20 +22,8 @@
 </p>
 {{% /blocks/lead %}}
 {{< blocks/section color="dark" type="row" >}}
-{{% blocks/feature icon="fa-solid fa-code" title="Install Lima" %}}
-  <a class="mr-3 mb-4 text-secondary" href="{{< relref "/docs/installation" >}}">
-Get Lima Here <i class="fas fa-arrow-alt-circle-right ml-2"></i></a>
-{{% /blocks/feature %}}
-
-{{% blocks/feature icon="fa-solid fa-chalkboard" title="Try Lima" %}}
-<a class="mr-3 mb-4 text-secondary" href="{{< relref "/docs/usage" >}}">
-Get started with Lima <i class="fas fa-arrow-alt-circle-right ml-2"></i></a>
-{{% /blocks/feature %}}
-
-{{% blocks/feature icon="fa-brands fa-github" title="Contributions welcome" %}}
-<a class="mr-3 mb-4 text-secondary" href="{{< relref "/community" >}}">
-Join the Lima community <i class="fas fa-arrow-alt-circle-right ml-2"></i></a>
-{{% /blocks/feature %}}
+
+  {{< blocks/helpfullinks >}}
 
 {{< /blocks/section >}}
 

website/data/helpfullinks.yaml

@@ -0,0 +1,12 @@
+- header: Install Lima
+  icon: fa-solid fa-code
+  link: /docs/installation
+  label: Get Lima Here
+- header: Try Lima
+  icon: fa-solid fa-chalkboard
+  link: /docs/usage
+  label: Get started with Lima
+- header: Contributions welcome
+  icon: fa-brands fa-github
+  link: /community
+  label: Join the Lima community

website/layouts/shortcodes/blocks/helpfullinks.html

@@ -0,0 +1,15 @@
+{{ $usedBy := site.Data.helpfullinks -}}
+
+{{ range $usedBy -}}
+  <div class="col-lg-4 mb-5 mb-lg-0 text-center">
+    <a class="text-primary" href="{{ .link }}">
+      <div class="mb-4 h1">
+        <i class="{{ .icon }}"></i>
+      </div>
+      <h4 class="h3">{{ .header }}</h4>
+    </a>
+    <a class="mr-3 mb-4 text-secondary" href="{{ .link }}">
+      {{ .label }} <i class="fas fa-arrow-alt-circle-right ml-2"></i>
+    </a>
+  </div>
+{{- end }}