diff --git a/docs/concepts/files.md b/docs/concepts/files.md index 91d6a0e7..2c1aa620 100644 --- a/docs/concepts/files.md +++ b/docs/concepts/files.md @@ -1,7 +1,7 @@ --- +title: Sharing Websites and Files sidebar_position: 30 --- -# Sharing Websites and Files With `zrok` it is possible to share files quickly and easily as well. To share files using `zrok` use the `--backend-mode web`, for example: `zrok share private . --backend-mode web`. @@ -10,6 +10,7 @@ Running with this mode will make it trivially easy to share files from the direc was run from. For example if you have a directory with a structure like this: + ```shell -rw-r--r--+ 1 Michael None 7090 Apr 17 12:53 CHANGELOG.md -rw-r--r--+ 1 Michael None 11346 Apr 17 12:53 LICENSE @@ -17,7 +18,8 @@ For example if you have a directory with a structure like this: -rwxr-xr-x+ 1 Michael None 44250624 Apr 17 13:00 zrok.exe* ``` -The files can be shared using a command such as: +The files can be shared using a command such as: + ```shell zrok share public --backend-mode web . ``` diff --git a/docs/concepts/hosting.md b/docs/concepts/hosting.md index 20e44264..08c28a31 100644 --- a/docs/concepts/hosting.md +++ b/docs/concepts/hosting.md @@ -1,6 +1,7 @@ --- sidebar_position: 200 --- + # Hosting ## Self-Hosted diff --git a/docs/concepts/index.md b/docs/concepts/index.md index 3f49930b..fa87094d 100644 --- a/docs/concepts/index.md +++ b/docs/concepts/index.md @@ -2,6 +2,7 @@ sidebar_title: Core Features sidebar_position: 25 --- + # Concepts `zrok` was designed to make sharing local resources both secure and easy. In this section of the `zrok` documentation, we'll tour through all of the most important features. @@ -9,4 +10,4 @@ sidebar_position: 25 Sharing with `zrok` can be either [`public`](./sharing-public.md) or [`private`](./sharing-private.md). Naturally, regular web-based resources can be shared but `zrok` also includes support for sharing raw [TCP](./tunnels.md) and [UDP](./tunnels.md) network connections, and also includes a [website and file sharing](./files.md) feature. -Learn about `zrok` [hosting here](./hosting.md), including instructions on how to [install your own `zrok` instance](../guides/self-hosting/self_hosting_guide.md). \ No newline at end of file +Learn about `zrok` [hosting here](./hosting.md), including instructions on how to [install your own `zrok` instance](../guides/self-hosting/self_hosting_guide.md). diff --git a/docs/concepts/opensource.md b/docs/concepts/opensource.md index 77796909..c6925d6e 100644 --- a/docs/concepts/opensource.md +++ b/docs/concepts/opensource.md @@ -1,12 +1,13 @@ --- sidebar_position: 100 --- + # Open Source It's important to the `zrok` project that it remain free and open source software. The code is available on [GitHub](https://github.com/openziti/zrok) for the world to use, inspect, and build upon! -Check out the repository over on GitHub at https://github.com/openziti/zrok. If you find `zrok` to be useful, and +Check out the repository over on GitHub at [https://github.com/openziti/zrok](https://github.com/openziti/zrok). If you find `zrok` to be useful, and you want to help spread the word of `zrok` give the project a star. It really does help get the word out about the project. @@ -15,9 +16,9 @@ The project also uses a very permissive license: Apache v2. We encourage people ## Built on OpenZiti The power of `zrok` really lies in `private` sharing. It's increasingly clear that security needs to be a first-class -member of any organization. To enable `private` sharing, `zrok` was built on top of another excellent open source project named OpenZiti. +member of any organization. To enable `private` sharing, `zrok` was built on top of another excellent open source project named OpenZiti. OpenZiti is a secure overlay network focusing on bringing zero trust to applications. It is the __backbone__ of `zrok`. In fact, `zrok` proudly proclaims itself as an Ziti _native_ application. -If you are interested in learning more about OpenZiti head over to [the docs](https://docs.openziti.io/docs/learn/introduction/), try the quickstart, and don't forget to star that project too. We couldn't build `zrok` without OpenZiti! \ No newline at end of file +If you are interested in learning more about OpenZiti head over to [the docs](https://docs.openziti.io/docs/learn/introduction/), try the quickstart, and don't forget to star that project too. We couldn't build `zrok` without OpenZiti! diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index f287eae1..1b31dfd6 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -10,7 +10,7 @@ import styles from '@site/src/css/download-card.module.css'; ## What's a zrok? -`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. +`zrok` */ziːɹɒk/ ("zee-rock")* is a secure, open-source, self-hostable sharing platform that simplifies shielding and 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. ## Open Source @@ -18,7 +18,9 @@ import styles from '@site/src/css/download-card.module.css'; 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`! -The best ways to engage are [Discourse](https://openziti.discourse.group/) and [GitHub Issues](https://github.com/openziti/zrok/issues). +The best ways to engage are [Discourse](https://openziti.discourse.group/) for questions and [GitHub Issues](https://github.com/openziti/zrok/issues) for documenting problems. + +[Read more about zrok open source](/concepts/opensource.md). ### Ziti native @@ -26,7 +28,7 @@ The best ways to engage are [Discourse](https://openziti.discourse.group/) and [ ## What's it for? -Use `zrok` to share a running service, like a web server or a UDP socket, or to share a directory of static files. +Use `zrok` to share a running service, like a web server or a network socket, or to share a directory of static files. 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. @@ -57,64 +59,13 @@ If [sharing privately](./concepts/sharing-private.md), only users with the share -## Configure Your zrok Service Instance - -:::note -Most users can safely skip this section and proceed to "Generating an Invitation" below. - -This section is relevant if you want to use the `zrok` CLI with an alternate service instance (in the case of self-hosting, etc.). -::: - -`zrok` is both an installable utility that you interact with from your local computer, and also a _service_ that exists on the network. NetFoundry operates the public _service instance_ that is available at `api.zrok.io`, but because `zrok` is open source and self-hostable, you're free to create your own `zrok` service instance. - -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 -``` - -```buttonless title="Output" -[WARNING]: unable to open environment metadata; ignoring - -zrok configuration updated -``` - -:::note -The `WARNING` about `environment metadata` is ignorable. Running the `zrok config set` command writes a small piece of metadata into a `.zrok` folder inside your home directory. This allows `zrok` to identify the version of its settings, providing a mechanism to upgrade your installation as new versions are released. This `WARNING` is letting you know that your current environment has not been initialized by `zrok`. -::: - -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 -``` - -```buttonless title="Output" -Config: - - CONFIG VALUE SOURCE - apiEndpoint https://zrok.mydomain.com config - -[WARNING]: Unable to load your local environment! - -To create a local environment use the zrok enable command. -``` - -:::note -The `WARNING` about being `unable to load your local environment` will go away once you've successfully enabled (`zrok enable`) for your shell (we'll get to that below). For now, this warning is ignorable. -::: - -The `zrok status` command shows the configured API service that your environment is using, as well as the `SOURCE` where the setting was retrieved. In this case, `config` means that the setting was set into the environment using the `zrok config` command. - ## Generating an Invitation -In order to create an account with the `zrok` service instance, you will need to create an invitation. - :::note -Some environments take advantage of _invitation tokens_, which limit who is able to request an invitation on the service instance. If your service uses invitation tokens, the administrator of your instance will include details about how to use your token to generate your invitation. +If not using `zrok.io` (zrok-as-a-service), you must configure the `zrok` command to use your instance. See the [instance configuration guide](/guides/self-hosting/instance-configuration.mdx) in the self-hosting section for details. ::: -We generate an invitation with the `zrok invite` command. A service instance that allows open registration will provide an input form like this: +Invite yourself to `zrok` by running the `zrok invite` command: ```text zrok invite @@ -131,32 +82,13 @@ enter and confirm your email address... 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 -``` - -```buttonless title="Output" -enter and confirm your email address... - -If you don't already have one, request an invite token at: michael@quigley.com - -> Email Address -> Confirm Email -> Token - - -[ Submit ] -``` - The `zrok invite` command presents a small form that allows you to enter (and then confirm) your email address. Tabbing to the `[ Submit ]` button will send the request to your configured `zrok` service. Next, check the email where you sent the invite. You should receive a message asking you to click a link to create your `zrok` account. When you click that link, you will be brought to a web page that will allow you to set a password for your new account: ![Enter a Password](images/zrok_verify.png) -Enter a password and it's confirmation, and click the `Register Account` button. You'll see the following: +Enter a password and its confirmation, and click the `Register Account` button. You'll see the following: ![Successful Registration](images/zrok_registration_success.png) @@ -253,15 +185,13 @@ Shared resources are _ephemeral_ by default; as soon as you terminate the `zrok ### Public Shares and Frontends -Resources that are shared _publicly_ are exposed to any users on the internet who have access to the `zrok` service instance's "frontend". +Resources that are shared _publicly_ are exposed to any users on the internet who have access to the `zrok` instance's "frontend". A frontend is an HTTPS listener exposed to the internet, that lets any user with your ephemeral share token access your publicly shared resources. -For example, I might create a public share using the `zrok share public` command, which results in my `zrok` service instance exposing the following URL to access my resources: +For example, I might create a public share using the `zrok share public` command, which results in my `zrok` instance exposing a URL like `https://2ptgbr8tlfvk.share.zrok.io` to access my resources. -https://2ptgbr8tlfvk.share.zrok.io - -In this case my share was given the "share token" of `2ptgbr8tlfvk`. That URL can be given to any user, allowing them to immediately access the shared resources directly from my local environment, all without exposing any access to my private, secure environment. The physical network location of my environment is not exposed to anonymous consumers of my resources. +In this case, my share was given the "share token" of `2ptgbr8tlfvk`. That URL can be given to any user, allowing them to immediately access the shared resources directly from my local environment, all without exposing any access to my private, secure environment. The physical network location of my environment is not exposed to anonymous consumers of my resources. :::note Here is the `--help` output from `zrok share public`: @@ -381,7 +311,7 @@ $ zrok share reserved mltwsinym1s2 And now if we refresh the frontend endpoint URL in the web browser, we'll see an index of the `docs` directory: -![zrok docs share](images/zrok_docs_share.png) +![zrok docs share](images/zrok_web_console_share_frontend.png) With the reserved share, we're free to stop and restart the `zrok share reserved` command as many times as we want, without losing the token for our share. @@ -398,11 +328,11 @@ In summary, `zrok` lets you easily and securely share resources with both genera Here's a quick review of the `zrok` mental model and the vocabulary. -### Service Instance and Account +### Instance and Account -You create an _account_ with a `zrok` _service instance_. Your account is identified by a username and a password, which you use to log into the _web console_. Your account also has a _secret token_, which you will use to authenticate from the `zrok` command-line to interact with the _service instance_. +You create an _account_ with a `zrok` _instance_. Your account is identified by a username and a password, which you use to log into the _web console_. Your account also has a _secret token_, which you will use to authenticate from the `zrok` command-line to interact with the _instance_. -You create a new _account_ with a `zrok` _service instance_ through the `zrok invite` command. +You create a new _account_ with a `zrok` _instance_ through the `zrok invite` command. ### Environment @@ -414,7 +344,7 @@ You create a new _environment_ by using the `zrok enable` command. Once you've enabled an _environment_, you then create one or more _shares_. Shares have either a _public_ or _private_ _sharing mode_. _Shares_ share a specific type of resource using a _backend mode_. As of this writing `zrok` supports a `proxy` _backend mode_ to share local HTTP resources as a _reverse proxy_. `zrok` also supports a `web` _backend mode_ to share local file and HTML resources by enabling a basic HTTP server. -Every _share_ is identified by a _share token_. _Public shares_ can be accessed through either a _frontend_ instance offered through the `zrok` _service instance_, or through the `zrok access` command. _Private shares_ can only be accessed through the `zrok access` command. +Every _share_ is identified by a _share token_. _Public shares_ can be accessed through either a _frontend_ instance offered through the `zrok` _instance_, or through the `zrok access` command. _Private shares_ can only be accessed through the `zrok access` command. You use the `zrok share` command to create and enable _ephemeral shares_. @@ -424,9 +354,9 @@ You use the `zrok share` command to create and enable _ephemeral shares_. You use the `zrok reserve` command to create _reserved shares_. Reserved shares last until you use the `zrok release` command to delete them. -## Self-Hosting a Service Instance +## Self-Hosting an Instance -Interested in self-hosting your own `zrok` service instance? See the [self-hosting guide](./guides/self-hosting/self_hosting_guide.md) for details. +Interested in self-hosting your own `zrok` instance? See the [self-hosting guide](./guides/self-hosting/self_hosting_guide.md) for details. [openziti]: https://docs.openziti.io/docs/learn/introduction/ "OpenZiti" [ zrok-download]: https://zrok.io "zrok Download" diff --git a/docs/guides/linux-frontdoor.md b/docs/guides/_linux-service.mdx similarity index 98% rename from docs/guides/linux-frontdoor.md rename to docs/guides/_linux-service.mdx index 4185e6cf..7f7e6f08 100644 --- a/docs/guides/linux-frontdoor.md +++ b/docs/guides/_linux-service.mdx @@ -1,6 +1,6 @@ --- -title: zrok frontdoor -sidebar_label: frontdoor +title: zrok system service +sidebar_label: Linux Service sidebar_position: 40 --- diff --git a/docs/guides/docker-share/_reserved_public_share.mdx b/docs/guides/docker-share/_reserved_public_share.mdx new file mode 100644 index 00000000..726941ba --- /dev/null +++ b/docs/guides/docker-share/_reserved_public_share.mdx @@ -0,0 +1,93 @@ + +1. Make a folder on your computer to use as a Docker Compose project for your zrok public share with a reserved subdomain. +1. In your terminal, go to the newly-created project folder. +1. Download [the reserved public share project file](pathname:///zrok-public-reserved/compose.yml) into the project folder. +1. Copy your zrok account's enable token from the zrok web console to your clipboard and paste it in a file named `.env` in the same folder like this: + + ```bash title=".env" + ZROK_ENABLE_TOKEN="8UL9-48rN0ua" + ``` + +1. Run the Compose project to start sharing the built-in demo web server. + + ```bash + docker compose up --detach + ``` + +1. Get the public share URL from the output of the `zrok-share` service or by peeking in the zrok console where the share will be graphed. + + ```bash + docker compose logs zrok-share + ``` + + ```buttonless title="Output" + zrok-public-share-1 | https://w6r1vesearkj.in.zrok.io/ + ``` + +This concludes the minimum steps to begin sharing the demo web server. Read on to learn how to pivot to sharing any website or web service by leveraging additional zrok backend modes. + +## Proxy Any Web Server + +The simplest way to share your web server is to set `ZROK_TARGET` (e.g. `https://example.com`) in the environment of the `docker compose up` command. When you restart the share will auto-configure for that upstream server URL. This applies to both temporary and reserved public shares. + +```bash title=".env" +ZROK_TARGET="http://example.com:8080" +``` + +```bash +docker compose down && docker compose up +``` + +## Require Authentication + +You can require authentication for your public share by setting `ZROK_OAUTH_PROVIDER` to `github` or `google` if you're using our hosted zrok.io, and any OIDC provider you've configured if self-hosting. You can parse the authenticated email address from the request cookie. Read more about the OAuth features in [this blog post](https://blog.openziti.io/the-zrok-oauth-public-frontend). This applies to both temporary and reserved public shares. + +```bash title=".env" +ZROK_OAUTH_PROVIDER="github" +``` + +## Share Something Different + +The reserved public share project uses zrok's `caddy` mode. Caddy accepts configuration as a Caddyfile that is mounted into the container ([zrok Caddyfile examples](https://github.com/openziti/zrok/tree/main/etc/caddy)). + +1. Create a Caddyfile. This example demonstrates proxying two HTTP servers with a weighted round-robin load balancer. + + ```console title="Caddyfile" + http:// { + # zrok requires this bind address template + bind {{ .ZrokBindAddress }} + reverse_proxy /* { + to http://httpbin1:8080 http://httpbin2:8080 + lb_policy weighted_round_robin 3 2 + } + } + ``` + +1. Create a file `compose.override.yml`. This example adds two `httpbin` containers for Caddy load balance, and masks the default Caddyfile with our custom one. + + ```yaml title="compose.override.yml" + services: + httpbin1: + image: mccutchen/go-httpbin # 8080/tcp + httpbin2: + image: mccutchen/go-httpbin # 8080/tcp + zrok-share: + volumes: + - ./Caddyfile:/mnt/.zrok/Caddyfile + ``` + +1. Re-run the project to load the new configuration. + + ```bash + docker compose up --force-recreate --detach + ``` + +1. Recall the reserved share URL from the log. + + ```bash + docker compose logs zrok-share + ``` + + ```buttonless title="Output" + INFO: zrok public URL: https://88s803f2qvao.in.zrok.io/ + ``` diff --git a/docs/guides/frontdoor.mdx b/docs/guides/frontdoor.mdx new file mode 100644 index 00000000..7acd5458 --- /dev/null +++ b/docs/guides/frontdoor.mdx @@ -0,0 +1,49 @@ +--- +title: zrok frontdoor +sidebar_label: frontdoor +sidebar_position: 20 +--- + +import OsTabs from '@theme/OsTabs'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +// import Details from '@theme/MDXComponents/Details'; +import LinuxService from './_linux-service.mdx'; +import ReservedDocker from './docker-share/_reserved_public_share.mdx'; + +zrok frontdoor is a way of using zrok-as-a-service from [zrok.io](https://zrok.io) as a shielded entry point to your website or service. This is useful if you want to expose a service to the public internet, but don't want to expose the service directly. + + + + + +On Linux, zrok frontdoor is implemented as a system service which is provided by the `zrok-share` DEB or RPM package. + + + + + + + +On macOS, zrok frontdoor is implemented as a Docker share project which reserves a public subdomain for your website or service. + + + + + + + +On Windows, zrok frontdoor is implemented as a Docker share project which reserves a public subdomain for your website or service. + + + + + + \ No newline at end of file diff --git a/docs/guides/install/linux.mdx b/docs/guides/install/linux.mdx index 1c4e9bd7..81b3df91 100644 --- a/docs/guides/install/linux.mdx +++ b/docs/guides/install/linux.mdx @@ -98,7 +98,7 @@ We recommend that you install `zrok` from the Linux package repository with the :::info -Check out [the `zrok` Front Door](/guides/linux-frontdoor.md) for running `zrok` as a Linux system service. +Check out [zrok frontdoor](/guides/frontdoor.mdx?os=Linux) for running `zrok` as an always-on service. ::: diff --git a/docs/guides/self-hosting/instance-configuration.mdx b/docs/guides/self-hosting/instance-configuration.mdx new file mode 100644 index 00000000..67f64d81 --- /dev/null +++ b/docs/guides/self-hosting/instance-configuration.mdx @@ -0,0 +1,46 @@ +--- +title: Use Another zrok Instance +sidebar_label: Instance Config +--- + +:::note +This guide is relevant if you are self-hosting or using a friend's `zrok` instance instead of using zrok-as-a-service from `zrok.io`. +::: + +The `zrok` *command* on your omputer uses a `zrok` *instance* over the network. + +The default instance API endpoint for the `zrok` command is `api.zrok.io`. Set the API endpoint to another instance's API endpoint: + +```text +zrok config set apiEndpoint https://zrok.example.com +``` + +```buttonless title="Output" +[WARNING]: unable to open environment metadata; ignoring + +zrok configuration updated +``` + +:::note +The `WARNING` about `environment metadata` is expected when you run `zrok config set` before `zrok enable`. +::: + +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 +``` + +```buttonless title="Output" +Config: + + CONFIG VALUE SOURCE + apiEndpoint https://zrok.mydomain.com config + +[WARNING]: Unable to load your local environment! + +To create a local environment use the zrok enable command. +``` + +The `zrok status` command shows the configured API service that your environment is using, as well as the `SOURCE` where the setting was retrieved. In this case, `config` means that the setting was set into the environment using the `zrok config` command. + diff --git a/docs/guides/self-hosting/self_hosting_guide.md b/docs/guides/self-hosting/self_hosting_guide.md index 4fe1b0fd..6913ba7c 100644 --- a/docs/guides/self-hosting/self_hosting_guide.md +++ b/docs/guides/self-hosting/self_hosting_guide.md @@ -24,7 +24,7 @@ I specifically used the "Host OpenZiti Anywhere" variant because it provides a p Keep track of the generated admin password when running the `expressInstall` script. The script will prompt you like this: -``` +```text Do you want to keep the generated admin password 'XO0xHp75uuyeireO2xmmVlK91T7B9fpD'? (Y/n) ``` @@ -101,6 +101,8 @@ In my case, I've set: export ZROK_API_ENDPOINT=http://127.0.0.1:18080 ``` +[Read more about configuring your self-hosted `zrok` instance](/guides/self-hosting/instance-configuration.mdx). + ## Bootstrap OpenZiti for zrok With your OpenZiti network running and your configuration saved to a local file (I refer to mine as `etc/ctrl.yml` in these examples), you're ready to bootstrap the Ziti network. diff --git a/docs/images/zrok_docs_share.png b/docs/images/zrok_docs_share.png deleted file mode 100644 index c0edf9c6..00000000 Binary files a/docs/images/zrok_docs_share.png and /dev/null differ diff --git a/docs/images/zrok_web_console_share_frontend.png b/docs/images/zrok_web_console_share_frontend.png index 9b409d90..61a7c8d2 100644 Binary files a/docs/images/zrok_web_console_share_frontend.png and b/docs/images/zrok_web_console_share_frontend.png differ diff --git a/website/package-lock.json b/website/package-lock.json index 91f6863b..d8f02828 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -15,6 +15,7 @@ "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^18.2.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "remark-math": "^5.1.1" }, @@ -12328,6 +12329,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "dependencies": { + "ua-parser-js": "^1.0.33" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/website/package.json b/website/package.json index 2c996a57..644917c3 100644 --- a/website/package.json +++ b/website/package.json @@ -21,6 +21,7 @@ "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^18.2.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "remark-math": "^5.1.1" }, diff --git a/website/src/components/assets-context.jsx b/website/src/components/assets-context.jsx index d6b4ceae..334f5f8a 100644 --- a/website/src/components/assets-context.jsx +++ b/website/src/components/assets-context.jsx @@ -18,7 +18,7 @@ export const AssetsProvider = ({ children }) => { const filteredAssets = data.assets.map(asset => ({ name: asset.name, url: asset.browser_download_url, - arch: asset.name.replace('\.tar\.gz','').toUpperCase().split('_')[3] + arch: asset.name.replace('\.tar\.gz','').split('_')[3] })); console.log("Fetched assets:", filteredAssets); // Log fetched assets setAssets(filteredAssets); diff --git a/website/src/components/download-card.jsx b/website/src/components/download-card.jsx index 8d2373c1..8066fe8f 100644 --- a/website/src/components/download-card.jsx +++ b/website/src/components/download-card.jsx @@ -17,6 +17,19 @@ const getFilenamePattern = (osName) => { } }; +const getArchitecturePattern = (arch) => { + switch (arch) { + case 'amd64': + return 'x86_64'; + case 'arm64': + return 'ARM64'; + case 'armv7': + return 'ARM'; + default: + return arch.toUpperCase(); + } +} + const DownloadCard = ({ osName, osLogo, infoText, guideLink }) => { const { colorMode } = useColorMode(); const assets = useAssets(); @@ -37,7 +50,7 @@ const DownloadCard = ({ osName, osLogo, infoText, guideLink }) => { {filteredLinks.map((link, index) => (
  • - {link.arch} + {getArchitecturePattern(link.arch)}
    • ))} diff --git a/website/src/css/download-card.module.css b/website/src/css/download-card.module.css index 7523a9ad..8a629adb 100644 --- a/website/src/css/download-card.module.css +++ b/website/src/css/download-card.module.css @@ -34,7 +34,7 @@ .downloadCard img { width: auto; /* This will make the image take the full width of the card */ - max-height: 150px; /* This will maintain the aspect ratio of the image */ + max-height: 100px; /* 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;; diff --git a/website/src/theme/OsTabs/index.js b/website/src/theme/OsTabs/index.js new file mode 100644 index 00000000..a77dedfa --- /dev/null +++ b/website/src/theme/OsTabs/index.js @@ -0,0 +1,29 @@ +import React, { useState, useEffect } from 'react'; +import OriginalTabs from '@theme/Tabs'; +import { osName } from 'react-device-detect'; + +function OsTabs(props) { + const [defaultValue, setDefaultValue] = useState(null); + + useEffect(() => { + // Based on the OS or any other client-side condition, set the default value + const tabs = ['iOS', 'Android', 'Mac OS', 'Windows', 'Linux'] + if (tabs.includes(osName)) { + setDefaultValue(osName); + } else { + setDefaultValue('Windows'); + } + }, []); // The empty dependency array ensures this runs once after component mount + + return ( + <> + + {props.children} + + {/* Uncomment the following line to debug the detected and selected values */} + {/*

    detected={osName}, selected={defaultValue}

    */} + + ); +} + +export default OsTabs;