{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/configuration/extensions",
    "result": {"data":{"contentPage":{"title":"Theme Extensions","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Theme Extensions\",\n  \"beta\": false\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", {\n    \"id\": \"section-using-theme-color-presets\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"using-theme-color-presets\"\n  }, \"Using Theme Color Presets\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A color preset is what identifies a website or a group or content-related websites.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A preset usually includes a:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"primary color\"), \": the color that visually identifies the website. It will be applied to heading H1 elements and the website title in the left navigation.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"hero banner\"), \": a background image with certain visual patterns to be used in the website's landing page. The banner should have the same or similar colors to the primary color.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Here is the list of the available presets:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"base\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"merchantCenterDeveloperDocs\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"merchantCenterUserDocs\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"platformDeveloperDocs\")))), mdx(\"section\", {\n    \"id\": \"section-usage\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage\"\n  }, \"Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const colorPresets = require('@commercetools-docs/gatsby-theme-docs/color-presets');\\n\\nmodule.exports = {\\n  // ... other site config\\n  plugins: [\\n    ...configureThemeWithAddOns({\\n      // ... other theme config\\n      colorPreset: colorPresets.platformDeveloperDocs.key,\\n    }),\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-using-theme-with-add-ons\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"using-theme-with-add-ons\"\n  }, \"Using Theme with Add-Ons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A theme add-on is a Gatsby Theme that exposes React components to be injected into the MDX provider of the core theme.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Gatsby enables a child theme to use component shadowing (see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#theme-overrides\"\n  }, \"Theme overrides\"), \"). However, with multiple themes, the shadowed components are \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"only\"), \" loaded from the last theme in the Gatsby configuration. To solve this problem, a commercetools-docs Gatsby Theme can be used as an add-on, allowing \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"multiple\"), \" add-ons to provide additional components to be available in MDX without having to manually import them into every page.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When using add-on themes, a proxy export file will be generated in the websites \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/@commercetools-docs/gatsby-theme-docs/overrides\"), \" folder to leverage Gatsby's component shadowing (see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#theme-overrides\"\n  }, \"Theme overrides\"), \"). This file provides all the exported components from the add-on packages. For a component to be exported by an add-on package it has to be exported from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shortcodes.js\"), \" in the add-on package root.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"To safely configure theme add-ons, use the \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"configureThemeWithAddOns\"), \" function in the websites's \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"gatsby-config.js\"), \":\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {\\n  configureThemeWithAddOns,\\n} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');\\n\\nmodule.exports = {\\n  plugins: [\\n    ...configureThemeWithAddOns({\\n      // Pass the normal theme options\\n      websiteKey: 'my-website-key',\\n      // Define and configure the add-on plugins instead of configuring them in the main plugins array.\\n      addOns: [\\n        '@commercetools-docs/gatsby-theme-foo',\\n        {\\n          resolve: '@commercetools-docs/gatsby-theme-bar',\\n          options: {\\n            // ...\\n          },\\n        },\\n      ],\\n    }),\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-theme-overrides\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"theme-overrides\"\n  }, \"Theme Overrides\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Overrides files using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/docs/themes/shadowing/\"\n  }, \"Gatsby theme shadowing\"), \", to inject functionalities to specific parts of the theme.\")), mdx(\"section\", {\n    \"id\": \"section-usage-1\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-1\"\n  }, \"Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"To use this feature, the website must mimic the folder structure of the Gatsby theme and list the files in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overrides\"), \" folder that should be overridden.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"src\\n\\u2514\\u2500\\u2500 @commercetools-docs\\n    \\u2514\\u2500\\u2500 gatsby-theme-docs\\n        \\u2514\\u2500\\u2500 overrides\\n            \\u251C\\u2500\\u2500 markdown-components.js\\n            \\u251C\\u2500\\u2500 page-header-side.js\\n            \\u2514\\u2500\\u2500 use-additional-site-data.js\\n\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note that Gatsby shadowing works with any file in the theme. However, the theme provides an explicit stable extension point that is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overrides\"), \" folder. Users of the theme should use this extension point only instead of relying on theme-internal file system paths that can potentially change any time.\"))), mdx(\"section\", {\n    \"id\": \"section-available-overrides\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"available-overrides\"\n  }, \"Available overrides\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"markdown-components\"), \": allows to pass React components to be injected in the content pages.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import MyCustomComponent from '../../../components/my-custom-component';\\n\\nconst markdownComponents = {\\n  MyCustomComponent,\\n};\\nexport default markdownComponents;\\n\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"With this, in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"*.mdx\"), \" content pages the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<MyCustomComponent>\"), \" is available to use.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"page-header-side\"), \": allows to render something in the top-right corner of a content page. Any valid React component should be \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"default\"), \" exported.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"use-additional-site-data\"), \": allows to return custom site metadata using React hooks. The data is merged with the default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"siteMetadata\"), \" of the Gatsby theme and can be accessed using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useSiteData\"), \" hook.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useStaticQuery, graphql } from 'gatsby';\\n\\n// This website defines the `repositoryUrl` value in the `siteMetadata` config.\\n// Therefore, we query those extra values and return them.\\nconst useAdditionalSiteData = () => {\\n  const data = useStaticQuery(graphql`\\n    query GetAdditionalSiteData {\\n      site {\\n        siteMetadata {\\n          repositoryUrl\\n        }\\n      }\\n    }\\n  `);\\n\\n  return data.site.siteMetadata;\\n};\\nexport default useAdditionalSiteData;\\n\"))))), mdx(\"section\", {\n    \"id\": \"section-helpful-components--functions\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"helpful-components--functions\"\n  }, \"Helpful Components & Functions\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The theme additionally exports some React components and functions that are useful to build custom views in your website. Two hooks allow to build components that can be placed into MDX files while still having access to all necessary data:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"usePageData\"), \" provides frontmatter values or their defaults and other page-level metadata like the table of contents.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useSiteData\"), \" provides site wide metadata.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import {\\n  Markdown,\\n  Spacings,\\n  useSiteData,\\n  usePageData,\\n} from '@commercetools-docs/gatsby-theme-docs';\\n\\nconst MyComponent = () => {\\n  const siteData = useSiteData();\\n  const pageData = usePageData();\\n  return (\\n    <Spacings.Stack>\\n      <Markdown.H1>{siteData.siteMetadata.title}</Markdown.H1>\\n      <Markdown.Paragraph>{'Hello, world!'}</Markdown.Paragraph>\\n      {usePageData.beta ? (\\n        <Warning>Beta!</Warning>\\n      ) : (\\n        <Info>Generally available</Info>\\n      )}\\n    </Spacings.Stack>\\n  );\\n};\\nexport default MyComponent;\\n\"))), mdx(\"section\", {\n    \"id\": \"section-gatsby-theme-add-on-for-api-docs\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"gatsby-theme-add-on-for-api-docs\"\n  }, \"Gatsby Theme Add-On for API docs\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This theme provides components in MDX to render API info from RAML spec files.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is a feature add-on to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@commercetools-docs/gatsby-theme-docs\"), \" and is not usable standalone.\")), mdx(\"section\", {\n    \"id\": \"section-installation\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"installation\"\n  }, \"Installation\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/gatsby-theme-api-docs\\n\"))), mdx(\"section\", {\n    \"id\": \"section-usage-2\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-2\"\n  }, \"Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {\\n  configureThemeWithAddOns,\\n} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');\\n\\nmodule.exports = {\\n  // ... other site config\\n  plugins: [\\n    ...configureThemeWithAddOns({\\n      // ... other theme config\\n      addOns: [\\n        {\\n          resolve: '@commercetools-docs/gatsby-theme-api-docs',\\n          options: {\\n            transformerRaml: {\\n              includeApis: ['example'],\\n              moveTypePropertiesToTop: ['id'],\\n              moveTypePropertiesToBottom: ['custom'],\\n            },\\n          },\\n        },\\n      ],\\n    }),\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-plugin-options\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"plugin-options\"\n  }, \"Plugin Options\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transformerRaml\"), \": See \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"../configuration/plugins#available-plugin-options\"\n  }, \"gatsby-transformer-raml Plugin Options\")))), mdx(\"section\", {\n    \"id\": \"section-generating-the-required-canonical-raml-form\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"generating-the-required-canonical-raml-form\"\n  }, \"Generating the required canonical RAML form\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/commercetools/rmf-codegen#rmf-codegen\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"@commercetools-docs/rmf-codegen\")), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"RAML_DOC\"), \" target output to generate RAML API specifications in the canonical file layout required by this plugin. It does an (any valid) RAML to (canonical flattened) RAML conversion allowing the gatsbyJS plugin to handle the RAML literally without parsing or resolving.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Example call:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npx rmf-codegen generate ./websites/api-docs-smoke-test/source-raml/test/api.raml --output-folder ./websites/api-docs-smoke-test/src/api-specs/test --target RAML_DOC\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In gatsby develop mode, add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--watch\"), \" option to the rmf-codegen command to continuously regenerate the canonical output while editing the original RAML.\")), mdx(\"section\", {\n    \"id\": \"section-path-convention-srcapi-specs\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"path-convention-srcapi-specs\"\n  }, \"Path Convention \", mdx(\"inlineCode\", {\n    parentName: \"h4\"\n  }, \"./src/api-specs/\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"RAML spec files have to be added in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"./src/api-specs/\"), \" folder of the website. This directory is required and is automatically generated when the plugin runs.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The file location determines the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"apiKey\"), \" through which it can be addressed:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src/api-specs/foo.raml\"), \" -> apiKey \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"foo\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src/api-specs/bar/api.raml\"), \" -> apiKey \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"bar\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src/api-specs/baz/baz.raml\"), \" -> apiKey \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"baz\")))), mdx(\"section\", {\n    \"id\": \"section-soft-links\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"soft-links\"\n  }, \"Soft Links\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Soft links are autogenerated for types and endpoints that are used on MDX pages. They are generated using our custom URN, for types the custom URN is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ctp:<api-key>:type:<type-name>\"), \", and for endpoints the custom URN is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ctp:<api-key>:endpoint:<endpoint>:<method>\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Soft links can be taken advantage of in a couple of ways:\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"If the type of a field is used on an MDX page, the type would be automatically rendered as a link, instead of a text, to where the type is rendered/defined on the MDX page.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Our custom URN can be used in markdown links of description fields of types and resources. For example, to use an autogenerated soft link for a type, the markdown link would be written as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[Text](ctp:<api-key>:type:<type-name>)\"), \".\")))), mdx(\"section\", {\n    \"id\": \"section-overriding-the-location-of-certain-api-types\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"overriding-the-location-of-certain-api-types\"\n  }, \"Overriding the location of certain API types\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you want to override the location to link to for certain API data types, create a file called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type-locations.yaml\"), \" under the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data\"), \" folder of the website. This can be useful to choose manual markdown based documentation for certain types or to link ot shared types used on other websites like public standards. Use the following format to override the type locations:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-yaml\"\n  }, \"- api: import\\n  locations:\\n    - type: AssetDimensions\\n      href: /product-variant#assetdimensions\\n    - type: DiscountedPrice\\n      href: /../other-microsite/order#discountedprice\\n- api: history\\n  locations:\\n    - type: LocalizedLabel\\n      href: https://example.com/some/other/location/on/the/web\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"api\"), \" -> Name of the api where the types are located.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"locations\"), \" -> List of type locations you want to override.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type\"), \" -> Name of the type to override.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"href\"), \" -> Your custom link.\"))), mdx(\"section\", {\n    \"id\": \"section-using-ui-components-in-mdx\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"using-ui-components-in-mdx\"\n  }, \"Using UI components in MDX\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Because the API documentation components load the complete API specification data, they are \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"not\"), \" automatically injected into the MDX provider but have to be imported explicitly.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By convention it's recommended that websites define a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/shortcodes.js\"), \" module that can then be addressed in the MDX pages:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"export {\\n  ApiType,\\n  ApiEndpoint,\\n  ApiEndpointsForResource,\\n} from '@commercetools-docs/gatsby-theme-api-docs';\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The package exposes the following components:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<ApiType>\"), \": Renders an API type.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { ApiType } from '/shortcodes';\\n{\\n  /*\\n  apiKey - name of the specs directory\\n  type - name of the api type\\n  hideInheritedProperties - optional prop that hides properties inherited from parent type except discriminator\\n*/\\n}\\n<ApiType apiKey=\\\"test\\\" type=\\\"ExamplesTestType\\\" hideInheritedProperties />;\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<ApiEndpoint>\"), \": Renders an API endpoint.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { ApiEndpoint } from '/shortcodes';\\n{\\n  /*\\n  apiKey - name of the specs directory\\n  resource - path of the endpoint\\n  method - endpoint method e.g. get, post, delete.\\n  title - optional title to render\\n*/\\n}\\n<ApiEndpoint\\n  apiKey=\\\"test\\\"\\n  resource=\\\"/{projectKey}/resource/artificially-complex/path/uri-parameter-one={uriParameterOne}/{uriParameterTwo}\\\"\\n  method=\\\"POST\\\"\\n  title=\\\"<optional>\\\"\\n/>;\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<ApiEndpointsForResource>\"), \": Renders all endpoints of an API resource.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { ApiEndpointsForResource } from '/shortcodes';\\n{\\n  /*\\n  apiKey - name of the specs directory\\n  resource - path of the resource\\n*/\\n}\\n<ApiEndpointsForResource apiKey=\\\"test\\\" resource=\\\"/{projectKey}/resource\\\" />;\\n\"))), mdx(\"section\", {\n    \"id\": \"section-resource-query-paramesters-of-array-type\",\n    \"className\": \"section-h5\"\n  }, mdx(\"h4\", {\n    parentName: \"section\",\n    \"id\": \"resource-query-paramesters-of-array-type\"\n  }, \"Resource Query Paramesters of Array Type\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All query parameters of array type are not rendered as arrays. Only the type (for example \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"String\"), \") of the array items is rendered along with additional text in the description that reads \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"The parameter can be passed multiple times.\"), \".\")), mdx(\"section\", {\n    \"id\": \"section-gatsby-theme-add-on-for-code-examples\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"gatsby-theme-add-on-for-code-examples\"\n  }, \"Gatsby Theme Add-On for Code Examples\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This theme provides components in MDX to render code examples from files, optionally in multiple programming languages.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is a feature add-on to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@commercetools-docs/gatsby-theme-docs\"), \" and is not usable standalone.\")), mdx(\"section\", {\n    \"id\": \"section-installation-1\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"installation-1\"\n  }, \"Installation\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/gatsby-theme-code-examples\\n\"))), mdx(\"section\", {\n    \"id\": \"section-usage-3\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-3\"\n  }, \"Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {\\n  configureThemeWithAddOns,\\n} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');\\n\\nmodule.exports = {\\n  // ... other site config\\n  plugins: [\\n    ...configureThemeWithAddOns({\\n      // ... other theme config\\n      addOns: ['@commercetools-docs/gatsby-theme-code-examples'],\\n    }),\\n  ],\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Example files must be added in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"./src/code-examples/\"), \" folder of the website. That folder is automatically generated when the plugin runs.\")), mdx(\"section\", {\n    \"id\": \"section-supported-mime-types\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"supported-mime-types\"\n  }, \"Supported MIME Types\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"application/javascript\"), \" (JavaScript)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text/x-java-source\"), \" (Java)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"application/json\"), \" (JSON)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"application/x-httpd-php\"), \" (PHP)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"application/x-sh\"), \" (Shell / Bash)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"video/mp2t\"), \" (not actually TypeScript, but gatsbyJS represents .ts files as this mime type)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text/yaml\"), \" (YAML)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text/vnd.curl\"), \" (cURL)\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In addition the following are included to cover languages with no explicit mime type (for example C#)\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"application/octet-stream\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text/plain\")))), mdx(\"section\", {\n    \"id\": \"section-using-ui-components-in-markdown\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"using-ui-components-in-markdown\"\n  }, \"Using UI components in Markdown\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The package exposes the following components in the MDX context:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<CodeExample>\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<MultiCodeExample>\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Then in your MDX files:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-markdown\"\n  }, \"<MultiCodeExample title=\\\"Multilanguage Code Samples\\\">\\n  <CodeExample path=\\\"example.js\\\" highlightLines={[3]} />\\n  <CodeExample path=\\\"example.java\\\"/>\\n  <CodeExample path=\\\"example.console\\\" noPromptLines={[3, 4]} />\\n</MultiCodeExample>\\n\\n<CodeExample path=\\\"example.js\\\" title=\\\"JavaScript Code Sample\\\" />\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In addition to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"path\"), \", the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<CodeExample>\"), \" component supports all custom parameters that can be passed to fenced code blocks in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.npmjs.com/package/@commercetools-docs/gatsby-theme-docs\"\n  }, \"base theme\"))), mdx(\"section\", {\n    \"id\": \"section-gatsby-theme-add-on-for-constants\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"gatsby-theme-add-on-for-constants\"\n  }, \"Gatsby Theme Add-On for Constants\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This theme exposes components in MDX to render constant values centrally defined in data files. Use cases include centrally managing limits and defaults of the documented product.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is a feature add-on to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@commercetools-docs/gatsby-theme-docs\"), \" and is not usable standalone.\")), mdx(\"section\", {\n    \"id\": \"section-installation-2\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"installation-2\"\n  }, \"Installation\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/gatsby-theme-constants\\n\"))), mdx(\"section\", {\n    \"id\": \"section-usage-4\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-4\"\n  }, \"Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \":\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {\\n  configureThemeWithAddOns,\\n} = require('@commercetools-docs/gatsby-theme-docs/configure-theme');\\n\\nmodule.exports = {\\n  // ... other site config\\n  plugins: [\\n    ...configureThemeWithAddOns({\\n      // ... other theme config\\n      addOns: ['@commercetools-docs/gatsby-theme-constants'],\\n    }),\\n  ],\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The YAML data files containing the constant data points must be added to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"./src/constants\"), \" folder of the website. This folder is automatically generated when the plugin runs.\")), mdx(\"section\", {\n    \"id\": \"section-yaml-file-format\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"yaml-file-format\"\n  }, \"YAML file format\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For example, to centrally manage limits of your product, add a file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/constants/limits.yaml\"), \" with content in the following format:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-yaml\"\n  }, \"- name: jsonSize\\n  number: 64\\n  text: megabytes\\n- name: slugLength\\n  number: 256\\n- name: slugPattern\\n  text: \\\"[a-zA-Z0-9_\\\\\\\\-]{2,256}\\\"\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The filename without extension becomes the \\\"type\\\" of the constant when addressing it. Multiple files are supported.\")), mdx(\"section\", {\n    \"id\": \"section-using-the-ui-component-in-content\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"using-the-ui-component-in-content\"\n  }, \"Using the UI component in content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The package exposes the following components in the MDX context:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<Constant>\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Then in your MDX files include the constant value in arbitrary places:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-markdown\"\n  }, \"<Constant type=\\\"limits\\\" name=\\\"slugLength\\\"/>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If both a text and a number value are provided, the text is rendered after the number, separated by a non-breaking space to allow using the text as a unit of measure for the number.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Using Theme Color Presets","url":"#using-theme-color-presets","items":[{"title":"Usage","url":"#usage"}]},{"title":"Using Theme with Add-Ons","url":"#using-theme-with-add-ons"},{"title":"Theme Overrides","url":"#theme-overrides","items":[{"title":"Usage","url":"#usage-1"},{"title":"Available overrides","url":"#available-overrides"},{"title":"Helpful Components & Functions","url":"#helpful-components--functions"}]},{"title":"Gatsby Theme Add-On for API docs","url":"#gatsby-theme-add-on-for-api-docs","items":[{"title":"Installation","url":"#installation"},{"title":"Usage","url":"#usage-2","items":[{"title":"Plugin Options","url":"#plugin-options"},{"title":"Generating the required canonical RAML form","url":"#generating-the-required-canonical-raml-form"},{"title":"Path Convention ./src/api-specs/","url":"#path-convention-srcapi-specs"},{"title":"Soft Links","url":"#soft-links"},{"title":"Overriding the location of certain API types","url":"#overriding-the-location-of-certain-api-types"}]},{"title":"Using UI components in MDX","url":"#using-ui-components-in-mdx","items":[{"title":"Resource Query Paramesters of Array Type","url":"#resource-query-paramesters-of-array-type"}]}]},{"title":"Gatsby Theme Add-On for Code Examples","url":"#gatsby-theme-add-on-for-code-examples","items":[{"title":"Installation","url":"#installation-1"},{"title":"Usage","url":"#usage-3"},{"title":"Supported MIME Types","url":"#supported-mime-types"},{"title":"Using UI components in Markdown","url":"#using-ui-components-in-markdown"}]},{"title":"Gatsby Theme Add-On for Constants","url":"#gatsby-theme-add-on-for-constants","items":[{"title":"Installation","url":"#installation-2"},{"title":"Usage","url":"#usage-4"},{"title":"YAML file format","url":"#yaml-file-format"},{"title":"Using the UI component in content","url":"#using-the-ui-component-in-content"}]}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":5}},"pageContext":{"slug":"/configuration/extensions","shortTitle":"Theme Extensions","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}