{"componentChunkName":"component---src-templates-post-js","path":"/blog/projects/openapi-for-docusaurus/","result":{"data":{"header":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHjiagKm0wchP/EABwQAAMAAQUAAAAAAAAAAAAAAAECAwAQEhMxQf/aAAgBAQABBQKKclKrtbJsFNCug68z/8QAFREBAQAAAAAAAAAAAAAAAAAAIEH/2gAIAQMBAT8Bg//EABURAQEAAAAAAAAAAAAAAAAAACBB/9oACAECAQE/AaP/xAAcEAACAgIDAAAAAAAAAAAAAAABEQACECEgMWH/2gAIAQEABj8CFeomCPMbq5qq4//EABsQAQABBQEAAAAAAAAAAAAAAAEAEBEhMUFR/9oACAEBAAE/IcuA6sv44DQgdOMbXvc0Gk9U/9oADAMBAAIAAwAAABDb537/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxACCf/EABYRAAMAAAAAAAAAAAAAAAAAAAERIP/aAAgBAgEBPxBmH//EAB0QAQABBAMBAAAAAAAAAAAAAAERABAxQSFRYaH/2gAIAQEAAT8QndiXQAmg3lAIlj6FYCpD3QEJaJ+OLB4RUEYcpm3/2Q==","aspectRatio":1,"src":"/static/5a125f11859148d0d0aadc1049ac37f7/82bc5/photo_2020-01-05_20-24-37.jpg","srcSet":"/static/5a125f11859148d0d0aadc1049ac37f7/b736e/photo_2020-01-05_20-24-37.jpg 25w,\n/static/5a125f11859148d0d0aadc1049ac37f7/b2767/photo_2020-01-05_20-24-37.jpg 50w,\n/static/5a125f11859148d0d0aadc1049ac37f7/82bc5/photo_2020-01-05_20-24-37.jpg 100w,\n/static/5a125f11859148d0d0aadc1049ac37f7/decd9/photo_2020-01-05_20-24-37.jpg 150w,\n/static/5a125f11859148d0d0aadc1049ac37f7/3dcee/photo_2020-01-05_20-24-37.jpg 200w,\n/static/5a125f11859148d0d0aadc1049ac37f7/883ec/photo_2020-01-05_20-24-37.jpg 640w","srcWebp":"/static/5a125f11859148d0d0aadc1049ac37f7/4226e/photo_2020-01-05_20-24-37.webp","srcSetWebp":"/static/5a125f11859148d0d0aadc1049ac37f7/12e7b/photo_2020-01-05_20-24-37.webp 25w,\n/static/5a125f11859148d0d0aadc1049ac37f7/ecb58/photo_2020-01-05_20-24-37.webp 50w,\n/static/5a125f11859148d0d0aadc1049ac37f7/4226e/photo_2020-01-05_20-24-37.webp 100w,\n/static/5a125f11859148d0d0aadc1049ac37f7/e8bcc/photo_2020-01-05_20-24-37.webp 150w,\n/static/5a125f11859148d0d0aadc1049ac37f7/1c9b5/photo_2020-01-05_20-24-37.webp 200w,\n/static/5a125f11859148d0d0aadc1049ac37f7/2420f/photo_2020-01-05_20-24-37.webp 640w","sizes":"(max-width: 100px) 100vw, 100px","presentationWidth":100}}},"page":{"fields":{"url":"/blog/projects/openapi-for-docusaurus/"},"frontmatter":{"title":"OpenAPI for Docusaurus! 📘","subtitle":"OpenAPI in your docs site with Redoc","keywords":[],"template":"post","canonical_url":"","noindex":null,"date":"2021-01-19T17:30:00.000Z","tweet":"https://twitter.com/rohit_gohri/status/1351589213565644801","github":"rohit-gohri/redocusaurus","content_img_path":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='450'%20height='300'%20viewBox='0%200%20450%20300'%20preserveAspectRatio='none'%3e%3cpath%20d='M85%2018c-12%202-22%2011-28%2022l-2%206v212l2%205c5%209%2010%2014%2019%2019l7%204h284l7-4c9-5%2015-10%2019-19l3-5V46l-3-6c-6-11-15-18-27-22-6-1-272-2-281%200m1%208c-10%202-17%208-21%2016l-3%206v41h326V48l-3-6c-3-6-8-11-15-14l-4-2-139-1-141%201m2%209c-12%203-20%2014-19%2026%204%2028%2047%2026%2047-3%200-15-14-27-28-23m51%200c-17%206-22%2028-9%2040%2015%2014%2039%204%2039-17%200-16-15-27-30-23m56%200c-18%204-24%2025-13%2038%2010%2012%2030%2010%2038-4%2010-17-6-39-25-34M85%2044c-7%204-10%2014-6%2021%208%2014%2029%208%2029-7%200-13-12-20-23-14m53%200c-13%208-7%2029%208%2029%2012%200%2020-13%2014-23-4-8-15-10-22-6m54%200c-13%209-8%2029%208%2029%2013%200%2020-16%2012-25-5-6-14-8-20-4M62%20175v80l2%205c3%206%209%2012%2016%2015l6%203h279l5-3c7-3%2013-9%2016-15l2-5V96H62v79m79-15l-26%2028c0%201%2052%2053%2054%2053%201%200%204-3%204-5l-24-24-24-25%2023-23%2024-24c1-2-1-6-3-6l-28%2026m115-25l-68%20102c0%202%203%204%205%204%201-1%2067-97%2068-102%202-3-2-6-5-4m22%202c-1%202%201%204%2023%2026l24%2025-23%2023-24%2024c-1%202%201%206%203%206s54-52%2054-53l-26-27c-26-27-29-29-31-24'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.176991150442478,"src":"/static/7704b41f1249b8975236edb2246ed5a8/2ffe0/noun_api_719176.png","srcSet":"/static/7704b41f1249b8975236edb2246ed5a8/f973b/noun_api_719176.png 133w,\n/static/7704b41f1249b8975236edb2246ed5a8/20493/noun_api_719176.png 265w,\n/static/7704b41f1249b8975236edb2246ed5a8/2ffe0/noun_api_719176.png 529w,\n/static/7704b41f1249b8975236edb2246ed5a8/7f576/noun_api_719176.png 700w","srcWebp":"/static/7704b41f1249b8975236edb2246ed5a8/4fe5d/noun_api_719176.webp","srcSetWebp":"/static/7704b41f1249b8975236edb2246ed5a8/74efb/noun_api_719176.webp 133w,\n/static/7704b41f1249b8975236edb2246ed5a8/5da3e/noun_api_719176.webp 265w,\n/static/7704b41f1249b8975236edb2246ed5a8/4fe5d/noun_api_719176.webp 529w,\n/static/7704b41f1249b8975236edb2246ed5a8/c164c/noun_api_719176.webp 700w","sizes":"(max-width: 529px) 100vw, 529px","presentationWidth":529}}}}}},"pageContext":{"url":"/blog/projects/openapi-for-docusaurus/","relativePath":"blog/projects/openapi-for-docusaurus.md","relativeDir":"blog/projects","base":"openapi-for-docusaurus.md","name":"openapi-for-docusaurus","html":"<p>Introducing \"Redocusaurus\": <a href=\"https://github.com/redocly/redoc\" target=\"_blank\" rel=\"noopener noreferrer\">Redoc</a> for <a href=\"https://v2.docusaurus.io/\" target=\"_blank\" rel=\"noopener noreferrer\">Docusaurus</a></p>\n<h3><a href=\"https://npmjs.com/package/redocusaurus/\" target=\"_blank\" rel=\"noopener noreferrer\">Redocusaurus</a></h3>\n<p><img src=\"https://img.shields.io/npm/v/redocusaurus?style=flat-square\" alt=\"npm version\"> <img src=\"https://img.shields.io/npm/dw/redocusaurus?style=flat-square\" alt=\"npm downloads\"></p>\n<h2>What is it?</h2>\n<p>It is a preset for docusaurus, with 2 main components:</p>\n<ul>\n<li><a href=\"https://github.com/rohit-gohri/redocusaurus/tree/main/packages/docusaurus-theme-redoc\" target=\"_blank\" rel=\"noopener noreferrer\">docusaurus-theme-redoc</a></li>\n</ul>\n<p>Using Redoc as a React component, this provides 2 theme components, <code>@theme/ApiDoc</code> and <code>@theme/Redoc</code>. You can use them directly in js pages in Docusaurus.</p>\n<ul>\n<li><a href=\"https://github.com/rohit-gohri/redocusaurus/tree/main/packages/docusaurus-plugin-redoc\" target=\"_blank\" rel=\"noopener noreferrer\">docusaurus-plugin-redoc</a></li>\n</ul>\n<p>This creates routes from your OpenAPI files or URLs and renders with the components provided by the theme.</p>\n<h2>How to set it up?</h2>\n<ol>\n<li>\n<p>Install the preset</p>\n<pre><code class=\"language-sh\">npm i --save redocusaurus\n</code></pre>\n</li>\n<li>\n<p>Add it to your <code>docusaurus.config.js</code>:</p>\n<pre><code class=\"language-js\">module.exports = {\n // ...\n presets: [\n   // ...\n   [\n     'redocusaurus',\n     {\n       // Plugin Options for loading OpenAPI files\n       specs: [\n         {\n           spec: 'https://redocly.github.io/redoc/openapi.yaml',\n           route: '/api/',\n         },\n       ],\n       // Theme Options for modifying how redoc renders them\n       theme: {\n         // Change with your site colors\n         primaryColor: '#1890ff',\n       },\n     },\n   ],\n ],\n // ...\n};\n</code></pre>\n</li>\n<li>Rebuild your site and you will have your OpenAPI docs available at the <code>/api/</code> route.</li>\n</ol>\n<h2>Extra features over directly using Redoc</h2>\n<p>The theme includes redoc settings and some custom css to make it match the <code>@docusaurus/classic</code> theme. Along with support for <strong>dark mode</strong>.</p>\n<video autoplay loop muted playsinline>\n  <source src=\"/videos/video_2021-01-19_22-56-46.mp4\" type=\"video/mp4\">\n  <img src=\"/images/redoc-dark-mode.gif\">\n</video>\n<p>Read more in the docs - <a href=\"https://redocusaurus.vercel.app/\" target=\"_blank\" rel=\"noopener noreferrer\">https://redocusaurus.vercel.app/</a></p>\n<blockquote>\n<p>API Icon by mikicon from the Noun Project</p>\n</blockquote>","headerImg":"photo_2020-01-05_20-24-37.jpg"}},"staticQueryHashes":["1161966454","1673585186","1866307108","219491723","2948329147","3269044456","629512913"]}