feat(website): Add changelog page (#5399)

Now that component versions are split, it would be good to have a single source-of-truth for all components we publish and support. Fixes https://github.com/firezone/firezone/issues/4892 Supersedes #5398
2026-01-27 18:18:55 +00:00 · 2024-06-20 14:22:47 -07:00
parent 2df512717d
commit 559d8cce7a
33 changed files with 495 additions and 31 deletions
--- a/.github/release-drafter-gateway.yml
+++ b/.github/release-drafter-gateway.yml
@@ -52,4 +52,5 @@ exclude-labels:
 change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
 template: |
-  CHANGE_ME
+  Please see our [changelog](https://www.firezone.dev/changelog?utm_source=github-releases)
+  for more details.
--- a/.github/release-drafter-gui-client.yml
+++ b/.github/release-drafter-gui-client.yml
@@ -52,4 +52,5 @@ exclude-labels:
 change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
 template: |
-  CHANGE_ME
+  Please see our [changelog](https://www.firezone.dev/changelog?utm_source=github-releases)
+  for more details.
--- a/.github/release-drafter-headless-client.yml
+++ b/.github/release-drafter-headless-client.yml
@@ -52,4 +52,5 @@ exclude-labels:
 change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
 template: |
-  CHANGE_ME
+  Please see our [changelog](https://www.firezone.dev/changelog?utm_source=github-releases)
+  for more details.
--- a/website/src/app/changelog/layout.tsx
+++ b/website/src/app/changelog/layout.tsx
@@ -0,0 +1,31 @@
+import Image from "next/image";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="pt-14 flex flex-col">
+      <div className="bg-neutral-900 mx-auto w-screen text-center">
+        <Image
+          alt="Firezone logo light"
+          width={147}
+          height={92}
+          src="/images/logo-main-light-primary.svg"
+          className="py-12 mx-auto"
+        />
+      </div>
+      <div className="bg-neutral-50 border-b border-neutral-100">
+        <div className="py-8 px-4 sm:py-10 sm:px-6 md:py-12 md:px-8 lg:py-14 lg:px-10 mx-auto max-w-screen-lg w-full">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight">
+            Changelog
+          </h1>
+          <p className="text-md sm:text-lg md:text-xl lg:text-2xl mt-4 md:mt-6 lg:mt-8 tracking-tight">
+            A list of the most recent updates to Firezone, organized by
+            component.
+          </p>
+        </div>
+      </div>
+      <div className="py-4 px-4 sm:py-6 sm:px-6 md:py-8 md:px-8 lg:py-10 lg:px-10 mx-auto max-w-screen-lg w-full">
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/website/src/app/changelog/page.tsx
+++ b/website/src/app/changelog/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+import Changelog from "@/components/Changelog";
+
+export const metadata: Metadata = {
+  title: "Changelog • Firezone",
+  description: "A list of the most recent updates to Firezone.",
+};
+
+export default function Page() {
+  return <Changelog />;
+}
--- a/website/src/app/docs/administer/backup/readme.mdx
+++ b/website/src/app/docs/administer/backup/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";
 import SupportOptions from "@/components/SupportOptions";

--- a/website/src/app/docs/administer/regen-keys/readme.mdx
+++ b/website/src/app/docs/administer/regen-keys/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Regenerate Secret Keys
--- a/website/src/app/docs/administer/troubleshoot/readme.mdx
+++ b/website/src/app/docs/administer/troubleshoot/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import SupportOptions from "@/components/SupportOptions";

 # Troubleshooting Guide
--- a/website/src/app/docs/administer/uninstall/readme.mdx
+++ b/website/src/app/docs/administer/uninstall/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Uninstall Firezone
--- a/website/src/app/docs/administer/upgrade/readme.mdx
+++ b/website/src/app/docs/administer/upgrade/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";
 import Image from "next/image";

--- a/website/src/app/docs/authenticate/saml/readme.mdx
+++ b/website/src/app/docs/authenticate/saml/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";

 # Integrate your identity provider using SAML 2.0

--- a/website/src/app/docs/deploy/advanced/external-database/readme.mdx
+++ b/website/src/app/docs/deploy/advanced/external-database/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Custom External Database
--- a/website/src/app/docs/deploy/configure/readme.mdx
+++ b/website/src/app/docs/deploy/configure/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";

 # Configure Firezone

--- a/website/src/app/docs/deploy/readme.mdx
+++ b/website/src/app/docs/deploy/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Deploy Firezone
--- a/website/src/app/docs/deploy/security-considerations/readme.mdx
+++ b/website/src/app/docs/deploy/security-considerations/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Security considerations
--- a/website/src/app/docs/reference/file-and-directory-locations/readme.mdx
+++ b/website/src/app/docs/reference/file-and-directory-locations/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";

 # File and Directory Locations

--- a/website/src/app/docs/reference/telemetry/readme.mdx
+++ b/website/src/app/docs/reference/telemetry/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Telemetry
--- a/website/src/app/kb/administer/logs/readme.mdx
+++ b/website/src/app/kb/administer/logs/readme.mdx
@@ -1,4 +1,4 @@
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";

 # Viewing logs

--- a/website/src/app/kb/administer/troubleshooting/readme.mdx
+++ b/website/src/app/kb/administer/troubleshooting/readme.mdx
@@ -1,5 +1,5 @@
 import SupportOptions from "@/components/SupportOptions";
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Image from "next/image";

 # Troubleshooting Guide
--- a/website/src/app/kb/administer/uninstall/readme.mdx
+++ b/website/src/app/kb/administer/uninstall/readme.mdx
@@ -1,5 +1,5 @@
 import SupportOptions from "@/components/SupportOptions";
-import { TabsGroup, TabsItem } from "@/components/DocsTabs";
+import { TabsGroup, TabsItem } from "@/components/Tabs";
 import Alert from "@/components/DocsAlert";

 # Uninstall Firezone Gateway
--- a/website/src/app/kb/administer/upgrading/readme.mdx
+++ b/website/src/app/kb/administer/upgrading/readme.mdx
@@ -1,6 +1,6 @@
 import { HiCheck } from "react-icons/hi2";
 import Link from "next/link";
-import { TabsItem, TabsGroup } from "@/components/DocsTabs";
+import { TabsItem, TabsGroup } from "@/components/Tabs";
 import Image from "next/image";
 import Alert from "@/components/DocsAlert";
 import SupportOptions from "@/components/SupportOptions";
--- a/website/src/app/pricing/_page.tsx
+++ b/website/src/app/pricing/_page.tsx
@@ -232,7 +232,7 @@ export default function _Page() {
              <li className="flex space-x-2.5">
                <HiCheck className="flex-shrink-0 w-5 h-5" />
                <span className="leading-tight">
-                  Directory sync for Google, Entra ID, and Okta
+                  Directory sync for Google, Entra ID, Okta, and JumpCloud
                </span>
              </li>
              <li className="flex space-x-2.5">
--- a/website/src/components/Changelog/Android.tsx
+++ b/website/src/components/Changelog/Android.tsx
@@ -0,0 +1,28 @@
+import Entries from "./Entries";
+import Entry from "./Entry";
+
+export default function Android() {
+  return (
+    <Entries title="Android">
+      <Entry version="1.0.4" date={new Date("2024-06-13")}>
+        This release fixes a bug where the incorrect Client version could be
+        reported to the admin portal.
+      </Entry>
+      <Entry version="1.0.3" date={new Date("2024-06-12")}>
+        This release contains connectivity bugfixes and performance
+        improvements.
+      </Entry>
+      <Entry version="1.0.2" date={new Date("2024-04-30")}>
+        This release reverts a change that could cause connectivity issues in
+        some cases.
+      </Entry>
+      <Entry version="1.0.1" date={new Date("2024-04-29")}>
+        This release contains reliability and performance fixes and is
+        recommended for all users.
+      </Entry>
+      <Entry version="1.0.0" date={new Date("2024-03-12")}>
+        Initial release.
+      </Entry>
+    </Entries>
+  );
+}
--- a/website/src/components/Changelog/Apple.tsx
+++ b/website/src/components/Changelog/Apple.tsx
@@ -0,0 +1,28 @@
+import Entry from "./Entry";
+import Entries from "./Entries";
+
+export default function Apple() {
+  return (
+    <Entries title="macOS / iOS">
+      <Entry version="1.0.5" date={new Date("2024-06-13")}>
+        This release introduces new Resource status updates in the Resource
+        list.
+      </Entry>
+      <Entry version="1.0.4" date={new Date("2024-05-01")}>
+        Bug fixes.
+      </Entry>
+      <Entry version="1.0.3" date={new Date("2024-04-28")}>
+        Bug fixes.
+      </Entry>
+      <Entry version="1.0.2" date={new Date("2024-04-24")}>
+        Bug fixes.
+      </Entry>
+      <Entry version="1.0.1" date={new Date("2024-04-04")}>
+        Bug fixes.
+      </Entry>
+      <Entry version="1.0.0" date={new Date("2024-04-01")}>
+        Initial release.
+      </Entry>
+    </Entries>
+  );
+}
--- a/website/src/components/Changelog/Entries.tsx
+++ b/website/src/components/Changelog/Entries.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import Entry from "./Entry";
+
+function Latest({
+  title,
+  version,
+  date,
+  children,
+}: {
+  title: string;
+  version: string;
+  date: Date;
+  children: React.ReactNode;
+}) {
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: "UTC",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  const utcDateString = date.toLocaleDateString("en-US", options);
+  return (
+    <>
+      <h3 className="text-lg md:text-xl xl:text-2xl font-semibold tracking-tight mb-4 md:mb-6 xl:mb-8  text-neutral-800">
+        Latest {title} version
+      </h3>
+      <div className="text-sm md:text-lg text-neutral-800 mb-8 md:mb-10 xl:mb-12">
+        <p>
+          Version: <span className="font-semibold">{version}</span>
+        </p>
+        <p className="mb-4 md:mb-6 xl:mb-8">
+          Released:{" "}
+          <span className="font-semibold">
+            <time dateTime={date.toDateString()}>{utcDateString}</time>
+          </span>
+        </p>
+        {children}
+      </div>
+    </>
+  );
+}
+
+function Previous({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <h3 className="text-lg md:text-xl xl:text-2xl font-semibold tracking-tight mb-4 md:mb-6 xl:mb-8 text-neutral-800">
+        Previous {title} versions
+      </h3>
+      <table className="w-full text-left">
+        <thead className="text-neutral-800 bg-neutral-100 uppercase">
+          <tr>
+            <th
+              scope="col"
+              className="px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-3"
+            >
+              Version
+            </th>
+            <th
+              scope="col"
+              className="px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-3"
+            >
+              Date
+            </th>
+            <th
+              scope="col"
+              className="px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-3"
+            >
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody>{children}</tbody>
+      </table>
+    </>
+  );
+}
+
+export default function Entries({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  const childrenArray = React.Children.toArray(children);
+  const firstEntry = childrenArray[0];
+  const previousEntries = childrenArray.slice(1);
+
+  if (!React.isValidElement(firstEntry)) {
+    throw new Error("First child is not a valid React element");
+  }
+
+  const { version, date, children: firstEntryChildren } = firstEntry.props;
+
+  return (
+    <div className="relative overflow-x-auto p-4 md:p-6 xl:p-8">
+      <Latest title={title} version={version} date={date}>
+        {firstEntryChildren}
+      </Latest>
+      <Previous title={title}>{previousEntries}</Previous>
+    </div>
+  );
+}
--- a/website/src/components/Changelog/Entry.tsx
+++ b/website/src/components/Changelog/Entry.tsx
@@ -0,0 +1,30 @@
+export default function Entry({
+  version,
+  date = new Date(),
+  children,
+}: {
+  version: string;
+  date: Date;
+  children: React.ReactNode;
+}) {
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: "UTC",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  const utcDateString = date.toLocaleDateString("en-US", options);
+  return (
+    <tr className="border-t">
+      <td className="px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-4">
+        {version}
+      </td>
+      <td className="min-w-36 px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-4">
+        <time dateTime={date.toDateString()}>{utcDateString}</time>
+      </td>
+      <td className="px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-2 lg:px-6 lg:py-4">
+        {children}
+      </td>
+    </tr>
+  );
+}
--- a/website/src/components/Changelog/GUI.tsx
+++ b/website/src/components/Changelog/GUI.tsx
@@ -0,0 +1,46 @@
+import Entry from "./Entry";
+import Entries from "./Entries";
+
+export default function GUI({ title }: { title: string }) {
+  return (
+    <Entries title={title}>
+      <Entry version="1.0.9" date={new Date("2024-06-18")}>
+        This release simplifies the Resource connected state icons in the menu
+        to prevent issues with certain Linux distributions.
+      </Entry>
+      <Entry version="1.0.8" date={new Date("2024-06-17")}>
+        Fixes an issue in Windows that could cause the Wintun Adapter to fail to
+        be created under certain conditions.
+      </Entry>
+      <Entry version="1.0.7" date={new Date("2024-06-12")}>
+        This release fixes a bug where the incorrect Client version was reported
+        to the admin portal.
+      </Entry>
+      <Entry version="1.0.6" date={new Date("2024-06-11")}>
+        This release contains connectivity fixes and performance improvements
+        and is recommended for all users.
+      </Entry>
+      <Entry version="1.0.5" date={new Date("2024-05-22")}>
+        This release adds an IPC service for Windows to allow for better process
+        isolation.
+      </Entry>
+      <Entry version="1.0.4" date={new Date("2024-05-14")}>
+        This release fixes a bug on Windows where system DNS could break after
+        the Firezone Client was closed.
+      </Entry>
+      <Entry version="1.0.3" date={new Date("2024-05-08")}>
+        Maintenance release.
+      </Entry>
+      <Entry version="1.0.2" date={new Date("2024-04-30")}>
+        This release reverts a change that could cause connectivity issues seen
+        by some users.
+      </Entry>
+      <Entry version="1.0.1" date={new Date("2024-04-29")}>
+        Update the upgrade URLs used to check for new versions.
+      </Entry>
+      <Entry version="1.0.0" date={new Date("2024-04-24")}>
+        Initial release.
+      </Entry>
+    </Entries>
+  );
+}
--- a/website/src/components/Changelog/Gateway.tsx
+++ b/website/src/components/Changelog/Gateway.tsx
@@ -0,0 +1,68 @@
+import Entry from "./Entry";
+import Entries from "./Entries";
+import Link from "next/link";
+
+export default function Gateway() {
+  return (
+    <Entries title="Gateway">
+      <Entry version="1.1.0" date={new Date("2024-06-19")}>
+        <p className="mb-2 md:mb-4">
+          This release introduces a new method of resolving and routing DNS
+          Resources that is more reliable on some poorly-behaved networks. To
+          use this new method, Client versions 1.1.0 or later are required.
+          Client versions 1.0.x will continue to work with Gateway 1.1.x, but
+          will not benefit from the new DNS resolution method.
+        </p>
+        <p>
+          Read more about this change in the announcement post{" "}
+          <Link
+            href="/blog/improving-reliability-for-dns-resources"
+            className="text-accent-500 underline hover:no-underline"
+          >
+            here
+          </Link>
+          .
+        </p>
+      </Entry>
+      <Entry version="1.0.8" date={new Date("2024-06-17")}>
+        This is a maintenance release with no major user-facing changes.
+      </Entry>
+      <Entry version="1.0.7" date={new Date("2024-06-12")}>
+        This release fixes a bug where the incorrect Gateway version could be
+        reported to the admin portal.
+      </Entry>
+      <Entry version="1.0.6" date={new Date("2024-06-11")}>
+        This release contains connectivity fixes and performance improvements
+        and is recommended for all users.
+      </Entry>
+      <Entry version="1.0.5" date={new Date("2024-05-22")}>
+        Minor maintenance fixes.
+      </Entry>
+      <Entry version="1.0.4" date={new Date("2024-05-14")}>
+        Fixes an issue detecting the correct architecture during installation
+        and upgrades.
+      </Entry>
+      <Entry version="1.0.3" date={new Date("2024-05-08")}>
+        Adds support for{" "}
+        <Link
+          href="/kb/deploy/resources#traffic-restrictions"
+          className="hover:no-underline underline text-accent-500"
+        >
+          traffic restrictions
+        </Link>
+        .
+      </Entry>
+      <Entry version="1.0.2" date={new Date("2024-04-30")}>
+        Fixes a big that caused invalid connections from being cleaned up
+        properly.
+      </Entry>
+      <Entry version="1.0.1" date={new Date("224-04-29")}>
+        Fixes a bug that could prevent the auto-upgrade script from working
+        properly.
+      </Entry>
+      <Entry version="1.0.0" date={new Date("2024-04-24")}>
+        Initial release.
+      </Entry>
+    </Entries>
+  );
+}
--- a/website/src/components/Changelog/Headless.tsx
+++ b/website/src/components/Changelog/Headless.tsx
@@ -0,0 +1,39 @@
+import Entry from "./Entry";
+import Entries from "./Entries";
+
+export default function Headless() {
+  return (
+    <Entries title="Linux headless">
+      <Entry version="1.0.8" date={new Date("2024-06-17")}>
+        This is a maintenance release with no major user-facing changes.
+      </Entry>
+      <Entry version="1.0.7" date={new Date("2024-06-12")}>
+        This release fixes a bug where the incorrect Client version was reported
+        to the admin portal.
+      </Entry>
+      <Entry version="1.0.6" date={new Date("2024-06-11")}>
+        This release contains connectivity fixes and performance improvements
+        and is recommended for all users.
+      </Entry>
+      <Entry version="1.0.5" date={new Date("2024-05-22")}>
+        This is a maintenance release with no major user-facing changes.
+      </Entry>
+      <Entry version="1.0.4" date={new Date("2024-05-14")}>
+        This is a maintenance release with no major user-facing changes.
+      </Entry>
+      <Entry version="1.0.3" date={new Date("2024-05-08")}>
+        Maintenance release.
+      </Entry>
+      <Entry version="1.0.2" date={new Date("2024-04-30")}>
+        This release reverts a change that could cause connectivity issues seen
+        by some users.
+      </Entry>
+      <Entry version="1.0.1" date={new Date("2024-04-29")}>
+        Update the upgrade URLs used to check for new versions.
+      </Entry>
+      <Entry version="1.0.0" date={new Date("2024-04-24")}>
+        Initial release.
+      </Entry>
+    </Entries>
+  );
+}
--- a/website/src/components/Changelog/index.tsx
+++ b/website/src/components/Changelog/index.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { TabsGroup, TabsItem } from "@/components/Tabs";
+import Android from "./Android";
+import Apple from "./Apple";
+import Gateway from "./Gateway";
+import GUI from "./GUI";
+import Headless from "./Headless";
+import { HiServerStack } from "react-icons/hi2";
+import { FaApple, FaAndroid, FaWindows, FaLinux } from "react-icons/fa";
+
+export default function Changelog() {
+  return (
+    <section className="mx-auto max-w-xl md:max-w-screen-xl">
+      <TabsGroup>
+        <TabsItem title="Gateway" icon={HiServerStack}>
+          <Gateway />
+        </TabsItem>
+        <TabsItem title="Linux GUI" icon={FaLinux}>
+          <GUI title="Linux GUI" />
+        </TabsItem>
+        <TabsItem title="Apple" icon={FaApple}>
+          <Apple />
+        </TabsItem>
+        <TabsItem title="Windows" icon={FaWindows}>
+          <GUI title="Windows" />
+        </TabsItem>
+        <TabsItem title="Android" icon={FaAndroid}>
+          <Android />
+        </TabsItem>
+        <TabsItem title="Linux Headless" icon={FaLinux}>
+          <Headless />
+        </TabsItem>
+      </TabsGroup>
+    </section>
+  );
+}
--- a/website/src/components/Footer/index.tsx
+++ b/website/src/components/Footer/index.tsx
@@ -47,21 +47,29 @@ export default function Footer() {
                Company
              </h2>
              <ul className="text-neutral-900  font-medium">
-                <li className="mb-4">
-                  <Link href="/about" className="hover:underline">
-                    About
-                  </Link>
-                </li>
                <li className="mb-4">
                  <Link href="/" className="hover:underline">
                    Home
                  </Link>
                </li>
+                <li className="mb-4">
+                  <Link href="/about" className="hover:underline">
+                    About
+                  </Link>
+                </li>
                <li className="mb-4">
                  <Link href="/pricing" className="hover:underline">
                    Pricing
                  </Link>
                </li>
+                <li className="mb-4">
+                  <Link
+                    href="https://github.com/orgs/firezone/projects/9"
+                    className="hover:underline hover:text-neutral-900"
+                  >
+                    Roadmap
+                  </Link>
+                </li>
                <li className="mb-4">
                  <Link href="/blog" className="hover:underline">
                    Blog
@@ -92,18 +100,26 @@ export default function Footer() {
                </li>
                <li className="mb-4">
                  <Link
-                    href="https://trust.firezone.dev/"
+                    href="/support"
                    className="hover:underline hover:text-neutral-900"
                  >
-                    Trust Center
+                    Support
                  </Link>
                </li>
                <li className="mb-4">
                  <Link
-                    href="https://github.com/orgs/firezone/projects/9"
+                    href="/changelog"
                    className="hover:underline hover:text-neutral-900"
                  >
-                    Roadmap
+                    Changelog
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link
+                    href="https://trust.firezone.dev/"
+                    className="hover:underline hover:text-neutral-900"
+                  >
+                    Trust Center
                  </Link>
                </li>
                <li className="mb-4">
--- a/website/src/components/RootLayout/index.tsx
+++ b/website/src/components/RootLayout/index.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({
        src="https://app.termly.io/resource-blocker/c4df1a31-22d9-4000-82e6-a86cbec0bba0?autoBlock=on"
      />
      <Mixpanel />
-      <body className={source_sans_3.className}>
+      <body className={"text-neutral-900 " + source_sans_3.className}>
        <Banner active={false}>
          <p className="mx-auto text-center">
            Firezone 1.0 is here!{" "}
--- a/website/src/components/DocsTabs/index.tsx
+++ b/website/src/components/DocsTabs/index.tsx
@@ -79,16 +79,34 @@ function TabsGroup({ children }: { children: React.ReactNode }) {
 function TabsItem({
  children,
  title,
+  icon,
  ...props
 }: {
  children: React.ReactNode;
  title: string;
+  icon?: FlowbiteIcon;
 }) {
  return (
-    <Tabs.Item title={title} {...props}>
+    <Tabs.Item title={title} icon={icon} {...props}>
      {children}
    </Tabs.Item>
  );
 }

 export { TabsGroup, TabsItem };
+
+// Nastiness needed because of Flowbite Typescript
+// See https://github.com/themesberg/flowbite-react/issues/1359
+export type IconSVGProps = React.PropsWithoutRef<
+  React.SVGProps<SVGSVGElement>
+> &
+  React.RefAttributes<SVGSVGElement>;
+export type FlowbiteIconProps = IconSVGProps & {
+  title?: string;
+  titleId?: string;
+};
+
+export type FlowbiteIcon = React.FC<
+  Omit<React.SVGProps<SVGSVGElement>, "ref">
+> &
+  FlowbiteIconProps;