Add sponsors page

_data/sponsors.yml

@@ -1,3 +1,67 @@
-- name: Work in Progress
-  link: /install/
+- name: Andy Hunt
+  link: http://toolshed.com/
+  image: "andy.png"
+
+- name: Niklas Vest
+  link: ""
+  image: "niklas.jpg"
+
+- name: John Eriksen
+  link: ""
+  image: ""
+
+- name: DutchPete
+  link: ""
+  image: ""
+
+- name: Simon Wolf
+  link: https://www.swwritings.com/
+  image: ""
+
+- name: Christian Raunitschka
+  link: http://raunitschka.de/
+  image: "christian.jpg"
+
+- name: John Ennion
+  link: ""
+  image: ""
+
+- name: Gide Wilder
+  link: ""
+  image: "rigel.jpg"
+
+- name: mrgnw
+  link: https://github.com/mrgnw
+  image: "morgan.jpeg"
+
+- name: Raimund S.
+  link: http://mrsweb.de/
+  image: ""
+
+- name: William Luke
+  link: https://www.ordino.ai/
+  image: william.jpeg
+
+- name: Richard Lissimore
+  link: https://github.com/richardlissimore
+  image: "richard.png"
+
+- name: Marcelo Subtil Marcal
+  link: http://smarcal.com/
+  image: "marcelo.jpeg"
+
+- name: threeforks
+  link: ""
+  image: ""
+
+- name: Masayuki Higashino
+  link: http://msyk.hgsn.info/
+  image: "masayuki.png"
+
+- name: Scott Dillman
+  link: http://dreamcyclestudios.com/
+  image: "scott.jpeg"
+
+- name: Steven Schmutz
+  link: ""
   image: ""

_includes/donate.html

@@ -17,4 +17,11 @@
             <a class="btn btn-lg sponsor" target="_blank" href="https://github.com/sponsors/federico-terzi" role="button">Become a GitHub Sponsor</a>           
         </div>
     </div>
+
+    <div class="sponsor-pane">
+        <h5>A special thanks goes to all the wonderful people who supported espanso along the way</h5>
+        <p>Together, we will make espanso the first universal text expander, open to everyone.</p>
+        <a class="btn btn-lg" href="/sponsors" role="button">See the Sponsors</a>         
+    </div>
+    
 </div>

_layouts/default.html

@@ -59,7 +59,6 @@ If you want to see more interesting projects, visit my website: https://federico
     {% endunless %}
 
     {% include donate.html %}
-
     {% include footer.html %}
 
     <script src="/assets/js/jquery.slim.min.js"></script>

_sass/_donate.scss

@@ -47,4 +47,13 @@
         height: 60px;
         display: inline;
     }
+
+    .sponsor-pane {
+        text-align: center;
+        margin-top: 80px;
+
+        .btn {
+            background-color: $mainColor;
+        }
+    }
 }

_sass/_sponsors.scss

@@ -1,4 +1,10 @@
 .sponsors {
+    text-align: center;
+
+    .heading {
+        text-align: center;
+    }
+
     .sponsor-img {
         width: 100px;
         margin: auto;

sponsors.html

@@ -3,9 +3,11 @@ title: Sponsors
 layout: default
 showParticles: True
 ---
-Many people helped espanso along the way, allowing me to stay motivated and focused on our mission. Thank you, there are no words to say how much I appreciate your help :)
 
-<div class="mt-4">
+<div class="mt-4 sponsors">
+    <h5>A special thanks goes to all the wonderful people who supported espanso along the way</h5>
+    <p>Together, we will make espanso the first universal text expander, open to everyone.</p>
+
 {% for item in site.data.sponsors %}
     {% assign remainder = forloop.index0 | modulo: 6 %}
     {% if remainder == 0 %}
@@ -17,10 +19,20 @@ Many people helped espanso along the way, allowing me to stay motivated and focu
     {% endif %}
     <div class="col-md-2">
         <a href="{{item.link}}">
-            <img src="{{item.image}}" class="rounded-circle sponsor-img" alt="{{item.name}}">
+            {% if item.image != "" %}
+                <img src="/assets/images/sponsors/{{item.image}}" class="rounded-circle sponsor-img" alt="{{item.name}}">
+            {% else %}
+                <svg class="rounded-circle sponsor-img" data-jdenticon-value="{{item.name}}">
+                    Fallback text or image for browsers not supporting inline svg.
+                </svg>
+            {% endif %}
+            
             <p class="sponsor-name">{{item.name}}</p>
         </a>
     </div>
 {% endfor %}
 </div>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.2.0" async>
+</script>