style download cards for better logo contrast; refine Linux install guide

This commit is contained in:
Kenneth Bingham 2023-11-23 12:43:23 -05:00
parent c041166aee
commit b481863999
No known key found for this signature in database
GPG Key ID: 31709281860130B6
5 changed files with 142 additions and 81 deletions

View File

@ -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,84 +18,51 @@ import styles from '@site/src/css/download-card.module.css';
</div>
</AssetsProvider>
## 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.
<Details>
<summary>Debian Package Steps</summary>
<summary>Manually install in `~/bin/zrok`</summary>
```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 <<EOF;
deb [signed-by=/usr/share/keyrings/openziti.gpg] https://packages.openziti.org/zitipax-openziti-deb-stable debian main
EOF
1. Install the `zrok` executable.
sudo apt update;
sudo apt install zrok;
zrok version;
)
```
```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:
```text
zrok version
```
```buttonless title="Output"
_
_____ __ ___ | | __
|_ / '__/ _ \| |/ /
/ /| | | (_) | <
/___|_| \___/|_|\_\
v0.4.0 [c889005]
```
</Details>
<Details>
<summary>Red Hat Package Steps</summary>
<summary>Auto install binary in `/usr/local/bin/zrok`</summary>
```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;
)
```
</Details>
### 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
<Details>
<summary>Binary Install script for Linux</summary>
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;
)
```
</Details>
</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;
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 <<EOF;
deb [signed-by=/usr/share/keyrings/openziti.gpg] https://packages.openziti.org/zitipax-openziti-deb-stable debian main
EOF
sudo apt update;
sudo apt install zrok;
zrok version;
)
```
</Details>
<Details>
<summary>Manually set up RPM repository</summary>
```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;
)
```
</Details>
<Details>
<summary>Auto set up DEB or RPM repository</summary>
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
```
</Details>

View File

@ -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:

View File

@ -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

View File

@ -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>

View File

@ -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 */