Sets a group tab on all the code examples

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 })
   })
 }

web/spec/cli.yml

@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/cli
   title: Getting started
   description: |
 

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}

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.

web/spec/postgres.yml

@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/postgres
   title: Getting started
   description: |
 

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/). 

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.

web/spec/supabase.yml

@@ -1,6 +1,7 @@
 openref: 0.1
 
 info:
+  id: reference/supabase-js
   title: Supabase Client
   description: |