chore(docs): add generated examples to website

examples/$helpers.ts

@@ -3,6 +3,7 @@ import { inspect } from 'node:util'
 export const publicGraphQLSchemaEndpoints = {
   SocialStudies: `https://countries.trevorblades.com/graphql`,
 }
+
 export const show = (value: unknown) => {
   console.log(inspect(value, { depth: null, colors: true }))
 }

examples/arguments.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
+import { show } from './$helpers.js'
 
 const socialStudies = SocialStudies.create()
 
@@ -9,4 +10,4 @@ const countries = await socialStudies.query.countries({
   continent: { name: true },
 })
 
-console.log(countries)
+show(countries)

examples/config-fetch.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
+import { show } from './$helpers.js'
 
 const socialStudies = SocialStudies.create()
   .use({
@@ -21,4 +22,4 @@ const countries = await socialStudies.query.countries({
   name: true,
 })
 
-console.log(countries)
+show(countries)

examples/config-http-headers.ts

@@ -1,4 +1,5 @@
 import { SocialStudies } from './$generated-clients/SocialStudies/__.js'
+import { show } from './$helpers.js'
 
 const socialStudies = SocialStudies.create({
   headers: {
@@ -8,4 +9,4 @@ const socialStudies = SocialStudies.create({
 
 const continents = await socialStudies.query.continents({ name: true })
 
-console.log(continents)
+show(continents)

examples/raw-typed.ts

@@ -1,6 +1,6 @@
 import type { TypedQueryDocumentNode } from 'graphql'
 import { gql, Graffle } from '../src/entrypoints/graffle/main.js'
-import { publicGraphQLSchemaEndpoints } from './$helpers.js'
+import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'
 
 const graffle = Graffle.create({
   schema: publicGraphQLSchemaEndpoints.SocialStudies,
@@ -28,7 +28,7 @@ const graffle = Graffle.create({
 
   const result = await graffle.raw({ document, variables: { filter: [`Canada`, `Germany`, `Japan`] } })
 
-  console.log(result.data?.countries)
+  show(result.data?.countries)
 }
 
 /*************************************** Variation 2 ***************************************
@@ -58,5 +58,5 @@ const graffle = Graffle.create({
 
   const result = await graffle.raw({ document, variables: { filter: [`Canada`, `Germany`, `Japan`] } })
 
-  console.log(result.data?.countries)
+  show(result.data?.countries)
 }

examples/rawString-typed.ts

@@ -1,7 +1,7 @@
 import { Graffle } from '../src/entrypoints/graffle/main.js'
 // todo from '../src/entrypoints/graffle/utils.js'
 import type { TypedDocumentString } from '../src/layers/0_functions/types.js'
-import { publicGraphQLSchemaEndpoints } from './$helpers.js'
+import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'
 
 const graffle = Graffle.create({
   schema: publicGraphQLSchemaEndpoints.SocialStudies,
@@ -34,4 +34,4 @@ const result = await graffle.rawString({
   variables: { filter: [`Canada`, `Germany`, `Japan`] },
 })
 
-console.log(result.data?.countries)
+show(result.data?.countries)

examples/rawString.ts

@@ -1,5 +1,5 @@
 import { Graffle } from '../src/entrypoints/graffle/main.js'
-import { publicGraphQLSchemaEndpoints } from './$helpers.js'
+import { publicGraphQLSchemaEndpoints, show } from './$helpers.js'
 
 const graffle = Graffle.create({
   schema: publicGraphQLSchemaEndpoints.SocialStudies,
@@ -17,4 +17,4 @@ const result = await graffle.rawString({
   document,
 })
 
-console.log(result.data)
+show(result.data)

website/.vitepress/config.ts

@@ -1,6 +1,7 @@
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { ModuleKind, ModuleResolutionKind } from 'typescript'
 import { defineConfig } from 'vitepress'
+import { sidebarExamples } from './configExamples'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -45,106 +46,101 @@ export default defineConfig({
       prev: false,
     },
     aside: 'left',
-    // https://vitepress.dev/reference/default-theme-config
-    // nav: [
-    //   { text: 'Home', link: '/' },
-    //   { text: 'Examples', link: '/markdown-examples' },
-    // ],
-    sidebar: [
-      {
-        text: 'Overview',
-        collapsed: false,
-        items: [
-          { text: 'Introduction', link: '/overview/introduction' },
-          {
-            text: 'Getting Started',
-            // link: '/overview/getting-started',
-            items: [{
-              text: 'Static Client',
-              link: '/overview/getting-started-static',
-            }, {
-              text:
-                'Generated Client <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-              link: '/overview/getting-started-generated',
-            }],
-          },
-          {
-            text: 'Generation <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-            link: '/overview/generation',
-          },
-        ],
-      },
-      {
-        text: 'Configuration',
-        collapsed: false,
-        items: [
-          { text: 'Transports', link: '/configuration/transports' },
-          { text: 'Output', link: '/configuration/output' },
-          { text: 'Request', link: '/configuration/request' },
-          { text: 'Anyware', link: '/configuration/anyware' },
-        ],
-      },
-      {
-        text: 'Methods',
-        collapsed: false,
-        items: [
-          { text: 'Raw', link: '/methods/raw' },
-          { text: 'Or Throw', link: '/methods/or-throw' },
-          {
-            text: 'Document <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-            link: '/methods/document',
-          },
-          {
-            text: 'Batch <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-            link: '/methods/batch',
-          },
-          {
-            text: 'Root Fields <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-            link: '/methods/root-fields',
-          },
-        ],
-      },
-      {
-        text: 'GQL Feature Mapping <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-        collapsed: false,
-        items: [
-          { text: 'Arguments', link: '/graphql-feature-mapping/arguments' },
-          { text: 'Aliases', link: '/graphql-feature-mapping/aliases' },
-          { text: 'Enums', link: '/graphql-feature-mapping/enums' },
-          { text: 'Interfaces', link: '/graphql-feature-mapping/interfaces' },
-          { text: 'Unions', link: '/graphql-feature-mapping/unions' },
-          { text: 'Directives', link: '/graphql-feature-mapping/directives' },
-          { text: 'Custom Scalars', link: '/graphql-feature-mapping/custom-scalars' },
-          { text: 'Selection Groups', link: '/graphql-feature-mapping/selection-groups' },
-        ],
-      },
-      {
-        text: 'Misc <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
-        collapsed: false,
-        items: [
-          { text: 'Schema Errors', link: '/misc/schema-errors' },
-          { text: 'Select', link: '/misc/select' },
-          { text: 'Extension Authoring', link: '/misc/extension-authoring' },
-        ],
-      },
-      {
-        text: 'Extensions',
-        collapsed: false,
-        items: [
-          { text: 'File Upload', link: '/extensions/file-upload' },
-          { text: 'OTEL', link: '/extensions/otel' },
-          { text: 'Or Throw', link: '/extensions/or-throw' },
-        ],
-      },
-      {
-        text: 'Examples',
-        collapsed: false,
-        items: [
-          { text: '.rawString', link: '/examples/rawString' },
-          { text: '.rawString Typed', link: '/examples/rawString-typed' },
-        ],
-      },
+    nav: [
+      { text: 'Guides', link: '/guides/overview/introduction' },
+      { text: 'Examples', link: sidebarExamples[0].link ?? '/' },
     ],
+    sidebar: {
+      '/examples/': sidebarExamples,
+      '/guides/': [
+        {
+          text: 'Overview',
+          collapsed: false,
+          items: [
+            { text: 'Introduction', link: '/guides/overview/introduction' },
+            {
+              text: 'Getting Started',
+              // link: '/overview/getting-started',
+              items: [{
+                text: 'Static Client',
+                link: '/guides/overview/getting-started-static',
+              }, {
+                text:
+                  'Generated Client <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+                link: '/guides/overview/getting-started-generated',
+              }],
+            },
+            {
+              text: 'Generation <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+              link: '/guides/overview/generation',
+            },
+          ],
+        },
+        {
+          text: 'Configuration',
+          collapsed: false,
+          items: [
+            { text: 'Transports', link: '/guides/configuration/transports' },
+            { text: 'Output', link: '/guides/configuration/output' },
+            { text: 'Request', link: '/guides/configuration/request' },
+            { text: 'Anyware', link: '/guides/configuration/anyware' },
+          ],
+        },
+        {
+          text: 'Methods',
+          collapsed: false,
+          items: [
+            { text: 'Raw', link: '/methods/raw' },
+            { text: 'Or Throw', link: '/guides/methods/or-throw' },
+            {
+              text: 'Document <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+              link: '/guides/methods/document',
+            },
+            {
+              text: 'Batch <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+              link: '/guides/methods/batch',
+            },
+            {
+              text: 'Root Fields <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+              link: '/guides/methods/root-fields',
+            },
+          ],
+        },
+        {
+          text:
+            'GQL Feature Mapping <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+          collapsed: false,
+          items: [
+            { text: 'Arguments', link: '/guides/graphql-feature-mapping/arguments' },
+            { text: 'Aliases', link: '/guides/graphql-feature-mapping/aliases' },
+            { text: 'Enums', link: '/guides/graphql-feature-mapping/enums' },
+            { text: 'Interfaces', link: '/guides/graphql-feature-mapping/interfaces' },
+            { text: 'Unions', link: '/guides/graphql-feature-mapping/unions' },
+            { text: 'Directives', link: '/guides/graphql-feature-mapping/directives' },
+            { text: 'Custom Scalars', link: '/guides/graphql-feature-mapping/custom-scalars' },
+            { text: 'Selection Groups', link: '/guides/graphql-feature-mapping/selection-groups' },
+          ],
+        },
+        {
+          text: 'Misc <span title="Requires generation" style="font-size:1.75em;line-height:0;">⩕</span>',
+          collapsed: false,
+          items: [
+            { text: 'Schema Errors', link: '/guides/misc/schema-errors' },
+            { text: 'Select', link: '/guides/misc/select' },
+            { text: 'Extension Authoring', link: '/guides/misc/extension-authoring' },
+          ],
+        },
+        {
+          text: 'Extensions',
+          collapsed: false,
+          items: [
+            { text: 'File Upload', link: '/guides/extensions/file-upload' },
+            { text: 'OTEL', link: '/guides/extensions/otel' },
+            { text: 'Or Throw', link: '/guides/extensions/or-throw' },
+          ],
+        },
+      ],
+    },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/jasonkuhrt/graffle' },
     ],

website/.vitepress/configExamples.ts

@@ -0,0 +1,32 @@
+import { DefaultTheme } from 'vitepress'
+
+export const sidebarExamples: DefaultTheme.SidebarItem[] = [
+  {
+    'text': 'Arguments',
+    'link': '/examples/arguments',
+  },
+  {
+    'text': 'Config Fetch',
+    'link': '/examples/config-fetch',
+  },
+  {
+    'text': 'Config Http Headers',
+    'link': '/examples/config-http-headers',
+  },
+  {
+    'text': 'Raw Typed',
+    'link': '/examples/raw-typed',
+  },
+  {
+    'text': 'Raw',
+    'link': '/examples/raw',
+  },
+  {
+    'text': 'RawString Typed',
+    'link': '/examples/rawString-typed',
+  },
+  {
+    'text': 'RawString',
+    'link': '/examples/rawString',
+  },
+]

website/content/examples/arguments.md

@@ -0,0 +1,20 @@
+---
+aside: false
+---
+
+```ts twoslash
+import './graffle/Global.js'
+// ---cut---
+import { Graffle as SocialStudies } from './graffle/__.js'
+
+const socialStudies = SocialStudies.create()
+
+const countries = await socialStudies.query.countries({
+  $: { filter: { name: { in: ['Canada', 'Germany', 'Japan'] } } },
+  name: true,
+  continent: { name: true },
+})
+
+console.log(countries)
+//          ^?
+```

website/content/examples/config-fetch.md

@@ -0,0 +1,36 @@
+---
+aside: false
+---
+
+```ts twoslash
+import './graffle/Global.js'
+// ---cut---
+import { Graffle as SocialStudies } from './graffle/__.js'
+
+const socialStudies = SocialStudies.create()
+  .use({
+    name: `CustomFetch`,
+    anyware: async ({ exchange }) => {
+      return await exchange({
+        using: {
+          fetch: async () => {
+            return new Response(
+              JSON.stringify({
+                data: { countries: [{ name: `Canada Mocked!` }] },
+              }),
+            )
+          },
+        },
+      })
+    },
+  })
+
+// todo $scalars does not work
+// todo intelisense for $ doesn't work
+const countries = await socialStudies.query.countries({
+  name: true,
+})
+
+console.log(countries)
+//          ^?
+```