node 18.18.0 update, show current sponsors count

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. 

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>
 

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 {

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>