Blog: Enterprises choose open source (#2803)

Fixes firezone/gtm#184

website/package.json

@@ -13,12 +13,12 @@
     "@docsearch/react": "^3.5.2",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "~14.0.1",
-    "@types/mdx": "^2.0.9",
+    "@next/mdx": "~14.0.3",
+    "@types/mdx": "^2.0.10",
     "@types/node": "20.10.1",
     "@types/react": "18.2.30",
     "@types/react-dom": "18.2.14",
-    "@types/react-syntax-highlighter": "^15.5.9",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "asciinema-player": "^3.6.3",
     "autoprefixer": "10.4.16",
     "fast-xml-parser": "^4.3.2",
@@ -26,18 +26,18 @@
     "flowbite-react": "^0.6.4",
     "highlight.js": "^11.9.0",
     "md5": "^2.3.0",
-    "next": "~13.5.1",
-    "next-hubspot": "^1.1.6",
+    "next": "^14.0.3",
+    "next-hubspot": "^1.2.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.31",
-    "posthog-js": "^1.84.0",
+    "posthog-js": "^1.93.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-marquee": "^1.6.2",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-autolink-headings": "^7.0.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-highlight": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",

website/src/app/blog/enterprises-choose-open-source/page.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import Post from "@/components/Blog/Post";
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Enterprises choose open source • Firezone Blog",
+  description: "Why enterprises choose open source software",
+};
+
+export default function Page() {
+  return (
+    <Post
+      authorName="Jeff Spencer"
+      authorTitle="Interim Head of Marketing"
+      authorEmail="jeff@firezone.dev"
+      title="Enterprises choose open source"
+      date="December 6, 2023"
+    >
+      <Content />
+    </Post>
+  );
+}

website/src/app/blog/enterprises-choose-open-source/readme.mdx

@@ -0,0 +1,83 @@
+More enterprises are turning to open source software (OSS) to reduce costs,
+improve efficiency, and extend their competitive advantage. The core
+technologies chosen by organizations often persist for decades, so decisions
+that IT leaders make today are bound to affect their organizations’ ability to
+function and adapt in the future — whether that’s one year, or 10. That’s part
+of the reason, according to Red Hat’s
+[2022 State of Enterprise Open Source Report](https://www.redhat.com/en/resources/state-of-enterprise-open-source-report-2022),
+that 82% of global C-suite IT leaders are more likely to select a vendor that’s
+open source, or who contributes to open source projects.
+
+So there are some really great reasons to choose open source, but what if my
+organization doesn’t use open source software? The short answer is they almost
+certainly do, whether they’re aware of it or not. In vertical software stacks
+across industries, open source penetration ranges from 20 to 85 percent of the
+overall software used, according to
+[The Linux Foundation](https://www.linuxfoundation.org/blog/blog/why-do-enterprises-use-and-contribute-to-open-source-software).
+
+#### Benefits of open source
+
+Some of most profitable open source companies like [GitLab](https://gitlab.com),
+[Hashicorp](https://hashicorp.com), and [Red Hat](https://redhat.com) benefit
+from a few very important advantages over their closed-source competitors,
+including:
+
+**Transparency:** Open source code can be reviewed by anyone so vulnerabilities
+are more likely to be identified and corrected before they lead to problems.
+Anyone who relies on open source software can also audit it themselves, which
+helps identify vulnerabilities and increases confidence — a process that
+benefits everyone.
+
+**Flexibility:** Open source software generally adheres to industry-standard
+frameworks and protocols, which reduces dependency on closed-source vendors and
+their proprietary solutions. This helps prevent vendor lock-in and promotes
+integration with other open (and closed) source solutions.
+
+**Cost:** While open source is often more affordable than closed-source
+software, there’s a common
+[misconception](https://opensource.com/education/12/7/clearing-open-source-misconceptions)
+that it’s always free. More importantly, organizations aren’t locked into open
+source software, so they don’t need to pay expensive licensing fees. While some
+open source software is available at no cost, writing code, contributing domain
+expertise, and troubleshooting open source software like Firezone are all
+valuable endeavors that we want to support indefinitely.
+
+**Quality:** With hundreds, or even thousands of contributors and maintainers,
+open source software usually becomes more stable, bug-free, and user-friendly
+over time — this is particularly true for popular projects like
+[Firezone](https://github.com/firezone/firezone).
+
+**Agility:** Closed-source software developers often start from scratch, and
+build their products in-house — a process that can take months or even years.
+Open source developers build and improve on existing code bases, which means
+it’s often more resilient and feature-rich than proprietary software.
+
+**Community:** Developing open source software means having a relationship with
+a global community of developers — often working with contributors, responding
+to issues, or merging pull requests (PRs). This is a great way for organizations
+like [Firezone](https://github.com/firezone/firezone) to get direct feedback
+from their most enthusiastic users.
+
+There aren’t many downsides to open source, and organizations increasingly
+publish their code for the reasons outlined above. That being said, the main
+reason not to open a project is when that project includes an organization’s
+“secret sauce” or other sensitive information that can lead to security issues
+or erode a competitive advantage.
+
+#### The future is open source
+
+While open source may have gotten an
+[unconventional start](https://en.wikipedia.org/wiki/Open-source-software_movement#:~:text=Brief%20history,-Further%20information%3A%20Open&text=The%20label%20%22open%20source%22%20was,source%2Dcode%20release%20for%20Navigator.)
+from hackers, visionaries and technologists, the benefits are clear. It’s being
+used to modernize and standardize IT infrastructure, security, scalability, and
+application development. Open source is now a preferred development strategy for
+large and small organizations from cloud providers to security solutions and
+beyond.
+
+#### Get started now
+
+Replace your current VPN with Firezone — an open source solution that combines
+the best of zero trust network access (ZTNA), role-based access control, and
+WireGuard®.
+[Request early access](https://www.firezone.dev/product/early-access) to the
+beta, and get started with up to 10 free users.

website/src/app/blog/firezone-1-0/_page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import Post from "@/components/Blog/Post";
+import Content from "./readme.mdx";
+
+export default function Page() {
+  return (
+    <Post
+      authorName="Jamil Bou Kheir"
+      authorTitle="Founder & CEO"
+      authorEmail="jamil@firezone.dev"
+      title="Firezone 1.0"
+      date="July 14, 2023"
+    >
+      <Content />
+    </Post>
+  );
+}

website/src/app/blog/firezone-1-0/page.tsx

@@ -1,6 +1,4 @@
-import Image from "next/image";
-import Post from "@/components/Blog/Post";
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,15 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return (
-    <Post
-      authorName="Jamil Bou Kheir"
-      authorTitle="Founder & CEO"
-      authorEmail="jamil@firezone.dev"
-      title="Firezone 1.0"
-      date="July 14, 2023"
-    >
-      <Content />
-    </Post>
-  );
+  return <_Page />;
 }

website/src/app/blog/layout.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="pt-14 flex flex-col">
-      <div className="bg-gradient-to-b from-primary-900 to-neutral-900 mx-auto w-screen text-center">
+      <div className="bg-neutral-900 mx-auto w-screen text-center">
         <Image
           alt="Firezone logo light"
           width={147}

website/src/app/blog/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <section className="bg-neutral-100 ">
+    <section className="bg-neutral-100">
       <div className="py-8 px-4 mx-auto max-w-md md:max-w-screen-md lg:py-16 lg:px-6">
         <div className="mx-auto max-w-screen-sm text-center lg:mb-16 mb-8">
           <h1 className="justify-center mb-4 text-3xl lg:text-6xl tracking-tight font-extrabold text-neutral-900 ">
@@ -23,6 +23,23 @@ export default function Page() {
           </p>
         </div>
         <div className="grid divide-y">
+          <SummaryCard
+            title="Enterprises choose open source"
+            date="December 6, 2023"
+            href="/blog/enterprises-choose-open-source"
+            authorName="Jeff Spencer"
+            authorAvatarSrc={gravatar("jeff@firezone.dev")}
+            type="Insights"
+          >
+            <p>
+              More enterprises are turning to open source software (OSS) to
+              reduce costs, improve efficiency, and extend their competitive
+              advantage. The core technologies chosen by organizations often
+              persist for decades, so decisions that IT leaders make today are
+              bound to affect their organizations’ ability to function and adapt
+              in the future — whether that’s one year, or 10.
+            </p>
+          </SummaryCard>
           <SummaryCard
             title="Secure remote access makes remote work a win-win"
             date="November 17, 2023"

website/src/app/blog/secure-access/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
       authorTitle="Interim Head of Marketing"
       authorEmail="jeff@firezone.dev"
       title="Secure remote access makes remote work a win-win"
-      date="2023-11-17"
+      date="November 17, 2023"
     >
       <Content />
     </Post>

website/src/app/docs/_page.tsx

@@ -0,0 +1,6 @@
+"use client";
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/administer/backup/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/administer/backup/page.tsx

@@ -1,11 +1,11 @@
-import Content from "./readme.mdx";
 import { Metadata } from "next";
+import _Page from "./_page";
 
 export const metadata: Metadata = {
-  title: "Administer • Firezone Docs",
+  title: "Backup • Firezone Docs",
   description: "Firezone Documentation",
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/administer/upgrade/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/administer/upgrade/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/auth0/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/auth0/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/azuread/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/azuread/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/google/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/google/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/keycloak/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/keycloak/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/okta/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/okta/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/onelogin/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/onelogin/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/oidc/zitadel/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/oidc/zitadel/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/saml/google/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/saml/google/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/saml/jumpcloud/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/saml/jumpcloud/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/saml/okta/_page.tsx

@@ -0,0 +1,5 @@
+"use client";
+import Content from "./readme.mdx";
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/saml/okta/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/authenticate/saml/onelogin/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/authenticate/saml/onelogin/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/deploy/omnibus/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/deploy/omnibus/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/add-devices/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/add-devices/page.tsx

@@ -1,5 +1,5 @@
-import Content from "./readme.mdx";
 import { Metadata } from "next";
+import _Page from "./_page";
 
 export const metadata: Metadata = {
   title: "User Guides: Add Devices • Firezone Docs",
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/add-users/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/add-users/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

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

@@ -13,7 +13,13 @@ to specify an email and a password for the user. Firezone can also integrate and
 sync with an identity provider to automatically grant access to users in your
 organization. See [Authenticate](/docs/authenticate) for more information.
 
-<Image className="mx-auto" alt="add user" width={960} height={540} src="/images/add-user.png" />
+<Image
+  className="mx-auto"
+  alt="add user"
+  width={960}
+  height={540}
+  src="/images/add-user.png"
+/>
 
 ## Related guides
 

website/src/app/docs/user-guides/client-instructions/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/client-instructions/page.tsx

@@ -1,5 +1,5 @@
-import Content from "./readme.mdx";
 import { Metadata } from "next";
+import _Page from "./_page";
 
 export const metadata: Metadata = {
   title: "User Guides: Client Instructions • Firezone Docs",
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/egress-rules/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/egress-rules/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/use-cases/nat-gateway/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/use-cases/nat-gateway/page.tsx

@@ -1,5 +1,5 @@
-import Content from "./readme.mdx";
 import { Metadata } from "next";
+import _Page from "./_page";
 
 export const metadata: Metadata = {
   title: "Use Cases: Nat Gateway • Firezone Docs",
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/use-cases/reverse-tunnel/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/use-cases/reverse-tunnel/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/docs/user-guides/use-cases/split-tunnel/_page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Content from "./readme.mdx";
+
+export default function _Page() {
+  return <Content />;
+}

website/src/app/docs/user-guides/use-cases/split-tunnel/page.tsx

@@ -1,5 +1,5 @@
-import Content from "./readme.mdx";
 import { Metadata } from "next";
+import _Page from "./_page";
 
 export const metadata: Metadata = {
   title: "Use Cases: Split Tunnel • Firezone Docs",
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/app/kb/quickstart/_page.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+import Content from "./readme.mdx";
+export default function _Page() {
+  return <Content />;
+}

website/src/app/kb/quickstart/page.tsx

@@ -1,4 +1,4 @@
-import Content from "./readme.mdx";
+import _Page from "./_page";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -7,5 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function Page() {
-  return <Content />;
+  return <_Page />;
 }

website/src/components/Blog/Post/index.tsx

@@ -17,7 +17,7 @@ export default function Post({
   children: React.ReactNode;
 }) {
   return (
-    <main className="py-14 lg:pb-24 bg-neutral-100 ">
+    <main className="py-14 lg:pb-24 bg-neutral-100 border border-b-1 ">
       <div className="flex justify-between px-4 mx-auto max-w-screen-xl">
         <article className="mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg ">
           <header className="mb-4 lg:mb-6 not-format">
@@ -40,9 +40,7 @@ export default function Post({
                   </a>
                   <p className="text-base text-neutral-900 ">{authorTitle}</p>
                   <p className="text-base text-neutral-900 ">
-                    <time dateTime="2022-02-08" title="February 8th, 2022">
-                      {date}
-                    </time>
+                    <time dateTime={date}>{date}</time>
                   </p>
                 </div>
               </div>

website/src/components/DocsSidebar/Collapse.tsx

@@ -12,7 +12,7 @@ export default function Collapse({
 }) {
   const ctl = label.toLowerCase().replace(" ", "-") + "-dropdown";
   const indent = "ml-3";
-  const [expandedState, setExpandedState] = useState(false);
+  const [expandedState, setExpandedState] = useState(expanded || false);
 
   return (
     <>

website/src/components/DocsSidebar/index.tsx

@@ -19,10 +19,10 @@ export default function DocsSidebar() {
       id="docs-sidebar"
       aria-label="Sidebar"
       aria-hidden="true"
-      className="sticky left-0 top-0 flex-none w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-neutral-200 md:translate-x-0  "
+      className="sticky left-0 top-0 flex-none w-64 overflow-y-auto h-[calc(100vh-20px)] pt-20 transition-transform -translate-x-full bg-white border-r border-neutral-200 md:translate-x-0  "
     >
       <SearchForm />
-      <div className="mt-5 h-full overflow-y-auto bg-white  pr-3">
+      <div className="mt-5 h-full bg-white pr-3">
         <ul className="space-y-2 font-medium">
           <li>
             <Item href="/docs" label="Overview" />

website/src/components/Footer/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import ConsentPreferences from "@/components/ConsentPreferences";

website/src/components/KbSidebar/Collapse.tsx

@@ -12,7 +12,7 @@ export default function Collapse({
 }) {
   const ctl = label.toLowerCase().replace(" ", "-") + "-dropdown";
   const indent = "ml-3";
-  const [expandedState, setExpandedState] = useState(false);
+  const [expandedState, setExpandedState] = useState(expanded || false);
 
   return (
     <>

website/src/components/KbSidebar/index.tsx

@@ -19,10 +19,10 @@ export default function KbSidebar() {
       id="kb-sidebar"
       aria-label="Sidebar"
       aria-hidden="true"
-      className="sticky left-0 top-0 flex-none w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-neutral-200 md:translate-x-0  "
+      className="sticky left-0 top-0 flex-none w-64 overflow-y-auto h-[calc(100vh-20px)] pt-20 transition-transform -translate-x-full bg-white border-r border-neutral-200 md:translate-x-0  "
     >
       <SearchForm />
-      <div className="mt-5 h-full overflow-y-auto bg-white  pr-3">
+      <div className="mt-5 bg-white pr-3">
         <ul className="space-y-2 font-medium">
           <li>
             <Item href="/kb" label="Overview" />