feat(website): September update (#6566)

Fixes #6048

website/src/app/blog/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import NewsletterSignup from "@/components/NewsletterSignup";
 import SummaryCard from "@/components/Blog/SummaryCard";
+import { Badge } from "@/components/Badges";
 
 export const metadata: Metadata = {
   title: "Blog • Firezone",
@@ -27,6 +28,45 @@ export default function Page() {
       </div>
       <div className="py-6 px-4 sm:py-8 sm:px-6 md:py-10 md:px-8 lg:py-12 lg:px-10 mx-auto max-w-screen-lg w-full">
         <div className="grid divide-y">
+          <SummaryCard
+            title="September 2024 update"
+            date="September 30, 2024"
+            href="/blog/sep-2024-update"
+            authorName="Jamil Bou Kheir"
+            authorAvatarSrc={gravatar("jamil@firezone.dev")}
+            type="Announcement"
+          >
+            <div className="mb-2">
+              <div className="mb-2">In this update:</div>
+              <ul className="space-y-2 list-inside list-disc ml-4">
+                <li>
+                  <strong>New feature:</strong> Internet Resources
+                </li>
+                <li>
+                  <strong>New feature:</strong> REST API{" "}
+                  <Badge
+                    text="Beta"
+                    size="xs"
+                    textColor="blue-800"
+                    bgColor="blue-100"
+                  />
+                </li>
+                <li>
+                  <strong>New feature:</strong> Improved wildcard matching for
+                  DNS Resources
+                </li>
+                <li>
+                  <strong>Blog post:</strong>{" "}
+                  <Link
+                    href="/blog/sans-io"
+                    className="text-accent-500 underline hover:no-underline"
+                  >
+                    sans-IO: The secret to effective Rust for network services
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </SummaryCard>
           <SummaryCard
             title="sans-IO: The secret to effective Rust for network services"
             date="July 2, 2024"

website/src/app/blog/sep-2024-update/_page.tsx

@@ -0,0 +1,18 @@
+"use client";
+import Post from "@/components/Blog/Post";
+import Content from "./readme.mdx";
+import gravatar from "@/lib/gravatar";
+
+export default function _Page() {
+  return (
+    <Post
+      authorName="Jamil Bou Kheir"
+      authorTitle="Founder"
+      authorAvatarSrc={gravatar("jamil@firezone.dev")}
+      title="September 2024 Update"
+      date="2024-09-02"
+    >
+      <Content />
+    </Post>
+  );
+}

website/src/app/blog/sep-2024-update/page.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+import _Page from "./_page";
+
+export const metadata: Metadata = {
+  title: "September 2024 Update • Firezone Blog",
+  description: "September 2024 Update",
+};
+
+export default function Page() {
+  return <_Page />;
+}

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

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import { Badge } from "@/components/Badges";
+
+<Image
+  src="/images/blog/sep-2024-update/sep-24-update.png"
+  alt="September update graphic"
+  width={500}
+  height={500}
+  className="mx-auto shadow rounded"
+/>
+
+## In this update:
+
+- **New feature:** Internet Resources
+- **New feature:** REST API
+  <Badge text="Beta" size="xs" textColor="blue-800" bgColor="blue-100" />
+- **New feature:** Improved wildcard matching for DNS Resources
+- **Blog post:** [sans-IO: The secret to effective Rust for network service](/blog/sans-io)
+
+### Internet Resources
+
+Up until today, Firezone has operated what's known as a "split-tunnel" architecture. That means that only traffic destined for your protected resources is routed through Firezone, while all other traffic goes directly to the internet. This architecture works great for routing traffic to IPs, CIDRs, and DNS Resources, but what if you want to protect your workforce as they work from public cafes, airports, and other untrusuted networks? What if the internet itself is a resource you want to protect?
+
+Well, now you can. Today we are excited to announce the launch of the Internet Resource, which allows you to route all of your internet-bound traffic through Firezone as well. This means that you can now apply the same security policies to all of your traffic, not just the traffic destined for your protected resources.
+
+Like any other Resource in Firezone, you can apply Policies to the Internet Resource to control who can access them. When you grant access to the Internet Resource, it'll appear at the top of the Resources list in the Firezone Client, just like any other Resource. Unlike other Resources, however, the Internet Resource can be enabled or disabled directly from the Client.
+
+<Image
+  src="/images/blog/sep-2024-update/internet-resource.png"
+  width={400}
+  height={400}
+  alt="Internet Resource"
+  className="mx-auto"
+/>
+
+Internet Resources are supported in Clients and Gateways v1.3.0 or later, and are available to accounts on the `Team` and `Enterprise` plans. There's no need to create them manually -- simply select the Internet Resource when creating a new policy in order to use it.
+
+### REST API
+
+Firezone now has a [REST API](/kb/reference/rest-api), available in closed beta. The API allows you to manage all of the same configuration you can in the admin portal, but programmatically.
+
+We've published an OpenAPI spec for it at [https://api.firezone.dev/swaggerui](https://api.firezone.dev/swaggerui) you can use to interact with the API right from your browser. You can
+even generate a native client library to use the API in your own applications using [Swagger Codegen](https://swagger.io/tools/swagger-codegen/).
+
+To use the REST API, head to the `Settings -> API Clients` page in your account, request access, and we'll get you set up.
+
+### Improved wildcard matching for DNS Resources
+
+We've improved how DNS Resources can be matched for routing. They now support a more powerful syntax for matching names, similar to how glob pattern matching works in Unix shells.
+
+<Image
+  src="/images/blog/sep-2024-update/wildcard.png"
+  width={700}
+  height={700}
+  alt="Wildcard matching"
+  className="mx-auto rounded-lg shadow-lg"
+/>
+
+Now, you can use wildcards to match single characters, parts of a subdomain, and even multiple subdomains. This opens the door to a lot of new possibilities, like:
+
+- `us-west-?.company.com` to match things like `us-west-1.company.com`, `us-west-2.company.com`, and so on
+- `**.google.com` to match all subdomains under `google.com` recursively
+- `aws*.amazon.com` to match AWS services at `aws.amazon.com`, `aws1.amazon.com`, and so on _but not_ `www.amazon.com`.
+
+Improved wildcard matching requires Client and Gateway **v1.2.0** or later.
+
+## End
+
+That's all for now. [Sign up](https://app.firezone.dev/sign_up) for a free starter account to try out all of the above. If you're interested in using Firezone
+for your organization, [contact us](https://firezone.dev/contact/sales) for a customized demo.

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

@@ -99,6 +99,30 @@ access for your DevOps team, then add another Resource with the `TCP/443`
 restriction to allow access to an HTTPS service for the rest of your
 organization.
 
+<PlanBadge plans={["team", "enterprise"]}>
+
+### The Internet Resource
+
+</PlanBadge>
+
+The Internet Resource is a special Resource available on paid plans that allows
+you to route `0.0.0.0/0` and `::/0` through Firezone in a full-tunnel
+configuration.
+
+The Internet Resource functions as a fallback for traffic that doesn't match any
+other Resources.
+
+The Internet Resource is automatically enabled on Team and Enterprise plans. To
+configure it, simply define a Policy for it like you would for any other
+Resource.
+
+<Alert color="warning">
+  Unlike regular Resources, the Internet Resource can be disabled by end-users
+  to prevent their internet access from being affected by Firezone if any issues
+  arise. The Internet Resource is <strong>disabled by default</strong> in Client
+  apps when it is first assigned a policy.
+</Alert>
+
 <NextStep href="/kb/deploy/groups">Next: Create Groups</NextStep>
 
 <SupportOptions />

website/src/app/pricing/plan_table.tsx

@@ -236,6 +236,20 @@ export default function PlanTable() {
             <FaCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
           </td>
         </tr>
+        <tr className="border-b border-1 border-neutral-200">
+          <td className="gmx-1 py-4">
+            <Tooltip content="Clients automatically switch from unhealthy Gateways to healthy ones">
+              Full-tunnel routing
+            </Tooltip>
+          </td>
+          <td className="font-semibold gmx-1 py-4 text-center">&#8212;</td>
+          <td className="gmx-1 py-4">
+            <FaCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+          <td className="gmx-1 py-4">
+            <FaCheck className="mx-auto flex-shrink-0 w-5 h-5 text-neutral-900" />
+          </td>
+        </tr>
         <tr className="border-b border-1 border-neutral-200">
           <td className="gmx-1 py-4">
             <Tooltip content="Speed and availability of Firezone-managed relays that are used when a direct connection is not possible.">

website/src/components/Badges/index.tsx

@@ -1,6 +1,38 @@
 import Image from "next/image";
 import Link from "next/link";
 
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+enum SizeClass {
+  XS = "px-1 py-0.5 text-xs -translate-y-0.5 rounded-md",
+  SM = "px-1.5 py-1 text-sm -translate-y-1 rounded-md",
+  MD = "px-2 py-1 text-base -translate-y-1 rounded-lg",
+  LG = "px-3 py-1.5 text-lg -translate-y-1.5 rounded-lg",
+  XL = "px-4 py-2 text-xl -translate-y-2 rounded-xl",
+}
+
+export function Badge({
+  text,
+  size,
+  bgColor,
+  textColor,
+}: {
+  text: string;
+  size: Size;
+  bgColor: string;
+  textColor: string;
+}) {
+  const sizeClass = SizeClass[size.toUpperCase() as keyof typeof SizeClass];
+
+  return (
+    <div
+      className={`place-content-center uppercase inline-block ${sizeClass} font-semibold bg-${bgColor} text-${textColor}`}
+    >
+      {text}
+    </div>
+  );
+}
+
 export function RunaCap() {
   return (
     <Link