chore: setup multi code examples in docs

chore: setup multi code examples in docs #2

chore: setup multi code examples in docs #3

jest.eslint.config.js

@@ -12,6 +12,7 @@ module.exports = {
     'dist/',
     'public/',
     'generated',
+    'code-examples/',
   ],
   testMatch: ['<rootDir>/**/*.js', '<rootDir>/**/*.ts', '<rootDir>/**/*.tsx'],
   watchPlugins: [

website/gatsby-config.js

@@ -1,4 +1,7 @@
 const colorPresets = require('@commercetools-docs/gatsby-theme-docs/color-presets');
+const {
+  configureThemeWithAddOns,
+} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');
 
 module.exports = {
   // https://www.gatsbyjs.com/docs/reference/release-notes/v2.28/#feature-flags-in-gatsby-configjs
@@ -19,21 +22,19 @@ module.exports = {
   },
   plugins: [
     // Docs theme
-    {
-      resolve: '@commercetools-docs/gatsby-theme-docs',
-      options: {
-        websiteKey: 'custom-applications',
-        colorPreset: colorPresets.merchantCenterDeveloperDocs.key,
-        beta: true,
-        excludeFromSearchIndex: false,
-        gaTrackingId: 'UA-38285631-3',
-        globalNotification: {
-          notificationType: 'info',
-          content:
-            'This is the new documentation of Custom Applications. You can still visit the [legacy documentation](https://docs.commercetools.com/custom-applications/legacy) during the [migration](/migrating-from-project-level-custom-applications) from Project-level Custom Applications.',
-        },
-        overrideDefaultConfigurationData: ['**/top-*'],
+    ...configureThemeWithAddOns({
+      websiteKey: 'custom-applications',
+      colorPreset: colorPresets.merchantCenterDeveloperDocs.key,
+      beta: true,
+      excludeFromSearchIndex: false,
+      gaTrackingId: 'UA-38285631-3',
+      globalNotification: {
+        notificationType: 'info',
+        content:
+          'This is the new documentation of Custom Applications. You can still visit the [legacy documentation](https://docs.commercetools.com/custom-applications/legacy) during the [migration](/migrating-from-project-level-custom-applications) from Project-level Custom Applications.',
       },
-    },
+      overrideDefaultConfigurationData: ['**/top-*'],
+      addOns: ['@commercetools-docs/gatsby-theme-code-examples'],
+    }),
   ],
 };

website/package.json

@@ -11,7 +11,8 @@
     "generate-icons": "svgr -d src/icons/generated -- src/icons/svg && prettier --write '**/generated/*.js'"
   },
   "dependencies": {
-    "@commercetools-docs/gatsby-theme-docs": "18.6.0",
+    "@commercetools-docs/gatsby-theme-code-examples": "19.0.0",
+    "@commercetools-docs/gatsby-theme-docs": "19.0.1",
     "@commercetools-docs/ui-kit": "18.6.0",
     "@commercetools-uikit/card": "^15.0.0",
     "@commercetools-uikit/spacings-inline": "^15.0.0",

website/src/@commercetools-docs/gatsby-theme-docs/overrides/addon-components.js

@@ -0,0 +1,8 @@
+/* eslint-disable prettier/prettier */
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
+/* THIS IS AN AUTOGENERATED FILE, DO NOT EDIT DIRECTLY */
+import * as components0 from '@commercetools-docs/gatsby-theme-code-examples/shortcodes';
+
+export default {
+  ...components0,
+};

website/src/@commercetools-docs/gatsby-theme-docs/overrides/markdown-components.js

@@ -1,9 +1,11 @@
 import { BetaFlag } from '@commercetools-docs/gatsby-theme-docs';
 import Playground from '../../../components/playground';
+import addonComponents from './addon-components';
 
 const markdownComponents = {
   Playground,
   BetaFlag,
+  ...addonComponents,
 };
 
 export default markdownComponents;

website/src/code-examples/data-fetching/channels.js

@@ -0,0 +1,12 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+
+const Channels = (props) => {
+  const { data } = useQuery(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  return <div>{/* Do something with `data` */}</div>;
+};

website/src/code-examples/data-fetching/channels.tsx

@@ -0,0 +1,12 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+
+const Channels = (props) => {
+  const { data } = useQuery(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  return <div>{/* Do something with `data` */}</div>;
+};

website/src/content/development/data-fetching.mdx

@@ -22,24 +22,10 @@ The Apollo Client provides some React hooks to [query data](https://www.apollogr
 
 Using the hooks in your React component is as simple as this:
 
-```js title="channels.js" highlightLines="5-9"
-import { useQuery } from '@apollo/client/react';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-
-const Channels = (props) => {
-  const { data } = useQuery(FetchChannelsQuery, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    }
-  });
-
-  return (
-    <div>
-      {/* Do something with `data` */}
-    </div>
-  );
-};
-```
+<MultiCodeExample title="Channels">
+  <CodeExample path="data-fetching/channels.js" highlightLines={[5,6,7,8,9]} />
+  <CodeExample path="data-fetching/channels.tsx" highlightLines={[5,6,7,8,9]} />
+</MultiCodeExample>
 
 Notice here that we define the `context.target`. This is how you configure the [GraphQL target for the Merchant Center API](/concepts/merchant-center-api#graphql).