💄 Footer - Add GitHub star link and count (#1576)

* 💄 Footer - Add GitHub star link and count Fixes #1425 Add GitHub star link and counter to the footer with specified text. * Import `GitHubButton` from `react-github-btn` in `src/components/footer/footer.js`. * Replace the existing GitHub link with the `GitHubButton` component. * Update the footer text to include the specified text: "We ❤️ open source. Loving SSW Rules? ⭐️ us on GitHub {{ CONTROL WITH CURRENT STARS }} Stand by... we are migrating this site to TinaCMS". * Install the `react-github-btn` package in `package.json`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/SSWConsulting/SSW.Rules/issues/1425?shareId=XXXX-XXXX-XXXX-XXXX). * Update package.json * Update footer.js * Fix and regen lockfile * removed unused component
SSWConsulting · Oct 23, 2024 · 646f76f · 646f76f
1 parent 23bb717
commit 646f76f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "query-string": "^8.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-github-btn": "^1.4.0",
     "react-helmet": "^6.1.0",
     "react-jotform": "^1.0.2",
     "react-number-format": "^5.4.2",
@@ -116,4 +117,4 @@
     "📦 gatsby-plugin-fontawesome-css": "Added to disable Font Awesomes auto CSS insertion and instead insert it at compile time. This stops the brief flicker of the icons stying being incorrect when the page is refreshed"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -5,30 +5,53 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import {
   faFacebook,
-  faGithub,
   faInstagram,
   faLinkedin,
   faTwitter,
   faTiktok,
   faYoutube,
 } from '@fortawesome/free-brands-svg-icons';
 import { pathPrefix } from '../../../site-config';
+import GitHubButton from 'react-github-btn';
 
 const buildTimestamp = preval`module.exports = new Date().getTime();`;
 
 const Footer = () => {
   return (
     <>
       <div className="py-2 text-center bg-grey-translucent text-sm">
-        <section className="main-container">
-          We <FontAwesomeIcon icon={faHeart} className="text-ssw-red" /> open
-          source. Powered by{' '}
-          <a
-            className="action-button-label footer-greybar-link"
+        <section className="main-container flex items-center justify-center">
+          <span className="mr-2">
+            We <FontAwesomeIcon icon={faHeart} className="text-ssw-red" /> open
+            source. Loving SSW Rules?{' '}
+            <a
+              href="https://github.com/SSWConsulting/SSW.Rules"
+              target="_blank"
+              rel="noreferrer"
+              className="action-button-label footer-greybar-link"
+            >
+              Star us on GitHub
+            </a>{' '}
+          </span>
+          <GitHubButton
             href="https://github.com/SSWConsulting/SSW.Rules"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star SSWConsulting/SSW.Rules on GitHub"
           >
-            GitHub <FontAwesomeIcon icon={faGithub} />
-          </a>
+            Star
+          </GitHubButton>
+        </section>
+        <section className="main-container flex items-center justify-center mt-2">
+          <span className="ml-2">
+            Stand by... we are migrating this site to{' '}
+            <a
+              className="action-button-label footer-greybar-link"
+              href="https://tina.io"
+            >
+              🦙 TinaCMS
+            </a>
+          </span>
         </section>
       </div>
       <footer className="bg-black py-6 md:py-4 lg:py-2">

diff --git a/yarn.lock b/yarn.lock
@@ -6817,6 +6817,7 @@ __metadata:
     query-string: "npm:^8.2.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
+    react-github-btn: "npm:^1.4.0"
     react-helmet: "npm:^6.1.0"
     react-jotform: "npm:^1.0.2"
     react-number-format: "npm:^5.4.2"
@@ -14579,6 +14580,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"github-buttons@npm:^2.22.0":
+  version: 2.29.1
+  resolution: "github-buttons@npm:2.29.1"
+  checksum: f403cce395b09acab1bc3c2d08549d1130f77a56338d7c7be84cd101774eeb681b0f9a050c6e263dc585c60f3a3cf406be762afe2400449ad842e41732a3f897
+  languageName: node
+  linkType: hard
+
 "github-from-package@npm:0.0.0":
   version: 0.0.0
   resolution: "github-from-package@npm:0.0.0"
@@ -21860,6 +21868,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-github-btn@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "react-github-btn@npm:1.4.0"
+  dependencies:
+    github-buttons: "npm:^2.22.0"
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: ce21b1081e8985fce93f19deb3ab3e20b36e80508fcd9346eb617728b2e242bea845434296a9b8acbc339259551d58e43d840dbe9ec03c21a7094a7a9038986e
+  languageName: node
+  linkType: hard
+
 "react-helmet@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-helmet@npm:6.1.0"