ci: Lint/fix website and docs for consistent formatting using prettier (#5132)

.github/codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-skip = ./**/*.svg,./elixir/deps,./**/*.min.js,./kotlin/android/app/build,./e2e/pnpm-lock.yaml,./website/.next,./website/pnpm-lock.yaml,./rust/target,Cargo.lock,./website/docs/reference/api/*.mdx,./**/erl_crash.dump,./cover,./vendor,*.json,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./_build
+skip = ./**/*.svg,./elixir/deps,./**/*.min.js,./kotlin/android/app/build,./kotlin/android/build,./e2e/pnpm-lock.yaml,./website/.next,./website/pnpm-lock.yaml,./rust/target,Cargo.lock,./website/docs/reference/api/*.mdx,./**/erl_crash.dump,./cover,./vendor,*.json,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./_build
 ignore-words-list = optin,crate,keypair,keypairs,iif,statics,wee,anull,commitish,inout,fo,superceded

.github/pre-commit-config.yaml

@@ -10,7 +10,7 @@ repos:
 
   # Standard pre-commit hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v2.3.0
+    rev: v4.6.0
     hooks:
       - id: mixed-line-ending
         args: ["--fix=lf"]
@@ -32,15 +32,32 @@ repos:
 
   # Third party pre-commit hooks
   - repo: https://github.com/koalaman/shellcheck-precommit
-    rev: v0.9.0
+    rev: v0.10.0
     hooks:
       - id: shellcheck
         args: ["--severity=warning"]
         exclude: ^.*/gradlew$
   - repo: https://github.com/pecigonzalo/pre-commit-shfmt
-    rev: v2.1.0
+    rev: v2.2.0
     hooks:
       - id: shell-fmt
         args:
           - -i
           - "4"
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v4.0.0-alpha.8"
+    hooks:
+      - id: prettier
+        # Exclude non-website files for now
+        # TODO: Lint these files in all directories
+        exclude: "^(?!website/)"
+        types_or:
+          - javascript
+          - jsx
+          - css
+          - scss
+          - json
+          - mdx
+          - markdown
+          - html
+          - xml

website/README.md

@@ -19,9 +19,11 @@ result.
 You can start editing the page by modifying `app/page.tsx`. The page
 auto-updates as you edit the file.
 
-This project uses
-[`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to
-automatically optimize and load Inter, a custom Google Font.
+### Linting
+
+This project uses [Prettier](https://prettier.io/) to format code and ensure a
+consistent style. Use the [.prettierrc.json](../.prettierrc.json) in the root of
+this repo to configure your editor.
 
 ## Learn More
 

website/src/app/docs/authenticate/oidc/auth0/readme.mdx

@@ -27,7 +27,8 @@ settings required for the integration:
 In the Auth0 dashboard, create an application. Select **Regular Web
 Application** as the application type.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 configuration"
   src="/images/auth0-configuration.png"
   width={960}
@@ -46,19 +47,22 @@ modify the following parameters:
    `EXTERNAL_URL + /auth/oidc/<Config ID>/callback/` (e.g.
    `https://firezone.example.com/auth/oidc/auth0/callback/`).
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 1"
   src="/images/auth0-settings-1.png"
   width={960}
   height={540}
 />
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 2"
   src="/images/auth0-settings-2.png"
   width={960}
   height={540}
 />
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="auth0 settings 3"
   src="/images/auth0-settings-3.png"
   width={960}

website/src/app/docs/authenticate/oidc/azuread/readme.mdx

@@ -22,7 +22,8 @@ the following config settings required for the integration:
    which returns a JSON document used to construct subsequent requests to this
    OIDC provider.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure sso login"
   src="/images/azure-sso-login.gif"
   width={960}
@@ -46,7 +47,8 @@ after entering the following:
    include the trailing slash both when saving the provider in Firezone and in
    Azure AD (`redirect_uri` field on the screenshot below).**
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure app registration"
   src="/images/azure-app-registration.png"
   width={960}
@@ -58,7 +60,8 @@ After registering, open the details view of the application and copy the
 the endpoints menu to retrieve the `OpenID Connect metadata document`. **This
 will be the `discovery_document_uri` value**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure client id"
   src="/images/azure-client-id.png"
   width={960}
@@ -69,7 +72,8 @@ Next, select the Certificates & secrets link under the Manage menu and create a
 new client secret. Copy the client secret - **this will be the `client_secret`
 value**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure client secret"
   src="/images/azure-client-secret.png"
   width={960}
@@ -80,7 +84,8 @@ Lastly, select the API permissions link under the Manage menu, click
 `Add a permission`, and select `Microsoft Graph`. Add `email`, `openid`,
 `offline_access` and `profile` to the required permissions.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="azure permissions"
   src="/images/azure-permissions.png"
   width={960}

website/src/app/docs/authenticate/oidc/keycloak/readme.mdx

@@ -27,7 +27,8 @@ settings required for the integration:
 In the Keycloak Admin Console, make sure the realm you want to use with Firezone
 is selected.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="keycloak realm"
   src="/images/keycloak-realm.png"
   width={960}
@@ -44,7 +45,8 @@ and configure the following:
 1. **Name**: `Firezone`
 1. Click **Next**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="create firezone client"
   src="/images/create-firezone-client.png"
   width={960}
@@ -54,7 +56,8 @@ and configure the following:
 1. Toggle **Client authentication** to `On` to generate the client secret.
 1. Click **Save**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="save firezone client"
   src="/images/save-firezone-client.png"
   width={960}
@@ -69,7 +72,8 @@ redirect URI:
    `https://firezone.example.com/auth/oidc/keycloak/callback/`).
 1. Click **Add valid redirect URIs**
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone access settings"
   src="/images/firezone-access-settings.png"
   width={960}
@@ -78,7 +82,8 @@ redirect URI:
 
 Click the **Credentials** tab and copy the client secret.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone client secret"
   src="/images/firezone-client-secret.png"
   width={960}
@@ -88,7 +93,8 @@ Click the **Credentials** tab and copy the client secret.
 Navigate to the **Realm Settings** page to get the **Discovery Document URI** by
 copying the **OpenID Endpoint Configuration** link at the bottom of the page.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="keycloak realm settings"
   src="/images/keycloak-realm-settings.png"
   width={960}

website/src/app/docs/authenticate/oidc/okta/readme.mdx

@@ -22,7 +22,8 @@ settings required for the integration:
    which returns a JSON document used to construct subsequent requests to this
    OIDC provider.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone okta sso login"
   src="/images/firezone-okta-sso-login-2.gif"
   width={960}
@@ -38,7 +39,8 @@ In the Admin Console, go to **Applications > Applications** and click **Create
 App Integration**. Set **Sign-in method** to **OICD - OpenID Connect** and
 **Application type** to **Web application**.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta create options"
   src="/images/okta-create-options.png"
   width={960}
@@ -63,7 +65,8 @@ On the following screen, configure the following settings:
 1. **Assignments**: Limit to the groups you wish to provide access to your
    Firezone instance.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta settings"
   src="/images/okta-settings.png"
   width={960}
@@ -74,7 +77,8 @@ Once settings are saved, you will be given a **Client ID**, **Client Secret**,
 and **Okta Domain**. These 3 values will be used in Step 2 to configure
 Firezone.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta credentials"
   src="/images/okta-credentials.png"
   width={960}
@@ -97,7 +101,8 @@ see a `Sign in with Okta` button on the sign in page.
 Okta can limit the users with access to the Firezone app. To do this, go to the
 Assignments tab of the Firezone App Integration in your Okta Admin Console.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="okta assignments"
   src="/images/okta-assignments.png"
   width={960}

website/src/app/docs/authenticate/oidc/onelogin/readme.mdx

@@ -34,7 +34,8 @@ Create a new OIDC connector by visiting **Appliances > Custom Connectors**.
    `<EXTERNAL_URL> + /auth/oidc/<Config ID>/callback/` (e.g.
    `https://firezone.example.com/auth/oidc/onelogin/callback/`).
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="onelogin configuration"
   src="/images/onelogin-configuration.png"
   width={960}
@@ -49,7 +50,8 @@ Next, click **Add App to Connector** to create an OIDC application. Visit the
 You will find the values for the config settings required by Firezone on this
 page as well.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="onelogin config parameters"
   src="/images/onelogin-config-parameters.png"
   width={960}

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

@@ -21,7 +21,8 @@ setup:
 | Name ID format  | Unspecified                                                                                                                              |
 | Name ID         | Basic Information > Primary email                                                                                                        |
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="google saml"
   width={960}
   height={540}
@@ -48,7 +49,8 @@ filling out the following information:
 | Require signed envelopes  | **Unchecked.**  |                                                                                                                                             |
 | Auto create users         | Default `false` | Enable this setting to automatically create users when signing in with this connector for the first time. Disable to manually create users. |
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firezone saml"
   width={960}
   height={540}

website/src/app/docs/user-guides/add-devices/readme.mdx

@@ -16,7 +16,8 @@ their own WireGuard configs.
 Firezone admins can generate device configs for all users. This can be done by
 clicking the "Add Device" button on the user profile page found in `/users`.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="add device under user"
   src="/images/add-device-under-user.png"
   width={960}

website/src/app/docs/user-guides/egress-rules/readme.mdx

@@ -9,7 +9,8 @@ The Allowlist and Denylist support both IPv4 and IPv6 CIDRs and IP addresses.
 When adding a rule, you may optionally scope it to a user which applies the rule
 to all their devices.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="firewall rules"
   src="/images/firewall-rules.png"
   width={960}

website/src/app/docs/user-guides/use-cases/nat-gateway/readme.mdx

@@ -19,7 +19,8 @@ This is commonly done in place of maintaining an IP whitelist for multiple team
 members, which becomes impossible to manage as the access list grows and team
 members' IP addresses change.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="nat gateway"
   src="/images/nat-gateway.png"
   width={960}
@@ -47,7 +48,8 @@ Firezone. Specific to AWS, ensure:
    source IP address of traffic routed through the Firezone instance to external
    destinations. In this case, the IP is `52.202.88.54`.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="allocate elastic ip"
   src="/images/allocate-elastic-ip.png"
   width={960}
@@ -61,7 +63,8 @@ web app is restricted to only requests from `52.202.88.54`. Depending on the
 resource, inbound traffic on different ports and traffic types may need to be
 allowed. This is outside the scope of this guide.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="configure security group"
   src="/images/configure-security-group.png"
   width={960}

website/src/app/docs/user-guides/use-cases/reverse-tunnel/readme.mdx

@@ -11,7 +11,8 @@ a server, container, or machine that is normally behind a NAT or firewall.
 This example demonstrates a simple scenario where a tunnel is established
 between Device A and Device B.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="node to node"
   src="/images/node-to-node.png"
   width={960}
@@ -48,7 +49,8 @@ bi-directionally with Devices B through D. This configuration could represent an
 administrator or engineer accessing multiple resources (servers, containers, or
 machines) in different networks.
 
-<Image className="mx-auto"
+<Image
+  className="mx-auto"
   alt="node to multiple nodes"
   src="/images/node-to-multiple-nodes.png"
   width={960}

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

@@ -10,8 +10,8 @@ import PlanBadge from "@/components/PlanBadge";
 
 </PlanBadge>
 
-In this guide, we'll use Firezone to secure access to a host based on the
-host's private IP address.
+In this guide, we'll use Firezone to secure access to a host based on the host's
+private IP address.
 
 This is useful when you have a host that may be behind a firewall that you want
 to keep secure, but still need to access it from external networks like the

website/src/app/kb/use-cases/nat-gateway/readme.mdx

@@ -14,9 +14,9 @@ In this guide, we'll walk through the configuration required to use Firezone to
 route traffic through a public IP address, sometimes known as a NAT Gateway
 configuration.
 
-Use this when you need your team's traffic to appear to come from a
-single, static IP address to use services that require source traffic to come
-from specified IP allowlists.
+Use this when you need your team's traffic to appear to come from a single,
+static IP address to use services that require source traffic to come from
+specified IP allowlists.
 
 After completing this guide, your team's traffic will be routed to a Firezone
 Gateway and then out to the internet using its public IP address.

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

@@ -21,8 +21,9 @@ internet.
   In general, we recommend using a more granular approach to secure access using
   either [DNS](/kb/use-cases/web-app-access) or
   [IP-based](/kb/use-cases/host-access) Resources instead of the blanket
-  approach used in this guide. Only use this guide if using DNS
-  or IP-based Resources is not feasible, or if you need a stepping stone towards a more granular approach.
+  approach used in this guide. Only use this guide if using DNS or IP-based
+  Resources is not feasible, or if you need a stepping stone towards a more
+  granular approach.
 </Alert>
 
 ## Prerequisites