docs: Fix code block styling (#5058)

Fixes the styling bug that occurs when we use triple backticks to define
code blocks in markdown.

Now it looks like this:

<img width="936" alt="Screenshot 2024-05-20 at 10 55 56 PM"
src="https://github.com/firezone/firezone/assets/167144/36e88908-9023-4b91-82e4-c31d937dc015">


## NOTE

You *must* specify a language to use for highlighting, or `text` if
plaintext. Otherwise, no codeblock colorizing will occur.

Fixes #5057

---------

Co-authored-by: Not Applicable <ReactorScram@users.noreply.github.com>

website/mdx-components.tsx

@@ -2,6 +2,13 @@ import type { MDXComponents } from "mdx/types";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    // Flowbite typography and highlight together create ugly code block
+    // offspring, so disable typography for code blocks.
+    pre: ({ children }) => (
+      <div className="not-format mb-4 lg:mb-8">
+        <pre>{children}</pre>
+      </div>
+    ),
     ...components,
   };
 }

website/src/app/blog/apr-2024-update/readme.mdx

@@ -94,7 +94,7 @@ address handed out by an Erlang-powered telecom switch.
 As it turns out, managing connections for a remote access product is _a lot_
 like managing messages across a telecom network:
 
-```
+```text
 1. Peer A wants to connect to Peer B.
 2. Is it allowed?
   Yes: here are their addresses and keys to secure the connection.

website/src/app/blog/how-dns-works-in-firezone/readme.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Alert from "@/components/DocsAlert";
 import Link from "next/link";
 
-```
+```text
 user@host:~ % nslookup github.com
 Server:		100.100.111.1
 Address:	100.100.111.1#53
@@ -385,7 +385,8 @@ works the same for any third-party SaaS service.
 
 1. An admin defines a DNS Resource with address `*.slack.com` in the Firezone
    admin portal. Notice the wildcard -- this will route all subdomains for Slack
-   through Firezone as well, which helps ensure all relevant Slack traffic is routed.
+   through Firezone as well, which helps ensure all relevant Slack traffic is
+   routed.
 1. The admin then defines a corresponding Policy with the Groups that should
    have access.
 1. All connected Clients affected by the Policy will immediately receive the new

website/src/app/blog/mar-2024-update/readme.mdx

@@ -60,7 +60,7 @@ instructions and download links for your architecture.
 
 Here's an quick example of how to connect to Firezone with it:
 
-```
+```bash
 # sudo is needed to manage DNS and open a tun interface
 sudo ./firezone-linux-x64 --token <your-service-account-token>
 ```

website/src/app/docs/administer/backup/readme.mdx

@@ -37,7 +37,7 @@ using the default Docker compose template.
 1. Stop Firezone (warning: this **will** disconnect any users connected to the
    VPN):
 
-```
+```bash
 docker compose -f $HOME/.firezone/docker-compose.yml down
 ```
 
@@ -45,7 +45,7 @@ docker compose -f $HOME/.firezone/docker-compose.yml down
    `/etc/docker/daemon.json` (for example, for IPv6 support), be sure to include
    that in the backup as well.
 
-```
+```bash
 tar -zcvfp $HOME/firezone-back-$(date +'%F-%H-%M').tgz $HOME/.firezone /var/lib/docker/volumes/firezone_postgres-data
 ```
 
@@ -56,13 +56,13 @@ A backup file named `firezone-back-TIMESTAMP.tgz` will then be stored in
 
 1. Copy the files back to their original location:
 
-```
+```bash
 tar -zxvfp /path/to/firezone-back.tgz -C / --numeric-owner
 ```
 
 2. Optionally, enable Docker to boot on startup:
 
-```
+```bash
 systemctl enable docker
 ```
 
@@ -74,13 +74,13 @@ systemctl enable docker
 1. Stop Firezone (warning: this **will** disconnect any users connected to the
    VPN):
 
-```
+```bash
 firezone-ctl stop
 ```
 
 2. Copy relevant files and folders:
 
-```
+```bash
 tar -zcvfp $HOME/firezone-back-$(date +'%F-%H-%M').tgz /var/opt/firezone /opt/firezone /usr/bin/firezone-ctl /etc/systemd/system/firezone-runsvdir-start.service /etc/firezone
 ```
 
@@ -91,13 +91,13 @@ A backup file named `firezone-back-TIMESTAMP.tgz` will then be stored in
 
 1. Copy the files back to their original location:
 
-```
+```bash
 tar -zxvfp /path/to/firezone-back.tgz -C / --numeric-owner
 ```
 
 2. Reconfigure Firezone to ensure configuration is applied to the host system:
 
-```
+```bash
 firezone-ctl reconfigure
 ```
 

website/src/app/docs/administer/troubleshoot/readme.mdx

@@ -35,26 +35,26 @@ For example, to clear OIDC configs:
 <TabsGroup>
 <TabsItem title="Docker" active>
 
-```
+```bash
 psql -d firezone -h 127.0.0.1 -U postgres -c "UPDATE configurations SET openid_connect_providers = '[]'"
 ```
 
 Similarly, to clear SAML configs:
 
-```
+```bash
 psql -d firezone -h 127.0.0.1 -U postgres -c "UPDATE configurations SET saml_identity_providers = '[]'"
 ```
 
 </TabsItem>
 <TabsItem title="Omnibus">
 
-```
+```bash
 /opt/firezone/embedded/bin/psql -d $DATABASE_NAME -h $DATABASE_HOST -U $DATABASE_USER -c "UPDATE configurations SET openid_connect_providers = '[]'"
 ```
 
 Similarly, to clear SAML configs:
 
-```
+```bash
 /opt/firezone/embedded/bin/psql -d $DATABASE_NAME -h $DATABASE_HOST -U $DATABASE_USER -c "UPDATE configurations SET saml_identity_providers = '[]'"
 ```
 
@@ -68,7 +68,7 @@ websocket connection can't be established, you'll see a red dot indicator in the
 upper-right portion of the Firezone web UI and a corresponding message when you
 hover over it:
 
-```
+```text
 Secure websocket not connected! ...
 ```
 
@@ -96,7 +96,7 @@ In most cases, you'll find clues in one or more of the following locations:
 If the websocket connection is successful, you should see output in the
 `phoenix` service logs similar the following:
 
-```
+```text
 2022-09-23_15:05:47.29158 15:05:47.291 [info] CONNECTED TO Phoenix.LiveView.Socket in 24µs
 2022-09-23_15:05:47.29160   Transport: :websocket
 2022-09-23_15:05:47.29160   Serializer: Phoenix.Socket.V2.JSONSerializer
@@ -127,7 +127,7 @@ clients to the destinations you want to allow through Firezone.
 If you're using `ufw`, this can be done by making sure the default routing
 policy is `allow`:
 
-```
+```text
 ubuntu@fz:~$ sudo ufw default allow routed
 Default routed policy changed to 'allow'
 (be sure to update your rules accordingly)
@@ -135,7 +135,7 @@ Default routed policy changed to 'allow'
 
 A `ufw` status for a typical Firezone server might look like this:
 
-```
+```text
 ubuntu@fz:~$ sudo ufw status verbose
 Status: active
 Logging: on (low)

website/src/app/docs/administer/upgrade/readme.mdx

@@ -20,7 +20,7 @@ Follow the steps below to upgrade Firezone:
 
 1. Change to your Firezone installation directory, by default `$HOME/.firezone`:
 
-```
+```bash
 cd $HOME/.firezone
 ```
 
@@ -30,13 +30,13 @@ cd $HOME/.firezone
    key for the `firezone` service.
 1. Update service images:
 
-```
+```bash
 docker compose pull
 ```
 
 1. Re-up the services (**warning: this will restart updated services**):
 
-```
+```bash
 docker compose up -d
 ```
 

website/src/app/docs/authenticate/saml/readme.mdx

@@ -29,7 +29,7 @@ Firezone automatically generates these for on both Docker and Omnibus-based
 deployments. If you'd like to use your own cert and key, however, you can
 generate them with `openssl`:
 
-```
+```bash
 openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout saml.key -out saml.crt
 ```
 

website/src/app/docs/deploy/docker/readme.mdx

@@ -1,6 +1,5 @@
 import Alert from "@/components/DocsAlert";
 import SupportOptions from "@/components/SupportOptions";
-import CodeBlock from "@/components/CodeBlock";
 
 # Install Firezone with Docker
 
@@ -46,10 +45,9 @@ After prerequisites are satisfied, you're ready to install the Firezone Server.
 
 The easiest way to deploy Firezone with Docker is the automatic install script:
 
-<CodeBlock
-  language="bash"
-  codeString="bash <(curl -fsSL https://github.com/firezone/firezone/raw/legacy/scripts/install.sh)"
-/>
+```bash
+bash <(curl -fsSL https://github.com/firezone/firezone/raw/legacy/scripts/install.sh)
+```
 
 This will ask you a few questions regarding initial configuration, then proceed
 to download a sample docker-compose.yml file, configure it with your responses,
@@ -65,19 +63,19 @@ installation process, follow the steps below to install manually.
 1. Download the docker compose template to a local working directory: **For
    Linux**:
 
-```
+```bash
 curl -fsSL https://raw.githubusercontent.com/firezone/firezone/legacy/docker-compose.prod.yml -o docker-compose.yml
 ```
 
 **For macOS, Windows (non-production only)**:
 
-```
+```bash
 curl -fsSL https://raw.githubusercontent.com/firezone/firezone/legacy/docker-compose.desktop.yml -o docker-compose.yml
 ```
 
 1. Generate required secrets:
 
-```
+```bash
 docker run --rm firezone/firezone bin/gen-env > .env
 ```
 
@@ -85,13 +83,13 @@ docker run --rm firezone/firezone bin/gen-env > .env
    Optionally modify other secrets as needed.
 3. Migrate the database:
 
-```
+```bash
 docker compose run --rm firezone bin/migrate
 ```
 
 4. Create the first admin:
 
-```
+```bash
 docker compose run --rm firezone bin/create-or-reset-admin
 ```
 

website/src/app/docs/reference/reverse-proxy-templates/apache/readme.mdx

@@ -18,7 +18,7 @@ This configuration needs to be placed in
 
 and activated with `a2ensite <server-name>`
 
-```
+```text
 LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
 LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
 LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
@@ -39,7 +39,7 @@ LoadModule proxy_wstunnel_module /usr/lib/apache2/modules/mod_proxy_wstunnel.so
 This configuration builds on the one above and uses Firezone's auto-generated
 self-signed certificates.
 
-```
+```text
 LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
 LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
 LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

website/src/app/docs/reference/reverse-proxy-templates/haproxy/readme.mdx

@@ -15,7 +15,7 @@ the `crt` and `key` file.
 
 `/etc/haproxy/haproxy.cfg`:
 
-```
+```text
 defaults
     mode http
 

website/src/app/docs/reference/security-controls/readme.mdx

@@ -43,7 +43,7 @@ You may use the public key below to encrypt emails to
 
 https://keys.openpgp.org/vks/v1/by-fingerprint/250F8B56804107042DFC6A7345113BA04AD83D8A
 
-```
+```text
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 Comment: 250F 8B56 8041 0704 2DFC  6A73 4511 3BA0 4AD8 3D8A
 Comment: Firezone Security <security@firezone.dev>

website/src/app/globals.css

@@ -19,7 +19,7 @@
     text-decoration: underline !important;
   }
 
-  :is(pre, code) {
-    @apply overflow-x-auto;
+  *:is(code) {
+    @apply overflow-x-auto rounded text-sm;
   }
 }

website/src/app/kb/administer/logs/readme.mdx

@@ -36,7 +36,7 @@ that can be easily shared.
 To export logs from the Gateway Docker container, use the `docker logs` command
 and redirect the output to a file:
 
-```
+```bash
 docker logs firezone-gateway > firezone-gateway.log
 ```
 
@@ -50,7 +50,7 @@ for a full list of log drivers and options available.
 To export logs from the Gateway systemd service, use the `journalctl` command
 and redirect the output to a file:
 
-```
+```bash
 journalctl -u firezone-gateway > firezone-gateway.log
 ```
 

website/src/app/kb/administer/troubleshooting/readme.mdx

@@ -17,13 +17,13 @@ some of the troubleshooting commands below to diagnose the issue.
 
 Check that the container is running:
 
-```
+```bash
 docker ps --filter "name=firezone-gateway"
 ```
 
 Check the container logs:
 
-```
+```bash
 docker logs firezone-gateway
 ```
 
@@ -32,13 +32,13 @@ docker logs firezone-gateway
 
 Check the status of the service:
 
-```
+```bash
 sudo systemctl status firezone-gateway
 ```
 
 Check the logs:
 
-```
+```bash
 sudo journalctl -u firezone-gateway.service
 ```
 

website/src/app/kb/administer/uninstall/readme.mdx

@@ -18,25 +18,25 @@ on how it was installed:
 
 1. Stop the container:
 
-   ```
+   ```bash
    docker stop firezone-gateway
    ```
 
 1. Remove the container and its volumes:
 
-   ```
+   ```bash
    docker rm --volumes firezone-gateway
    ```
 
 1. Remove the image:
 
-   ```
+   ```bash
    docker rmi ghcr.io/firezone/gateway:1
    ```
 
 1. Remove the cache directory:
 
-   ```
+   ```bash
    sudo rm -rf /var/lib/firezone
    ```
 
@@ -45,19 +45,19 @@ on how it was installed:
 
 1. Stop the service:
 
-   ```
+   ```bash
    sudo systemctl stop firezone-gateway
    ```
 
 1. Disable the service:
 
-   ```
+   ```bash
    sudo systemctl disable firezone-gateway
    ```
 
 1. Remove all relevant files:
 
-   ```
+   ```bash
    sudo rm -rf /etc/systemd/system/firezone-gateway.service \
         /usr/local/bin/firezone-gateway \
         /usr/local/bin/firezone-gateway-init \
@@ -71,7 +71,7 @@ on how it was installed:
 
 If you want to remove the Gateway's data from the admin portal as well, navigate
 to the Site where the Gateway was running, click `(see all)` next to the
-`Online Gateways` header, and then delete the offline Gateway corresponding to the
-Gateway you just uninstalled.
+`Online Gateways` header, and then delete the offline Gateway corresponding to
+the Gateway you just uninstalled.
 
 <SupportOptions />

website/src/app/kb/administer/upgrading/readme.mdx

@@ -27,7 +27,7 @@ depending on how you've deployed your Gateway:
 
 Copy-paste the following command to upgrade your Docker-based Gateway:
 
-```
+```bash
 curl -fsSL \
   https://raw.githubusercontent.com/firezone/firezone/main/scripts/gateway-docker-upgrade.sh \
   | bash
@@ -50,7 +50,7 @@ If you deployed via the portal, your unit file should already contain logic
 necessary to upgrade the Gateway on service start. Simply move the old binary
 and restart the service to trigger the upgrade:
 
-```
+```bash
 # Stop the Gateway service. WARNING: This will cause brief downtime for this Gateway.
 sudo systemctl stop firezone-gateway
 
@@ -67,13 +67,11 @@ If something goes wrong during the upgrade, you can always revert to the old
 binary by stopping the service and moving the backup binary back to its original
 location:
 
-```
+```bash
 # Restore the old binary and restart the service
 
 sudo systemctl stop firezone-gateway
-
 sudo mv /usr/local/bin/firezone-gateway.bak /usr/local/bin/firezone-gateway
-
 sudo systemctl start firezone-gateway
 ```
 

website/src/app/kb/architecture/critical-sequences/readme.mdx

@@ -157,7 +157,7 @@ If the query matches a Resource, however, the following happens:
 This is why you'll see DNS-based Resources resolve to IPs such as `100.96.0.1`
 while the Client is signed in:
 
-```
+```text
 > nslookup github.com
 
 Server: 100.100.111.1

website/src/app/kb/architecture/security-controls/readme.mdx

@@ -54,7 +54,7 @@ You may use the public key below to encrypt emails to
 
 https://keys.openpgp.org/vks/v1/by-fingerprint/250F8B56804107042DFC6A7345113BA04AD83D8A
 
-```
+```text
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 Comment: 250F 8B56 8041 0704 2DFC  6A73 4511 3BA0 4AD8 3D8A
 Comment: Firezone Security <security@firezone.dev>

website/src/app/kb/authenticate/google/readme.mdx

@@ -192,7 +192,7 @@ plan level into the **Manually add scopes** field.
 
 </PlanBadge>
 
-```
+```text
 openid
 profile
 email
@@ -204,7 +204,7 @@ email
 
 </PlanBadge>
 
-```
+```text
 openid
 profile
 email

website/src/app/kb/authenticate/oidc/readme.mdx

@@ -99,7 +99,7 @@ in your identity provider's OAuth app settings or in their OIDC documentation.
 
 It typically looks something like this (Okta example given):
 
-```
+```text
 https://your-tenant.okta.com/.well-known/openid-configuration
 ```
 

website/src/app/kb/deploy/dns/readme.mdx

@@ -41,7 +41,7 @@ application making the query.
 For example, if `github.com` was added as a Resource, an `nslookup` might return
 `100.96.0.1` as its IPv4 address:
 
-```
+```text
 > nslookup github.com
 Server:  100.100.111.1
 Address: 100.100.111.1#53

website/src/app/kb/use-cases/postgres-access/readme.mdx

@@ -69,7 +69,7 @@ firewall, but still need to access it from external networks like the internet.
 You've now secured access to your Postgres database. You can test the connection
 by testing access to the database with a tool like `psql`:
 
-```
+```bash
 psql -h <resource-address> -U <username> -d <database>
 ```
 

website/src/app/kb/use-cases/secure-dns/readme.mdx

@@ -82,7 +82,7 @@ answer of `0.0.0.0` or `NXDOMAIN`.
 For example, the `zeustracker.abuse.ch` domain is associated with the Zeus
 botnet and is commonly blocked by many DNS providers:
 
-```
+```text
 > dig zeustracker.abuse.ch
 
 ; <<>> DiG 9.10.6 <<>> @1.1.1.1 zeustracker.abuse.ch
@@ -110,7 +110,7 @@ If you're using one of the **Cloudflare** filtering resolvers mentioned above,
 you can test with `malware.testcategory.com` which Cloudflare provides to check
 if DNS filtering is working correctly:
 
-```
+```text
 > dig malware.testcategory.com
 
 ; <<>> DiG 9.10.6 <<>> @1.1.1.2 malware.testcategory.com

website/src/app/kb/user-guides/linux-client/readme.mdx

@@ -35,13 +35,13 @@ If you don't already have a token generated, follow the instructions in the
 Once you have a token, you can start the Linux Client using the following
 command:
 
-```
+```bash
 sudo FIREZONE_TOKEN=<TOKEN> ./headless-client-x64
 ```
 
 Set some environment variables to configure it:
 
-```
+```bash
 export FIREZONE_NAME="Development Webserver"
 export FIREZONE_ID="some unique identifier"
 export FIREZONE_TOKEN=<TOKEN>
@@ -55,7 +55,7 @@ variables.
 
 A sample output of the help command is shown below:
 
-```
+```text
 > sudo ./headless-client-x64 -h
 
 Usage: headless-client [OPTIONS] [COMMAND]
@@ -97,7 +97,7 @@ On most modern Linux distributions, DNS resolution is handled by
 `systemd-resolved`. If you're not sure, you can check by running the following
 command:
 
-```
+```bash
 systemctl status systemd-resolved
 ```
 
@@ -108,7 +108,7 @@ using `systemd-resolved`, and you should set `FIREZONE_DNS_CONTROL` to
 `systemd-resolved`. You'll need to ensure that `/etc/resolv.conf` is a symlink
 to `/run/systemd/resolve/stub-resolv.conf`:
 
-```
+```bash
 # Check if /etc/resolv.conf is already a symlink to /run/systemd/resolve/stub-resolv.conf
 stat /etc/resolv.conf
 
@@ -130,7 +130,7 @@ When the Linux Client process exits, it will revert the `/etc/resolv.conf` file
 back to its original state. If for some reason this isn't the case, you can
 easily restore it by running the following command:
 
-```
+```bash
 sudo mv /etc/resolv.conf.before-firezone /etc/resolv.conf
 ```
 

website/src/app/page.tsx

@@ -1,4 +1,3 @@
-import CodeBlock from "@/components/CodeBlock";
 import Link from "next/link";
 import Image from "next/image";
 import ActionLink from "@/components/ActionLink";
@@ -370,7 +369,7 @@ export default function Page() {
                 </ChromeIcon>
               </div>
               <div className="p-4 flex items-center justify-center bg-white rounded-lg border border-2 border-neutral-200">
-                <AppleIcon size={12} href="/kb/user-guides/macos-client">
+                <AppleIcon size={12} href="/kb/user-guides/ios-client">
                   <span className="inline-block pt-4 w-full text-center">
                     iOS
                   </span>

website/tailwind.config.js

@@ -71,10 +71,10 @@ module.exports = {
             "--tw-format-quotes": firezoneColors["night-rider"][700],
             // "--tw-format-quote-borders": theme("colors.orange[300]"),
             // "--tw-format-captions": theme("colors.orange[700]"),
-            "--tw-format-code": firezoneColors["electric-violet"][800],
-            "--tw-format-code-bg": firezoneColors["electric-violet"][50],
-            "--tw-format-pre-code": firezoneColors["electric-violet"][800],
-            "--tw-format-pre-bg": firezoneColors["electric-violet"][50],
+            // "--tw-format-code": firezoneColors["electric-violet"][800],
+            // "--tw-format-code-bg": firezoneColors["electric-violet"][50],
+            // "--tw-format-pre-code": firezoneColors["electric-violet"][800],
+            // "--tw-format-pre-bg": firezoneColors["electric-violet"][50],
             // "--tw-format-th-borders": theme("colors.orange[300]"),
             // "--tw-format-td-borders": theme("colors.orange[200]"),
             // "--tw-format-th-bg": theme("colors.orange[50]"),