Add safari link

Author: Stefan Buck

components/install.js

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-
+import Image from 'next/image';
 const InstallButton = dynamic(import ('./installButton'),{ssr:false});
 
 export default function Install() {
@@ -18,42 +18,58 @@ export default function Install() {
             padding-left: 1em;
           }
         }
+
+        .logos {
+          display: flex;
+          gap: 12px;
+          margin-top: 12px;
+        }
+
+        @media only screen and (min-width: 768px) {
+          .logos {
+            justify-content: center;
+          }
+        }
       `}</style>
       <p>
-        OctoLinker is a browser extension and available on{" "}
-        <a
-          href="https://chrome.google.com/webstore/detail/octo-linker/jlmafbaeoofdegohdhinkhilhclaklkp"
-          onClick={function() { window.plausible("install: chrome")}}
-          rel="nofollow"
-        >
-          <nobr>Chrome Web Store</nobr>
-        </a>
-        ,{" "}
-        <a
-          href="https://addons.mozilla.org/en-US/firefox/addon/octolinker/"
-          onClick={function() { window.plausible("install: mozilla")}}
-          rel="nofollow"
-        >
-          <nobr>Mozilla Add-ons Store</nobr>
-        </a>
-        ,{" "}
-        <a
-          href="https://microsoftedge.microsoft.com/addons/detail/lbbanfffjfmfdahnfbklminikafhcjjb"
-          onClick={function() { window.plausible("install: edge")}}
-          rel="nofollow"
-        >
-          <nobr>Microsoft Store</nobr>
-        </a>
-        {" and "}
-        <a
-          href="https://addons.opera.com/en/extensions/details/octolinker/"
-          onClick={function() { window.plausible("install: opera")}}
-          rel="nofollow"
-        >
-          <nobr>Opera Add-ons Store</nobr>
-        </a>.
-        <br />
-        Install and enhance your GitHub experience.
+        OctoLinker is a browser extension.         Install and enhance your GitHub experience.
+        <div className="logos">
+          <a
+            href="https://chrome.google.com/webstore/detail/octo-linker/jlmafbaeoofdegohdhinkhilhclaklkp"
+            onClick={function() { window.plausible("install: chrome")}}
+            rel="nofollow"
+          >
+            <Image alt="Chrome Web Store" src="/static/chrome.png" width="48" height="48" />
+          </a>
+          <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/octolinker/"
+            onClick={function() { window.plausible("install: mozilla")}}
+            rel="nofollow"
+          >
+            <Image alt="Mozilla Add-ons Store" src="/static/firefox.png" width="48" height="48" />
+          </a>
+          <a
+            href="https://apps.apple.com/app/octolinker/id1549308269"
+            onClick={function() { window.plausible("install: safari")}}
+            rel="nofollow"
+          >
+            <Image alt="Mac App Store" src="/static/safari.png" width="48" height="48" />
+          </a>
+          <a
+            href="https://microsoftedge.microsoft.com/addons/detail/lbbanfffjfmfdahnfbklminikafhcjjb"
+            onClick={function() { window.plausible("install: edge")}}
+            rel="nofollow"
+          >
+            <Image alt="Microsoft Store" src="/static/edge.png" width="48" height="48" />
+          </a>
+          <a
+            href="https://addons.opera.com/en/extensions/details/octolinker/"
+            onClick={function() { window.plausible("install: opera")}}
+            rel="nofollow"
+          >
+            <Image alt="Opera Add-ons Store" src="/static/opera.png" width="48" height="48" />
+          </a>
+        </div>
       </p>
       <InstallButton />
       <div className="install-count">

components/installButton.js

@@ -23,6 +23,11 @@ export default function Install({ children, compact }) {
       eventName: 'install: edge',
       text: "Install for Microsoft Edge",
       url: "https://microsoftedge.microsoft.com/addons/detail/lbbanfffjfmfdahnfbklminikafhcjjb"
+    },
+    'safari': {
+      eventName: 'install: safari',
+      text: "Install for Safari",
+      url: "https://apps.apple.com/app/octolinker/id1549308269"
     }
   };