{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/writing/images",
    "result": {"data":{"contentPage":{"title":"Images and Diagrams","websitePrimaryColor":"#003037","beta":false,"excludeFromSearchIndex":false,"allowWideContentLayout":true,"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\": \"Images and Diagrams\",\n  \"wideLayout\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar SideBySide = makeShortcode(\"SideBySide\");\nvar Mermaid = makeShortcode(\"Mermaid\");\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-images\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"images\"\n  }, \"Images\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"All image files must be placed in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/src/images\"), \" in full original resolution and quality. Multiple compressed and lower resolution files are generated automatically when building the website.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You use \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://commonmark.org/help/tutorial/08-images.html\"\n  }, \"standard markdown syntax\"), \" to insert images into content pages.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is good to have a meaningful alt text when using images. A meaningful alt text is useful for visually impaired users using softwares to read text on a page.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"You can add a caption to images by following the Markdown syntax for titles.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Images with a transparent background (PNG) are rendered on white background. It's OK to leave transparent background\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SVG images are not optimized or scaled, but would still be rendered. They need to be placed into \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"/src/files/\"), \" for unprocessed delivery.\")), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-markdown\"\n  }, \"Full example with alt text title:\\n\\n![a large dog](/images/dog.jpg 'This dog serves as an example image and this is the title text')\\n\\nFull SVG example:\\n\\n![illustation of a shoppin cart](/content/files/cart.svs 'We love illustrated shopping carts')\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"754px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/documentation/static/0bed0ccf3274928a7e2040d70ba411f1/4b190/dog.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.57824933687002%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwAC/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAB/9oADAMBAAIQAxAAAAHOHIFJa3//xAAZEAEBAQEBAQAAAAAAAAAAAAACAQMAEiH/2gAIAQEAAQUC2+GamdZHynoLM+c1Qf/EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AaW//8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/ARLb/8QAGRABAQEAAwAAAAAAAAAAAAAAEQABEiFB/9oACAEBAAY/Ansb2RuMGZGX/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERMSFB/9oACAEBAAE/Ia2oHFesIisj9LrPjGVTs1aV7y0//9oADAMBAAIAAwAAABDk7//EABcRAAMBAAAAAAAAAAAAAAAAAAARMVH/2gAIAQMBAT8QSiYf/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAECAQE/EINQ/8QAHBABAAICAwEAAAAAAAAAAAAAAQARIUExYaGx/9oACAEBAAE/EBVAgaMI7vyFK5iicSkYMAuWqHnuVFQNX1CRhquhea6n/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"a large dog\",\n    \"title\": \"This dog serves as an example image and this is the title text\",\n    \"src\": \"/documentation/static/0bed0ccf3274928a7e2040d70ba411f1/cbfa4/dog.jpg\",\n    \"srcSet\": [\"/documentation/static/0bed0ccf3274928a7e2040d70ba411f1/cbfa4/dog.jpg 754w\", \"/documentation/static/0bed0ccf3274928a7e2040d70ba411f1/4b190/dog.jpg 800w\"],\n    \"sizes\": \"(max-width: 754px) 100vw, 754px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"auto\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"This dog serves as an example image and this is the title text\"), \"\\n  \"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Unless not otherwise possible, avoid:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"images on external servers (not optimized, can disappear)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"images of small sizes or large heights\"))), mdx(\"section\", {\n    \"id\": \"section-mermaid-diagrams\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"mermaid-diagrams\"\n  }, \"Mermaid Diagrams\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It's possible to create diagrams using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mermaid-js.github.io/mermaid/#/\"\n  }, \"mermaid syntax\"), \" directly in the MDX files. For example, it's possible to create sequence diagrams, flowcharts, class diagrams, ER diagrams, state diagrams and others.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"To author, either use \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mermaid.live\"\n  }, \"mermaid.live\"), \" or install the mermaid VSCode plugin to get syntax support while writing.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avoid custom CSS or theme overrides for better maintainability of the content.\"), mdx(SideBySide, {\n    mdxType: \"SideBySide\"\n  }, mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-markdown\"\n  }, \"```mermaid\\nsequenceDiagram\\n    Alice->John: Hello John, how are you?\\n    loop Every minute\\n        John-->Alice: Great!\\n    end\\n```\\n\")), mdx(Mermaid, {\n    graph: \"sequenceDiagram\\n    Alice->John: Hello John, how are you?\\n    loop Every minute\\n        John-->Alice: Great!\\n    end\",\n    mdxType: \"Mermaid\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Images","url":"#images"},{"title":"Mermaid Diagrams","url":"#mermaid-diagrams"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":1}},"pageContext":{"slug":"/writing/images","shortTitle":"Images and Diagrams","hasReleaseNotes":false}},
    "staticQueryHashes": ["1145184116","2494036674","3295477089","3359654165","3845541775","636942989"]}