Add dedicated download button for Apple Silicon (#254)

* Add arm64 download links (#249)

* Added npm lockfile

* Fixed table styling

* Add dedicated button for M1

* Fixed readme

Co-authored-by: Labhansh Agrawal <[email protected]>

Author: leo

README.md

@@ -9,8 +9,8 @@ Want to submit a plugin or theme to the Hyper Store? Follow [the guide on the we
 To submit a feature, bug fix, or enhancement to the Hyper website proceed as follows:
 
 1. Clone this repo
-2. Within your terminal, run `yarn` to install the dependencies
-3. Once the dependencies are installed, run `yarn dev` to start the dev server on `localhost:3000`
+2. Within your terminal, run `npm install` to install the dependencies
+3. Once the dependencies are installed, run `npm run dev` to start the dev server on `localhost:3000`
 
 We really appreciate any contribution
 

components/download-button/download-button.module.css

@@ -22,3 +22,17 @@
 .root svg {
   margin-right: 12px;
 }
+
+.doubleWrap {
+  display: flex;
+}
+
+.doubleWrap a:nth-child(2) {
+  margin-left: 10px;
+}
+
+@media screen and (max-width: 900px) {
+  .doubleWrap a:nth-child(1) {
+    display: none;
+  }
+}

components/download-button/index.js

@@ -7,15 +7,26 @@ const DownloadButton = () => {
 
   if (os === 'mac') {
     return (
-      <a
-        className={styles.root}
-        href="https://releases.hyper.is/download/mac"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Apple size={16} />
-        <strong>Download Hyper</strong>
-      </a>
+      <div className={styles.doubleWrap}>
+        <a
+          className={styles.root}
+          href="https://releases.hyper.is/download/mac"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Apple size={16} />
+          <strong>Download for Intel Chip</strong>
+        </a>
+        <a
+          className={styles.root}
+          href="https://releases.hyper.is/download/mac_arm64"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Apple size={16} />
+          <strong>Download for Apple Chip</strong>
+        </a>
+      </div>
     )
   } else if (os === 'windows') {
     return (
@@ -26,7 +37,7 @@ const DownloadButton = () => {
         rel="noopener noreferrer"
       >
         <Windows size={16} />
-        <strong>Download Hyper</strong>
+        <strong>Download</strong>
       </a>
     )
   } else if (os === 'fedora') {
@@ -38,7 +49,7 @@ const DownloadButton = () => {
         rel="noopener noreferrer"
       >
         <Linux size={16} />
-        <strong>Download Hyper</strong>
+        <strong>Download</strong>
       </a>
     )
   } else if (os === 'ubuntu') {
@@ -50,7 +61,7 @@ const DownloadButton = () => {
         rel="noopener noreferrer"
       >
         <Linux size={16} />
-        <strong>Download Hyper</strong>
+        <strong>Download</strong>
       </a>
     )
   } else if (os === 'linux') {
@@ -62,14 +73,14 @@ const DownloadButton = () => {
         rel="noopener noreferrer"
       >
         <Linux />
-        <strong>Download Hyper</strong>
+        <strong>Download</strong>
       </a>
     )
   } else {
     return (
       <a href="/#installation" className={styles.root}>
         <Download height={12} width={16} />
-        <strong>Download Hyper</strong>
+        <strong>Download</strong>
       </a>
     )
   }