From e09f2271726141c393ee0422dfb1877fbd584ccd Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Fri, 12 Mar 2021 23:04:28 +0800
Subject: [PATCH] Sets a group tab on all the code examples

---
 web/ReferenceGenerator.ts       | 9 +++++----
 web/spec/cli.yml                | 1 +
 web/spec/gen/components/Tabs.ts | 4 ++--
 web/spec/gotrue.yml             | 1 +
 web/spec/postgres.yml           | 1 +
 web/spec/postgrest.yml          | 1 +
 web/spec/realtime.yml           | 1 +
 web/spec/supabase.yml           | 1 +
 8 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/ReferenceGenerator.ts b/web/ReferenceGenerator.ts
index 4bd49285d3e..625a35ce835 100644
--- a/web/ReferenceGenerator.ts
+++ b/web/ReferenceGenerator.ts
@@ -36,6 +36,7 @@ async function gen(inputFileName, outputDir) {
   if (!defRef) return
 
   const definition = JSON.parse(defRef)
+  const id = docSpec.info.id
   const allLanguages = docSpec.info.libraries
   const pages = Object.entries(docSpec.pages).map(([name, x]: [string, OpenRef.Page]) => ({
     ...x,
@@ -65,7 +66,7 @@ async function gen(inputFileName, outputDir) {
 
       const description =
         pageSpec.description || tsDocCommentToMdComment(getDescriptionFromDefintion(tsDefinition))
-
+      
       // Create page
       const content = Page({
         slug,
@@ -75,7 +76,7 @@ async function gen(inputFileName, outputDir) {
         description,
         parameters: hasTsRef ? generateParameters(tsDefinition) : '',
         spotlight: generateSpotlight(pageSpec['examples'] || [], allLanguages),
-        examples: generateExamples(pageSpec['examples'] || [], allLanguages),
+        examples: generateExamples(id, pageSpec['examples'] || [], allLanguages),
         notes: pageSpec.notes,
       })
 
@@ -163,9 +164,9 @@ ${description ? description : 'No description provided. '}
 </li>
 `
 
-function generateExamples(specExamples: any, allLanguages: any) {
+function generateExamples(id: string, specExamples: any, allLanguages: any) {
   return specExamples.map((example) => {
-    let allTabs = Tabs(allLanguages, generateTabs(allLanguages, example))
+    let allTabs = Tabs(id, allLanguages, generateTabs(allLanguages, example))
     return Example({ name: example.name, description: example.description, tabs: allTabs })
   })
 }
diff --git a/web/spec/cli.yml b/web/spec/cli.yml
index 956886bfe85..6fae5f2c9bb 100644
--- a/web/spec/cli.yml
+++ b/web/spec/cli.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/cli
   title: Getting started
   description: |
 
diff --git a/web/spec/gen/components/Tabs.ts b/web/spec/gen/components/Tabs.ts
index 8dcb1de8a12..fc425c19045 100644
--- a/web/spec/gen/components/Tabs.ts
+++ b/web/spec/gen/components/Tabs.ts
@@ -1,8 +1,8 @@
-const Tabs = (libraries = [], examples = []) =>
+const Tabs = (id, libraries = [], examples = []) =>
   `
 <Tabs
   defaultValue="js"
-  groupId="libraries"
+  groupId="${id}"
   values={[${libraries.map((x) => `{ label: '${x.name}', value: '${x.id}' }`).toString()}]}>
 
 ${examples}
diff --git a/web/spec/gotrue.yml b/web/spec/gotrue.yml
index bdbe5430c4e..c3f00cc6aca 100644
--- a/web/spec/gotrue.yml
+++ b/web/spec/gotrue.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/gotrue-js
   title: GoTrue Client
   description: |
     GoTrue is an authentication server.
diff --git a/web/spec/postgres.yml b/web/spec/postgres.yml
index f8c4a12fcd1..e7ae31a95d4 100644
--- a/web/spec/postgres.yml
+++ b/web/spec/postgres.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/postgres
   title: Getting started
   description: |
 
diff --git a/web/spec/postgrest.yml b/web/spec/postgrest.yml
index 68b4107fd6b..43b5ce9f8ec 100644
--- a/web/spec/postgrest.yml
+++ b/web/spec/postgrest.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/postgrest-js
   title: PostgREST Client
   description: |
     This is an isomorphic JavaScript client for [PostgREST](https://postgrest.org/). 
diff --git a/web/spec/realtime.yml b/web/spec/realtime.yml
index 9606067c304..645c5955370 100644
--- a/web/spec/realtime.yml
+++ b/web/spec/realtime.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/realtime-js
   title:  Realtime Client
   description: |
     Listens to changes in a PostgreSQL Database and via websockets.
diff --git a/web/spec/supabase.yml b/web/spec/supabase.yml
index e26b7793002..f01d44ff35a 100644
--- a/web/spec/supabase.yml
+++ b/web/spec/supabase.yml
@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/supabase-js
   title: Supabase Client
   description: |