add examples callout

Author: dimaMachina

website/src/pages/docs/usage/graphql.mdx

@@ -6,3 +6,5 @@ sidebarTitle: 🚧 GraphQL Files
 # Usage with `.graphql` files
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="graphql-config" />

website/src/pages/docs/usage/js.mdx

@@ -6,3 +6,5 @@ sidebarTitle: 🚧 Code Files
 # Usage with code files `.js/.jsx`
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="code-file" />

website/src/pages/docs/usage/multiple-projects.mdx

@@ -5,3 +5,5 @@ sidebarTitle: 🚧 Multiple Projects
 # Usage to lint different schemas
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="multiple-projects-graphql-config" />

website/src/pages/docs/usage/prettier.mdx

@@ -5,3 +5,5 @@ sidebarTitle: 🚧 Prettier
 # Usage with `eslint-plugin-prettier`
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="prettier" />

website/src/pages/docs/usage/programmatic.mdx

@@ -5,3 +5,5 @@ sidebarTitle: 🚧 Programmatic
 # Programmatic usage
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="programmatic" />

website/src/pages/docs/usage/schema-and-documents.mdx

@@ -5,3 +5,5 @@ sidebarTitle: 🚧 Schema and Documents
 # Usage to lint both schema/documents
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="monorepo" />

website/src/pages/docs/usage/svelte.mdx

@@ -5,3 +5,5 @@ sidebarTitle: 🚧 Svelte
 # Usage with `.svelte` files
 
 <WIP />
+
+<OfficialExampleCallout gitFolder="svelte-code-file" />

website/src/pages/docs/usage/vue.mdx

@@ -69,3 +69,5 @@ export default [
   }
 ]
 ```
+
+<OfficialExampleCallout gitFolder="vue-code-file" />

website/theme.config.tsx

@@ -1,6 +1,18 @@
 /* eslint sort-keys: error */
+import { ComponentProps } from 'react';
 import { Callout, defineConfig, PRODUCTS } from '@theguild/components';
 
+function Anchor(props: ComponentProps<'a'>) {
+  return (
+    <a
+      target="_blank"
+      rel="noreferrer"
+      className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
+      {...props}
+    />
+  );
+}
+
 export default defineConfig({
   backgroundColor: {
     dark: '15,17,20',
@@ -10,15 +22,7 @@ export default defineConfig({
     content: (
       <>
         🚧 This is WIP documentation for v4 of the plugin. For v3 click{' '}
-        <a
-          href="https://074c6ee9.graphql-eslint.pages.dev/docs"
-          target="_blank"
-          rel="noreferrer"
-          className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
-        >
-          here
-        </a>
-        .
+        <Anchor href="https://074c6ee9.graphql-eslint.pages.dev/docs">here</Anchor>.
       </>
     ),
     dismissible: false,
@@ -31,6 +35,32 @@ export default defineConfig({
         </Callout>
       );
     },
+    // @ts-expect-error
+    OfficialExampleCallout({ gitFolder }: { gitFolder: string }) {
+      return (
+        <Callout type="info">
+          <strong>Note</strong>: Check out{' '}
+          <Anchor
+            href={`https://github.com/dimaMachina/graphql-eslint/tree/master/examples/${gitFolder}`}
+          >
+            the official examples
+          </Anchor>{' '}
+          for{' '}
+          <Anchor
+            href={`https://github.com/dimaMachina/graphql-eslint/blob/master/examples/${gitFolder}/eslint.config.js`}
+          >
+            ESLint Flat Config
+          </Anchor>
+          or{' '}
+          <Anchor
+            href={`https://github.com/dimaMachina/graphql-eslint/blob/master/examples/${gitFolder}/.eslintrc.cjs`}
+          >
+            ESLint Legacy Config
+          </Anchor>
+          .
+        </Callout>
+      );
+    },
   },
   description: PRODUCTS.ESLINT.title,
   docsRepositoryBase: 'https://github.com/B2o5T/graphql-eslint/tree/master/website', // base URL for the docs repository