docs: add first guide for schema governance series

src/components/cards.tsx

@@ -20,7 +20,7 @@ export function Cards({
     <ul className="grid grid-cols-1 justify-stretch gap-2 pt-6 sm:grid-cols-2 lg:gap-4">
       {items.map((item, index) => {
         // Try to get section from learn-pages
-        let section: "getting-started" | "best-practices" | undefined
+        let section: "getting-started" | "best-practices" | "schema-governance" | undefined
 
         const path = item.link.replace(/^\/learn\//, "").replace(/\/$/, "")
         const learnPage = learnPages[path as keyof typeof learnPages]

src/components/learn-aggregator/learn-pages.tsx

@@ -6,7 +6,7 @@ export interface LearnPageItem {
   title: string
   description: string
   icon: string
-  section: "getting-started" | "best-practices"
+  section: "getting-started" | "best-practices" | "schema-governance"
   href: string
 }
 
@@ -147,13 +147,21 @@ const _items: Record<
     icon: new URL("./assets/construction.svg", import.meta.url).href,
     section: "best-practices",
   },
+  // ---
+  "schema-review": {
+    description:
+      "Establish review processes and automated validation to keep your GraphQL schema consistent, safe, and easy to evolve.",
+    icon: new URL("./assets/checkbox.svg", import.meta.url).href,
+    section: "schema-governance",
+  },
 }
 
 const learnPages = _items as Record<LearnPagePath, LearnPageItem | null>
 
 const pagesBySection: Record<LearnPageItem["section"], LearnPageItem[]> = {
   "getting-started": [],
   "best-practices": [],
+  "schema-governance": [],
 }
 
 for (const path in learnPages) {

src/components/learn-aggregator/teaser-section-list-item.tsx

@@ -8,7 +8,7 @@ export interface TeaserSectionListItemProps
   title: string
   description: string
   icon: React.ReactNode
-  section: "getting-started" | "best-practices"
+  section: "getting-started" | "best-practices" | "schema-governance"
   href: string
 }
 export function TeaserSectionListItem({

src/components/learn-aggregator/teaser-section.tsx

@@ -17,7 +17,7 @@ export interface TeaserSectionProps
     description: string
     href: string
     icon: string
-    section: "getting-started" | "best-practices"
+    section: "getting-started" | "best-practices" | "schema-governance"
   }>
   firstIconsEager?: boolean
 }

src/pages/learn/_meta.ts

@@ -38,4 +38,9 @@ export default {
   security: "",
   federation: "",
   "debug-errors": "Common GraphQL over HTTP Errors",
+  "-- 3": {
+    type: "separator",
+    title: "Schema Governance",
+  },
+  "schema-review": "",
 }

src/pages/learn/index.mdx

@@ -64,6 +64,21 @@ import { LookingForMore } from "../../components/looking-for-more"
   items={pagesBySection["best-practices"]}
 />
 
+
+<TeaserSection
+  id="schema-governance"
+  eyebrow="Schema governance"
+  title="Schema governance"
+  description=
+    "A healthy GraphQL API starts with a well-governed schema. Learn how to put review processes and automated checks in place so your schema stays consistent, safe, and easy to evolve as your team grows."
+  cta={
+    <Button href="/learn/schema-review" className='md:w-fit'>
+      Explore schema governance
+    </Button>
+  }
+  items={pagesBySection["schema-governance"]}
+/>
+
 <TrainingCoursesSection id="tutorials" />
 
 <CommonQuestionsSection id="faq" />