extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-01-03 12:39:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

use ThemedImage component instead of CSS to switch frontdoor diagram dark mode

Browse Source
This commit is contained in:
Kenneth Bingham 2023-12-07 11:29:02 -05:00
parent b0c71a702c
commit 23b08aa4bd
No known key found for this signature in database
GPG Key ID: 31709281860130B6
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/guides/frontdoor.mdx
View File

@ -9,6 +9,8 @@ import OsTabs from '@theme/OsTabs';
import TabItem from '@theme/TabItem';
import LinuxService from './_frontdoor-linux.mdx';
import ReservedDocker from './_frontdoor-docker.mdx';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
**zrok frontdoor** is the heavy-duty front door to your app or site. It makes your website or app available to your online audience through the shield of zrok.io's hardened, managed frontends.
@ -18,8 +20,14 @@ import ReservedDocker from './_frontdoor-docker.mdx';
zrok frontends are the parts of zrok that proxy incoming public web traffic to zrok backend shares via OpenZiti. When you use zrok with a `zrok.io` frontend, you're using **zrok frontdoor**. `zrok.io` is zrok-as-a-service by NetFoundry, the team behind OpenZiti. You need a free account to use **zrok frontdoor**.
![dark mode diagram](/img/zrok-frontdoor-dark-mode.svg#gh-dark-mode-only)
![light mode diagram](/img/zrok-frontdoor-light-mode.svg#gh-light-mode-only)
<ThemedImage
alt="frontdoor diagram"
sources={{
light: useBaseUrl('/img/zrok-frontdoor-light-mode.svg'),
dark: useBaseUrl('/img/zrok-frontdoor-dark-mode.svg'),
}}
/>;
## Choose your OS

6
website/src/css/custom.css
View File

@ -183,9 +183,3 @@ a code {
.language-buttonless div > button {
display: none;
}
/* hide image sources from the other mode */
[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
display: none;
}