{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/configuration/packages",
    "result": {"data":{"contentPage":{"title":"Important Packages","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\": \"Important Packages\",\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-ui-components-library\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"ui-components-library\"\n  }, \"UI components library\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This package contains UI components for building commercetools documentation websites.\")), mdx(\"section\", {\n    \"id\": \"section-getting-started\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"getting-started\"\n  }, \"Getting started\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"To create a new documentation website you need to install this theme and its peer dependencies:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"npx install-peerdeps --dev @commercetools-docs/ui-kit\\n\"))), mdx(\"section\", {\n    \"id\": \"section-design-system\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"design-system\"\n  }, \"Design System\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The package includes a small design system that should be used for everything related to documentation websites.\\nIt exposes design tokens that derive from the original \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/commercetools/ui-kit\"\n  }, \"commercetools design system library\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { designSystem } from '@commercetools-docs/ui-kit';\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The exported \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"designSystem\"), \" object contains several top-level entries:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"colors\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"tokens\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dimensions\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"typography\")))), mdx(\"section\", {\n    \"id\": \"section-commercetools-writing-style-linter\",\n    \"className\": \"section-h3\"\n  }, mdx(\"h2\", {\n    parentName: \"section\",\n    \"id\": \"commercetools-writing-style-linter\"\n  }, \"commercetools Writing Style Linter\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This package provides\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"commercetools specific writing style and terminology rules for the configurable \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://docs.errata.ai/\"\n  }, \"vale\"), \" prose linter.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"commercetools-vale\"), \" command-line tool which wraps the vale binary and calls it using the included writing style and configuration\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"commercetools-vale-bin\"), \" command is directly calling the vale binary without passing the commercetools configuration. The \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".vale.ini\"), \" configuration location has to be passed separately via vale's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"--config\"), \" flag.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The base style is the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/errata-ai/Google\"\n  }, \"Google Developer Documentation Style Guide\"), \", which is included as a copy (MIT licensed, too) and modified and partially overridden with commercetools specific rules.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The configuration defaults to checking \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".md\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".mdx\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".txt\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".html\"), \" files, which can be overridden by calling it with a command-line parameter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"commercetools-vale --glob='*.{js,md}' ./path/to/content\"), \" passing a list of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.errata.ai/vale/scoping#formats\"\n  }, \"supported file format extensions\"), \".\")), mdx(\"section\", {\n    \"id\": \"section-automatic-vale-binary-download-for-the-current-platform\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"automatic-vale-binary-download-for-the-current-platform\"\n  }, \"Automatic vale binary download for the current platform\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This packages \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"postinstall\"), \" script automatically downloads the appropriate \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vale\"), \" binary upon installation. This ensures a small package size and no unnecessary binary files in it. Supported platforms are Mac OS (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"darwin\"), \"), Linux (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"linux\"), \"), and Windows (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"windows\"), \").\")), mdx(\"section\", {\n    \"id\": \"section-standalone-command-line-usage\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"standalone-command-line-usage\"\n  }, \"Standalone command-line usage\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Install the command globally via \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn global add @commercetools-docs/writing-style\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"npm install -g @commercetools-docs/writing-style\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Use it by calling \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"commercetools-vale ./path/to/your/content\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Please don't forget to frequently update the package to get the latest styles.\")), mdx(\"section\", {\n    \"id\": \"section-usage-in-the-vscode-vale-plugin\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-in-the-vscode-vale-plugin\"\n  }, \"Usage in the VSCode vale plugin\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://marketplace.visualstudio.com/items?itemName=errata-ai.vale-server\"\n  }, \"vale plugin\"), \" is always passing a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--config\"), \" parameter even if none is configured, so you have to separately configure the binary and the config location as follows, for example in a workspace configuration file:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"settings\\\": {\\n    \\\"vale.core.useCLI\\\": true,\\n    \\\"vale.valeCLI.path\\\": \\\"${workspaceFolder}/node_modules/.bin/commercetools-vale-bin\\\",\\n    \\\"vale.valeCLI.config\\\": \\\"${workspaceFolder}/node_modules/@commercetools-docs/writing-style/.vale.ini\\\"\\n  }\\n}\\n\"))), mdx(\"section\", {\n    \"id\": \"section-usage-as-a-packagejson-dependency\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"usage-as-a-packagejson-dependency\"\n  }, \"Usage as a \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"package.json\"), \" dependency\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Add the writing-style package as a development dependency: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn add --dev @commercetools-docs/writing-style\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In your project's folder, call it from the command\\nline via \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"npx commercetools-vale ./your/path/to/content\"), \" and optionally add vale command-line parameters as needed (for example \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"--no-wrap\"), \" on command-line jobs).\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Tip\"), \": Running it over your complete repository is not a good idea since it checks the complete node_modules folder which takes a long time and is not your content, so make sure to pass a relevant file selection\"))))), mdx(\"section\", {\n    \"id\": \"section-updating-the-google-styles\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"updating-the-google-styles\"\n  }, \"Updating the Google styles\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/errata-ai/Google\"\n  }, \"Google styles for vale\"), \" should not be changed in this repository as they are maintained by the Errata-AI team and pulled directly from their repository. To get the latest changes, run the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn download:google\"), \" command.\")), mdx(\"section\", {\n    \"id\": \"section-updating-the-vale-version\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"updating-the-vale-version\"\n  }, \"Updating the vale version\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Update the custom \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"valeVersion\"), \" property in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" and confirm that the artifact naming convention on vale's \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/errata-ai/vale/releases\"\n  }, \"GitHub releases page\"), \" has not changed.\")), mdx(\"section\", {\n    \"id\": \"section-contributing\",\n    \"className\": \"section-h4\"\n  }, mdx(\"h3\", {\n    parentName: \"section\",\n    \"id\": \"contributing\"\n  }, \"Contributing\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/commercetools/commercetools-docs-kit/blob/main/CONTRIBUTING.mdx\"\n  }, \"contributions\"), \", especially to enrich and complete the commercetools specific terminology and branding are welcome.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Please always provide content examples in the pull request to explain the rationale and typical use cases.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"UI components library","url":"#ui-components-library","items":[{"title":"Getting started","url":"#getting-started"},{"title":"Design System","url":"#design-system"}]},{"title":"commercetools Writing Style Linter","url":"#commercetools-writing-style-linter","items":[{"title":"Automatic vale binary download for the current platform","url":"#automatic-vale-binary-download-for-the-current-platform"},{"title":"Standalone command-line usage","url":"#standalone-command-line-usage"},{"title":"Usage in the VSCode vale plugin","url":"#usage-in-the-vscode-vale-plugin"},{"title":"Usage as a package.json dependency","url":"#usage-as-a-packagejson-dependency"},{"title":"Updating the Google styles","url":"#updating-the-google-styles"},{"title":"Updating the vale version","url":"#updating-the-vale-version"},{"title":"Contributing","url":"#contributing"}]}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":2}},"pageContext":{"slug":"/configuration/packages","shortTitle":"Packages","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}