Announce Vercel Flags

apps/docs/app/[lang]/home/[code]/layout.tsx

@@ -1,3 +1,5 @@
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
 import { HomeLayout } from '@/components/geistdocs/home-layout';
 import { enableBannerFlag, rootFlags } from '@/flags';
 import { source } from '@/lib/geistdocs/source';
@@ -11,10 +13,19 @@ export default async function Layout({
   return (
     <>
       {bannerFlag ? (
-        <div className="text-pretty bg-gray-1000 py-3 text-center text-background-100 text-xs md:text-sm">
-          Flags SDK is the simplest way to use feature flags in Next.js and
-          SvelteKit.
-        </div>
+        <Link
+          href="/providers/vercel"
+          className="group flex items-center justify-center gap-x-2 gap-y-1 bg-gray-1000 px-4 py-3 text-center text-background-100 text-xs md:text-sm"
+        >
+          <span className="inline-flex shrink-0 items-center rounded-full bg-background-100/15 px-2 py-0.5 font-medium text-[10px] uppercase tracking-wide md:text-[11px]">
+            New
+          </span>
+          <span className="text-pretty">
+            Vercel Flags is now available — connect your flags with the{' '}
+            <code className="font-mono">@flags-sdk/vercel</code> adapter.
+          </span>
+          <ArrowRight className="hidden size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 sm:inline-block" />
+        </Link>
       ) : null}
       <HomeLayout tree={source.pageTree[lang]}>
         <div className="bg-background-200 pt-0 pb-32">{children}</div>

apps/docs/app/[lang]/home/[code]/page.tsx

@@ -121,10 +121,11 @@ export default async function HomePage({
             </div>
             <div className="divide-y">
               <FlagToggle
-                value={ditheredHeroFlag}
-                flagKey={enableDitheredHeroFlag.key}
-                label={enableDitheredHeroFlag.key}
-                description={enableDitheredHeroFlag.description}
+                value={bannerFlag}
+                flagKey={enableBannerFlag.key}
+                label={enableBannerFlag.key}
+                description={enableBannerFlag.description}
+                scroll
               />
               <FlagSelect
                 value={heroTextFlag}
@@ -134,11 +135,10 @@ export default async function HomePage({
                 options={enableHeroTextFlag.options}
               />
               <FlagToggle
-                value={bannerFlag}
-                flagKey={enableBannerFlag.key}
-                label={enableBannerFlag.key}
-                description={enableBannerFlag.description}
-                scroll
+                value={ditheredHeroFlag}
+                flagKey={enableDitheredHeroFlag.key}
+                label={enableDitheredHeroFlag.key}
+                description={enableDitheredHeroFlag.description}
               />
             </div>
           </div>

apps/docs/app/[lang]/home/[code]/toggles.tsx

@@ -89,9 +89,7 @@ export const FlagToggle = ({
         id={flagKey}
         checked={override === null ? value : override}
         onCheckedChange={(nextValue) => {
-          document.cookie = nextValue
-            ? `${flagKey}=1; max-age=${oneYearInSeconds}; path=/`
-            : `${flagKey}=; max-age=0; path=/`;
+          document.cookie = `${flagKey}=${nextValue ? '1' : '0'}; max-age=${oneYearInSeconds}; path=/`;
           sessionStorage.setItem('toast', message(flagKey));
           setOverride(nextValue);
           initSlowConnectionWarning();

apps/docs/content/docs/providers/vercel.mdx

@@ -1,19 +1,19 @@
 ---
-title: 'Vercel'
+title: 'Vercel Flags'
 ---
 
-The `@flags-sdk/vercel` package connects the Flags SDK to Vercel's own feature flags platform called Vercel Flags, allowing you to manage flags directly in your Vercel projects.
+Vercel Flags is a feature flag provider built into Vercel's platform, allowing you to manage flags directly in your Vercel projects. The `@flags-sdk/vercel` package connects the Flags SDK to Vercel Flags.
 
 <CopyPrompt text="Connect my existing Flags SDK setup to Vercel Flags. Install `@flags-sdk/vercel`, pull the `FLAGS` and `FLAGS_SECRET` environment variables, update my flag declarations to use `vercelAdapter`, add or reuse an `identify` function for targeting entities, create the Flags Explorer discovery endpoint, and run the relevant type checks or build when finished.">
   Connect my existing Flags SDK setup to Vercel Flags. Install `@flags-sdk/vercel`, pull the `FLAGS` and `FLAGS_SECRET` environment variables, update my flag declarations to use `vercelAdapter`, add or reuse an `identify` function for targeting entities, create the Flags Explorer discovery endpoint, and run the relevant type checks or build when finished.
 </CopyPrompt>
 
-<LearnMore icon="arrow" href="https://vercel.com/docs/flags/vercel-flags" target="_blank">
-  Learn more about Vercel Flags
+<LearnMore icon="arrow" href="https://vercel.com/blog/vercel-flags-platform-native-feature-flags" target="_blank">
+  Vercel Flags is now available — read the announcement
 </LearnMore>
 
-<LearnMore icon="arrow" href="/providers">
-  Learn more about Adapters
+<LearnMore icon="arrow" href="https://vercel.com/docs/flags/vercel-flags" target="_blank">
+  Learn more about Vercel Flags
 </LearnMore>
 
 ## Installation

apps/docs/flags.ts

@@ -6,7 +6,7 @@ export const enableBannerFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on !== undefined;
+    return on !== '0'; // default on
   },
 });
 
@@ -16,7 +16,7 @@ export const enableDitheredHeroFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on !== undefined;
+    return on === '1'; // default off
   },
 });