From b48186399957f35ec348d5bf07670be111611e58 Mon Sep 17 00:00:00 2001 From: Kenneth Bingham Date: Thu, 23 Nov 2023 12:43:23 -0500 Subject: [PATCH] style download cards for better logo contrast; refine Linux install guide --- docs/guides/install/linux.mdx | 183 ++++++++++++++--------- docs/guides/install/macos.mdx | 4 +- docs/guides/linux-front-door.md | 12 +- website/src/components/download-card.jsx | 2 +- website/src/css/download-card.module.css | 22 ++- 5 files changed, 142 insertions(+), 81 deletions(-) diff --git a/docs/guides/install/linux.mdx b/docs/guides/install/linux.mdx index d6ad6624..f95834eb 100644 --- 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
@@ -18,84 +18,51 @@ import styles from '@site/src/css/download-card.module.css';
-## Install Linux Package - -You can install `zrok` from the Linux package repo with these steps. DEB and RPM packages are available for amd64, arm64, and armv7 architectures. - -Check out [the Linux Service guide](/guides/linux-front-door.md) for running `zrok` as a Linux system service. - -### Manually add the package repo and install `zrok` +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.
-Debian Package Steps +Manually install in `~/bin/zrok` -```text -(set -euo pipefail; +1. Unarchive the distribution in a temporary directory. -curl -sSLf https://get.openziti.io/tun/package-repos.gpg \ -| sudo gpg --dearmor --output /usr/share/keyrings/openziti.gpg; -sudo chmod a+r /usr/share/keyrings/openziti.gpg; + ```text + mkdir /tmp/zrok && tar -xf ./zrok*linux*.tar.gz -C /tmp/zrok + ``` -sudo tee /etc/apt/sources.list.d/openziti-release.list >/dev/null <
-Red Hat Package Steps +Auto install binary in `/usr/local/bin/zrok` -```text -(set -euo pipefail; - -sudo tee /etc/yum.repos.d/openziti-release.repo >/dev/null <<\EOF; -[OpenZitiRelease] -name=OpenZiti Release -baseurl=https://packages.openziti.org/zitipax-openziti-rpm-stable/redhat/$basearch -enabled=1 -gpgcheck=0 -gpgkey=https://packages.openziti.org/zitipax-openziti-rpm-stable/redhat/$basearch/repodata/repomd.xml.key -repo_gpgcheck=1 -EOF - -sudo dnf update; -sudo dnf install zrok; -zrok version; -) -``` - -
- -### Run `install.bash` to add the package repo and install `zrok` - -1. Download the zrok install script. - - ```text - curl -sSLfo ./zrok-install.bash https://get.openziti.io/install.bash - ``` - -1. Inspect the script to ensure it is suitable to run as root on your system. - - ```text - less ./zrok-install.bash - ``` - -1. Run the script as root to add the package repo and install the `zrok` package. - - ```text - sudo bash ./zrok-install.bash zrok - ``` - -### Raspberry Pi Binary Install - -
-Binary Install script for Linux +This script auto-selects the correct architecture, and may be helpful for Raspberry Pi users. ```text (set -euo pipefail; @@ -124,4 +91,82 @@ zrok version; ) ``` -
\ No newline at end of file +
+## 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. + +::: + +
+Manually set up DEB repository + +```text +(set -euo pipefail; + +curl -sSLf https://get.openziti.io/tun/package-repos.gpg \ +| sudo gpg --dearmor --output /usr/share/keyrings/openziti.gpg; +sudo chmod a+r /usr/share/keyrings/openziti.gpg; + +sudo tee /etc/apt/sources.list.d/openziti-release.list >/dev/null < + +
+Manually set up RPM repository + +```text +(set -euo pipefail; + +sudo tee /etc/yum.repos.d/openziti-release.repo >/dev/null <<\EOF; +[OpenZitiRelease] +name=OpenZiti Release +baseurl=https://packages.openziti.org/zitipax-openziti-rpm-stable/redhat/$basearch +enabled=1 +gpgcheck=0 +gpgkey=https://packages.openziti.org/zitipax-openziti-rpm-stable/redhat/$basearch/repodata/repomd.xml.key +repo_gpgcheck=1 +EOF + +sudo dnf update; +sudo dnf install zrok; +zrok version; +) +``` + +
+ +
+Auto set up DEB or RPM repository + +1. Download the zrok install script. + + ```text + curl -sSLfo ./zrok-install.bash https://get.openziti.io/install.bash + ``` + +1. Inspect the script to ensure it is suitable to run as root on your system. + + ```text + less ./zrok-install.bash + ``` + +1. Run the script as root to add the package repo and install the `zrok` package. + + ```text + sudo bash ./zrok-install.bash zrok + ``` + +
diff --git a/docs/guides/install/macos.mdx b/docs/guides/install/macos.mdx index 92b7d315..413e5e40 100644 --- 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
@@ -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 index 85645d9b..3ddbafbe 100644 --- 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 index d290ce3d..7ffa39e3 100644 --- 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 ( //
-
+
{`${osName}

{osName}

diff --git a/website/src/css/download-card.module.css b/website/src/css/download-card.module.css index 83a6608f..71ba291b 100644 --- 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 */