chore: setup multi code examples in docs

chore: setup multi code examples in docs #2
commercetools · Jun 8, 2022 · 89f6ec9 · 89f6ec9
1 parent 5b0ad17
commit 89f6ec9
Show file tree

Hide file tree

Showing 9 changed files with 377 additions and 724 deletions.
diff --git a/jest.eslint.config.js b/jest.eslint.config.js
@@ -12,6 +12,7 @@ module.exports = {
     'dist/',
     'public/',
     'generated',
+    'code-examples/',
   ],
   testMatch: ['<rootDir>/**/*.js', '<rootDir>/**/*.ts', '<rootDir>/**/*.tsx'],
   watchPlugins: [

diff --git a/website/gatsby-config.js b/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'],
+    }),
   ],
 };
diff --git a/website/package.json b/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",

diff --git a/website/src/@commercetools-docs/gatsby-theme-docs/overrides/.gitignore b/website/src/@commercetools-docs/gatsby-theme-docs/overrides/.gitignore
@@ -0,0 +1 @@
+addon-components.js
diff --git a/website/src/@commercetools-docs/gatsby-theme-docs/overrides/markdown-components.js b/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;
diff --git a/website/src/code-examples/data-fetching/channels.js b/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>;
+};
diff --git a/website/src/code-examples/data-fetching/channels.tsx b/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>;
+};
diff --git a/website/src/content/development/data-fetching.mdx b/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).