From a2acfec32af804ec776d48507d655daaf8df6cb0 Mon Sep 17 00:00:00 2001
From: Roger <rogermparent@gmail.com>
Date: Mon, 31 Jan 2022 17:02:50 -0500
Subject: [PATCH] Move Documentation components to theme (#3170)

* Move sidebar logic to theme

* Split sidebar normalization and utils and import via shadowing

* Fix usage of findChildWithSource

* Fix lint-ts errors

* Move comment normalized item definition to d.ts

* Update and export INormalizedSidebarItem and use it in SidebarMenu

* Add suppressable default gatsby-transformer-remark definition

* Remove resolve-sidebar since local remark plugins are dvc.org only

* Remove resolve-sidebar since local remark plugins are dvc.org only

* Return src/components to master

* Add alias for local theme

* Roughly move doc components to theme

* Revert to master package.json

* Remove unused normalize sidebar module

* Re-fix package.json and change test imports

* stylelint --fix

* Move Page and DocumentationLayout from theme to site

* Fix svg imports

* Remove unused layout components

* stylelint fix

* Extract github link function and repo constant to more easily overridable files

* Remove unnecessary shadowed files since webpack override is in place

* Remove unused constants file

* Revert "Remove unused constants file"

This reverts commit b07ca1b221ed2751d49f4c2378ba0d673c989e86.

* Remove actual unused constants file

* Use theme-based Link component

* Move core part of Documentation layout into theme

* Rename sidebar test block to something more descriptive of its contents

* Break apart docs sidebar and move it into theme

* Add missing import
---
 gatsby-config.js                              |   7 +-
 gatsby-node.js                                |  11 ++
 plugins/gatsby-remark-dvc-linker/apiLinker.js |   4 +-
 .../gatsby-remark-dvc-linker/commandLinker.js |   4 +-
 .../gatsby-remark-dvc-linker/liveLinker.js    |   4 +-
 .../gatsby-config.js                          |  57 +++++++++
 .../gatsby-node.js                            |  24 +++-
 plugins/gatsby-theme-iterative-docs/index.js  |   1 +
 .../pseudo-shadow.js                          |   3 +
 .../gatsby-theme-iterative-docs/redirects.js  |   2 +
 .../gatsby-theme-iterative-docs/sidebar.js    |   2 +
 .../Documentation/Layout/SearchForm/index.tsx |   2 +-
 .../Layout/SearchForm/styles.module.css       |   0
 .../Layout/SidebarMenu/InnerSidebar/index.tsx |  35 ++++++
 .../SidebarMenu/Item}/external-link-icon.svg  |   0
 .../Layout/SidebarMenu/Item}/index.tsx        | 119 ++----------------
 .../Layout/SidebarMenu/icons}/house.svg       |   0
 .../Layout/SidebarMenu/icons/index.ts         |   9 ++
 .../Layout/SidebarMenu/index.tsx              |  80 ++++++++++++
 .../Layout/SidebarMenu/styles.module.css      |   0
 .../components/Documentation/Layout/index.tsx |  66 ++++++++++
 .../Documentation/Layout/styles.module.css    |   0
 .../Documentation/Markdown/Main/index.tsx     |   0
 .../Markdown/Main/styles.module.css           |   0
 .../Markdown/ToggleProvider/index.tsx         |   0
 .../Markdown/Tooltip/DesktopView/index.tsx    |   0
 .../Tooltip/DesktopView/styles.module.css     |   0
 .../Markdown/Tooltip/MobileView/index.tsx     |   0
 .../Tooltip/MobileView/styles.module.css      |   0
 .../Documentation/Markdown/Tooltip/index.tsx  |   0
 .../Documentation/Markdown/index.tsx          |   0
 .../Documentation/Markdown/styles.module.css  |   0
 .../Documentation/RightPanel/index.tsx        |   0
 .../RightPanel/styles.module.css              |   0
 .../Documentation/TutorialsLinks/index.tsx    |   0
 .../TutorialsLinks/styles.module.css          |   0
 .../WithJSX/AutoLinkElement/index.tsx         |   0
 .../WithJSX/AutoLinkElement/styles.module.css |   0
 .../Documentation/WithJSX/index.tsx           |   3 +-
 .../src}/components/Documentation/index.tsx   |   4 +-
 .../Documentation/styles.module.css           |   0
 .../src}/components/HamburgerIcon/index.tsx   |   0
 .../HamburgerIcon/styles.module.css           |   0
 .../components/LayoutWidthContainer/index.tsx |   0
 .../LayoutWidthContainer/styles.module.css    |   0
 .../src}/components/Link/index.tsx            |   0
 .../src}/components/SEO/helper.ts             |   0
 .../src}/components/SEO/index.tsx             |   7 +-
 .../src}/components/ShowOnly/index.tsx        |   0
 .../components/ShowOnly/styles.module.css     |   0
 .../src}/components/SocialIcon/discord.svg    |   0
 .../src}/components/SocialIcon/github.svg     |   0
 .../src}/components/SocialIcon/index.tsx      |   0
 .../components/SocialIcon/linkedin-no-bg.svg  |   0
 .../src}/components/SocialIcon/linkedin.svg   |   0
 .../src}/components/SocialIcon/twitter.svg    |   0
 .../src}/components/SocialIcon/youtube.svg    |   0
 .../src/config/custom-media.js                |  19 +++
 .../src/constants.ts                          |   1 +
 .../src/getGithubLink.ts                      |   3 +
 .../src}/queries/siteMeta.ts                  |   0
 .../src}/templates/doc.tsx                    |   0
 .../src}/utils/front/accessibility.ts         |   0
 .../src}/utils/front/api.ts                   |   0
 .../src}/utils/front/breakpoints.ts           |   2 +-
 .../src}/utils/front/customProperties.ts      |   0
 .../utils/front/focusElementWithHotkey.ts     |   0
 .../src}/utils/front/glossary.ts              |   0
 .../src}/utils/front/i18n.ts                  |   0
 .../src}/utils/front/images.ts                |   0
 .../src}/utils/front/isClient.ts              |   0
 .../src}/utils/front/keyboard.ts              |   0
 .../src}/utils/front/plausible.ts             |   0
 .../src}/utils/front/resources.ts             |   0
 .../src}/utils/front/safeQuerySelector.ts     |   0
 .../src}/utils/front/scroll.ts                |   0
 .../src}/utils/shared/redirects.js            |   8 +-
 .../src}/utils/shared/redirects.test.js       |   0
 .../src}/utils/shared/sidebar.js              |   2 +-
 .../src}/utils/shared/sidebar.test.js         |  32 ++---
 .../src}/utils/shared/tagToSlug.js            |   0
 src/components/Blog/Feed/Item/index.tsx       |   4 +-
 src/components/Blog/FeedMeta/index.tsx        |   8 +-
 src/components/Blog/Layout/index.tsx          |   2 +-
 src/components/Blog/Post/Share/index.tsx      |   2 +-
 src/components/Blog/Post/index.tsx            |   8 +-
 src/components/Community/Contribute/index.tsx |   6 +-
 src/components/Community/Events/index.tsx     |   6 +-
 src/components/Community/Hero/index.tsx       |   8 +-
 src/components/Community/Learn/index.tsx      |  12 +-
 src/components/Community/Meet/index.tsx       |  10 +-
 .../Community/Testimonial/index.tsx           |   2 +-
 .../Layout/SidebarMenu/cml_logo.svg           |  23 ----
 .../Layout/SidebarMenu/studio_icon.svg        |  28 -----
 src/components/Documentation/Layout/index.tsx |  72 -----------
 src/components/DocumentationLayout/index.tsx  |  23 ++++
 src/components/DownloadButton/index.tsx       |   6 +-
 src/components/Features/index.tsx             |   4 +-
 src/components/HamburgerMenu/index.tsx        |  12 +-
 src/components/HeroSection/index.tsx          |   2 +-
 src/components/Home/Diagram/index.tsx         |   6 +-
 .../Home/LandingHero/GithubLine/index.tsx     |   2 +-
 src/components/Home/LandingHero/index.tsx     |  11 +-
 src/components/Home/LearnMore/index.tsx       |   7 +-
 .../Home/UseCases/CollapsibleText/index.tsx   |   2 +-
 src/components/Home/UseCases/Video/index.tsx  |   2 +-
 src/components/Home/UseCases/index.tsx        |   4 +-
 src/components/Home/WhatsNewModal/index.tsx   |   2 +-
 src/components/Home/index.tsx                 |   4 +-
 src/components/LayoutFooter/index.tsx         |  18 +--
 .../LayoutHeader/Nav/LinkItems/index.tsx      |   6 +-
 .../LayoutHeader/Nav/Popup/index.tsx          |   4 +-
 .../LayoutHeader/Nav/SocialIcons/index.tsx    |   5 +-
 src/components/LayoutHeader/Nav/index.tsx     |   2 +-
 src/components/LayoutHeader/alert.tsx         |   2 +-
 src/components/LayoutHeader/index.tsx         |   6 +-
 src/components/MainLayout/index.tsx           |   2 +-
 src/components/Page/DefaultSEO/index.tsx      |   4 +-
 src/components/Page/index.tsx                 |   2 +-
 src/components/Page/utils.ts                  |   9 +-
 src/components/Paginator/index.tsx            |   2 +-
 src/components/PromoSection/index.tsx         |   2 +-
 src/components/PseudoButton/index.tsx         |   4 +-
 .../SubscribeSection/Form/index.tsx           |   2 +-
 src/components/Support/Popover/index.tsx      |   2 +-
 src/components/Support/index.tsx              |   6 +-
 .../Layout/SidebarMenu/InnerSidebar/index.tsx |  25 ++++
 .../Layout/SidebarMenu/icons/cml-icon.svg}    |   0
 .../Layout/SidebarMenu/icons/index.ts         |  13 ++
 .../Layout/SidebarMenu/icons/studio-icon.svg} |   0
 src/gatsby-theme-iterative-docs/redirects.js  |   1 +
 src/gatsby-theme-iterative-docs/sidebar.js    |   1 +
 src/gatsby/models/blog/createPages.js         |   2 +-
 src/pages/404.tsx                             |   2 +-
 src/pages/community.tsx                       |   2 +-
 src/pages/doc/user-guide/glossary.tsx         |   4 +-
 src/pages/features.tsx                        |   2 +-
 src/pages/support.tsx                         |   2 +-
 src/server/middleware/redirects/index.js      |   4 +-
 src/templates/blog-post.tsx                   |   4 +-
 src/templates/blog-tags.tsx                   |   2 +-
 src/templates/doc-jsx.tsx                     |   6 +-
 tsconfig.json                                 |   7 +-
 143 files changed, 564 insertions(+), 380 deletions(-)
 create mode 100644 plugins/gatsby-theme-iterative-docs/gatsby-config.js
 create mode 100644 plugins/gatsby-theme-iterative-docs/index.js
 create mode 100644 plugins/gatsby-theme-iterative-docs/pseudo-shadow.js
 create mode 100644 plugins/gatsby-theme-iterative-docs/redirects.js
 create mode 100644 plugins/gatsby-theme-iterative-docs/sidebar.js
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Layout/SearchForm/index.tsx (94%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Layout/SearchForm/styles.module.css (100%)
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
 rename {src/components/Documentation/Layout/SidebarMenu => plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item}/external-link-icon.svg (100%)
 rename {src/components/Documentation/Layout/SidebarMenu => plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item}/index.tsx (51%)
 rename {src/components/Documentation/Layout/SidebarMenu => plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons}/house.svg (100%)
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/index.ts
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/index.tsx
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Layout/SidebarMenu/styles.module.css (100%)
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/index.tsx
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Layout/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Main/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Main/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/ToggleProvider/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Tooltip/MobileView/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/Tooltip/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/Markdown/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/RightPanel/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/RightPanel/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/TutorialsLinks/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/TutorialsLinks/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/WithJSX/AutoLinkElement/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/WithJSX/AutoLinkElement/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/WithJSX/index.tsx (90%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/index.tsx (87%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Documentation/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/HamburgerIcon/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/HamburgerIcon/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/LayoutWidthContainer/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/LayoutWidthContainer/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/Link/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SEO/helper.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SEO/index.tsx (93%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/ShowOnly/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/ShowOnly/styles.module.css (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/discord.svg (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/github.svg (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/index.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/linkedin-no-bg.svg (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/linkedin.svg (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/twitter.svg (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/components/SocialIcon/youtube.svg (100%)
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/config/custom-media.js
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/constants.ts
 create mode 100644 plugins/gatsby-theme-iterative-docs/src/getGithubLink.ts
 rename {src => plugins/gatsby-theme-iterative-docs/src}/queries/siteMeta.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/templates/doc.tsx (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/accessibility.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/api.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/breakpoints.ts (85%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/customProperties.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/focusElementWithHotkey.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/glossary.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/i18n.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/images.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/isClient.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/keyboard.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/plausible.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/resources.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/safeQuerySelector.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/front/scroll.ts (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/shared/redirects.js (93%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/shared/redirects.test.js (100%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/shared/sidebar.js (98%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/shared/sidebar.test.js (90%)
 rename {src => plugins/gatsby-theme-iterative-docs/src}/utils/shared/tagToSlug.js (100%)
 delete mode 100644 src/components/Documentation/Layout/SidebarMenu/cml_logo.svg
 delete mode 100644 src/components/Documentation/Layout/SidebarMenu/studio_icon.svg
 delete mode 100644 src/components/Documentation/Layout/index.tsx
 create mode 100644 src/components/DocumentationLayout/index.tsx
 create mode 100644 src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
 rename src/{components/Documentation/Layout/SidebarMenu/cml_bw_logo.svg => gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/cml-icon.svg} (100%)
 create mode 100644 src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/index.ts
 rename src/{components/Documentation/Layout/SidebarMenu/studio_gray_icon.svg => gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/studio-icon.svg} (100%)
 create mode 100644 src/gatsby-theme-iterative-docs/redirects.js
 create mode 100644 src/gatsby-theme-iterative-docs/sidebar.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 2558598893..d3adb03408 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -37,7 +37,12 @@ const plugins = [
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
-  'gatsby-theme-iterative-docs',
+  {
+    resolve: 'gatsby-theme-iterative-docs',
+    options: {
+      remark: false
+    }
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
diff --git a/gatsby-node.js b/gatsby-node.js
index 913a6234c5..7001ba73b7 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,4 +1,5 @@
 require('dotenv').config()
+const path = require('path')
 global.__basedir = __dirname
 
 const { setPageContext } = require('./src/gatsby/common')
@@ -40,4 +41,14 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
     }
     actions.replaceWebpackConfig(config)
   }
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        'gatsby-theme-iterative-docs': path.resolve(
+          'plugins',
+          'gatsby-theme-iterative-docs'
+        )
+      }
+    }
+  })
 }
diff --git a/plugins/gatsby-remark-dvc-linker/apiLinker.js b/plugins/gatsby-remark-dvc-linker/apiLinker.js
index 63dfe4c276..c54d0526b5 100644
--- a/plugins/gatsby-remark-dvc-linker/apiLinker.js
+++ b/plugins/gatsby-remark-dvc-linker/apiLinker.js
@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const DVC_API_REGEXP = /dvc.api([a-z-._]*\(\)$)?/
 const METHOD_REGEXP = /^[a-z-._]*\(\)$/
diff --git a/plugins/gatsby-remark-dvc-linker/commandLinker.js b/plugins/gatsby-remark-dvc-linker/commandLinker.js
index 96ff5d9375..17c28b2246 100644
--- a/plugins/gatsby-remark-dvc-linker/commandLinker.js
+++ b/plugins/gatsby-remark-dvc-linker/commandLinker.js
@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const DVC_REGEXP = /dvc\s+[a-z][a-z-.]*/
 const COMMAND_REGEXP = /^[a-z][a-z-]*$/
diff --git a/plugins/gatsby-remark-dvc-linker/liveLinker.js b/plugins/gatsby-remark-dvc-linker/liveLinker.js
index 2b5c4fe15e..34c3a01a19 100644
--- a/plugins/gatsby-remark-dvc-linker/liveLinker.js
+++ b/plugins/gatsby-remark-dvc-linker/liveLinker.js
@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const LIVE_API_REGEXP = /Live.([a-z-._]*\(\)$)?/
 const METHOD_REGEXP = /^[a-z-._]*\(\)$/
diff --git a/plugins/gatsby-theme-iterative-docs/gatsby-config.js b/plugins/gatsby-theme-iterative-docs/gatsby-config.js
new file mode 100644
index 0000000000..1176dc1dfe
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/gatsby-config.js
@@ -0,0 +1,57 @@
+module.exports = ({ remark }) => {
+  const plugins = []
+  if (remark) {
+    plugins.push({
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          'gatsby-remark-embedder',
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              noInlineHighlight: true,
+              languageExtensions: [
+                {
+                  language: 'text',
+                  definition: {}
+                }
+              ]
+            }
+          },
+          {
+            resolve: 'gatsby-remark-smartypants',
+            options: {
+              quotes: false
+            }
+          },
+          {
+            resolve: 'gatsby-remark-embed-gist',
+            options: {
+              includeDefaultCss: true
+            }
+          },
+          'gatsby-remark-relative-images',
+          'gatsby-remark-copy-linked-files',
+          'gatsby-remark-external-links',
+          {
+            resolve: 'gatsby-remark-autolink-headers',
+            options: {
+              enableCustomId: true,
+              isIconAfterHeader: true
+            }
+          },
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              withWebp: true
+            }
+          },
+          'gatsby-remark-responsive-iframe'
+        ]
+      }
+    })
+  }
+  return {
+    plugins
+  }
+}
diff --git a/plugins/gatsby-theme-iterative-docs/gatsby-node.js b/plugins/gatsby-theme-iterative-docs/gatsby-node.js
index f9c6c849fc..49274bfe64 100644
--- a/plugins/gatsby-theme-iterative-docs/gatsby-node.js
+++ b/plugins/gatsby-theme-iterative-docs/gatsby-node.js
@@ -10,8 +10,9 @@ exports.pluginOptionsSchema = ({ Joi }) => {
     disable: Joi.boolean().default(Boolean(process.env.SKIP_DOCS)),
     getTemplate: Joi.function().default(() => defaultGetTemplate),
     defaultTemplate: Joi.string().default(
-      path.resolve('src', 'templates', 'doc.tsx')
-    )
+      require.resolve('./src/templates/doc.tsx')
+    ),
+    remark: Joi.boolean().default(true)
   })
 }
 
@@ -33,6 +34,25 @@ exports.createSchemaCustomization = async api => {
   ])
 }
 
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        [path.resolve(__dirname, 'sidebar')]: path.resolve(
+          'src',
+          'gatsby-theme-iterative-docs',
+          'sidebar'
+        ),
+        [path.resolve(__dirname, 'redirects')]: path.resolve(
+          'src',
+          'gatsby-theme-iterative-docs',
+          'redirects'
+        )
+      }
+    }
+  })
+}
+
 exports.createPages = require('./createPages.js')
 
 exports.onCreateNode = require('./onCreateNode.js')
diff --git a/plugins/gatsby-theme-iterative-docs/index.js b/plugins/gatsby-theme-iterative-docs/index.js
new file mode 100644
index 0000000000..172f1ae6a4
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/plugins/gatsby-theme-iterative-docs/pseudo-shadow.js b/plugins/gatsby-theme-iterative-docs/pseudo-shadow.js
new file mode 100644
index 0000000000..ecb00e71f9
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/pseudo-shadow.js
@@ -0,0 +1,3 @@
+const path = require('path')
+const pseudoShadow = modulePath => require(path.resolve(modulePath))
+module.exports = pseudoShadow
diff --git a/plugins/gatsby-theme-iterative-docs/redirects.js b/plugins/gatsby-theme-iterative-docs/redirects.js
new file mode 100644
index 0000000000..6a3c513609
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/redirects.js
@@ -0,0 +1,2 @@
+const pseudoShadow = require('./pseudo-shadow')
+module.exports = pseudoShadow('./src/gatsby-theme-iterative-docs/redirects')
diff --git a/plugins/gatsby-theme-iterative-docs/sidebar.js b/plugins/gatsby-theme-iterative-docs/sidebar.js
new file mode 100644
index 0000000000..5d2bfd37b5
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/sidebar.js
@@ -0,0 +1,2 @@
+const pseudoShadow = require('./pseudo-shadow')
+module.exports = pseudoShadow('./src/gatsby-theme-iterative-docs/sidebar')
diff --git a/src/components/Documentation/Layout/SearchForm/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SearchForm/index.tsx
similarity index 94%
rename from src/components/Documentation/Layout/SearchForm/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SearchForm/index.tsx
index 38fe96a4e7..4c338f84d4 100644
--- a/src/components/Documentation/Layout/SearchForm/index.tsx
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SearchForm/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Promise from 'promise-polyfill'
-import { loadResource } from '../../../../utils/front/resources'
+import { loadResource } from 'gatsby-theme-iterative-docs/src/utils/front/resources'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Documentation/Layout/SearchForm/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SearchForm/styles.module.css
similarity index 100%
rename from src/components/Documentation/Layout/SearchForm/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SearchForm/styles.module.css
diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
new file mode 100644
index 0000000000..3c2449cd9c
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import includes from 'lodash/includes'
+import * as styles from '../styles.module.css'
+import { structure } from '../../../../../utils/shared/sidebar'
+import SidebarMenuItem from '../Item'
+import { SidebarItemClickHandler } from '..'
+
+export interface IInnerSidebarProps {
+  activePaths: string[]
+  onClick: SidebarItemClickHandler
+}
+
+const SidebarSections: React.FC<IInnerSidebarProps> = ({
+  activePaths,
+  onClick
+}) => {
+  return (
+    <div className={styles.sections}>
+      <div className={styles.sectionLinks}>
+        {structure.map(item => (
+          <SidebarMenuItem
+            key={item.path}
+            activePaths={
+              includes(activePaths, item.path) ? activePaths : undefined
+            }
+            onClick={onClick}
+            {...item}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SidebarSections
diff --git a/src/components/Documentation/Layout/SidebarMenu/external-link-icon.svg b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item/external-link-icon.svg
similarity index 100%
rename from src/components/Documentation/Layout/SidebarMenu/external-link-icon.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item/external-link-icon.svg
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item/index.tsx
similarity index 51%
rename from src/components/Documentation/Layout/SidebarMenu/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item/index.tsx
index 4696ae719d..b91cdec6af 100644
--- a/src/components/Documentation/Layout/SidebarMenu/index.tsx
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/Item/index.tsx
@@ -1,34 +1,14 @@
-import React, { useEffect, useRef, useState, SyntheticEvent } from 'react'
-import { useLocation } from '@reach/router'
-import cn from 'classnames'
+import React, { SyntheticEvent, useEffect, useState } from 'react'
 import { Collapse } from 'react-collapse'
-import PerfectScrollbar from 'perfect-scrollbar'
+import cn from 'classnames'
 import includes from 'lodash/includes'
 
-import ShowOnly from '../../../ShowOnly'
-import DownloadButton from '../../../DownloadButton'
-import Link from '../../../Link'
+import Link from '../../../../Link'
 import { ReactComponent as ExternalLinkIcon } from './external-link-icon.svg'
-import { ReactComponent as HouseIcon } from './house.svg'
-import { ReactComponent as CMLIcon } from './cml_bw_logo.svg'
-import { ReactComponent as StudioIcon } from './studio_gray_icon.svg'
-
-import {
-  structure,
-  getParentsListFromPath,
-  getPathWithSource
-} from '../../../../utils/shared/sidebar'
-
-import 'perfect-scrollbar/css/perfect-scrollbar.css'
-import * as styles from './styles.module.css'
-
-// A map for optional special icons that can be used in menu items
-// Use the key string here as the "icon" field in sidebar.json
-const ICONS: { [key: string]: React.FC<{ className?: string }> } = {
-  house: HouseIcon,
-  cml: CMLIcon,
-  studio: StudioIcon
-}
+import * as styles from '../styles.module.css'
+
+import ICONS from '../icons'
+import { getPathWithSource } from '../../../../../utils/shared/sidebar'
 
 interface ISidebarMenuItemProps {
   children?: Array<{ label: string; path: string; source: boolean | string }>
@@ -160,87 +140,4 @@ const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
   )
 }
 
-interface ISidebarMenuProps {
-  currentPath: string
-  onClick: (isLeafItemClicked: boolean) => void
-}
-
-const SidebarMenu: React.FC<ISidebarMenuProps> = ({ currentPath, onClick }) => {
-  const location = useLocation()
-  const rootRef = useRef<HTMLDivElement>(null)
-  const psRef = useRef<PerfectScrollbar | undefined>(undefined)
-  const [isScrollHidden, setIsScrollHidden] = useState(false)
-  const activePaths = currentPath && getParentsListFromPath(currentPath)
-
-  const scrollToActiveItem = (): void => {
-    const node = document.getElementById(currentPath)
-    const parent = rootRef.current
-
-    setIsScrollHidden(true)
-    setTimeout(() => {
-      if (node && parent) {
-        psRef.current?.update()
-
-        const parentHeight = parent.clientHeight
-        const parentScroll = parent.scrollTop
-        const nodeOffset = node.offsetTop
-        const nodeHeight = node.clientHeight
-        const scrollOffset = nodeOffset - parentHeight + nodeHeight
-
-        if (
-          parentScroll > nodeOffset + nodeHeight ||
-          parentScroll + parentHeight < nodeOffset
-        ) {
-          parent.scrollTop = scrollOffset
-        }
-      }
-
-      setIsScrollHidden(false)
-    }, 400)
-  }
-
-  useEffect(() => {
-    if (!psRef.current && rootRef.current) {
-      psRef.current = new PerfectScrollbar(rootRef.current, {
-        wheelPropagation: true
-      })
-    }
-
-    scrollToActiveItem()
-
-    return (): void => {
-      psRef.current?.destroy()
-      psRef.current = undefined
-    }
-  }, [])
-  useEffect(scrollToActiveItem, [location.pathname])
-
-  return (
-    <div
-      className={cn(styles.menu, isScrollHidden && styles.isScrollHidden)}
-      ref={rootRef}
-    >
-      <div className={styles.sections}>
-        <div className={styles.sectionLinks}>
-          {structure.map(item => (
-            <SidebarMenuItem
-              key={item.path}
-              activePaths={
-                includes(activePaths, item.path) ? activePaths : undefined
-              }
-              onClick={onClick}
-              {...item}
-            />
-          ))}
-        </div>
-      </div>
-      <ShowOnly on="desktop">
-        <div className={styles.footer}>
-          <DownloadButton openTop />
-        </div>
-      </ShowOnly>
-    </div>
-  )
-}
-
-export default SidebarMenu
+export default SidebarMenuItem
diff --git a/src/components/Documentation/Layout/SidebarMenu/house.svg b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/house.svg
similarity index 100%
rename from src/components/Documentation/Layout/SidebarMenu/house.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/house.svg
diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/index.ts b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/index.ts
new file mode 100644
index 0000000000..c4bb218e89
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons/index.ts
@@ -0,0 +1,9 @@
+import { ReactComponent as HouseIcon } from './house.svg'
+
+export type SidebarIcons = { [key: string]: React.FC<{ className?: string }> }
+
+const ICONS: SidebarIcons = {
+  house: HouseIcon
+}
+
+export default ICONS
diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/index.tsx
new file mode 100644
index 0000000000..8af0c57339
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/index.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useLocation } from '@reach/router'
+import cn from 'classnames'
+import PerfectScrollbar from 'perfect-scrollbar'
+
+import { getParentsListFromPath } from '../../../../utils/shared/sidebar'
+
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
+import * as styles from './styles.module.css'
+
+import InnerSidebar from './InnerSidebar'
+
+export type SidebarItemClickHandler = (isLeafItemClicked: boolean) => void
+
+interface ISidebarMenuProps {
+  currentPath: string
+  onClick: SidebarItemClickHandler
+}
+
+const SidebarMenu: React.FC<ISidebarMenuProps> = ({ currentPath, onClick }) => {
+  const location = useLocation()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const psRef = useRef<PerfectScrollbar | undefined>(undefined)
+  const [isScrollHidden, setIsScrollHidden] = useState(false)
+  const activePaths = currentPath && getParentsListFromPath(currentPath)
+
+  const scrollToActiveItem = (): void => {
+    const node = document.getElementById(currentPath)
+    const parent = rootRef.current
+
+    setIsScrollHidden(true)
+    setTimeout(() => {
+      if (node && parent) {
+        psRef.current?.update()
+
+        const parentHeight = parent.clientHeight
+        const parentScroll = parent.scrollTop
+        const nodeOffset = node.offsetTop
+        const nodeHeight = node.clientHeight
+        const scrollOffset = nodeOffset - parentHeight + nodeHeight
+
+        if (
+          parentScroll > nodeOffset + nodeHeight ||
+          parentScroll + parentHeight < nodeOffset
+        ) {
+          parent.scrollTop = scrollOffset
+        }
+      }
+
+      setIsScrollHidden(false)
+    }, 400)
+  }
+
+  useEffect(() => {
+    if (!psRef.current && rootRef.current) {
+      psRef.current = new PerfectScrollbar(rootRef.current, {
+        wheelPropagation: true
+      })
+    }
+
+    scrollToActiveItem()
+
+    return (): void => {
+      psRef.current?.destroy()
+      psRef.current = undefined
+    }
+  }, [])
+  useEffect(scrollToActiveItem, [location.pathname])
+
+  return (
+    <div
+      className={cn(styles.menu, isScrollHidden && styles.isScrollHidden)}
+      ref={rootRef}
+    >
+      <InnerSidebar onClick={onClick} activePaths={activePaths} />
+    </div>
+  )
+}
+
+export default SidebarMenu
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/styles.module.css
similarity index 100%
rename from src/components/Documentation/Layout/SidebarMenu/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/styles.module.css
diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/index.tsx
new file mode 100644
index 0000000000..fc9526627a
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/index.tsx
@@ -0,0 +1,66 @@
+import React, { Reducer, useEffect, useReducer } from 'react'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import HamburgerIcon from '../../HamburgerIcon'
+import SearchForm from './SearchForm'
+import SidebarMenu from './SidebarMenu'
+import { matchMedia } from '../../../utils/front/breakpoints'
+import { focusElementWithHotkey } from '../../../utils/front/focusElementWithHotkey'
+
+import * as styles from './styles.module.css'
+import { useWindowSize } from 'react-use'
+
+const toggleReducer: Reducer<boolean, void> = state => !state
+
+const Layout: React.FC<{ currentPath: string }> = ({
+  children,
+  currentPath
+}) => {
+  const [isMenuOpen, toggleMenu] = useReducer(toggleReducer, false)
+
+  const windowSize = useWindowSize()
+
+  useEffect(() => {
+    if (matchMedia('--xs-scr')) {
+      return
+    }
+    const closeEventListener = focusElementWithHotkey('#doc-search', '/')
+    return closeEventListener
+  }, [windowSize])
+
+  return (
+    <LayoutWidthContainer className={styles.container} wide>
+      {/* eslint-disable jsx-a11y/no-static-element-interactions */}
+      {/* eslint-disable jsx-a11y/click-events-have-key-events */}
+      <div
+        className={cn(styles.backdrop, isMenuOpen && styles.opened)}
+        onClick={toggleMenu}
+      />
+      {/* eslint-enable jsx-a11y/no-static-element-interactions */}
+      {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+
+      <button
+        className={cn(styles.sideToggle, isMenuOpen && styles.opened)}
+        onClick={toggleMenu}
+      >
+        <HamburgerIcon />
+      </button>
+
+      <div className={cn(styles.side, isMenuOpen && styles.opened)}>
+        <SearchForm />
+        <SidebarMenu
+          currentPath={currentPath}
+          onClick={(isLeafItemClicked: boolean): void => {
+            if (matchMedia('--xs-scr') && isLeafItemClicked) {
+              toggleMenu()
+            }
+          }}
+        />
+      </div>
+      <div className={styles.content}>{children}</div>
+    </LayoutWidthContainer>
+  )
+}
+
+export default Layout
diff --git a/src/components/Documentation/Layout/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/styles.module.css
similarity index 100%
rename from src/components/Documentation/Layout/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Layout/styles.module.css
diff --git a/src/components/Documentation/Markdown/Main/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/Main/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/index.tsx
diff --git a/src/components/Documentation/Markdown/Main/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css
similarity index 100%
rename from src/components/Documentation/Markdown/Main/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css
diff --git a/src/components/Documentation/Markdown/ToggleProvider/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/ToggleProvider/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/ToggleProvider/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/ToggleProvider/index.tsx
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
similarity index 100%
rename from src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx
diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
similarity index 100%
rename from src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/MobileView/styles.module.css
diff --git a/src/components/Documentation/Markdown/Tooltip/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/Tooltip/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Tooltip/index.tsx
diff --git a/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx
similarity index 100%
rename from src/components/Documentation/Markdown/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx
diff --git a/src/components/Documentation/Markdown/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/styles.module.css
similarity index 100%
rename from src/components/Documentation/Markdown/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/styles.module.css
diff --git a/src/components/Documentation/RightPanel/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/RightPanel/index.tsx
similarity index 100%
rename from src/components/Documentation/RightPanel/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/RightPanel/index.tsx
diff --git a/src/components/Documentation/RightPanel/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/RightPanel/styles.module.css
similarity index 100%
rename from src/components/Documentation/RightPanel/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/RightPanel/styles.module.css
diff --git a/src/components/Documentation/TutorialsLinks/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/TutorialsLinks/index.tsx
similarity index 100%
rename from src/components/Documentation/TutorialsLinks/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/TutorialsLinks/index.tsx
diff --git a/src/components/Documentation/TutorialsLinks/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/TutorialsLinks/styles.module.css
similarity index 100%
rename from src/components/Documentation/TutorialsLinks/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/TutorialsLinks/styles.module.css
diff --git a/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx
similarity index 100%
rename from src/components/Documentation/WithJSX/AutoLinkElement/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx
diff --git a/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css
similarity index 100%
rename from src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css
diff --git a/src/components/Documentation/WithJSX/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/index.tsx
similarity index 90%
rename from src/components/Documentation/WithJSX/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/index.tsx
index 5ac53e647a..d9c625f2c7 100644
--- a/src/components/Documentation/WithJSX/index.tsx
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/index.tsx
@@ -3,8 +3,9 @@ import React from 'react'
 import MarkdownMain from '../Markdown/Main'
 import RightPanel from '../RightPanel'
 
-import { IHeading, getGithubLink } from '../'
+import { IHeading } from '../'
 import { getItemByPath } from '../../../utils/shared/sidebar'
+import { getGithubLink } from '../../../getGithubLink'
 
 interface IWithJSXProps {
   path: string
diff --git a/src/components/Documentation/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/index.tsx
similarity index 87%
rename from src/components/Documentation/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/index.tsx
index a2d9c3e175..00f737e2b6 100644
--- a/src/components/Documentation/index.tsx
+++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/index.tsx
@@ -5,15 +5,13 @@ import Markdown from './Markdown'
 import RightPanel from './RightPanel'
 
 import { getItemByPath } from '../../utils/shared/sidebar'
+import { getGithubLink } from '../../getGithubLink'
 
 export interface IHeading {
   slug: string
   text: string
 }
 
-export const getGithubLink = (source: string): string =>
-  `https://github.com/iterative/dvc.org/blob/master/content${source}`
-
 interface IDocumentationProps {
   path: string
   headings: Array<IHeading>
diff --git a/src/components/Documentation/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/styles.module.css
similarity index 100%
rename from src/components/Documentation/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/Documentation/styles.module.css
diff --git a/src/components/HamburgerIcon/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/HamburgerIcon/index.tsx
similarity index 100%
rename from src/components/HamburgerIcon/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/HamburgerIcon/index.tsx
diff --git a/src/components/HamburgerIcon/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/HamburgerIcon/styles.module.css
similarity index 100%
rename from src/components/HamburgerIcon/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/HamburgerIcon/styles.module.css
diff --git a/src/components/LayoutWidthContainer/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/LayoutWidthContainer/index.tsx
similarity index 100%
rename from src/components/LayoutWidthContainer/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/LayoutWidthContainer/index.tsx
diff --git a/src/components/LayoutWidthContainer/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/LayoutWidthContainer/styles.module.css
similarity index 100%
rename from src/components/LayoutWidthContainer/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/LayoutWidthContainer/styles.module.css
diff --git a/src/components/Link/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Link/index.tsx
similarity index 100%
rename from src/components/Link/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/Link/index.tsx
diff --git a/src/components/SEO/helper.ts b/plugins/gatsby-theme-iterative-docs/src/components/SEO/helper.ts
similarity index 100%
rename from src/components/SEO/helper.ts
rename to plugins/gatsby-theme-iterative-docs/src/components/SEO/helper.ts
diff --git a/src/components/SEO/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/SEO/index.tsx
similarity index 93%
rename from src/components/SEO/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/SEO/index.tsx
index 0d2a192a55..c02d86b351 100644
--- a/src/components/SEO/index.tsx
+++ b/plugins/gatsby-theme-iterative-docs/src/components/SEO/index.tsx
@@ -3,9 +3,14 @@ import Helmet from 'react-helmet'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
 
 import getSiteMeta from '../../queries/siteMeta'
-import { IPaginatorPageInfo } from '../Paginator'
 import { buildMetadata, MetaProps } from './helper'
 
+export interface IPaginatorPageInfo {
+  currentPage: number
+  nextPage?: string
+  previousPage?: string
+}
+
 interface ISEOProps {
   title?: string
   defaultMetaTitle?: boolean
diff --git a/src/components/ShowOnly/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/ShowOnly/index.tsx
similarity index 100%
rename from src/components/ShowOnly/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/ShowOnly/index.tsx
diff --git a/src/components/ShowOnly/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/ShowOnly/styles.module.css
similarity index 100%
rename from src/components/ShowOnly/styles.module.css
rename to plugins/gatsby-theme-iterative-docs/src/components/ShowOnly/styles.module.css
diff --git a/src/components/SocialIcon/discord.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/discord.svg
similarity index 100%
rename from src/components/SocialIcon/discord.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/discord.svg
diff --git a/src/components/SocialIcon/github.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/github.svg
similarity index 100%
rename from src/components/SocialIcon/github.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/github.svg
diff --git a/src/components/SocialIcon/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/index.tsx
similarity index 100%
rename from src/components/SocialIcon/index.tsx
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/index.tsx
diff --git a/src/components/SocialIcon/linkedin-no-bg.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/linkedin-no-bg.svg
similarity index 100%
rename from src/components/SocialIcon/linkedin-no-bg.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/linkedin-no-bg.svg
diff --git a/src/components/SocialIcon/linkedin.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/linkedin.svg
similarity index 100%
rename from src/components/SocialIcon/linkedin.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/linkedin.svg
diff --git a/src/components/SocialIcon/twitter.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/twitter.svg
similarity index 100%
rename from src/components/SocialIcon/twitter.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/twitter.svg
diff --git a/src/components/SocialIcon/youtube.svg b/plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/youtube.svg
similarity index 100%
rename from src/components/SocialIcon/youtube.svg
rename to plugins/gatsby-theme-iterative-docs/src/components/SocialIcon/youtube.svg
diff --git a/plugins/gatsby-theme-iterative-docs/src/config/custom-media.js b/plugins/gatsby-theme-iterative-docs/src/config/custom-media.js
new file mode 100644
index 0000000000..1e30babccc
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/config/custom-media.js
@@ -0,0 +1,19 @@
+const screens = {
+  giant: 1200,
+  desktop: 1005,
+  tablet: 768,
+  phablet: 572,
+  phone: 376
+}
+
+module.exports = {
+  screens,
+  customMedia: {
+    '--xxs-scr': `(max-width: ${screens.phone}px)`,
+    '--xs-scr': `(max-width: ${screens.phablet}px)`,
+    '--sm-scr': `(max-width: ${screens.tablet}px)`,
+    '--md-scr': `(max-width: ${screens.desktop - 1}px)`,
+    '--lg-scr': `(min-width: ${screens.desktop}px)`,
+    '--xl-scr': `(min-width: ${screens.giant}px)`
+  }
+}
diff --git a/plugins/gatsby-theme-iterative-docs/src/constants.ts b/plugins/gatsby-theme-iterative-docs/src/constants.ts
new file mode 100644
index 0000000000..ebb6099207
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/constants.ts
@@ -0,0 +1 @@
+export const githubRepo = 'iterative/dvc'
diff --git a/plugins/gatsby-theme-iterative-docs/src/getGithubLink.ts b/plugins/gatsby-theme-iterative-docs/src/getGithubLink.ts
new file mode 100644
index 0000000000..442ec87955
--- /dev/null
+++ b/plugins/gatsby-theme-iterative-docs/src/getGithubLink.ts
@@ -0,0 +1,3 @@
+import { githubRepo } from './constants'
+export const getGithubLink = (sourcePath: string): string =>
+  `https://github.com/${githubRepo}/blob/master/content${sourcePath}`
diff --git a/src/queries/siteMeta.ts b/plugins/gatsby-theme-iterative-docs/src/queries/siteMeta.ts
similarity index 100%
rename from src/queries/siteMeta.ts
rename to plugins/gatsby-theme-iterative-docs/src/queries/siteMeta.ts
diff --git a/src/templates/doc.tsx b/plugins/gatsby-theme-iterative-docs/src/templates/doc.tsx
similarity index 100%
rename from src/templates/doc.tsx
rename to plugins/gatsby-theme-iterative-docs/src/templates/doc.tsx
diff --git a/src/utils/front/accessibility.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/accessibility.ts
similarity index 100%
rename from src/utils/front/accessibility.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/accessibility.ts
diff --git a/src/utils/front/api.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/api.ts
similarity index 100%
rename from src/utils/front/api.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/api.ts
diff --git a/src/utils/front/breakpoints.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/breakpoints.ts
similarity index 85%
rename from src/utils/front/breakpoints.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/breakpoints.ts
index c06e7f0ddf..a7323a7534 100644
--- a/src/utils/front/breakpoints.ts
+++ b/plugins/gatsby-theme-iterative-docs/src/utils/front/breakpoints.ts
@@ -1,5 +1,5 @@
 import includes from 'lodash/includes'
-import { customMedia } from '../../../config/postcss/media'
+import { customMedia } from '../../config/custom-media'
 
 type AvailableCustomMedia = keyof typeof customMedia
 
diff --git a/src/utils/front/customProperties.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/customProperties.ts
similarity index 100%
rename from src/utils/front/customProperties.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/customProperties.ts
diff --git a/src/utils/front/focusElementWithHotkey.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/focusElementWithHotkey.ts
similarity index 100%
rename from src/utils/front/focusElementWithHotkey.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/focusElementWithHotkey.ts
diff --git a/src/utils/front/glossary.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/glossary.ts
similarity index 100%
rename from src/utils/front/glossary.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/glossary.ts
diff --git a/src/utils/front/i18n.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/i18n.ts
similarity index 100%
rename from src/utils/front/i18n.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/i18n.ts
diff --git a/src/utils/front/images.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/images.ts
similarity index 100%
rename from src/utils/front/images.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/images.ts
diff --git a/src/utils/front/isClient.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/isClient.ts
similarity index 100%
rename from src/utils/front/isClient.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/isClient.ts
diff --git a/src/utils/front/keyboard.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/keyboard.ts
similarity index 100%
rename from src/utils/front/keyboard.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/keyboard.ts
diff --git a/src/utils/front/plausible.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/plausible.ts
similarity index 100%
rename from src/utils/front/plausible.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/plausible.ts
diff --git a/src/utils/front/resources.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/resources.ts
similarity index 100%
rename from src/utils/front/resources.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/resources.ts
diff --git a/src/utils/front/safeQuerySelector.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/safeQuerySelector.ts
similarity index 100%
rename from src/utils/front/safeQuerySelector.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/safeQuerySelector.ts
diff --git a/src/utils/front/scroll.ts b/plugins/gatsby-theme-iterative-docs/src/utils/front/scroll.ts
similarity index 100%
rename from src/utils/front/scroll.ts
rename to plugins/gatsby-theme-iterative-docs/src/utils/front/scroll.ts
diff --git a/src/utils/shared/redirects.js b/plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects.js
similarity index 93%
rename from src/utils/shared/redirects.js
rename to plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects.js
index 773f3244fd..f40671c204 100644
--- a/src/utils/shared/redirects.js
+++ b/plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects.js
@@ -2,6 +2,7 @@
 
 const { navigate } = require('@reach/router')
 const { structure, findChildWithSource } = require('./sidebar')
+const redirects = require('../../../redirects')
 
 const buildSidebarRedirects = (list, redirects = []) => {
   list.forEach(item => {
@@ -37,10 +38,9 @@ const getRedirects = (() => {
 
   return () => {
     if (!allRedirects) {
-      allRedirects = [
-        ...require('../../../redirects-list.json'),
-        ...buildSidebarRedirects(structure)
-      ].map(processRedirectString)
+      allRedirects = [...redirects, ...buildSidebarRedirects(structure)].map(
+        processRedirectString
+      )
     }
 
     return allRedirects
diff --git a/src/utils/shared/redirects.test.js b/plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects.test.js
similarity index 100%
rename from src/utils/shared/redirects.test.js
rename to plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects.test.js
diff --git a/src/utils/shared/sidebar.js b/plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.js
similarity index 98%
rename from src/utils/shared/sidebar.js
rename to plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.js
index 93bf0fe9ac..4ac64503e7 100644
--- a/src/utils/shared/sidebar.js
+++ b/plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.js
@@ -21,7 +21,7 @@
 */
 
 const { titleCase } = require('title-case')
-const sidebar = require('../../../content/docs/sidebar.json')
+const sidebar = require('../../../sidebar')
 
 const PATH_ROOT = '/doc'
 const FILE_ROOT = '/docs/'
diff --git a/src/utils/shared/sidebar.test.js b/plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.test.js
similarity index 90%
rename from src/utils/shared/sidebar.test.js
rename to plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.test.js
index 36e2dd8b9f..06db04d286 100644
--- a/src/utils/shared/sidebar.test.js
+++ b/plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar.test.js
@@ -1,6 +1,6 @@
 /* eslint-env jest */
 
-describe('SidebarMenu/helper', () => {
+describe('normalizeSidebar', () => {
   beforeEach(() => {
     jest.resetModules()
   })
@@ -19,7 +19,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -38,7 +38,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -57,7 +57,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -76,7 +76,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -104,7 +104,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -148,7 +148,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -188,7 +188,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -228,7 +228,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -284,7 +284,7 @@ describe('SidebarMenu/helper', () => {
         }
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const sidebarData = require('./sidebar').structure
 
       expect(sidebarData).toEqual(result)
@@ -293,7 +293,7 @@ describe('SidebarMenu/helper', () => {
     it("Throws error if external item doesn't have a url field", () => {
       const rawData = [{ type: 'external' }]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
 
       expect(() => require('./sidebar')).toThrow(
         new Error("'url' field is required in external sidebar.json entries")
@@ -303,7 +303,7 @@ describe('SidebarMenu/helper', () => {
     it("Throws error if local item doesn't have slug field", () => {
       const rawData = [{}]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
 
       expect(() => require('./sidebar')).toThrow(
         new Error("'slug' field is required in local sidebar.json entries")
@@ -314,7 +314,7 @@ describe('SidebarMenu/helper', () => {
     it("Throws error if item has source: false and doesn't have children", () => {
       const rawData = [{ slug: 'item-name', source: false }]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
 
       expect(() => require('./sidebar')).toThrow(
         new Error(
@@ -336,7 +336,7 @@ describe('SidebarMenu/helper', () => {
         next: undefined
       }
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const { getItemByPath } = require('./sidebar')
 
       expect(getItemByPath('/doc')).toEqual(result)
@@ -372,7 +372,7 @@ describe('SidebarMenu/helper', () => {
         next: undefined
       }
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const { getItemByPath } = require('./sidebar')
 
       expect(getItemByPath('/doc/item')).toEqual(result)
@@ -391,7 +391,7 @@ describe('SidebarMenu/helper', () => {
         '/doc/item-name/nested-item/subnested-item'
       ]
 
-      jest.doMock('../../../content/docs/sidebar.json', () => rawData)
+      jest.doMock('../../../sidebar', () => rawData)
       const { getParentsListFromPath } = require('./sidebar')
 
       expect(getParentsListFromPath(path)).toEqual(result)
diff --git a/src/utils/shared/tagToSlug.js b/plugins/gatsby-theme-iterative-docs/src/utils/shared/tagToSlug.js
similarity index 100%
rename from src/utils/shared/tagToSlug.js
rename to plugins/gatsby-theme-iterative-docs/src/utils/shared/tagToSlug.js
diff --git a/src/components/Blog/Feed/Item/index.tsx b/src/components/Blog/Feed/Item/index.tsx
index e600e03b01..0852679c26 100644
--- a/src/components/Blog/Feed/Item/index.tsx
+++ b/src/components/Blog/Feed/Item/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef } from 'react'
 import { useRafState, useWindowSize } from 'react-use'
 import { graphql } from 'gatsby'
-import Link from '../../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 import cn from 'classnames'
-import { ISocialIcon } from '../../../SocialIcon'
+import { ISocialIcon } from 'gatsby-theme-iterative-docs/src/components/SocialIcon'
 
 import FeedMeta from '../../FeedMeta'
 
diff --git a/src/components/Blog/FeedMeta/index.tsx b/src/components/Blog/FeedMeta/index.tsx
index 45ad6bc80b..4b0894d725 100644
--- a/src/components/Blog/FeedMeta/index.tsx
+++ b/src/components/Blog/FeedMeta/index.tsx
@@ -1,11 +1,13 @@
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 import React from 'react'
 
-import Link from '../../Link'
-import { pluralizeComments } from '../../../utils/front/i18n'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+import { pluralizeComments } from 'gatsby-theme-iterative-docs/src/utils/front/i18n'
 
 import * as styles from './styles.module.css'
-import SocialIcon, { ISocialIcon } from '../../SocialIcon'
+import SocialIcon, {
+  ISocialIcon
+} from 'gatsby-theme-iterative-docs/src/components/SocialIcon'
 
 interface IBlogFeedMetaProps {
   avatar: {
diff --git a/src/components/Blog/Layout/index.tsx b/src/components/Blog/Layout/index.tsx
index 5bd1c8afc7..d11548eb7b 100644
--- a/src/components/Blog/Layout/index.tsx
+++ b/src/components/Blog/Layout/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import SEO from '../../SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 import MainLayout, { LayoutComponent } from '../../MainLayout'
 
 import * as styles from './styles.module.css'
diff --git a/src/components/Blog/Post/Share/index.tsx b/src/components/Blog/Post/Share/index.tsx
index c064b660d3..dbb30030a0 100644
--- a/src/components/Blog/Post/Share/index.tsx
+++ b/src/components/Blog/Post/Share/index.tsx
@@ -1,7 +1,7 @@
 import { graphql, useStaticQuery } from 'gatsby'
 import React, { useCallback } from 'react'
 
-import Link from '../../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import Tooltip from '../Tooltip'
 
 import { ReactComponent as Facebook } from './icons/facebook.svg'
diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
index 2fbc647344..f16b8dbbb6 100644
--- a/src/components/Blog/Post/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -5,13 +5,13 @@ import { useWindowScroll, useWindowSize } from 'react-use'
 
 import { IBlogPostData } from '../../../templates/blog-post'
 
-import { useCommentsCount } from '../../../utils/front/api'
-import { pluralizeComments } from '../../../utils/front/i18n'
-import tagToSlug from '../../../utils/shared/tagToSlug'
+import { useCommentsCount } from 'gatsby-theme-iterative-docs/src/utils/front/api'
+import { pluralizeComments } from 'gatsby-theme-iterative-docs/src/utils/front/i18n'
+import tagToSlug from 'gatsby-theme-iterative-docs/src/utils/shared/tagToSlug'
 
 import Markdown from './Markdown'
 import FeedMeta from '../FeedMeta'
-import Link from '../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import PseudoButton from '../../PseudoButton'
 import HeroPic from './HeroPic'
 import Share from './Share'
diff --git a/src/components/Community/Contribute/index.tsx b/src/components/Community/Contribute/index.tsx
index efb94732f5..33248dd43b 100644
--- a/src/components/Community/Contribute/index.tsx
+++ b/src/components/Community/Contribute/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 
 import { ICommunitySectionTheme } from '../'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import Link from '../../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import CommunityBlock from '../Block'
 import CommunitySection from '../Section'
-import { logEvent } from '../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import { useCommunityData } from '../../../utils/front/community'
 import * as sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx
index bd7cf8072d..9ebd0e4325 100644
--- a/src/components/Community/Events/index.tsx
+++ b/src/components/Community/Events/index.tsx
@@ -3,11 +3,11 @@ import cn from 'classnames'
 import format from 'date-fns/format'
 
 import { ICommunitySectionTheme } from '../'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import Link from '../../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import Block from '../Block'
 import Section from '../Section'
-import { logEvent } from '../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 import { useCommunityData } from '../../../utils/front/community'
 
 import * as sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx
index 64a40f7e54..494ca7a067 100644
--- a/src/components/Community/Hero/index.tsx
+++ b/src/components/Community/Hero/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import ShowOnly from '../../ShowOnly'
-import Link from '../../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import { useCommunityData } from '../../../utils/front/community'
-import { logEvent } from '../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
index 1221b703a6..c53f049246 100644
--- a/src/components/Community/Learn/index.tsx
+++ b/src/components/Community/Learn/index.tsx
@@ -3,17 +3,17 @@ import cn from 'classnames'
 import format from 'date-fns/format'
 
 import { ICommunitySectionTheme } from '../'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import Link from '../../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import Block from '../Block'
 import Section from '../Section'
 
-import { logEvent } from '../../../utils/front/plausible'
-import { getFirstPage } from '../../../utils/shared/sidebar'
-import { useCommentsCount } from '../../../utils/front/api'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
+import { getFirstPage } from 'gatsby-theme-iterative-docs/src/utils/shared/sidebar'
+import { useCommentsCount } from 'gatsby-theme-iterative-docs/src/utils/front/api'
 import { useCommunityData } from '../../../utils/front/community'
 import getPosts from '../../../queries/posts'
-import { pluralizeComments } from '../../../utils/front/i18n'
+import { pluralizeComments } from 'gatsby-theme-iterative-docs/src/utils/front/i18n'
 
 import * as sharedStyles from '../styles.module.css'
 import * as styles from './styles.module.css'
diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx
index f29acd5fc0..2fa2d24354 100644
--- a/src/components/Community/Meet/index.tsx
+++ b/src/components/Community/Meet/index.tsx
@@ -2,18 +2,18 @@ import React, { useCallback } from 'react'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 
 import { ICommunitySectionTheme } from '../'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
 import Block from '../Block'
 import Section from '../Section'
-import Link from '../../Link'
-import { pluralizeComments } from '../../../utils/front/i18n'
-import { logEvent } from '../../../utils/front/plausible'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+import { pluralizeComments } from 'gatsby-theme-iterative-docs/src/utils/front/i18n'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 import {
   useIssues,
   useTopics,
   IGithubIssue,
   IDiscussTopic
-} from '../../../utils/front/api'
+} from 'gatsby-theme-iterative-docs/src/utils/front/api'
 
 import { useCommunityData } from '../../../utils/front/community'
 import * as sharedStyles from '../styles.module.css'
diff --git a/src/components/Community/Testimonial/index.tsx b/src/components/Community/Testimonial/index.tsx
index afb692cb87..20579425db 100644
--- a/src/components/Community/Testimonial/index.tsx
+++ b/src/components/Community/Testimonial/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
 import Section from '../Section'
 import IframeResizer from 'iframe-resizer-react'
 
diff --git a/src/components/Documentation/Layout/SidebarMenu/cml_logo.svg b/src/components/Documentation/Layout/SidebarMenu/cml_logo.svg
deleted file mode 100644
index 40dd5f85d3..0000000000
--- a/src/components/Documentation/Layout/SidebarMenu/cml_logo.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M5.6,169c0.2,2.3,0.4,4.6,0.7,6.9c1.1,9.5,3.7,18.7,7.7,27.4c5,10.8,11.8,20.3,20.5,28.5
-	c10.9,10.2,23.5,17.3,37.9,21.3c9.1,2.5,18.3,3.7,27.7,3.3c10.2-0.4,20.1-2.6,29.6-6.2c12.4-4.7,23.6-11.4,34.3-19.1
-	c9-6.5,17.4-13.6,25.6-21.1c5.7-5.3,11.3-10.7,17-16c1.2-1.1,1.2-1.1,2.4-0.1c5.1,4.3,10.1,8.7,15.4,12.7c7.9,6,16.4,11,25.9,14.1
-	c10.5,3.4,21.1,3.3,31.6,0.3c10.6-2.9,19.6-8.5,27-16.6c8.3-9.1,13.3-19.8,14.8-32.1c1.5-12.1-0.5-23.5-6.2-34.3
-	c-5.3-10.1-12.9-17.9-22.7-23.5c-7.5-4.3-15.5-6.7-24.1-7.4c-8.2-0.7-16.1,0.6-23.8,3.5c-10.3,4-19.3,10.1-27.8,17
-	c-3.4,2.8-6.7,5.7-10,8.5c-1.4,1.2-1.4,1.2-2.7-0.1c-7.1-6.6-14.1-13.4-21.4-19.9c-10.8-9.6-22.1-18.5-34.5-25.9
-	c-12.2-7.2-25-12.8-39.1-15.1c-4.8-0.8-9.8-1.3-14.6-1.3C77.1,74,59,79.7,43,91.5c-15.4,11.4-26.3,26.1-32.5,44.2
-	c-2.7,8-4.4,16.2-4.7,24.6C5.8,160.7,5.6,198.2,5.6,169z"/>
-<path class="st1" d="M96.8,216.1c-14.6-0.2-27-5.5-37-16c-8-8.3-12.5-18.4-13.7-29.9c-2.4-23.9,11.9-45.9,34.6-53.6
-	c11.6-3.9,23.1-3.4,34.6,0.9c9.1,3.5,17.4,8.4,25.2,14.1c7.8,5.6,15.1,11.7,22.1,18.2c5.1,4.7,10.1,9.5,15.2,14.2
-	c0.7,0.6,0.8,1.1,0.1,1.8c-11.7,11.3-23.5,22.5-36.7,32.1c-8,5.8-16.3,11-25.7,14.5C109.5,214.7,103.3,216.2,96.8,216.1z"/>
-<path class="st1" d="M284.1,164.4c0,9.9-6.8,17.5-15.8,18.8c-4.2,0.6-7.8-1-11.3-2.9c-6.8-3.7-12.8-8.6-18.5-13.7
-	c-1.7-1.5-1.6-1.5,0.1-3.1c5-4.4,10.2-8.6,15.9-12.1c2.4-1.4,5-2.8,7.6-3.7c5.7-2,10.8-0.3,15.3,3.3
-	C282,154.6,283.9,159.4,284.1,164.4z"/>
-</svg>
diff --git a/src/components/Documentation/Layout/SidebarMenu/studio_icon.svg b/src/components/Documentation/Layout/SidebarMenu/studio_icon.svg
deleted file mode 100644
index af633ed015..0000000000
--- a/src/components/Documentation/Layout/SidebarMenu/studio_icon.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg fill="none" viewBox="0 0 40 40">
-  <g clip-path="url(#clip0)">
-    <path fill="#1EBAE8" d="M14.26 22.66l-1.13-1.88a1.25 1.25 0 00-2.12-.04L4.6 30.6a2.5 2.5 0 01-4.2-2.72l6.42-9.87a6.25 6.25 0 0110.6.19l.15.26-3.3 4.2z"/>
-    <path fill="url(#paint0_linear)" fill-opacity=".5" d="M14.26 22.66l-1.13-1.88a1.25 1.25 0 00-2.12-.04L4.6 30.6a2.5 2.5 0 01-4.2-2.72l6.42-9.87a6.25 6.25 0 0110.6.19l.15.26-3.3 4.2z" style="mix-blend-mode:color-burn"/>
-    <path fill="#F46737" d="M20.5 23.32l1.48 2.47c.46.78 1.59.81 2.1.06L35.44 9.22a2.5 2.5 0 014.12 2.81L28.21 28.67a6.25 6.25 0 01-10.52-.3l-.62-1.04 3.42-4.01z"/>
-    <path fill="url(#paint1_linear)" fill-opacity=".5" d="M20.5 23.32l1.48 2.47c.46.78 1.59.81 2.1.06L35.44 9.22a2.5 2.5 0 014.12 2.81L28.21 28.67a6.25 6.25 0 01-10.52-.3l-.62-1.04 3.42-4.01z" style="mix-blend-mode:color-burn"/>
-    <path fill="#945DD6" d="M11 20.74l1.25-1.82c1.3-1.9 3.98-2.7 5.16-.72l4.57 7.59c.42.7 1.37.8 1.93.26l-1.13 1.63c-1.28 1.87-3.92 2.63-5.09.68l-4.56-7.58a1.25 1.25 0 00-2.12-.04z"/>
-    <path fill="url(#paint2_linear)" fill-opacity=".5" d="M11 20.74l1.25-1.82c1.3-1.9 3.98-2.7 5.16-.72l4.57 7.59c.42.7 1.37.8 1.93.26l-1.13 1.63c-1.28 1.87-3.92 2.63-5.09.68l-4.56-7.58a1.25 1.25 0 00-2.12-.04z" style="mix-blend-mode:multiply"/>
-  </g>
-  <defs>
-    <linearGradient id="paint0_linear" x1="11.25" x2="4.69" y1="10.63" y2="21.25" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#945DD6"/>
-      <stop offset="1" stop-color="#945DD6" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="paint1_linear" x1="28.13" x2="18.44" y1="17.5" y2="31.25" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#945DD6" stop-opacity="0"/>
-      <stop offset="1" stop-color="#7B61FF"/>
-    </linearGradient>
-    <linearGradient id="paint2_linear" x1="12.81" x2="20.94" y1="17.81" y2="29.38" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#13ADC7"/>
-      <stop offset=".5" stop-color="#7B61FF" stop-opacity="0"/>
-      <stop offset="1" stop-color="#F46737"/>
-    </linearGradient>
-    <clipPath id="clip0">
-      <path fill="#fff" d="M0 4a4 4 0 014-4h32a4 4 0 014 4v32a4 4 0 01-4 4H4a4 4 0 01-4-4V4z"/>
-    </clipPath>
-  </defs>
-</svg>
diff --git a/src/components/Documentation/Layout/index.tsx b/src/components/Documentation/Layout/index.tsx
deleted file mode 100644
index 6e742a8910..0000000000
--- a/src/components/Documentation/Layout/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import cn from 'classnames'
-
-import MainLayout, { LayoutComponent, LayoutModifiers } from '../../MainLayout'
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import HamburgerIcon from '../../HamburgerIcon'
-import SearchForm from './SearchForm'
-import SidebarMenu from './SidebarMenu'
-import { matchMedia } from '../../../utils/front/breakpoints'
-import { focusElementWithHotkey } from '../../../utils/front/focusElementWithHotkey'
-
-import * as styles from './styles.module.css'
-import { useWindowSize } from 'react-use'
-
-const Layout: LayoutComponent = ({ children, ...restProps }) => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const {
-    location: { pathname }
-  } = restProps
-
-  const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
-
-  const windowSize = useWindowSize()
-
-  useEffect(() => {
-    if (matchMedia('--xs-scr')) {
-      return
-    }
-    const closeEventListener = focusElementWithHotkey('#doc-search', '/')
-    return closeEventListener
-  }, [windowSize])
-
-  return (
-    <MainLayout
-      {...restProps}
-      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}
-    >
-      <LayoutWidthContainer className={styles.container} wide>
-        {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-        {/* eslint-disable jsx-a11y/click-events-have-key-events */}
-        <div
-          className={cn(styles.backdrop, isMenuOpen && styles.opened)}
-          onClick={toggleMenu}
-        />
-        {/* eslint-enable jsx-a11y/no-static-element-interactions */}
-        {/* eslint-enable jsx-a11y/click-events-have-key-events */}
-
-        <button
-          className={cn(styles.sideToggle, isMenuOpen && styles.opened)}
-          onClick={toggleMenu}
-        >
-          <HamburgerIcon />
-        </button>
-
-        <div className={cn(styles.side, isMenuOpen && styles.opened)}>
-          <SearchForm />
-          <SidebarMenu
-            currentPath={pathname}
-            onClick={(isLeafItemClicked: boolean): void => {
-              if (matchMedia('--xs-scr') && isLeafItemClicked) {
-                toggleMenu()
-              }
-            }}
-          />
-        </div>
-        <div className={styles.content}>{children}</div>
-      </LayoutWidthContainer>
-    </MainLayout>
-  )
-}
-
-export default Layout
diff --git a/src/components/DocumentationLayout/index.tsx b/src/components/DocumentationLayout/index.tsx
new file mode 100644
index 0000000000..bd16205f26
--- /dev/null
+++ b/src/components/DocumentationLayout/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import MainLayout, { LayoutComponent, LayoutModifiers } from '../MainLayout'
+import ThemeDocumentationLayout from 'gatsby-theme-iterative-docs/src/components/Documentation/Layout'
+
+const Layout: LayoutComponent = ({ children, ...restProps }) => {
+  const {
+    location: { pathname }
+  } = restProps
+
+  return (
+    <MainLayout
+      {...restProps}
+      modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}
+    >
+      <ThemeDocumentationLayout currentPath={pathname}>
+        {children}
+      </ThemeDocumentationLayout>
+    </MainLayout>
+  )
+}
+
+export default Layout
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
index 7db84cdd9b..67714f925d 100644
--- a/src/components/DownloadButton/index.tsx
+++ b/src/components/DownloadButton/index.tsx
@@ -2,10 +2,10 @@ import React, { useRef, useEffect, useCallback, useState } from 'react'
 import cn from 'classnames'
 
 import TwoRowsButton from '../TwoRowsButton'
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 
-import isClient from '../../utils/front/isClient'
-import { logEvent } from '../../utils/front/plausible'
+import isClient from 'gatsby-theme-iterative-docs/src/utils/front/isClient'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Features/index.tsx b/src/components/Features/index.tsx
index b597839986..d4af7a6e03 100644
--- a/src/components/Features/index.tsx
+++ b/src/components/Features/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
 import PageContent from '../PageContent'
-import LayoutWidthContainer from '../LayoutWidthContainer'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
 import HeroSection from '../HeroSection'
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import PromoSection from '../PromoSection'
 
 import * as styles from './styles.module.css'
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 1fa2c4b969..c0870e79b3 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -1,14 +1,14 @@
 import cn from 'classnames'
 import React, { useEffect, useState, useCallback, MouseEvent } from 'react'
 
-import HamburgerIcon from '../HamburgerIcon'
-import Link from '../Link'
-import { logEvent } from '../../utils/front/plausible'
+import HamburgerIcon from 'gatsby-theme-iterative-docs/src/components/HamburgerIcon'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
-import { getFirstPage } from '../../utils/shared/sidebar'
+import { getFirstPage } from 'gatsby-theme-iterative-docs/src/utils/shared/sidebar'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
-import { ReactComponent as TwitterIcon } from '../SocialIcon/twitter.svg'
-import { ReactComponent as GithubIcon } from '../SocialIcon/github.svg'
+import { ReactComponent as TwitterIcon } from 'gatsby-theme-iterative-docs/src/components/SocialIcon/twitter.svg'
+import { ReactComponent as GithubIcon } from 'gatsby-theme-iterative-docs/src/components/SocialIcon/github.svg'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx
index 0fa5bf1b0d..b496106a19 100644
--- a/src/components/HeroSection/index.tsx
+++ b/src/components/HeroSection/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import cn from 'classnames'
 
-import LayoutWidthContainer from '../LayoutWidthContainer'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/Diagram/index.tsx b/src/components/Home/Diagram/index.tsx
index bf180dfb59..806ab7b3c4 100644
--- a/src/components/Home/Diagram/index.tsx
+++ b/src/components/Home/Diagram/index.tsx
@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react'
 import Slider from 'react-slick'
 import cn from 'classnames'
 
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import ShowOnly from '../../ShowOnly'
-import Link from '../../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
diff --git a/src/components/Home/LandingHero/GithubLine/index.tsx b/src/components/Home/LandingHero/GithubLine/index.tsx
index 947596de5a..4d862411c3 100644
--- a/src/components/Home/LandingHero/GithubLine/index.tsx
+++ b/src/components/Home/LandingHero/GithubLine/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import useStars from '../../../../gatsby/hooks/stars'
 
 import * as styles from './styles.module.css'
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
index d28c1fafe3..fcf3409615 100644
--- a/src/components/Home/LandingHero/index.tsx
+++ b/src/components/Home/LandingHero/index.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useCallback, useState } from 'react'
 import cn from 'classnames'
 
-import ShowOnly from '../../ShowOnly'
-import Link from '../../Link'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import DownloadButton from '../../DownloadButton'
 import TwoRowsButton from '../../TwoRowsButton'
 import GithubLine from './GithubLine'
-import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
-import { logEvent } from '../../../utils/front/plausible'
+import {
+  scrollIntoLayout,
+  ease
+} from 'gatsby-theme-iterative-docs/src/utils/front/scroll'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx
index eab3268a47..b351bc95e3 100644
--- a/src/components/Home/LearnMore/index.tsx
+++ b/src/components/Home/LearnMore/index.tsx
@@ -1,7 +1,10 @@
 import React, { useCallback } from 'react'
 
-import { logEvent } from '../../../utils/front/plausible'
-import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
+import {
+  scrollIntoLayout,
+  ease
+} from 'gatsby-theme-iterative-docs/src/utils/front/scroll'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
index b91c2eaa01..3e8b8fddf8 100644
--- a/src/components/Home/UseCases/CollapsibleText/index.tsx
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Collapse } from 'react-collapse'
 
-import { isTriggeredFromKB } from '../../../../utils/front/keyboard'
+import { isTriggeredFromKB } from 'gatsby-theme-iterative-docs/src/utils/front/keyboard'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx
index 82feeedff0..0191c7d56f 100644
--- a/src/components/Home/UseCases/Video/index.tsx
+++ b/src/components/Home/UseCases/Video/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import TwoRowsButton from '../../../TwoRowsButton'
-import { logEvent } from '../../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/UseCases/index.tsx b/src/components/Home/UseCases/index.tsx
index 37fb4968c7..3c92d0757c 100644
--- a/src/components/Home/UseCases/index.tsx
+++ b/src/components/Home/UseCases/index.tsx
@@ -2,8 +2,8 @@ import React, { forwardRef } from 'react'
 import YoutubeVideo from './Video'
 import CollapsibleText from './CollapsibleText'
 
-import LayoutWidthContainer from '../../LayoutWidthContainer'
-import ShowOnly from '../../ShowOnly'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Home/WhatsNewModal/index.tsx b/src/components/Home/WhatsNewModal/index.tsx
index 670503a86c..90a4e7bae4 100644
--- a/src/components/Home/WhatsNewModal/index.tsx
+++ b/src/components/Home/WhatsNewModal/index.tsx
@@ -5,7 +5,7 @@ import { GatsbyImage } from 'gatsby-plugin-image'
 import cn from 'classnames'
 import FocusLock from 'react-focus-lock'
 
-import Link from '../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 
 import { ReactComponent as CloseSvg } from '../../../../static/img/close-icon.svg'
 
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 0467dd0891..124e3d63ee 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -4,12 +4,12 @@ import WhatsNewModal from './WhatsNewModal'
 import HeroSection from '../HeroSection'
 import SubscribeSection from '../SubscribeSection'
 import PromoSection from '../PromoSection'
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import LearnMore from './LearnMore'
 import LandingHero from './LandingHero'
 import Diagram from './Diagram'
 import UseCases from './UseCases'
-import { logEvent } from '../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/LayoutFooter/index.tsx b/src/components/LayoutFooter/index.tsx
index 1d68151531..5d9f7fe3e4 100644
--- a/src/components/LayoutFooter/index.tsx
+++ b/src/components/LayoutFooter/index.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
 import cn from 'classnames'
 
-import LayoutWidthContainer from '../LayoutWidthContainer'
-import Link from '../Link'
-import SocialIcon, { ISocialIcon } from '../SocialIcon'
-import ShowOnly from '../ShowOnly'
-import { getFirstPage } from '../../utils/shared/sidebar'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+import SocialIcon, {
+  ISocialIcon
+} from 'gatsby-theme-iterative-docs/src/components/SocialIcon'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
+import { getFirstPage } from 'gatsby-theme-iterative-docs/src/utils/shared/sidebar'
 
 import { ReactComponent as LogoSVG } from '../../../static/img/dvc_icon-color--square_vector.svg'
-import { ReactComponent as GithubSVG } from '../SocialIcon/github.svg'
-import { ReactComponent as TwitterSVG } from '../SocialIcon/twitter.svg'
-import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
+import { ReactComponent as GithubSVG } from 'gatsby-theme-iterative-docs/src/components/SocialIcon/github.svg'
+import { ReactComponent as TwitterSVG } from 'gatsby-theme-iterative-docs/src/components/SocialIcon/twitter.svg'
+import { ReactComponent as DiscordSVG } from 'gatsby-theme-iterative-docs/src/components/SocialIcon/discord.svg'
 import { ReactComponent as CmlSVG } from '../../../static/img/cml_icon-color--square_vector.svg'
 import { ReactComponent as StudioSVG } from '../../../static/img/studio_icon-color--square_vector.svg'
 import { ReactComponent as IterativeSVG } from '../../../static/img/iterative_icon-color--square_vector.svg'
diff --git a/src/components/LayoutHeader/Nav/LinkItems/index.tsx b/src/components/LayoutHeader/Nav/LinkItems/index.tsx
index ee086ccf3e..7dc0d1b437 100644
--- a/src/components/LayoutHeader/Nav/LinkItems/index.tsx
+++ b/src/components/LayoutHeader/Nav/LinkItems/index.tsx
@@ -1,14 +1,14 @@
 import React, { useRef, useState } from 'react'
 import cn from 'classnames'
 
-import Link from '../../../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import { OtherToolsPopup, CommunityPopup } from '../Popup'
 
 import { ReactComponent as ArrowUpSVG } from '../../../../../static/img/arrow-up-icon.svg'
 import { ReactComponent as ArrowDownSVG } from '../../../../../static/img/arrow-down-icon.svg'
 
-import { logEvent } from '../../../../utils/front/plausible'
-import { getFirstPage } from '../../../../utils/shared/sidebar'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
+import { getFirstPage } from 'gatsby-theme-iterative-docs/src/utils/shared/sidebar'
 
 const docsPage = getFirstPage()
 
diff --git a/src/components/LayoutHeader/Nav/Popup/index.tsx b/src/components/LayoutHeader/Nav/Popup/index.tsx
index e96ad5823d..4e5147a977 100644
--- a/src/components/LayoutHeader/Nav/Popup/index.tsx
+++ b/src/components/LayoutHeader/Nav/Popup/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import cn from 'classnames'
 
-import Link from '../../../Link'
-import { logEvent } from '../../../../utils/front/plausible'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import { ReactComponent as ExternalLinkIcon } from '../../../../../static/img/external-link-icon.svg'
 
diff --git a/src/components/LayoutHeader/Nav/SocialIcons/index.tsx b/src/components/LayoutHeader/Nav/SocialIcons/index.tsx
index 9b956d3c18..d8711a0e73 100644
--- a/src/components/LayoutHeader/Nav/SocialIcons/index.tsx
+++ b/src/components/LayoutHeader/Nav/SocialIcons/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 
-import SocialIcon from '../../../SocialIcon'
-import { ISocialIconProps } from '../../../SocialIcon'
+import SocialIcon, {
+  ISocialIconProps
+} from 'gatsby-theme-iterative-docs/src/components/SocialIcon'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/LayoutHeader/Nav/index.tsx b/src/components/LayoutHeader/Nav/index.tsx
index 9d697e1db0..fc281285d2 100644
--- a/src/components/LayoutHeader/Nav/index.tsx
+++ b/src/components/LayoutHeader/Nav/index.tsx
@@ -4,7 +4,7 @@ import PseudoButton from '../../PseudoButton'
 import SocialIcons from './SocialIcons'
 import LinkItems from './LinkItems'
 
-import { logEvent } from '../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/LayoutHeader/alert.tsx b/src/components/LayoutHeader/alert.tsx
index 3e1e1994d9..c3d07a6be8 100644
--- a/src/components/LayoutHeader/alert.tsx
+++ b/src/components/LayoutHeader/alert.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import React from 'react'
 
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 17158a17de..036514745d 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -3,8 +3,8 @@ import React from 'react'
 import includes from 'lodash/includes'
 
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
-import LayoutWidthContainer from '../LayoutWidthContainer'
-import Link from '../Link'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import Nav from './Nav'
 import {
   HamburgerMenu,
@@ -12,7 +12,7 @@ import {
   useHamburgerMenu
 } from '../HamburgerMenu'
 
-import { useHeaderIsScrolled } from '../../utils/front/scroll'
+import { useHeaderIsScrolled } from 'gatsby-theme-iterative-docs/src/utils/front/scroll'
 import { ReactComponent as LogoSVG } from '../../../static/img/dvc_icon-color--square_vector.svg'
 import * as styles from './styles.module.css'
 
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index 2899f8b6c8..a20bc7f823 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { IPageProps } from '../Page'
 import LayoutHeader from '../LayoutHeader'
 import LayoutFooter from '../LayoutFooter'
-import { handleFirstTab } from '../../utils/front/accessibility'
+import { handleFirstTab } from 'gatsby-theme-iterative-docs/src/utils/front/accessibility'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Page/DefaultSEO/index.tsx b/src/components/Page/DefaultSEO/index.tsx
index 664cb6dd1a..b806b08508 100644
--- a/src/components/Page/DefaultSEO/index.tsx
+++ b/src/components/Page/DefaultSEO/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Helmet from 'react-helmet'
 
-import { MetaProps } from '../../SEO'
-import getSiteMeta from '../../../queries/siteMeta'
+import { MetaProps } from 'gatsby-theme-iterative-docs/src/components/SEO'
+import getSiteMeta from 'gatsby-theme-iterative-docs/src/queries/siteMeta'
 
 interface IDefaultSEOProps {
   pathname: string
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
index f009dbde51..8adcef304c 100644
--- a/src/components/Page/index.tsx
+++ b/src/components/Page/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import MainLayout from '../MainLayout'
 import DefaultSEO from './DefaultSEO'
-import DocumentationLayout from '../Documentation/Layout'
+import DocumentationLayout from '../DocumentationLayout'
 import AlertLandingLayout from '../AlertLandingLayout'
 import Layout from '../Blog/Layout'
 
diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
index 90e2169620..c990988dac 100644
--- a/src/components/Page/utils.ts
+++ b/src/components/Page/utils.ts
@@ -1,9 +1,12 @@
 import { useEffect } from 'react'
 import { useLocation } from '@reach/router'
 
-import { handleFrontRedirect } from '../../utils/shared/redirects'
-import { scrollIntoLayout, getScrollNode } from '../../utils/front/scroll'
-import safeQuerySelector from '../../utils/front/safeQuerySelector'
+import { handleFrontRedirect } from 'gatsby-theme-iterative-docs/src/utils/shared/redirects'
+import {
+  scrollIntoLayout,
+  getScrollNode
+} from 'gatsby-theme-iterative-docs/src/utils/front/scroll'
+import safeQuerySelector from 'gatsby-theme-iterative-docs/src/utils/front/safeQuerySelector'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Paginator/index.tsx b/src/components/Paginator/index.tsx
index 7c65a7efdc..50d01b235b 100644
--- a/src/components/Paginator/index.tsx
+++ b/src/components/Paginator/index.tsx
@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useState } from 'react'
 import Helmet from 'react-helmet'
 
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import cn from 'classnames'
 
 import {
diff --git a/src/components/PromoSection/index.tsx b/src/components/PromoSection/index.tsx
index 58f9c2726b..a7f9b0e287 100644
--- a/src/components/PromoSection/index.tsx
+++ b/src/components/PromoSection/index.tsx
@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react'
 import cn from 'classnames'
 
-import LayoutWidthContainer from '../LayoutWidthContainer'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/PseudoButton/index.tsx b/src/components/PseudoButton/index.tsx
index a176e81293..b24f580bdd 100644
--- a/src/components/PseudoButton/index.tsx
+++ b/src/components/PseudoButton/index.tsx
@@ -1,7 +1,9 @@
 import cn from 'classnames'
 import React from 'react'
 
-import Link, { ILinkProps } from '../Link'
+import Link, {
+  ILinkProps
+} from 'gatsby-theme-iterative-docs/src/components/Link'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/SubscribeSection/Form/index.tsx b/src/components/SubscribeSection/Form/index.tsx
index 4014fb5ba5..f95ee047b8 100644
--- a/src/components/SubscribeSection/Form/index.tsx
+++ b/src/components/SubscribeSection/Form/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react'
 import { nanoid } from 'nanoid'
 
-import { logEvent } from '../../../utils/front/plausible'
+import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
 import * as styles from './styles.module.css'
 
diff --git a/src/components/Support/Popover/index.tsx b/src/components/Support/Popover/index.tsx
index 044f49d45f..0abbb870e5 100644
--- a/src/components/Support/Popover/index.tsx
+++ b/src/components/Support/Popover/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import ReactPopover, { PopoverProps } from 'react-popover'
 
-import { isTriggeredFromKB } from '../../../utils/front/keyboard'
+import { isTriggeredFromKB } from 'gatsby-theme-iterative-docs/src/utils/front/keyboard'
 
 import './styles.module.css'
 
diff --git a/src/components/Support/index.tsx b/src/components/Support/index.tsx
index 0be24c4eeb..5110c4c856 100644
--- a/src/components/Support/index.tsx
+++ b/src/components/Support/index.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 import cn from 'classnames'
 
 import PageContent from '../PageContent'
-import LayoutWidthContainer from '../LayoutWidthContainer'
-import ShowOnly from '../ShowOnly'
+import LayoutWidthContainer from 'gatsby-theme-iterative-docs/src/components/LayoutWidthContainer'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
 import HeroSection from '../HeroSection'
 import PromoSection from '../PromoSection'
-import Link from '../Link'
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
 import Popover from './Popover'
 
 import * as styles from './styles.module.css'
diff --git a/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
new file mode 100644
index 0000000000..4a26f782cb
--- /dev/null
+++ b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/InnerSidebar/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import BaseInnerSidebar, {
+  IInnerSidebarProps
+} from 'gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/InnerSidebar'
+import * as styles from 'gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/styles.module.css'
+import ShowOnly from 'gatsby-theme-iterative-docs/src/components/ShowOnly'
+import DownloadButton from '../../../../../../components/DownloadButton'
+
+const InnerSidebar: React.FC<IInnerSidebarProps> = ({
+  activePaths,
+  onClick
+}) => {
+  return (
+    <>
+      <BaseInnerSidebar activePaths={activePaths} onClick={onClick} />
+      <ShowOnly on="desktop">
+        <div className={styles.footer}>
+          <DownloadButton openTop />
+        </div>
+      </ShowOnly>
+    </>
+  )
+}
+
+export default InnerSidebar
diff --git a/src/components/Documentation/Layout/SidebarMenu/cml_bw_logo.svg b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/cml-icon.svg
similarity index 100%
rename from src/components/Documentation/Layout/SidebarMenu/cml_bw_logo.svg
rename to src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/cml-icon.svg
diff --git a/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/index.ts b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/index.ts
new file mode 100644
index 0000000000..b3747d7c37
--- /dev/null
+++ b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/index.ts
@@ -0,0 +1,13 @@
+import defaultIcons, {
+  SidebarIcons
+} from 'gatsby-theme-iterative-docs/src/components/Documentation/Layout/SidebarMenu/icons'
+import { ReactComponent as CMLIcon } from './cml-icon.svg'
+import { ReactComponent as StudioIcon } from './studio-icon.svg'
+
+const customizedIcons: SidebarIcons = {
+  ...defaultIcons,
+  cml: CMLIcon,
+  studio: StudioIcon
+}
+
+export default customizedIcons
diff --git a/src/components/Documentation/Layout/SidebarMenu/studio_gray_icon.svg b/src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/studio-icon.svg
similarity index 100%
rename from src/components/Documentation/Layout/SidebarMenu/studio_gray_icon.svg
rename to src/gatsby-theme-iterative-docs/components/Documentation/Layout/SidebarMenu/icons/studio-icon.svg
diff --git a/src/gatsby-theme-iterative-docs/redirects.js b/src/gatsby-theme-iterative-docs/redirects.js
new file mode 100644
index 0000000000..37e3368342
--- /dev/null
+++ b/src/gatsby-theme-iterative-docs/redirects.js
@@ -0,0 +1 @@
+module.exports = require('../../redirects-list.json')
diff --git a/src/gatsby-theme-iterative-docs/sidebar.js b/src/gatsby-theme-iterative-docs/sidebar.js
new file mode 100644
index 0000000000..cac7317e73
--- /dev/null
+++ b/src/gatsby-theme-iterative-docs/sidebar.js
@@ -0,0 +1 @@
+module.exports = require('../../content/docs/sidebar.json')
diff --git a/src/gatsby/models/blog/createPages.js b/src/gatsby/models/blog/createPages.js
index 8cda6d2e0a..5919a10e8f 100644
--- a/src/gatsby/models/blog/createPages.js
+++ b/src/gatsby/models/blog/createPages.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const tagToSlug = require('../../../utils/shared/tagToSlug')
+const tagToSlug = require('../../../../plugins/gatsby-theme-iterative-docs/src/utils/shared/tagToSlug')
 const { BLOG } = require('../../../consts')
 // Since blog pages and their indexes require a ton of image resizes, it's
 // useful to have an option to only generate a minimal set of these pages when
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index bd4dc11488..a24963c8ee 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import NotFound from '../components/NotFound'
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 
 const NotFoundPage: React.FC = () => (
   <>
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 3a210ff0ef..8920de567e 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Community from '../components/Community'
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 
 const CommunityPage: React.FC = () => (
   <>
diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx
index 48eed6f17d..4b3a216a8a 100644
--- a/src/pages/doc/user-guide/glossary.tsx
+++ b/src/pages/doc/user-guide/glossary.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import DocWithJsx from '../../../templates/doc-jsx'
-import AutoLinkElement from '../../../components/Documentation/WithJSX/AutoLinkElement'
-import useGlossary from '../../../utils/front/glossary'
+import AutoLinkElement from 'gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/AutoLinkElement'
+import useGlossary from 'gatsby-theme-iterative-docs/src/utils/front/glossary'
 
 const Glossary: React.FC = () => {
   const { contents } = useGlossary()
diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index 0af585c24b..7178b9dbfe 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Features from '../components/Features'
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 
 const FeaturesPage: React.FC = () => (
   <>
diff --git a/src/pages/support.tsx b/src/pages/support.tsx
index effca121a7..bf23dbe328 100644
--- a/src/pages/support.tsx
+++ b/src/pages/support.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 import Support from '../components/Support'
 
 const SupportPage: React.FC = () => (
diff --git a/src/server/middleware/redirects/index.js b/src/server/middleware/redirects/index.js
index c48b50080a..6d93db3282 100644
--- a/src/server/middleware/redirects/index.js
+++ b/src/server/middleware/redirects/index.js
@@ -1,4 +1,6 @@
-const { getRedirect } = require('../../../utils/shared/redirects')
+const {
+  getRedirect
+} = require('../../../../plugins/gatsby-theme-iterative-docs/src/utils/shared/redirects')
 const { parse } = require('url')
 const { stringify } = require('querystring')
 const { isProduction } = require('../../utils')
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 21f0701d76..6f84962854 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -2,10 +2,10 @@ import { graphql } from 'gatsby'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
 import React from 'react'
 
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 import Post from '../components/Blog/Post'
 
-import { ISocialIcon } from '../components/SocialIcon'
+import { ISocialIcon } from 'gatsby-theme-iterative-docs/src/components/SocialIcon'
 import { isProduction } from '../server/utils'
 
 export interface IBlogPostHeroPic {
diff --git a/src/templates/blog-tags.tsx b/src/templates/blog-tags.tsx
index 71d712d2c5..c430d915f1 100644
--- a/src/templates/blog-tags.tsx
+++ b/src/templates/blog-tags.tsx
@@ -6,7 +6,7 @@ import {
   IPaginatorLocationContextValue,
   PaginatorLocationContext
 } from '../components/Paginator/LocationContext'
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 import { IPaginatorPageInfo } from '../components/Paginator'
 import BlogTags from '../components/Blog/Tags'
 import { IBlogFeedPostList } from '../components/Blog/Feed'
diff --git a/src/templates/doc-jsx.tsx b/src/templates/doc-jsx.tsx
index 085f39c1f2..728953629d 100644
--- a/src/templates/doc-jsx.tsx
+++ b/src/templates/doc-jsx.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { getItemByPath } from '../utils/shared/sidebar'
+import { getItemByPath } from 'gatsby-theme-iterative-docs/src/utils/shared/sidebar'
 
-import SEO from '../components/SEO'
+import SEO from 'gatsby-theme-iterative-docs/src/components/SEO'
 
-import Documentation from '../components/Documentation/WithJSX'
+import Documentation from 'gatsby-theme-iterative-docs/src/components/Documentation/WithJSX'
 
 interface IJSXDocPageProps {
   title?: string
diff --git a/tsconfig.json b/tsconfig.json
index daee408527..2b2c6012b1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,12 @@
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
-    "alwaysStrict": true
+    "alwaysStrict": true,
+    "paths": {
+      "gatsby-theme-iterative-docs/*": [
+        "./plugins/gatsby-theme-iterative-docs/*"
+      ]
+    }
   },
   "include": ["./src/**/*", "./*.js"]
 }