{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/configuration/theme",
    "result": {"data":{"contentPage":{"title":"Site and Theme Configuration","websitePrimaryColor":"#003037","beta":false,"excludeFromSearchIndex":false,"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\": \"Site and Theme Configuration\"\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  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file is required for a Gatsby website and contains the website specific configuration.\\nThe Docs-Kit theme also receives its plugin configuration through this standard Gatsby mechanism. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@commercetools-docs/gatsby-theme-docs\"), \" plugin has the following configuration options\")), mdx(\"section\", {\n    \"id\": \"section-available-options-for-the-theme\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"available-options-for-the-theme\"\n  }, \"Available Options for the Theme\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"websiteKey\"), \" (\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"required\"), \"): the identifier of the website, used for error reporting and similar concerns. Usually this value would be the same as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \" without the leading slash and without whitespaces.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorPreset\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): pick the \\\"look and feel\\\" of the website by choosing one of the available \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"./extensions#using-theme-color-presets\"\n  }, \"Color Presets\"), \". \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"base\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gaTrackingId\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): this is the Google Analytics tracking ID. For all sites hosted on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \" domain the ID must be: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"UA-38285631-3\"), \".\"), mdx(\"blockquote\", {\n    parentName: \"li\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"For test websites the gaTrackingId field should not be set.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hubspotTrackingCode\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): this is HubSpot tracking code.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createNodeSlug\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): in case you need to have more control over the creation of the page slugs, you can implement this function. This is useful if for example your website has content files in other file system locations and you want to provide a more meaningful URL path.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type Options = { node: Node }; // A Gatsby Node\\ntype CreateNodeSlugFn = (originalSlug: string, { node }: Options) => string;\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"availablePrismLanguages\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): in case you need to include \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Prism languages\"), \" that are \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js\"\n  }, \"not included by default by \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"prism-react-renderer\")), \", you can pass a list of them here. For example, Java and PHP are not included by default, so you should usually set this configuration. Setting it also prevents regressions due to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"prism-react-renderer\"), \" changing its defaults.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overrideDefaultConfigurationData\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", array of glob strings): allows to replace the configuration files in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data\"), \" instead of augmenting them. The option is passed to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ignore\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/packages/gatsby-source-filesystem/#options\"\n  }, \"option of the gatsby filesystem plugin\"), \". For example, by passing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"['**/top-*']\"), \" and placing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top-menu.yaml\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top-side-menu.yaml\"), \" files in the website's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/data\"), \" folder the top navigation can be overridden completely. If this option is used, the files matching the glob patterns \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"must\"), \" be provided.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"enableCanonicalUrls\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \"): indicates that the website should use canonical URLs, pointing to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \" domain. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"true\")))))), mdx(\"section\", {\n    \"id\": \"section-available-options-for-the-site-metadata\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"available-options-for-the-site-metadata\"\n  }, \"Available Options for the Site Metadata\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" (\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"required\"), \", string): Defines the title of the website.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"description\"), \" (\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"required\"), \", string): Defines the description of the website.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"beta\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", boolean): indicates that the website should be marked as \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"beta\"), \". Each page gets a beta flag, no matter if the page frontmatter has it defined or not. Furthermore, in the main navigation, the beta flag is shown near the website title and not next to each link. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"false\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"betaLink\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", string): Configures the link for \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"beta button\"), \".\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"excludeFromSearchIndex\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", boolean): indicates that the website should not be indexed by crawlers. This option sets the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"robots=\\\"noindex\\\"\"), \" meta attribute on all pages of the site. If true, the search box in the top navigation is not displayed. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Default: \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"true\")), \" Note that the on-site Algolia Docsearch is not respecting the instruction, it is purely based on click-trough reachability from the home page.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"globalNotification\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"optional\"), \", object): Activates a global banner at the top of every page within the website. It contains three configuration options:\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"active\"), \" (Boolean): flag to activate the global notification banner.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"notificationType\"), \" (String, must be either \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"info\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"warning\"), \") defines the type and color of the banner.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"content\"), \" (String) defines the text within the banner.\")), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"siteMetadata: {\\n  title: 'CHANGE TITLE',\\n  description: 'CHANGE DESCRIPTION',\\n  beta: false,\\n  betaLink: '',\\n  excludeFromSearchIndex: true,\\n  globalNotification: {\\n    active: true,\\n    notificationType: 'info',\\n    content:\\n      'This is a global notification. You can _write_ **markdown** here!',\\n  },\\n},\\n\"))))), mdx(\"section\", {\n    \"id\": \"section-site-path-prefix\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"site-path-prefix\"\n  }, \"Site path prefix\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All commercetools documentation websites are served under \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docs.commercetools.com\"), \". To make this work, all documentation websites must be bundled for production using a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \". This value determines the URL path where the website is served from.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For example, for the \\\"Custom Applications\\\" website, the path prefix is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/custom-applications\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pathPrefix\"), \" is configured in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" file.\")), mdx(\"section\", {\n    \"id\": \"section-usage-with-theme-add-ons\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"usage-with-theme-add-ons\"\n  }, \"Usage with Theme Add-Ons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If your website requires the usage of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/configuration/extensions#using-theme-with-add-ons\"\n  }, \"add-ons\"), \", you need to configure the main theme using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"configureThemeWithAddOns\"), \" helper function.\\nFor example, the ability to generate REST API documentation or code blocks from files are add-ons.\\nSee examples below.\"), 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');\\nconst colorPresets = require('@commercetools-docs/gatsby-theme-docs/color-presets');\\n\\nmodule.exports = {\\n  pathPrefix: '/change-path-prefix',\\n  siteMetadata: {\\n    title: 'CHANGE TITLE',\\n    description: 'CHANGE DESCRIPTION',\\n    betaLink: '',\\n  },\\n\\n  plugins: [\\n    // pass plugin options here\\n    ...configureThemeWithAddOns({\\n      // See available plugin options below\\n      websiteKey: 'change-website-key', // required\\n      colorPreset: colorPresets.base.key,\\n      additionalPrismLanguages: ['scala', 'csharp'],\\n\\n      // See https://github.com/commercetools/commercetools-docs-kit/tree/master/packages/gatsby-theme-docs#using-theme-with-add-ons\\n      addOns: [\\n        '@commercetools-docs/gatsby-theme-code-examples',\\n        '@commercetools-docs/gatsby-theme-constants',\\n      ],\\n    }),\\n  ],\\n};\\n\"))), mdx(\"section\", {\n    \"id\": \"section-additional-configuration-files\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"additional-configuration-files\"\n  }, \"Additional configuration files\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".eslintrc.yaml\"), \": in case you're using a monorepository, you need to provide this file with an empty object \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{}\"), \", otherwise provide a valid ESLint configuration.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"items":[{"title":"Available Options for the Theme","url":"#available-options-for-the-theme"},{"title":"Available Options for the Site Metadata","url":"#available-options-for-the-site-metadata"}]},{"title":"Site path prefix","url":"#site-path-prefix"},{"title":"Usage with Theme Add-Ons","url":"#usage-with-theme-add-ons"},{"title":"Additional configuration files","url":"#additional-configuration-files"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":2}},"pageContext":{"slug":"/configuration/theme","shortTitle":"Theme Configuration","hasReleaseNotes":false}},
    "staticQueryHashes": ["1145184116","2494036674","3295477089","3359654165","3845541775","636942989"]}