From 1ce877c7f9708cc2b2595e56e91a4fb572730343 Mon Sep 17 00:00:00 2001
From: Mario Ranftl <code@mranftl.com>
Date: Sat, 23 Sep 2023 09:45:13 +0200
Subject: [PATCH] node 18.18.0 update, show current sponsors count

---
 Dockerfile                      |  4 ++--
 client/app/fonts/fonts.html     | 18 ++++++++++++++----
 client/app/fonts/fonts.less     |  6 ++++++
 client/app/fonts/fontsItem.html |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 7b17790..e4192fd 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,7 +2,7 @@
 # --- Stage: development
 # --- Purpose: Local dev environment (no application deps)
 ### -----------------------
-FROM node:18.16.0-bullseye AS development
+FROM node:18.18.0-bullseye AS development
 
 # Replace shell with bash so we can source files
 RUN rm /bin/sh && ln -s /bin/bash /bin/sh
@@ -61,7 +61,7 @@ RUN yarn install --production --ignore-scripts --prefer-offline
 # --- Stage: production
 # --- Purpose: Final step from a new slim image. this should be a minimal image only housing dist (production service)
 ### -----------------------
-FROM node:18.16.0-bullseye AS production
+FROM node:18.18.0-bullseye AS production
 
 # https://github.com/nodejs/docker-node/blob/7de353256a35856c788b37c1826331dbba5f0785/docs/BestPractices.md
 # Node.js was not designed to run as PID 1 which leads to unexpected behaviour when running inside of Docker. 
diff --git a/client/app/fonts/fonts.html b/client/app/fonts/fonts.html
index d558244..bc56b42 100644
--- a/client/app/fonts/fonts.html
+++ b/client/app/fonts/fonts.html
@@ -36,11 +36,21 @@
         <!-- App name -->
         <h4 class="page-header"><a href="/" ng-click="selectedItemID=''">google-webfonts-helper</a><br/><small>Get eot, ttf, svg, woff and woff2 + CSS</small></h4>
         <!-- GH Sponsor -->
-        <iframe id="githubSponsor" src="https://ghbtns.com/github-btn.html?user=majodev&type=sponsor&size=large"
-          allowtransparency="true" frameborder="0" scrolling="0" width="200px" height="30px"></iframe>
+        <!-- <iframe id="githubSponsor" src="https://ghbtns.com/github-btn.html?user=majodev&type=sponsor&count=true&size=large"
+          allowtransparency="true" frameborder="0" scrolling="0" width="200px" height="30px"></iframe> -->
+        <div id="githubSponsor">
+          <a href="https://github.com/sponsors/majodev" target="_blank">
+            <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/majodev?style=social&logo=github%20sponsors&label=sponsor" height="30px">
+          </a>
+        </div>
         <!-- GH Stars -->
-        <iframe id="githubCount" src="https://ghbtns.com/github-btn.html?user=majodev&repo=google-webfonts-helper&type=watch&count=true&size=large"
-          allowtransparency="true" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
+        <!-- <iframe id="githubCount" src="https://ghbtns.com/github-btn.html?user=majodev&repo=google-webfonts-helper&type=watch&count=true&size=large"
+          allowtransparency="true" frameborder="0" scrolling="0" width="170px" height="30px"></iframe> -->
+        <div id="githubCount">
+          <a href="https://github.com/majodev/google-webfonts-helper" target="_blank">
+            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/majodev/google-webfonts-helper?style=social&logo=github&label=star" height="30px">
+          </a>
+        </div>
       </div>
     </div>
 
diff --git a/client/app/fonts/fonts.less b/client/app/fonts/fonts.less
index 3cd23a1..02cb151 100644
--- a/client/app/fonts/fonts.less
+++ b/client/app/fonts/fonts.less
@@ -56,6 +56,12 @@ html, body {
 
 #githubSponsor, #githubCount {
   float: right;
+  margin-left: 16px;
+  opacity: 0.8;
+}
+
+#githubSponsor:hover, #githubCount:hover {
+  opacity: 1;
 }
 
 .ordering {
diff --git a/client/app/fonts/fontsItem.html b/client/app/fonts/fontsItem.html
index eb7033f..251fb40 100644
--- a/client/app/fonts/fontsItem.html
+++ b/client/app/fonts/fontsItem.html
@@ -195,7 +195,7 @@ <h4>4. Download files:</h4>
     <div>
       <hr>
       <h4>You are now ready to self-host {{fontItem.family}}.<br/>
-        <small>If this service has actually been helpful for you, please <a href="https://github.com/majodev/google-webfonts-helper/" target="_blank">star it on GitHub</a>. If you've encountered serious problems, file an issue <a href="https://github.com/majodev/google-webfonts-helper/issues">here</a>.</br>
+        <small>If this service has actually been helpful for you, please <a href="https://github.com/majodev/google-webfonts-helper/" target="_blank">star it on GitHub</a>. If you've encountered serious problems, file an issue <a href="https://github.com/majodev/google-webfonts-helper/issues">here</a>.<br />
         ❤️ <a href="https://github.com/sponsors/majodev" target="_blank">You can help to keep this project alive by sponsoring me.</a> Thank you ❤️.</small></h4>
       <hr>
     </div>