{
    "componentChunkName": "component---src-components-page-template-jsx",
    "path": "/system/tools/nubook",
    "result": {"data":{"mdx":{"id":"58c802db-9490-5992-b168-7bc68641db74","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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  \"section\": \"System\",\n  \"chapter\": \"Tools\",\n  \"title\": \"NUbook\",\n  \"description\": \"The NUbots team handbook and documentation.\",\n  \"slug\": \"/system/tools/nubook\",\n  \"authors\": [\"Josephus Paye II (@JosephusPaye)\"]\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(\"p\", null, \"NUbook is the handbook and high-level documentation for the NUbots team. What you are looking at right now is NUbook! This page has information on how NUbook works.\"), mdx(\"h2\", {\n    \"id\": \"getting-started\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#getting-started\",\n    \"aria-label\": \"getting started permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Getting Started\"), mdx(\"h3\", {\n    \"id\": \"install-prerequisites\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#install-prerequisites\",\n    \"aria-label\": \"install prerequisites permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Install Prerequisites\"), mdx(\"p\", null, \"You'll need \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://git-scm.com/\"\n  }, \"Git\"), \", \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://nodejs.org/en/\"\n  }, \"Node.js\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://classic.yarnpkg.com/en/\"\n  }, \"Yarn\"), \" installed. See below for operating system specific instructions.\"), mdx(\"details\", null, mdx(\"summary\", null, \"Ubuntu\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install Git by running the following commands:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"sudo apt update\\nsudo apt install git\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install Node.js version 16 by following the instructions \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions\"\n  }, \"here\"), \" and running the commands under \\\"Node.js v16.x\\\".\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install the latest version of Yarn by following the instructions \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://classic.yarnpkg.com/en/docs/install#debian-stable\"\n  }, \"here\"), \".\")))), mdx(\"details\", null, mdx(\"summary\", null, \"Windows\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Download and install Git from \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://git-scm.com/download/win\"\n  }, \"https://git-scm.com/download/win\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Download and install Node.js from \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://nodejs.org/en/\"\n  }, \"https://nodejs.org/en/\"), \" (pick the LTS version)\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Download and install Yarn from \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://classic.yarnpkg.com/latest.msi\"\n  }, \"https://classic.yarnpkg.com/latest.msi\"))), mdx(\"p\", null, \"Commands in the next section can be run from the Git Bash terminal, which was downloaded in the first step.\")), mdx(\"details\", null, mdx(\"summary\", null, \"macOS\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install Homebrew by following the instructions at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://brew.sh/\"\n  }, \"https://brew.sh/\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install Git, Node.js and Yarn\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"brew upgrade\\nbrew install git node && brew install yarn\\n\"))))), mdx(\"h3\", {\n    \"id\": \"install-nubook\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#install-nubook\",\n    \"aria-label\": \"install nubook permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Install NUbook\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Navigate to the directory where you want to install NUbook\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"cd <path>\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Clone the NUbook repository and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cd\"), \" into the cloned directory\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git clone https://github.com/NUbots/NUbook.git\\ncd NUbook\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install dependencies\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Run the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/\"\n  }, \"Gatsby\"), \" development server\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn dev\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Preview the site by visiting \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:8000\"\n  }, \"localhost:8000\"), \" in a browser\"))), mdx(\"h2\", {\n    \"id\": \"contributing-content\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#contributing-content\",\n    \"aria-label\": \"contributing content permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Contributing Content\"), mdx(\"p\", null, \"All additions and edits are done through GitHub pull requests. To add or edit content\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Clone the repo, install dependencies, and run the development server as shown in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#getting-started\"\n  }, \"Getting Started\"), \" section above.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Create a new branch for your changes, in the format \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"your_surname/short_description_of_change\"), \". An example is below for someone with the surname 'paye'.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git checkout -b paye/add_2019_debrief\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Make your changes by adding or editing MDX files in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/book/\"), \". See below for how to write and organise pages.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Preview your changes by visiting \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:8000\"\n  }, \"localhost:8000\"), \" in a browser.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Commit and push your changes to GitHub.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Go to the repo on GitHub and create a pull request for your branch. Your pull request will be reviewed, merged, and deployed to the live site.\"))), mdx(\"p\", null, \"More information on using Git can be found on the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/guides/general/git\"\n  }, \"Git Guide\"), \".\"), mdx(\"p\", null, \"NUbook content should be accessible and inclusive. A guide on making content accessible and inclusive can be found on the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.stylemanual.gov.au/accessible-and-inclusive-content\"\n  }, \"Australian Government website\"), \".\"), mdx(\"h2\", {\n    \"id\": \"writing-markdown\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#writing-markdown\",\n    \"aria-label\": \"writing markdown permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Writing Markdown\"), mdx(\"p\", null, \"NUbook content is written using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mdxjs.com/\"\n  }, \"MDX\"), \", an extension of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://daringfireball.net/projects/markdown/\"\n  }, \"Markdown\"), \" with support for dynamic content via \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/introducing-jsx.html\"\n  }, \"JSX\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/\"\n  }, \"React\"), \" components. Markdown provides a minimal syntax for writing and styling text content.\"), mdx(\"p\", null, \"GitHub has \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://guides.github.com/features/mastering-markdown/\"\n  }, \"a good guide\"), \" for getting started with Markdown. There's also \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/playlist?list=PLu8EoSxDXHP7v7K5nZSMo9XWidbJ_Bns3\"\n  }, \"a short video series\"), \" on using Markdown.\"), mdx(\"p\", null, \"NUbook has a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/kitchen-sink/headers\"\n  }, \"kitchen sink\"), \" demonstrating the various functionalities avaliable to use when writing NUbook pages.\"), mdx(\"h3\", {\n    \"id\": \"images\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#images\",\n    \"aria-label\": \"images permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Images\"), mdx(\"p\", null, \"To add images to a NUbook page\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Add the image file in an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"images\"), \" folder in the same directory as the file being edited\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Reference the image in Markdown:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"![Image description for search engines and screen readers](./images/image.png 'Image caption')\\n\")))), mdx(\"p\", null, \"The image caption will be displayed below the image and is an optional component.\"), mdx(\"p\", null, \"The image description should present the content and function of the image. Find guides on writing good alternative text at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://webaim.org/techniques/alttext/\"\n  }, \"WebAIM\"), \".\"), mdx(\"h3\", {\n    \"id\": \"syntax-highlighted-code-blocks\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#syntax-highlighted-code-blocks\",\n    \"aria-label\": \"syntax highlighted code blocks permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Syntax-Highlighted Code Blocks\"), mdx(\"p\", null, \"Use triple backticks \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"```\"), \" on separate lines to open and close code blocks. Specify the language with a file extension after the opening backticks for syntax highlighting.\"), mdx(\"p\", null, \"Example C++ code block:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"```cpp\\n#include <iostream>\\n\\nint main() {\\n    std::cout << \\\"Hello, World!\\\";\\n    return 0;\\n}\\n```\\n\")), mdx(\"h3\", {\n    \"id\": \"maths-symbols-and-equations\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#maths-symbols-and-equations\",\n    \"aria-label\": \"maths symbols and equations permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Maths Symbols and Equations\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"For inline math, wrap TeX-formatted content with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$\"), \":\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"The equation is $c^2 = a^2 + b^2$.\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"For math blocks, wrap with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$$\"), \" on separate lines:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"$$\\ne^{i\\\\phi} = \\\\cos(\\\\phi) + i\\\\sin(\\\\phi)\\n$$\\n\")))), mdx(\"p\", null, \"NUbook uses \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://katex.org/\"\n  }, \"KaTeX\"), \" to render math. See \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://katex.org/docs/support_table.html\"\n  }, \"the KaTeX support table\"), \" for supported symbols and functions.\"), mdx(\"h3\", {\n    \"id\": \"graphviz-graphs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#graphviz-graphs\",\n    \"aria-label\": \"graphviz graphs permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Graphviz graphs\"), mdx(\"p\", null, \"NUbook includes \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://graphviz.org/\"\n  }, \"Graphviz\"), \", which you can use to draw graphs by writing specially-formatted code blocks in Markdown.\"), mdx(\"p\", null, \"To create a graph, use triple backticks \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"```\"), \" on separate lines to open and close the graph, then specify the Graphviz layout algorithm after the opening backticks, followed by the source code for the graph.\"), mdx(\"p\", null, \"For example, the following code block in Markdown creates a directed graph with three connected nodes using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \" layout algorithm.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"```dot\\ndigraph {\\n  A -> B -> C\\n}\\n```\\n\")), mdx(\"p\", null, \"When rendered in NUbook, it produces the following graph:\"), mdx(\"figure\", {\n    \"className\": \"remark-graphviz-figure\"\n  }, mdx(\"div\", {\n    parentName: \"figure\",\n    \"className\": \"remark-graphviz-graph\"\n  }, mdx(\"svg\", {\n    parentName: \"div\",\n    \"role\": \"img\",\n    \"aria-label\": \"SVG diagram of a graph generated from DOT notation: digraph {\\r  A -> B -> C\\r}\",\n    \"width\": \"62pt\",\n    \"height\": \"188pt\",\n    \"viewBox\": \"0 0 62 188\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }, mdx(\"title\", {\n    parentName: \"svg\"\n  }, \"SVG diagram of a graph generated from DOT notation\"), mdx(\"desc\", {\n    parentName: \"svg\"\n  }, \"digraph {\\n  A -> B -> C\\n}\"), mdx(\"g\", {\n    parentName: \"svg\",\n    \"className\": \"graph\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"#fff\",\n    \"stroke\": \"transparent\",\n    \"d\": \"M0 188V0h62v188H0z\"\n  }), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 184)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"27\",\n    \"cy\": \"-162\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"27\",\n    \"y\": \"-157.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"A\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 184)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"27\",\n    \"cy\": \"-90\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"27\",\n    \"y\": \"-85.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"B\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"edge\",\n    \"transform\": \"translate(4 184)\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"d\": \"M27-143.7v25.59\"\n  }), mdx(\"path\", {\n    parentName: \"g\",\n    \"stroke\": \"#000\",\n    \"d\": \"M30.5-118.1l-3.5 10-3.5-10h7z\"\n  })), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 184)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"27\",\n    \"cy\": \"-18\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"27\",\n    \"y\": \"-13.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"C\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"edge\",\n    \"transform\": \"translate(4 184)\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"d\": \"M27-71.7v25.59\"\n  }), mdx(\"path\", {\n    parentName: \"g\",\n    \"stroke\": \"#000\",\n    \"d\": \"M30.5-46.1l-3.5 10-3.5-10h7z\"\n  })))))), mdx(\"p\", null, \"The available layouts you can use are:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"circo\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dot\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fdp\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"neato\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"osage\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"patchwork\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"twopi\"))), mdx(\"p\", null, \"You can view examples of each of these layouts in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/kitchen-sink/graphviz-diagrams\"\n  }, \"kitchen sink\"), \".\"), mdx(\"h4\", {\n    \"id\": \"graph-captions-and-alternative-text\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#graph-captions-and-alternative-text\",\n    \"aria-label\": \"graph captions and alternative text permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Graph Captions and Alternative Text\"), mdx(\"p\", null, \"Just like with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#images\"\n  }, \"images\"), \", you can add captions and alternative text to describe graphs. You do so by using comments in the graph source. The first line of comment at the start of the graph will be used as the caption, and subsequent lines of comment will be used as alternative text.\"), mdx(\"p\", null, \"For example, the following source:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"```circo\\n# The connections between modules A, B, and C\\n# A directed graph showing node A connected to node B, which is connected to node C\\ndigraph {\\n  A -> B -> C\\n}\\n```\\n\")), mdx(\"p\", null, \"Produces the following graph with the appropriate caption and alternative text:\"), mdx(\"figure\", {\n    \"className\": \"remark-graphviz-figure\"\n  }, mdx(\"div\", {\n    parentName: \"figure\",\n    \"className\": \"remark-graphviz-graph\"\n  }, mdx(\"svg\", {\n    parentName: \"div\",\n    \"role\": \"img\",\n    \"aria-label\": \"A directed graph showing node A connected to node B, which is connected to node C\",\n    \"width\": \"314pt\",\n    \"height\": \"44pt\",\n    \"viewBox\": \"0 0 314 44\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }, mdx(\"title\", {\n    parentName: \"svg\"\n  }, \"A directed graph showing node A connected to node B, which is connected to node C\"), mdx(\"desc\", {\n    parentName: \"svg\"\n  }, \"digraph {\\n  A -> B -> C\\n}\"), mdx(\"g\", {\n    parentName: \"svg\",\n    \"className\": \"graph\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"#fff\",\n    \"stroke\": \"transparent\",\n    \"d\": \"M0 44V0h314v44H0z\"\n  }), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 40)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"27\",\n    \"cy\": \"-18\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"27\",\n    \"y\": \"-13.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"A\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 40)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"153\",\n    \"cy\": \"-18\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"153\",\n    \"y\": \"-13.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"B\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"edge\",\n    \"transform\": \"translate(4 40)\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"d\": \"M54.03-18h61.35\"\n  }), mdx(\"path\", {\n    parentName: \"g\",\n    \"stroke\": \"#000\",\n    \"d\": \"M115.58-21.5l10 3.5-10 3.5v-7z\"\n  })), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"node\",\n    \"transform\": \"translate(4 40)\"\n  }, mdx(\"ellipse\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"cx\": \"279\",\n    \"cy\": \"-18\",\n    \"rx\": \"27\",\n    \"ry\": \"18\"\n  }), mdx(\"text\", {\n    parentName: \"g\",\n    \"textAnchor\": \"middle\",\n    \"x\": \"279\",\n    \"y\": \"-13.8\",\n    \"fontFamily\": \"Times,serif\",\n    \"fontSize\": \"14\"\n  }, \"C\")), mdx(\"g\", {\n    parentName: \"g\",\n    \"className\": \"edge\",\n    \"transform\": \"translate(4 40)\"\n  }, mdx(\"path\", {\n    parentName: \"g\",\n    \"fill\": \"none\",\n    \"stroke\": \"#000\",\n    \"d\": \"M180.03-18h61.35\"\n  }), mdx(\"path\", {\n    parentName: \"g\",\n    \"stroke\": \"#000\",\n    \"d\": \"M241.58-21.5l10 3.5-10 3.5v-7z\"\n  }))))), mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"remark-graphviz-figcaption\"\n  }, \"The connections between modules A, B, and C\")), mdx(\"h4\", {\n    \"id\": \"learning-graphviz\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#learning-graphviz\",\n    \"aria-label\": \"learning graphviz permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Learning Graphviz\"), mdx(\"p\", null, \"Here are some resources for learning how to draw graphs with Graphviz:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://graphs.grevian.org/\"\n  }, \"Graphviz Pocket Reference\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.tonyballantyne.com/graphs.html\"\n  }, \"Drawing Graphs using Dot and Graphviz\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/caseywatts/graphviz-tutorial\"\n  }, \"Graphviz Tutorial\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.graphviz.org/pdf/dotguide.pdf\"\n  }, \"Drawing graphs with dot\"))), mdx(\"h3\", {\n    \"id\": \"content-in-grids\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#content-in-grids\",\n    \"aria-label\": \"content in grids permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Content in Grids\"), mdx(\"p\", null, \"You can show content such as images, code, and math equations side-by-side in a grid.\"), mdx(\"p\", null, \"The following example shows four images in a 2x2 grid with large spacing between items and a caption:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Grid columns='1fr 1fr' rows=\\\"1fr 1fr\\\" gap=\\\"large\\\" caption=\\\"Some lovely pets\\\">\\n\\n![Bird](./images/unsplashed_bird.jpg 'Bird')\\n![Cat](./images/unsplashed_cat.jpg 'Cat')\\n![Dog](./images/unsplashed_dog.jpg 'Dog')\\n![Turtle](./unsplashed_turtle.jpg 'Turtle')\\n\\n</Grid>\\n\")), mdx(\"p\", null, \"The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\"\n  }, \"columns\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\"\n  }, \"rows\"), \" are specified using CSS grid syntax. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fr\"), \" is a fractional unit that specifies a fraction of the total available space (width for columns, and height for rows). \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"columns='1fr 1fr'\"), \" creates two columns of equal width, while \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rows='1fr 1fr'\"), \" creates two rows of equal height.\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap\"), \" property sets the spacing between items in the grid, and can be one of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"none\"), \" (no gap), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \" (the default), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \", or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-large\"), \".\"), mdx(\"h3\", {\n    \"id\": \"images-in-tabs\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#images-in-tabs\",\n    \"aria-label\": \"images in tabs permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Images in Tabs\"), mdx(\"p\", null, \"You can show multiple images in the same place by putting them in tabs. The caption of each image is used for its tab button label.\"), mdx(\"p\", null, \"The following example shows four images in tabs:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<TabbedImages>\\n\\n![Bird](./images/unsplashed_bird.jpg 'Bird')\\n![Cat](./images/unsplashed_cat.jpg 'Cat')\\n![Dog](./images/unsplashed_dog.jpg 'Dog')\\n![Turtle](./unsplashed_turtle.jpg 'Turtle')\\n\\n</TabbedImages>\\n\")), mdx(\"h3\", {\n    \"id\": \"alerts-and-warnings\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#alerts-and-warnings\",\n    \"aria-label\": \"alerts and warnings permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Alerts and Warnings\"), mdx(\"p\", null, \"You can show an informational alert using:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Alert>\\n\\nDid you know you can lorem ipsum dolor sit amet, consectetur adipisicing elit.\\nAutem quo deserunt amet suscipit, fuga ullam cumque accusamus doloremque rem\\nqui?\\n\\n</Alert>\\n\")), mdx(\"p\", null, \"You can also show a warning using:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"<Alert type='warning'>\\n\\nBe careful not to lorem ipsum dolor sit amet, consectetur adipisicing elit.\\nAutem quo deserunt amet suscipit, fuga ullam cumque accusamus doloremque rem\\nqui.\\n\\n</Alert>\\n\")), mdx(\"h2\", {\n    \"id\": \"bibtex-referencing\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#bibtex-referencing\",\n    \"aria-label\": \"bibtex referencing permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Bibtex Referencing\"), mdx(\"p\", null, \"NUbook supports Bibtex referencing in Markdown. You can use it as follows.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"First, add the Bibtex file containing your references to the same folder that contains the MDX file you're editing. Give the Bibtex file the same name as the MDX file, but with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".bib\"), \" extension. For example, if you're editing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"01-introduction.mdx\"), \", the Bibtex file should be \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"01-introduction.bib\"), \".\"), mdx(\"details\", null, mdx(\"summary\", null, \"If you need to reference a Bibtex file from multiple MDX files\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"references\"), \" key at the top of the MDX file to override the default Bibtex file path.\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-yaml\"\n  }, \"---\\ntitle: My page\\n# ... other data\\nreferences: ./shared-references.bib # Relative path to the shared references file\\n---\\n\")))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"In the Markdown file, add in-text citations using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<cite>\"), \" tags. For example, if there's a citation in the Bibtex file with id \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"smith2018\"), \", you can reference it in the Markdown file like so:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Fuga ullam cumque accusamus doloremque rem <cite>smith2019</cite>.\\n\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"This will add an inline citation with an auto generated citation number, linked to the full citation reference in the list of references.\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"You can add multiple in-text citations in the same place by including multiple comma-separated ids in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<cite>\"), \" tag. For example, if there's a citation in the Bibtex file with id \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"smith2018\"), \" and a citation with id \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"brown2005\"), \", you can reference both as follows:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"Fuga ullam cumque accusamus doloremque rem <cite>smith2019,brown2005</cite>.\\n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"After adding your in-text citations, create a new section at the bottom of the MDX page to show the list of references:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"## References\\n\\n<References />\\n\")))), mdx(\"p\", null, \"See the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/kitchen-sink/referencing\"\n  }, \"Referencing kitchen sink\"), \" for an example of referencing.\"), mdx(\"h2\", {\n    \"id\": \"organising-pages\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#organising-pages\",\n    \"aria-label\": \"organising pages permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Organising Pages\"), mdx(\"p\", null, \"Pages are written in MDX files and stored in section and chapter folders in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/book/\"), \" directory, and organised as follows:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Each page's filename is numbered to create the order that will be used for menus and the previous/next page navigation links.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Each page has \\\"frontmatter\\\" at the top of the file specifying details such as title and description:\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"---\\nsection: The NUbots Team\\nchapter: Introduction\\ntitle: Introduction to NUbots\\ndescription: Learn about what we do, key people, and where to find the lab.\\nslug: /team/introduction\\nauthors:\\n  - Josephus Paye II (@JosephusPaye)\\n  - Ysobel Sims (@ysims)\\n  - Lachlan Court (@LachlanCourt)\\n---\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The frontmatter is written in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://gettaurus.org/docs/YAMLTutorial/\"\n  }, \"YAML\"), \", with the following supported fields:\"), mdx(\"table\", {\n    parentName: \"li\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Field\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Presence\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"section\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The section the page will appear under in the sidebar menu (case sensitive)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"chapter\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The chapter the page will appear under in the sidebar menu (case sensitive)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"title\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The page title\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"description\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A short, one-sentence description of the page content\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"slug\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The page URL relative to the root of the site, starting with \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"/\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"authors\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"List\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A list of authors of the page, in the format \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Name (@GitHubUsername)\"), \", or just \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Name\"), \". Authors without a username will have the NUbots icon as a default avatar, without a link to GitHub.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"references\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Optional\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Relative path to a \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \".bib\"), \" file with references for use on the page. Defaults to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[mdx-file-name].bib\"), \" if a matching Bibtex file with the same name as the MDX file is available.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"keywords\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"List\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Optional\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Keywords for the page content, used for SEO\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hidden\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Optional\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\"), \", removes the page from menus and disables search indexing\")))))), mdx(\"h2\", {\n    \"id\": \"formatting-code\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#formatting-code\",\n    \"aria-label\": \"formatting code permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Formatting Code\"), mdx(\"p\", null, \"All code in NUbook (including Markdown) is formatted using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://prettier.io/\"\n  }, \"Prettier\"), \" for a consistent style.\"), mdx(\"p\", null, \"This style will be checked automatically when you push code to the repo. If there are any issues, the push will be aborted with an error message listing the files that have issues.\"), mdx(\"p\", null, \"If you need to, you can:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"check formatting by running \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn format:check\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"automatically fix formatting issues by running \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn format\"), \".\")), mdx(\"h2\", {\n    \"id\": \"deploys-and-pr-reviews\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#deploys-and-pr-reviews\",\n    \"aria-label\": \"deploys and pr reviews permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Deploys and PR Reviews\"), mdx(\"p\", null, \"Pull requests are automatically deployed as previews using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://netlify.com/\"\n  }, \"Netlify\"), \", which will run code quality checks and report failures before a deploy.\"), mdx(\"p\", null, \"The preview URL is of the form \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"https://deploy-preview-[PR number]--nubook.netlify.com/\"), \" where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[PR number]\"), \" is the pull request number. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"https://deploy-preview-21--nubook.netlify.com/\"), \" is the preview URL for pull request number 21.\"), mdx(\"p\", null, \"You can get this URL from the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Details\"), \" link of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"netlify/nubook/deploy-preview\"), \" check at the bottom of the PR page:\"), mdx(\"img\", {\n    \"src\": \"/opt/build/repo/src/book/02-system/03-tools/images/deploy-previews.png\",\n    \"alt\": \"Screenshot of deploy previews link\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"We recommend that you add this URL to your pull request description after the first deploy.\"), \" This makes it easier for reviewers to see your changes rendered without having to clone and build the PR locally.\"), mdx(\"p\", null, \"When a pull request is merged into main, it is automatically deployed to the main site.\"), mdx(\"h2\", {\n    \"id\": \"building-for-production\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#building-for-production\",\n    \"aria-label\": \"building for production permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Building for production\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn build\"), \" command is used to build the site into a set of static HTML, CSS, and JS files that can be deployed to any webserver. This command is run automatically by Netlify when a change is merged into \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main\"), \".\"), mdx(\"p\", null, \"Running \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn build\"), \" locally can be useful to preview the site exactly as it will be in production, or to debug an issue that occurs only in production. To use it:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Run \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn build\"), \" to build the site and optimise assets. The resulting output will be placed in \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"public/\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Run \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"npx http-server public/\"), \" to start a simple webserver in the public folder. This will print a URL you can open in your browser to preview the built site.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#getting-started","title":"Getting Started","items":[{"url":"#install-prerequisites","title":"Install Prerequisites"},{"url":"#install-nubook","title":"Install NUbook"}]},{"url":"#contributing-content","title":"Contributing Content"},{"url":"#writing-markdown","title":"Writing Markdown","items":[{"url":"#images","title":"Images"},{"url":"#syntax-highlighted-code-blocks","title":"Syntax-Highlighted Code Blocks"},{"url":"#maths-symbols-and-equations","title":"Maths Symbols and Equations"},{"url":"#graphviz-graphs","title":"Graphviz graphs"},{"url":"#content-in-grids","title":"Content in Grids"},{"url":"#images-in-tabs","title":"Images in Tabs"},{"url":"#alerts-and-warnings","title":"Alerts and Warnings"}]},{"url":"#bibtex-referencing","title":"Bibtex Referencing"},{"url":"#organising-pages","title":"Organising Pages"},{"url":"#formatting-code","title":"Formatting Code"},{"url":"#deploys-and-pr-reviews","title":"Deploys and PR Reviews"},{"url":"#building-for-production","title":"Building for production"}]},"frontmatter":{"section":"System","chapter":"Tools","title":"NUbook","description":"The NUbots team handbook and documentation.","keywords":null,"slug":"/system/tools/nubook","hidden":null},"childNUbookContributions":{"authors":[{"name":"Josephus Paye II","username":"JosephusPaye"}],"lastCommit":{"date":"2024-10-06T00:43:48.000Z","hash":"092ed4d086a639f36881702b6d6790285d813e52"}}}},"pageContext":{"mdxPath":"src/book/02-system/03-tools/02-nubook.mdx","id":"58c802db-9490-5992-b168-7bc68641db74","next":{"chapter":"Tools","title":"NUpbr","description":"A physically-based rendering pipeline for generating realistic semi-synthetic data.","slug":"/system/tools/nupbr","hidden":null},"previous":{"chapter":"Tools","title":"NUsight","description":"NUsight and how to setup your environment to run it.","slug":"/system/tools/nusight","hidden":null},"menu":[{"title":"Team","slug":"/team/introduction","chapters":[{"title":"Introduction","slug":"/team/introduction","pages":[{"title":"Introduction to NUbots","slug":"/team/introduction","hidden":null},{"title":"Areas of Research","slug":"/team/areas-of-research","hidden":null},{"title":"Current Team","slug":"/team/current-members","hidden":null}],"hidden":false},{"title":"Joining the Team","slug":"/team/how-we-work","pages":[{"title":"How We Work","slug":"/team/how-we-work","hidden":null},{"title":"How to Join NUbots","slug":"/team/how-to-join","hidden":null},{"title":"Lab Induction","slug":"/team/induction","hidden":null}],"hidden":false},{"title":"Community","slug":"/team/sponsors","pages":[{"title":"Sponsors","slug":"/team/sponsors","hidden":null},{"title":"Connect","slug":"/team/connect","hidden":null}],"hidden":false},{"title":"History","slug":"/team/history","pages":[{"title":"Team History","slug":"/team/history","hidden":null},{"title":"Past Members","slug":"/team/past-members","hidden":null},{"title":"Publications","slug":"/team/publications","hidden":null}],"hidden":false},{"title":"RoboCup","slug":"/team/robocup","pages":[{"title":"RoboCup","slug":"/team/robocup","hidden":null},{"title":"Resources","slug":"/team/robocup/resources","hidden":null},{"title":"Debriefs","slug":"/team/robocup/debriefs","hidden":null}],"hidden":false}],"hidden":false},{"title":"System","slug":"/system/foundations/overview","chapters":[{"title":"Foundations","slug":"/system/foundations/overview","pages":[{"title":"Overview","slug":"/system/foundations/overview","hidden":null},{"title":"Build System","slug":"/system/foundations/build-system","hidden":null},{"title":"Continuous Integration","slug":"/system/foundations/ci-system","hidden":null},{"title":"NUClear","slug":"/system/foundations/nuclear","hidden":null},{"title":"Mathematics","slug":"/system/foundations/mathematics","hidden":null},{"title":"Configuration and Script System","slug":"/system/foundations/config-script","hidden":null},{"title":"Director","slug":"/system/foundations/director","hidden":null}],"hidden":false},{"title":"Subsystems","slug":"/system/subsystems/input","pages":[{"title":"Input","slug":"/system/subsystems/input","hidden":null},{"title":"Odometry","slug":"/system/subsystems/odometry","hidden":null},{"title":"Localisation","slug":"/system/subsystems/localisation","hidden":null},{"title":"Motion","slug":"/system/subsystems/motion","hidden":null},{"title":"Vision","slug":"/system/subsystems/vision","hidden":null},{"title":"Behaviour","slug":"/system/subsystems/behaviour","hidden":null},{"title":"Logging","slug":"/system/subsystems/logging","hidden":null}],"hidden":false},{"title":"Tools","slug":"/system/tools/nusight","pages":[{"title":"NUsight","slug":"/system/tools/nusight","hidden":null},{"title":"NUbook","slug":"/system/tools/nubook","hidden":null},{"title":"NUpbr","slug":"/system/tools/nupbr","hidden":null},{"title":"NUgan","slug":"/system/tools/nugan","hidden":null},{"title":"System Configuration","slug":"/system/tools/system_configuration","hidden":null},{"title":"NatNet SDK","slug":"/system/tools/natnet_sdk","hidden":null}],"hidden":false},{"title":"Hardware","slug":"/system/hardware/overview","pages":[{"title":"Overview and Specifications","slug":"/system/hardware/overview","hidden":null}],"hidden":false},{"title":"Modules","slug":"/system/modules/actuation/","pages":[{"title":"Actuation","slug":"/system/modules/actuation/","hidden":null},{"title":"Extension","slug":"/system/modules/extension/","hidden":null},{"title":"Input","slug":"/system/modules/input/","hidden":null},{"title":"Localisation","slug":"/system/modules/localisation/","hidden":null},{"title":"Nbs","slug":"/system/modules/nbs/","hidden":null},{"title":"Network","slug":"/system/modules/network/","hidden":null},{"title":"Output","slug":"/system/modules/output/","hidden":null},{"title":"Planning","slug":"/system/modules/planning/","hidden":null},{"title":"Platform","slug":"/system/modules/platform/","hidden":null},{"title":"Purpose","slug":"/system/modules/purpose/","hidden":null},{"title":"Skill","slug":"/system/modules/skill/","hidden":null},{"title":"Strategy","slug":"/system/modules/strategy/","hidden":null},{"title":"Support","slug":"/system/modules/support/","hidden":null},{"title":"Tools","slug":"/system/modules/tools/","hidden":null},{"title":"Vision","slug":"/system/modules/vision/","hidden":null}],"hidden":false}],"hidden":false},{"title":"Guides","slug":"/guides/main/getting-started","chapters":[{"title":"Main Codebase","slug":"/guides/main/getting-started","pages":[{"title":"Getting Started","slug":"/guides/main/getting-started","hidden":null},{"title":"NUClear","slug":"/guides/main/nuclear-tutorial","hidden":null},{"title":"Running and Tuning Scripts","slug":"/guides/main/tuning-and-running-scripts","hidden":null},{"title":"Maintaining Subsystems","slug":"/guides/main/maintaining-subsystems","hidden":null},{"title":"Data Recording and Playback","slug":"/guides/main/data-recording-playback","hidden":null},{"title":"Camera Calibration","slug":"/guides/main/camera-calibration","hidden":null},{"title":"Onboarding Workshop","slug":"/guides/main/onboarding","hidden":null}],"hidden":false},{"title":"Tools","slug":"/guides/tools/nusight-contribution","pages":[{"title":"Contributing to NUsight","slug":"/guides/tools/nusight-contribution","hidden":null},{"title":"Setting Up Webots","slug":"/guides/tools/webots-setup","hidden":null},{"title":"Visual Mesh Getting Started","slug":"/guides/tools/visualmesh","hidden":null},{"title":"Using NUpbr","slug":"/guides/tools/nupbr-guide","hidden":null},{"title":"GameController Setup","slug":"/guides/tools/gamecontroller","hidden":null}],"hidden":false},{"title":"Hardware","slug":"/guides/hardware/working-with-robots","pages":[{"title":"Working with Robots","slug":"/guides/hardware/working-with-robots","hidden":null},{"title":"Flashing a Robot","slug":"/guides/hardware/flashing","hidden":null},{"title":"Servo Setup and Calibration","slug":"/guides/hardware/servo-calibration","hidden":null},{"title":"Batteries","slug":"/guides/hardware/batteries","hidden":null},{"title":"DARwIn Op2 Robot Restoration and Calibration Guide","slug":"/guides/hardware/darwin-op2-guide","hidden":null}],"hidden":false},{"title":"General","slug":"/guides/general/learning-resources","pages":[{"title":"Learning Resources","slug":"/guides/general/learning-resources","hidden":null},{"title":"Contribution Workflow","slug":"/guides/general/contribute","hidden":null},{"title":"RoboCup Setup","slug":"/guides/general/robocup-setup","hidden":null},{"title":"Troubleshooting","slug":"/guides/general/troubleshooting","hidden":null},{"title":"Code Conventions","slug":"/guides/general/code-conventions","hidden":null},{"title":"Glossary","slug":"/guides/general/glossary","hidden":null}],"hidden":false}],"hidden":false},{"title":"Kitchen Sink","slug":"/kitchen-sink/headers","chapters":[{"title":"Markdown","slug":"/kitchen-sink/headers","pages":[{"title":"Headers","slug":"/kitchen-sink/headers","hidden":true},{"title":"Formatting and Paragraphs","slug":"/kitchen-sink/formatting-and-paragraphs","hidden":true},{"title":"Blockquotes","slug":"/kitchen-sink/blockquotes","hidden":true},{"title":"Alerts","slug":"/kitchen-sink/alerts","hidden":true},{"title":"Images","slug":"/kitchen-sink/images","hidden":true},{"title":"Lists","slug":"/kitchen-sink/lists","hidden":true},{"title":"Code","slug":"/kitchen-sink/code","hidden":true},{"title":"Math","slug":"/kitchen-sink/math","hidden":true},{"title":"Table of Contents","slug":"/kitchen-sink/table-of-contents","hidden":true},{"title":"Tables","slug":"/kitchen-sink/tables","hidden":true},{"title":"Collapsible Content","slug":"/kitchen-sink/collapsible","hidden":true},{"title":"GraphViz Diagrams","slug":"/kitchen-sink/graphviz-diagrams","hidden":true},{"title":"Referencing","slug":"/kitchen-sink/referencing","hidden":true}],"hidden":true}],"hidden":true}],"references":null,"hidden":null}},
    "staticQueryHashes": ["3715292327","445096115","466146812"]}