fix: replace broken fork me on github ribbon

adopted-ember-addons · May 15, 2024 · f5a9db6 · f5a9db6
1 parent 086c5d1
commit f5a9db6
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 200 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-app/app/styles/app.css b/test-app/app/styles/app.css
@@ -32,6 +32,10 @@ body {
   right: 0;
 }
 
+.github-fork-ribbon::before {
+  background-color: purple;
+}
+
 .jumbo-header {
   color: #fff;
   background: purple;

diff --git a/test-app/app/templates/demo-horizontal.hbs b/test-app/app/templates/demo-horizontal.hbs
@@ -1,13 +1,6 @@
 <div class="demo-horizontal-view">
   <div class="fixed-to-top jumbo-header text-center">
-    <a href="https://github.com/hhff/ember-infinity">
-      <img
-        style="position: absolute; top: 0; right: 0; border: 0;"
-        src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67"
-        alt="Fork me on GitHub"
-        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
-      />
-    </a>
+    <a class="github-fork-ribbon" data-ribbon="Fork me on GitHub" href="https://github.com/adopted-ember-addons/ember-infinity" target="_blank" rel="noopener noreferrer">Fork me on GitHub</a>
     <h2 id="title">ember-infinity</h2>
   </div>
 

diff --git a/test-app/app/templates/demo-scrollable.hbs b/test-app/app/templates/demo-scrollable.hbs
@@ -1,13 +1,6 @@
 <div class="demo-view">
   <div class="fixed-to-top jumbo-header text-center">
-    <a href="https://github.com/hhff/ember-infinity">
-      <img
-        style="position: absolute; top: 0; right: 0; border: 0;"
-        src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67"
-        alt="Fork me on GitHub"
-        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
-      />
-    </a>
+    <a class="github-fork-ribbon" data-ribbon="Fork me on GitHub" href="https://github.com/adopted-ember-addons/ember-infinity" target="_blank" rel="noopener noreferrer">Fork me on GitHub</a>
     <h2 id="title">ember-infinity</h2>
   </div>
   <ul id="demo-items-scrollable" class="demo-items">

diff --git a/test-app/app/templates/demo.hbs b/test-app/app/templates/demo.hbs
@@ -1,13 +1,6 @@
 <div class="demo-view">
   <div class="fixed-to-top jumbo-header text-center">
-    <a href="https://github.com/hhff/ember-infinity">
-      <img
-        style="position: absolute; top: 0; right: 0; border: 0;"
-        src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67"
-        alt="Fork me on GitHub"
-        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
-      />
-    </a>
+    <a class="github-fork-ribbon" data-ribbon="Fork me on GitHub" href="https://github.com/adopted-ember-addons/ember-infinity" target="_blank" rel="noopener noreferrer">Fork me on GitHub</a>
     <h2 id="title">ember-infinity</h2>
   </div>
 

diff --git a/test-app/ember-cli-build.js b/test-app/ember-cli-build.js
@@ -19,6 +19,9 @@ module.exports = function (defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
+  // Import the CSS file
+  app.import('node_modules/github-fork-ribbon-css/gh-fork-ribbon.css');
+
   const { maybeEmbroider } = require('@embroider/test-setup');
   return maybeEmbroider(app);
 };
diff --git a/test-app/package.json b/test-app/package.json
@@ -70,6 +70,7 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-qunit": "^8.1.1",
+    "github-fork-ribbon-css": "^0.2.3",
     "loader.js": "^4.7.0",
     "miragejs": "^0.1.48",
     "pretender": "^3.4.7",