organize download and install info as guides and add nice downloads

cards to getting started
This commit is contained in:
Kenneth Bingham 2023-11-20 16:50:17 -05:00
parent 53950a0a0d
commit 8e5f526841
No known key found for this signature in database
GPG Key ID: 31709281860130B6
20 changed files with 7260 additions and 13103 deletions

View File

@ -0,0 +1,7 @@
{
"label": "Concepts",
"position": 30,
"link": {
"type": "generated-index"
}
}

View File

@ -1,17 +0,0 @@
---
sidebar_position: 100
---
# Downloads
Right now all `zrok` binaries are delivered from the release page at GitHub.
Head over to https://github.com/openziti/zrok/releases/latest to find the latest downloads.
You need the right download for your OS and CPU. This can be confusing because the OS, e.g., Raspberry Pi OS, could be 32bit even if you have a 64bit Pi (v3, 4, or Zero 2). Linux users can always find the right version by looking up the result of `uname -m` in this table.
| Result |Linux Download Name |
|------------------|--------------------|
| x86_64 |linux-amd64 |
| aarch64, arm/v8 |linux-arm64 |
| armhf, arm/v7 |linux-armv7 |

View File

@ -1,92 +1,61 @@
---
sidebar_position: 0
title: Getting Started with zrok
sidebar_label: Getting Started
sidebar_position: 10
---
# Getting Started with zrok
`zrok` is a next-generation sharing platform, designed to make sharing network and file resources simple and secure. `zrok` is a _Ziti Native Application_, built on top of the [OpenZiti](https://docs.openziti.io/docs/learn/introduction/) programmable zero trust network overlay. `zrok` is open source, licensed under the Apache v2 license. You can choose to self-host `zrok` or leverage the free, managed offering provided by NetFoundry at https://zrok.io.
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';
As of version `v0.4.0`, `zrok` provides the ability to:
## What's a zrok?
* share resources [publicly](./concepts/sharing-public.md), similar to other distributed reverse proxies; this allows you to easily expose your private HTTP/S resources to the public internet without changing your network security
* share resources [privately](./concepts/sharing-private.md); private sharing uses peer-to-peer connectivity between two parties by leveraging the OpenZiti overlay. We believe the private sharing offered by `zrok` provides a unique level of security and privacy for this type of sharing.
`zrok` is an open-source, self-hostable sharing platform that simplifies sharing network services or files. There's a hardened zrok-as-a-service offering available at [zrok.io](https://zrok.io) with a generous free tier.
As of version `v0.4.0`, `zrok` allows sharing these kinds of resources:
## Open Source
* HTTP/S resources; `zrok` provides reverse proxy capabilities for your HTTP/S endpoints, both publicly and privately
* file resources; `zrok` provides built in `web` capabilities, allowing you to share your files with other users, both publicly and privately
* TCP and UDP tunnels; `zrok` provides built-in `tunnel` capabilities, allowing you to share your TCP and UDP endpoints directly with other users privately (`zrok` does not currently offer public sharing of these kinds of resources)
`zrok` is licensed under Apache 2.0.
Let's take a look at how to get started with `zrok`.
Check [the roadmap](https://github.com/orgs/openziti/projects/16) if you're thinking about the future. We would love to hear your ideas for `zrok`!
:::note `zrok` moves fast!
The best ways to engage are [Discourse](https://openziti.discourse.group/) and [GitHub Issues](https://github.com/openziti/zrok/issues).
`zrok` is an open source project and is in its early development phases. We're doing our development publicly. See the [roadmap](https://github.com/orgs/openziti/projects/16) for details about the project. We are highly interested in feedback as we continue to iterate quickly. Please provide feedback in [Discourse](https://openziti.discourse.group/), raise [GitHub Issues](https://github.com/openziti/zrok/issues), or reach out directly.
### Ziti native
:::
`zrok` is a _Ziti Native Application_, built on the [OpenZiti](https://openziti.io) platform, and supported by the OpenZiti community and NetFoundry team.
## Downloading zrok
## What's it for?
Releases are also available from the `zrok` project repository on GitHub at https://github.com/openziti/zrok/releases/latest. If you're a Linux user and you're not sure which download to use then check out the hints on [the Downloads page](./downloads.md).
Use `zrok` to share a running service, like a web server or a UDP socket, or to share a directory of static files.
### Extract zrok Distribution
If [sharing publicly](./concepts/sharing-public.md), you can reserve a subdomain, enable authentication options, or both. Public shares proxy HTTPS to your service or files.
Move the downloaded `zrok` distribution into a directory on your system. In my case, I've placed it in my home directory:
If [sharing privately](./concepts/sharing-private.md), only users with the share token can access your share. In addition to what you can share publicly, private shares can include TCP and UDP services.
```
$ ls -lF zrok*
-rwxr-xr-x 1 michael michael 14459159 May 31 13:46 zrok_0.4.0-rc6_linux_amd64.tar.gz*
```
## Installing the zrok Command
Create a directory where the extracted distribution will sit:
```
$ mkdir zrok
$ cd zrok/
```
Extract the `zrok` distribution:
```
$ tar zxvf ../zrok_0.4.0-rc1_linux_amd64.tar.gz
CHANGELOG.md
README.md
zrok
```
> NOTE: On Windows platforms the distribution is shipped as a `zip` archive. Windows Explorer includes support for extracting `zip` archives natively.
Add `zrok` to your shell's environment.
For Linux or macos:
```
$ export PATH=`pwd`:$PATH
```
For Windows (using Command Prompt):
```
> set PATH=%CD%;%PATH%
```
For Windows (using PowerShell):
```
$env:path += ";"+$pwd.Path
```
With the `zrok` executable in your path, you can then execute the `zrok` command from your shell:
```
$ ./zrok version
_
_____ __ ___ | | __
|_ / '__/ _ \| |/ /
/ /| | | (_) | <
/___|_| \___/|_|\_\
v0.4.0-rc6 [c889005]
```
<AssetsProvider>
<div className={styles.downloadContainer}>
<DownloadCard
osName="Windows"
osLogo="/img/logo-windows.svg"
infoText="Binary executable"
guideLink="/docs/guides/install/windows"
/>
<DownloadCard
osName="macOS"
osLogo="/img/logo-apple.svg"
infoText="Binary executable"
guideLink="/docs/guides/install/macos"
/>
<DownloadCard
osName="Linux"
osLogo="/img/logo-linux.svg"
infoText="DEB, RPM packages"
guideLink="/docs/guides/install/linux"
/>
</div>
</AssetsProvider>
## Configure Your zrok Service Instance
@ -100,8 +69,11 @@ This section is relevant if you want to use the `zrok` CLI with an alternate ser
The `zrok` executable defaults to using the `zrok` service instance at `api.zrok.io`. Should you need to change the endpoint to use a different service instance, you can do that with the following command:
```text
zrok config set apiEndpoint https://zrok.mydomain.com
```
$ zrok config set apiEndpoint https://zrok.mydomain.com
```buttonless title="Output"
[WARNING]: unable to open environment metadata; ignoring
zrok configuration updated
@ -113,9 +85,11 @@ The `WARNING` about `environment metadata` is ignorable. Running the `zrok confi
You can use the `zrok status` command to inspect the state of your local _environment_. `zrok` refers to each shell where you install and `enable` a copy of `zrok` as as an _environment_.
```text
zrok status
```
$ zrok status
```buttonless title="Output"
Config:
CONFIG VALUE SOURCE
@ -142,9 +116,11 @@ Some environments take advantage of _invitation tokens_, which limit who is able
We generate an invitation with the `zrok invite` command. A service instance that allows open registration will provide an input form like this:
```text
zrok invite
```
$ zrok invite
```buttonless title="Output"
enter and confirm your email address...
> user@domain.com
@ -157,9 +133,11 @@ invitation sent to 'user@domain.com'!
A service instance that requires token-based invitation authentication will present a form that looks like this:
```text
zrok invite
```
$ zrok invite
```buttonless title="Output"
enter and confirm your email address...
If you don't already have one, request an invite token at: michael@quigley.com
@ -206,23 +184,25 @@ This dialog box shows you the `zrok enable` command that you can use to enable a
Let's copy that command and paste it into your shell:
```
```buttonless title="Example"
$ zrok enable klFEoIi0QAg7
⣻ contacting the zrok service...
```
After a few seconds, the message will change and indicate that the enable operation succeeded:
```
```buttonless title="Example"
$ zrok enable klFEoIi0QAg7
⣻ the zrok environment was successfully enabled...
```
Now, if we run a `zrok status` command, you will see the details of your environment:
```txt
zrok status
```
$ zrok status
```buttonless title="Output"
Config:
CONFIG VALUE SOURCE
@ -286,8 +266,11 @@ In this case my share was given the "share token" of `2ptgbr8tlfvk`. That URL ca
:::note
Here is the `--help` output from `zrok share public`:
```text
zrok share public
```
$ zrok share public
```buttonless title="Output"
Error: accepts 1 arg(s), received 0
Usage:
zrok share public <target> [flags]
@ -338,13 +321,13 @@ If we try to reload the frontend endpoint in our web browser, we'll see:
`zrok` also provides a powerful _private_ sharing model. If I execute the following command:
```
```buttonless title="Example"
$ zrok share private http://localhost:8080
```
The `zrok` service will respond with the following:
```
```buttonless title="Output"
access your share with: zrok access private wvszln4dyz9q
```
@ -370,7 +353,7 @@ A reserved share can be re-used multiple times; it will survive termination of t
The first step is to create the reserved share:
```
```txt title="Example"
$ zrok reserve public --backend-mode web v0.3_getting_started
[ 0.275] INFO main.(*reserveCommand).run: your reserved share token is 'mltwsinym1s2'
[ 0.275] INFO main.(*reserveCommand).run: reserved frontend endpoint: https://mltwsinym1s2.share.zrok.io
@ -388,7 +371,7 @@ This is the `404` error message returned by the `zrok` frontend. We're getting t
This command:
```
```txt title="Example"
$ zrok share reserved mltwsinym1s2
```
@ -404,7 +387,7 @@ With the reserved share, we're free to stop and restart the `zrok share reserved
When we're done with the reserved share, we can _release_ it using this command:
```
```txt title="Example"
$ zrok release mltwsinym1s2
[ 0.230] INFO main.(*releaseCommand).run: reserved share 'mltwsinym1s2' released
```

View File

@ -1,6 +1,6 @@
{
"label": "Guides",
"position": 30,
"position": 50,
"link": {
"type": "generated-index"
}

View File

@ -0,0 +1,7 @@
{
"label": "Install",
"position": 10,
"link": {
"type": "generated-index"
}
}

View File

@ -0,0 +1,114 @@
---
title: Install zrok in Linux
sidebar_label: Linux
---
import Details from '@theme/MDXComponents/Details';
## 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`
<Details>
<summary>Debian Package Steps</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>Red Hat Package Steps</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>
```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>

View File

@ -0,0 +1,55 @@
---
title: Install zrok in macOS
sidebar_label: macOS
---
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
<AssetsProvider>
<div className={styles.downloadContainer}>
<DownloadCard
osName="macOS"
osLogo="/img/logo-apple.svg"
/>
</div>
</AssetsProvider>
Download the binary distribution for your macOS architecture. For Intel Macs use the `amd64` distribution. For Apple Silicon Macs use the `arm64` distribution.
Unarchive the distribution in a temporary directory:
```text
mkdir /tmp/zrok && tar -xf ./zrok*darwin*.tar.gz -C /tmp/zrok
```
Install the `zrok` executable.
```text
mkdir -p ~/bin && install /tmp/zrok/zrok ~/bin/
```
Add `~/bin` to your shell's executable search path. Optionally add this to your ~/.zshenv to persist the change.
```text
export PATH=~/bin:$PATH
```
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]
```

View File

@ -0,0 +1,52 @@
---
title: Install zrok in Windows
sidebar_label: Windows
---
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
<AssetsProvider>
<div className={styles.downloadContainer}>
<DownloadCard
osName="Windows"
osLogo="/img/logo-windows.svg"
/>
</div>
</AssetsProvider>
Unarchive the distribution in a temporary directory:
```text
New-Item -Path "$env:TEMP\zrok" -ItemType Directory -ErrorAction Stop
tar -xf .\zrok*windows*.tar.gz -C "$env:TEMP\zrok"
```
Install the `zrok` executable and include HOME\bin in the search PATH.
```text
$source = Join-Path -Path $env:TEMP -ChildPath "zrok\zrok.exe"
$destination = Join-Path -Path $env:HOME -ChildPath "bin\zrok.exe"
New-Item -Path $destination -ItemType Directory -ErrorAction SilentlyContinue
Copy-Item -Path $source -Destination $destination
$env:path += ";"+$destination
```
With the `zrok` executable in your path, you can then execute the `zrok` directly.
```text
zrok version
```
```buttonless title="Output"
_
_____ __ ___ | | __
|_ / '__/ _ \| |/ /
/ /| | | (_) | <
/___|_| \___/|_|\_\
v0.4.0 [c889005]
```

View File

@ -1,5 +1,6 @@
---
title: Linux Service
title: zrok Front Door
sidebar_label: Front Door
sidebar_position: 40
---
@ -23,22 +24,15 @@ When the service starts it will:
## Installation
1. Download the OpenZiti install script.
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.
```bash
curl -sSo ./openziti-install.bash https://get.openziti.io/install.bash
```bash title="Ubuntu, Debian"
sudo sudo apt install zrok-share
```
1. Inspect the script to ensure it is suitable to run as root on your system.
```bash
less ./openziti-install.bash
```
1. Run the script as root to install the `zrok-share` package.
```bash
sudo bash ./openziti-install.bash zrok-share
```bash title="Fedora, Rocky"
sudo dnf install zrok-share
```
## Enable
@ -73,15 +67,6 @@ ZROK_TARGET="/var/www/html"
ZROK_BACKEND_MODE="web"
```
### WebDAV Server
This uses zrok's `drive` backend mode to serve a directory of static files as a WebDAV resource. The directory must be readable by 'other', e.g. `chmod -R o+rX /usr/share/doc`.
```bash title="/opt/openziti/etc/zrok/zrok-share.env"
ZROK_TARGET="/usr/share/doc"
ZROK_BACKEND_MODE="drive"
```
### Caddy Server
Use zrok's built-in Caddy server to serve static files or as a reverse proxy to multiple web servers with various HTTP routes or as a load-balanced set. A sample Caddyfile is available in the path shown.
@ -91,6 +76,17 @@ ZROK_TARGET="/opt/openziti/etc/zrok/multiple_upstream.Caddyfile"
ZROK_BACKEND_MODE="caddy"
```
### Network Drive
This uses zrok's `drive` backend mode to serve a directory of static files as a virtual network drive. The directory must be readable by 'other', e.g. `chmod -R o+rX /usr/share/doc`.
```bash title="/opt/openziti/etc/zrok/zrok-share.env"
ZROK_TARGET="/usr/share/doc"
ZROK_BACKEND_MODE="drive"
```
[Learn more about this feature in this blog post](https://blog.openziti.io/zrok-drives-an-early-preview).
## Authentication
You can limit access to certain email addresses with OAuth or require a password.

1
website/.nvmrc Normal file
View File

@ -0,0 +1 @@
v18.18.2

View File

@ -95,25 +95,13 @@ const config = {
type: 'doc',
docId: 'getting-started',
position: 'right',
label: 'What is zrok?',
label: 'Docs',
},
{
href: 'https://github.com/orgs/openziti/projects/16',
label: 'Roadmap',
position: 'right',
},
{
type: 'doc',
docId: 'getting-started',
position: 'right',
label: 'Docs',
},
{
type: 'doc',
docId: 'downloads',
position: 'right',
label: 'Downloads',
},
{
href: 'https://github.com/openziti/zrok',
label: 'GitHub',

11732
website/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -14,18 +14,18 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "^2.4.3",
"@docusaurus/plugin-client-redirects": "^2.4.3",
"@docusaurus/preset-classic": "^2.4.3",
"@mdx-js/react": "^1.6.22",
"@docusaurus/core": "^3.0.0",
"@docusaurus/plugin-client-redirects": "^3.0.0",
"@docusaurus/preset-classic": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"clsx": "^1.2.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remark-math": "^5.1.1"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.4.3"
"@docusaurus/module-type-aliases": "^3.0.0"
},
"browserslist": {
"production": [

View File

@ -0,0 +1,39 @@
import React, { createContext, useState, useContext, useEffect } from 'react';
const AssetsContext = createContext([]);
export const useAssets = () => useContext(AssetsContext);
export const AssetsProvider = ({ children }) => {
const [assets, setAssets] = useState([]);
useEffect(() => {
const fetchReleaseAssets = async () => {
try {
const response = await fetch('https://api.github.com/repos/openziti/zrok/releases/latest');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
const filteredAssets = data.assets.map(asset => ({
name: asset.name,
url: asset.browser_download_url,
arch: asset.name.replace('\.tar\.gz','').toUpperCase().split('_')[3]
}));
console.log("Fetched assets:", filteredAssets); // Log fetched assets
setAssets(filteredAssets);
} catch (error) {
console.error('Error fetching the release assets:', error);
// Handle the error state appropriately
}
};
fetchReleaseAssets();
}, []); // Empty dependency array ensures this runs once after component mounts
return (
<AssetsContext.Provider value={assets}>
{children}
</AssetsContext.Provider>
);
};

View File

@ -0,0 +1,57 @@
// download-card.jsx
import React from 'react';
import { useAssets } from '@site/src/components/assets-context';
import styles from '@site/src/css/download-card.module.css';
import { useColorMode } from '@docusaurus/theme-common';
const getFilenamePattern = (osName) => {
switch (osName) {
case 'Windows':
return 'windows';
case 'macOS':
return 'darwin';
case 'Linux':
return 'linux';
default:
return '';
}
};
const DownloadCard = ({ osName, osLogo, infoText, guideLink }) => {
const { colorMode } = useColorMode();
const assets = useAssets();
console.log("Assets in DownloadCard:", assets);
const filenamePattern = getFilenamePattern(osName);
const filteredLinks = assets.filter(asset => asset.name.includes(filenamePattern));
console.log("Filtered assets for", osName, "in DownloadCard:", filteredLinks);
return (
// <div className={colorMode === 'dark' ? styles.downloadCardDark : styles.downloadCardLight}>
<div className={styles.downloadCard}>
<div className="imgContainer">
<img src={osLogo} alt={`${osName} logo`} />
</div>
<h3>{osName}</h3>
{filteredLinks.length > 0 && (
<ul>
{filteredLinks.map((link, index) => (
<li key={index}>
<a href={link.url}>
{link.arch}
</a>
</li>
))}
</ul>
)}
{guideLink && (
<div className={styles.cardFooter}>
<p>{infoText}</p>
<a href={guideLink}>GUIDE</a>
<p></p>
</div>
)}
</div>
);
};
export default DownloadCard;

View File

@ -0,0 +1,72 @@
:root {
--cardfooter-background: #c4b7f5
}
[data-theme="dark"] {
--cardfooter-background: #4b359f
}
.downloadContainer {
width: 100%; /* Adjust this value to fit your design */
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 9px; /* Adjust the space between cards */
padding: 20px; /* Space inside the container */
}
.downloadCard {
width: 30%; /* Adjust the width as needed */
box-sizing: border-box; /* Include padding and border in the width */
background-color: var(--sidebar-selected);
border-radius: 18px;
text-align: center;
display: flex;
flex-grow: 1; /* Allows the content area to grow and take up available space */
flex-direction: column; /* Stack footer vertically */
}
.downloadCard img {
width: auto; /* This will make the image take the full width of the card */
max-height: 200px; /* This will maintain the aspect ratio of the image */
margin: 0 auto; /* Center the image if the card is wider than the image */
display: block; /* Change display from inline to block for better control */
padding: 10px;;
}
.cardFooter {
background-color: var(--cardfooter-background);
border-top: 1px solid #e0e0e0; /* Light gray border on top */
padding: 10px;
margin-top: auto; /* Push the footer to the bottom */
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.downloadCard ul {
list-style: none; /* Remove the default list style */
padding: 0; /* Remove the default padding */
margin: 0; /* Remove the default margin */
margin-bottom: 20px; /* Add some space between the list and the footer */
}
.downloadCard .imgContainer {
background-color: #e0e0e0; /* Light gray background for light mode */
display: inline-block; /* Or 'block' depending on layout */
padding: 10px; /* Adjust padding as needed */
border-radius: 8px; /* Optional: for rounded corners */
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.downloadContainer {
flex-direction: column;
}
.downloadCard {
width: auto; /* Take full width on small screens */
max-width: none; /* Allow the card to take full width */
}
}

View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 22.773 22.773" xml:space="preserve">
<g>
<g>
<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 266 312">
<path d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5_logos</title><path d="M480,265H232V444l248,36V265Z"/><path d="M216,265H32V415l184,26.7V265Z"/><path d="M480,32,232,67.4V249H480V32Z"/><path d="M216,69.7,32,96V249H216V69.7Z"/></svg>

After

Width:  |  Height:  |  Size: 425 B

File diff suppressed because it is too large Load Diff