{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/configuration/overrides",
    "result": {"data":{"contentPage":{"title":"Override Components","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\": \"Override Components\",\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    \"className\": \"section-lead\"\n  }, 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\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"usage\"\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-h3\"\n  }, mdx(\"h2\", {\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\"))))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Usage","url":"#usage"},{"title":"Available overrides","url":"#available-overrides"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":1}},"pageContext":{"slug":"/configuration/overrides","shortTitle":"Override Components","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}