style download cards for better logo contrast; refine Linux install g…

…uide
openziti · Nov 23, 2023 · b481863 · b481863
1 parent c041166
commit b481863
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 53 deletions.
diff --git a/docs/guides/install/linux.mdx b/docs/guides/install/linux.mdx
@@ -7,7 +7,7 @@ import { AssetsProvider } from '@site/src/components/assets-context';
 import DownloadCard from '@site/src/components/download-card';
 import styles from '@site/src/css/download-card.module.css';
 
-## Extract Distribution
+## Linux Binary
 
 <AssetsProvider>
   <div className={styles.downloadContainer}>
@@ -18,16 +18,92 @@ import styles from '@site/src/css/download-card.module.css';
   </div>
 </AssetsProvider>
 
-## Install Linux Package
+Download the binary distribution for your Linux distribution's architecture or run the install script below to pick the correct CPU architecture automatically. For Intel and AMD 64-bit machines use the `amd64` distribution. For Raspberry Pi use the `arm64` distribution.
 
-You can install `zrok` from the Linux package repo with these steps. DEB and RPM packages are available for amd64, arm64, and armv7 architectures.
+<Details>
+<summary>Manually install in `~/bin/zrok`</summary>
+
+1. Unarchive the distribution in a temporary directory.
+
+    ```text
+    mkdir /tmp/zrok && tar -xf ./zrok*linux*.tar.gz -C /tmp/zrok
+    ```
+
+1. Install the `zrok` executable.
+
+    ```text
+    mkdir -p ~/bin && install /tmp/zrok/zrok ~/bin/
+    ```
+
+1. Add `~/bin` to your shell's executable search path. Optionally add this to your ~/.zshenv to persist the change.
+
+    ```text
+    PATH=~/bin:$PATH
+    ```
+
+1. With the `zrok` executable in your path, you can then execute the `zrok` command from your shell:
 
-Check out [the Linux Service guide](/guides/linux-front-door.md) for running `zrok` as a Linux system service.
+    ```text
+    zrok version
+    ```
 
-### Manually add the package repo and install `zrok`
+    ```buttonless title="Output"
+                   _    
+     _____ __ ___ | | __
+    |_  / '__/ _ \| |/ /
+     / /| | | (_) |   < 
+    /___|_|  \___/|_|\_\
+    
+    v0.4.0 [c889005]
+    ```
+
+</Details>
 
 <Details>
-<summary>Debian Package Steps</summary>
+<summary>Auto install binary in `/usr/local/bin/zrok`</summary>
+
+This script auto-selects the correct architecture, and may be helpful for Raspberry Pi users.
+
+```text
+(set -euo pipefail;
+
+cd $(mktemp -d);
+
+ZROK_VERSION=$(
+  curl -sSf https://api.github.com/repos/openziti/zrok/releases/latest \
+  | jq -r '.tag_name'
+);
+
+case $(uname -m) in
+  x86_64)          GOXARCH=amd64 ;;
+  aarch64|arm64)   GOXARCH=arm64 ;;
+  armv7|armhf|arm) GOXARCH=arm   ;;
+  *)               echo "ERROR: unknown arch '$(uname -m)'" >&2
+                   exit 1        ;;
+esac;
+
+curl -sSfL \
+  "https://github.com/openziti/zrok/releases/download/${ZROK_VERSION}/zrok_${ZROK_VERSION#v}_linux_${GOXARCH}.tar.gz" \
+  | tar -xz -f -;
+
+sudo install -o root -g root ./zrok /usr/local/bin/;
+zrok version;
+)
+```
+
+</Details>
+## Install `zrok` from the Repository
+
+We recommend that you install `zrok` from the Linux package repository with the manual steps or the setup script. DEB and RPM packages are available for amd64, arm64, and armv7 architectures.
+
+:::info
+
+Check out [the `zrok` Front Door](/guides/linux-front-door.md) for running `zrok` as a Linux system service.
+
+:::
+
+<Details>
+<summary>Manually set up DEB repository</summary>
 
 ```text
 (set -euo pipefail;
@@ -49,7 +125,7 @@ zrok version;
 </Details>
 
 <Details>
-<summary>Red Hat Package Steps</summary>
+<summary>Manually set up RPM repository</summary>
 
 ```text
 (set -euo pipefail;
@@ -72,7 +148,8 @@ zrok version;
 
 </Details>
 
-### Run `install.bash` to add the package repo and install `zrok`
+<Details>
+<summary>Auto set up DEB or RPM repository</summary>
 
 1. Download the zrok install script.
 
@@ -92,36 +169,4 @@ zrok version;
     sudo bash ./zrok-install.bash zrok
     ```
 
-### Raspberry Pi Binary Install
-
-<Details>
-<summary>Binary Install script for Linux</summary>
-
-```text
-(set -euo pipefail;
-
-cd $(mktemp -d);
-
-ZROK_VERSION=$(
-  curl -sSf https://api.github.com/repos/openziti/zrok/releases/latest \
-  | jq -r '.tag_name'
-);
-
-case $(uname -m) in
-  x86_64)          GOXARCH=amd64 ;;
-  aarch64|arm64)   GOXARCH=arm64 ;;
-  armv7|armhf|arm) GOXARCH=arm   ;;
-  *)               echo "ERROR: unknown arch '$(uname -m)'" >&2
-                   exit 1        ;;
-esac;
-
-curl -sSfL \
-  "https://github.com/openziti/zrok/releases/download/${ZROK_VERSION}/zrok_${ZROK_VERSION#v}_linux_${GOXARCH}.tar.gz" \
-  | tar -xz -f -;
-
-sudo install -o root -g root ./zrok /usr/local/bin/;
-zrok version;
-)
-```
-
-</Details>
+</Details>
diff --git a/docs/guides/install/macos.mdx b/docs/guides/install/macos.mdx
@@ -7,7 +7,7 @@ import { AssetsProvider } from '@site/src/components/assets-context';
 import DownloadCard from '@site/src/components/download-card';
 import styles from '@site/src/css/download-card.module.css';
 
-## Extract Binary Distribution
+## Darwin Binary
 
 <AssetsProvider>
   <div className={styles.downloadContainer}>
@@ -35,7 +35,7 @@ Download the binary distribution for your macOS architecture. For Intel Macs use
 1. Add `~/bin` to your shell's executable search path. Optionally add this to your ~/.zshenv to persist the change.
 
     ```text
-    export PATH=~/bin:$PATH
+    PATH=~/bin:$PATH
     ```
 
 1. With the `zrok` executable in your path, you can then execute the `zrok` command from your shell:

diff --git a/docs/guides/linux-front-door.md b/docs/guides/linux-front-door.md
@@ -6,7 +6,7 @@ sidebar_position: 40
 
 ## Goal
 
-Proxy a reserved public subdomain to a backend target with a Linux service.
+Proxy a reserved public subdomain to a backend target with a Linux system service.
 
 ## How it Works
 
@@ -24,8 +24,14 @@ When the service starts it will:
 
 ## Installation
 
-1. Install `zrok` by following the package repo setup instructions in [the Linux install guide](/guides/install/linux.mdx).
-1. Install the `zrok-share` package.
+1. Set up `zrok`'s Linux package repository by following [the Linux install guide](/guides/install/linux.mdx#install-zrok-from-the-repository). This will complete the installation in one step if you prefer that convenience.
+
+    ```bash
+    curl -sSLf https://get.openziti.io/install.bash \
+    | sudo bash -s zrok-share
+    ```
+
+1. If you set up the repository by following the guide, then also install the `zrok-share` package. This provides the systemd service.
 
     ```bash title="Ubuntu, Debian"
     sudo sudo apt install zrok-share

diff --git a/website/src/components/download-card.jsx b/website/src/components/download-card.jsx
@@ -28,7 +28,7 @@ const DownloadCard = ({ osName, osLogo, infoText, guideLink }) => {
     return (
         // <div className={colorMode === 'dark' ? styles.downloadCardDark : styles.downloadCardLight}>
         <div className={styles.downloadCard}>
-            <div className="imgContainer">
+            <div className={styles.imgContainer}>
                 <img src={osLogo} alt={`${osName} logo`} />
             </div>
             <h3>{osName}</h3>

diff --git a/website/src/css/download-card.module.css b/website/src/css/download-card.module.css
@@ -1,9 +1,11 @@
 :root {
-  --cardfooter-background: #c4b7f5
+  --contrasting-background: #c4b7f5;
+  --container-border: 1px solid #adadad; /* Light gray border */
 }
 
 [data-theme="dark"] {
-  --cardfooter-background: #4b359f
+  --contrasting-background: #4b359f;
+  --container-border: 1px solid #6d6d6d; /* Light gray border */
 }
 
 .downloadContainer {
@@ -37,8 +39,8 @@
 }
 
 .cardFooter {
-  background-color: var(--cardfooter-background);
-  border-top: 1px solid #e0e0e0; /* Light gray border on top */
+  background-color: var(--contrasting-background);
+  border-top: var(--container-border);
   padding: 10px;
   margin-top: auto; /* Push the footer to the bottom */
   border-bottom-left-radius: 18px;
@@ -52,11 +54,19 @@
   margin-bottom: 20px; /* Add some space between the list and the footer */
 }
 
+.downloadCard h3 {
+  margin-top: 10px;
+}
+
 .downloadCard .imgContainer {
-  background-color: #e0e0e0; /* Light gray background for light mode */
+  background-color: var(--contrasting-background);
   display: inline-block; /* Or 'block' depending on layout */
   padding: 10px; /* Adjust padding as needed */
-  border-radius: 8px; /* Optional: for rounded corners */
+  border-top-left-radius: 18px; /* Optional: for rounded corners */
+  border-top-right-radius: 18px; /* Optional: for rounded corners */
+  border-bottom: var(--container-border);
+  padding: 10px;
+  margin-bottom: auto; /* Push the footer to the bottom */
 }
 
 /* Responsive design for smaller screens */