Add sponsorkliks alert on main page

app/components/index/sponsorkliks-alert.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class SponsorkliksAlertComponent extends Component {
+  extensionInstalled = document.documentElement.dataset.sponsorkliksExtension === '1';
+
+  isFirefox = typeof InstallTrigger !== 'undefined';
+
+  isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+
+  showAlert = !this.extensionInstalled && (this.isFirefox || this.isChrome)
+}

app/templates/components/index/sponsorkliks-alert.hbs

@@ -0,0 +1,23 @@
+{{#if showAlert}}
+  <div class="col-12 alert alert-info">
+    We hebben een supertoffe chrome/firefox extensie voor onze C.S.V. Alpha Sponsorkliks.<br/>
+    Hoe werkt dat? Heel simpel, jij installeert de extensie en als je wat koopt bij verschillende webshops verdient Alpha er ook nog wat aan.
+    De uitgebreide uitleg vind je <b><LinkTo @route="static-pages.show" @model="alpha-deals">hier</LinkTo></b>.
+
+    <br /><br />
+
+    {{#if isFirefox}}
+      <a href="https://addons.mozilla.org/nl/firefox/addon/csvalpha-sponsor-extensie/">
+        <b>Klik hier om de Firefox extensie te installeren.</b>
+      </a>
+
+    {{/if}}
+    {{#if isChrome}}
+      <a href="https://chrome.google.com/webstore/detail/csv-alpha-sponsor-extensi/anlcblpmlnecbomgkbmfngcpbaciipml?hl=nl">
+        <b>Klik hier om de Chrome extensie te installeren.</b>
+      </a>
+    {{/if}}
+
+    <br/><br/><small>Dit blok verdwijnt automatisch als je de extensie installeert.</small>
+  </div>
+{{/if}}

app/templates/index/authenticated.hbs

@@ -24,6 +24,11 @@
   <AdvertisementTool />
 </div>
 
+<div class="article-cards-wrapper full-width-small-screens pl-3 pl-md-0">
+  <Index::SponsorkliksAlert />
+</div>
+
+
 <div class="row pt-4">
   <div class="col-7 d-none d-md-block">
     <QuickPost />