base template

28a5c07c · Jeff Escalante · 4caa1a8c · 28a5c07c · 28a5c07c · 28a5c07c
Unverified Commit 28a5c07c authored 5 years ago by Jeff Escalante
Hide whitespace changes
Inline Side-by-side

Showing

with 450 additions and 300 deletions
+450 -300
--- a/website/.editorconfig
+++ b/website/.editorconfig
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab
+
+[{*.md,*.json}]
+max_line_length = null
--- a/website/.eslintrc.js
+++ b/website/.eslintrc.js
+module.exports = {
+  ...require('@hashicorp/nextjs-scripts/.eslintrc.js'),
+  ignorePatterns: ['public/'],
+}
--- a/website/.gitignore
+++ b/website/.gitignore
+node_modules
+.DS_Store
+.next
+out
+.mdx-data
--- a/website/Dockerfile
+++ b/website/Dockerfile
+FROM node:10.16.3-alpine
+RUN apk add --update --no-cache git make g++ automake autoconf libtool nasm libpng-dev
+
+COPY ./package.json /website/package.json
+COPY ./package-lock.json /website/package-lock.json
+WORKDIR /website
+RUN npm install
--- a/website/Gemfile
+++ b/website/Gemfile
-source "https://rubygems.org"
-
-gem "middleman-hashicorp", "0.3.44"
--- a/website/Gemfile.lock
+++ b/website/Gemfile.lock
-GEM
-  remote: https://rubygems.org/
-  specs:
-    activesupport (4.2.11.1)
-      i18n (~> 0.7)
-      minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
-      tzinfo (~> 1.1)
-    autoprefixer-rails (9.7.4)
-      execjs
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
-    builder (3.2.4)
-    capybara (2.4.4)
-      mime-types (>= 1.16)
-      nokogiri (>= 1.3.3)
-      rack (>= 1.0.0)
-      rack-test (>= 0.5.4)
-      xpath (~> 2.0)
-    chunky_png (1.3.11)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.12.2)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    erubis (2.7.0)
-    eventmachine (1.2.7)
-    execjs (2.7.0)
-    ffi (1.12.2)
-    haml (5.1.2)
-      temple (>= 0.8.0)
-      tilt
-    hike (1.2.3)
-    hooks (0.4.1)
-      uber (~> 0.0.14)
-    http_parser.rb (0.6.0)
-    i18n (0.7.0)
-    json (2.3.0)
-    kramdown (1.17.0)
-    listen (3.0.8)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    middleman (3.4.1)
-      coffee-script (~> 2.2)
-      compass (>= 1.0.0, < 2.0.0)
-      compass-import-once (= 1.0.5)
-      execjs (~> 2.0)
-      haml (>= 4.0.5)
-      kramdown (~> 1.2)
-      middleman-core (= 3.4.1)
-      middleman-sprockets (>= 3.1.2)
-      sass (>= 3.4.0, < 4.0)
-      uglifier (~> 2.5)
-    middleman-core (3.4.1)
-      activesupport (~> 4.1)
-      bundler (~> 1.1)
-      capybara (~> 2.4.4)
-      erubis
-      hooks (~> 0.3)
-      i18n (~> 0.7.0)
-      listen (~> 3.0.3)
-      padrino-helpers (~> 0.12.3)
-      rack (>= 1.4.5, < 2.0)
-      thor (>= 0.15.2, < 2.0)
-      tilt (~> 1.4.1, < 2.0)
-    middleman-hashicorp (0.3.44)
-      bootstrap-sass (~> 3.3)
-      builder (~> 3.2)
-      middleman (~> 3.4)
-      middleman-livereload (~> 3.4)
-      middleman-syntax (~> 3.0)
-      redcarpet (~> 3.3)
-      turbolinks (~> 5.0)
-    middleman-livereload (3.4.6)
-      em-websocket (~> 0.5.1)
-      middleman-core (>= 3.3)
-      rack-livereload (~> 0.3.15)
-    middleman-sprockets (3.5.0)
-      middleman-core (>= 3.3)
-      sprockets (~> 2.12.1)
-      sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.3.0)
-    middleman-syntax (3.2.0)
-      middleman-core (>= 3.2)
-      rouge (~> 3.2)
-    mime-types (3.3.1)
-      mime-types-data (~> 3.2015)
-    mime-types-data (3.2019.1009)
-    mini_portile2 (2.4.0)
-    minitest (5.14.0)
-    multi_json (1.14.1)
-    nokogiri (1.10.9)
-      mini_portile2 (~> 2.4.0)
-    padrino-helpers (0.12.9)
-      i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.12.9)
-      tilt (>= 1.4.1, < 3)
-    padrino-support (0.12.9)
-      activesupport (>= 3.1)
-    rack (1.6.13)
-    rack-livereload (0.3.17)
-      rack
-    rack-test (1.1.0)
-      rack (>= 1.0, < 3)
-    rb-fsevent (0.10.3)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    redcarpet (3.5.0)
-    rouge (3.16.0)
-    sass (3.4.25)
-    sassc (2.2.1)
-      ffi (~> 1.9)
-    sprockets (2.12.5)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-helpers (1.1.0)
-      sprockets (~> 2.0)
-    sprockets-sass (1.3.1)
-      sprockets (~> 2.0)
-      tilt (~> 1.1)
-    temple (0.8.2)
-    thor (1.0.1)
-    thread_safe (0.3.6)
-    tilt (1.4.1)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
-    tzinfo (1.2.6)
-      thread_safe (~> 0.1)
-    uber (0.0.15)
-    uglifier (2.7.2)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
-    xpath (2.1.0)
-      nokogiri (~> 1.3)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  middleman-hashicorp (= 0.3.44)
-
-BUNDLED WITH
-   1.17.3
--- a/website/Makefile
+++ b/website/Makefile
-VERSION?="0.3.44"
+# Default: run this if working on the website locally to run in watch mode.
+website:
+	@echo "==> Downloading latest Docker image..."
+	@docker pull hashicorp/vagrant-website
+	@echo "==> Starting website in Docker..."
+	@docker run \
+		--interactive \
+		--rm \
+		--tty \
+		--workdir "/website" \
+		--volume "$(shell pwd):/website" \
+		--volume "/website/node_modules" \
+		--publish "3000:3000" \
+		hashicorp/vagrant-website \
+		npm start

+# This command will generate a static version of the website to the "out" folder.
 build:
+	@echo "==> Downloading latest Docker image..."
+	@docker pull hashicorp/vagrant-website
 	@echo "==> Starting build in Docker..."
 	@docker run \
 		--interactive \
 		--rm \
 		--tty \
+		--workdir "/website" \
 		--volume "$(shell pwd):/website" \
-		-e "ENV=production" \
-		hashicorp/middleman-hashicorp:${VERSION} \
-		bundle exec middleman build --verbose --clean
+		--volume "/website/node_modules" \
+		hashicorp/vagrant-website \
+		npm run static

-website:
+# If you are changing node dependencies locally, run this to generate a new
+# local Docker image with the dependency changes included.
+build-image:
+	@echo "==> Building Docker image..."
+	@docker build -t hashicorp-vagrant-website-local .
+
+# Use this if you have run `build-image` to use the locally built image
+# rather than our CI-generated image to test dependency changes.
+website-local:
 	@echo "==> Starting website in Docker..."
 	@docker run \
 		--interactive \
 		--rm \
 		--tty \
-		--publish "4567:4567" \
-		--publish "35729:35729" \
+		--workdir "/website" \
 		--volume "$(shell pwd):/website" \
-		hashicorp/middleman-hashicorp:${VERSION}
+		--volume "/website/node_modules" \
+		--publish "3000:3000" \
+		hashicorp-vagrant-website-local \
+		npm start

-.PHONY: build website
+.DEFAULT_GOAL := website
+.PHONY: build build-image website website-local
--- a/website/README.md
+++ b/website/README.md
 # Vagrant Website

-This subdirectory contains the entire source for the [Vagrant Website][vagrant].
-This is a [Middleman][middleman] project, which builds a static site from these
-source files.
+[![Netlify Status](https://img.shields.io/netlify/f7fa8963-0022-4a0e-9ccf-f5385355906b?style=flat-square)](https://app.netlify.com/sites/vagrant-docs/deploys)

-## Contributions Welcome!
+This subdirectory contains the entire source for the [Vagrant Website](https://vagrant.io/). This is a [NextJS](https://nextjs.org/) project, which builds a static site from these source files.

-If you find a typo or you feel like you can improve the HTML, CSS, or
-JavaScript, we welcome contributions. Feel free to open issues or pull requests
-like any normal GitHub project, and we'll merge it in.
+## Contributions Welcome!

-See also the [Vagrant Contributing Guide](https://github.com/hashicorp/vagrant/blob/master/.github/CONTRIBUTING.md) for more details.
+If you find a typo or you feel like you can improve the HTML, CSS, or JavaScript, we welcome contributions. Feel free to open issues or pull requests like any normal GitHub project, and we'll merge it in 🚀

 ## Running the Site Locally

-Running the site locally is simple. Clone this repo and run `make website`.
+The website can be run locally through node.js or Docker. If you choose to run through Docker, everything will be a little bit slower due to the additional overhead, so for frequent contributors it may be worth it to use node.
+
+> **Note:** If you are using a text editor that uses a "safe write" save style such as **vim** or **goland**, this can cause issues with the live reload in development. If you turn off safe write, this should solve the problem. In vim, this can be done by running `:set backupcopy=yes`. In goland, search the settings for "safe write" and turn that setting off.
+
+### With Docker
+
+Running the site locally is simple. Provided you have Docker installed, clone this repo, run `make`, and then visit `http://localhost:3000`.
+
+The docker image is pre-built with all the website dependencies installed, which is what makes it so quick and simple, but also means if you need to change dependencies and test the changes within Docker, you'll need a new image. If this is something you need to do, you can run `make build-image` to generate a local Docker image with updated dependencies, then `make website-local` to use that image and preview.
+
+### With Node
+
+If your local development environment has a supported version (v10.0.0+) of [node installed](https://nodejs.org/en/) you can run:
+
+- `npm install`
+- `npm start`
+
+and then visit `http://localhost:3000`.
+
+If you pull down new code from github, you should run `npm install` again. Otherwise, there's no need to re-run `npm install` each time the site is run, you can just run `npm start` to get it going.
+
+## Editing Content
+
+Documentation content is written in [Markdown](https://www.markdownguide.org/cheat-sheet/) and you'll find all files listed under the `/pages` directory.
+
+To create a new page with Markdown, create a file ending in `.mdx` in the `pages/` directory. The path in the pages directory will be the URL route. For example, `pages/hello/world.mdx` will be served from the `/hello/world` URL.
+
+This file can be standard Markdown and also supports [YAML frontmatter](https://middlemanapp.com/basics/frontmatter/). YAML frontmatter is optional, there are defaults for all keys.
+
+```yaml
+---
+title: 'My Title'
+description: "A thorough, yet succinct description of the page's contents"
+---
+
+```
+
+The significant keys in the YAML frontmatter are:
+
+- `title` `(string)` - This is the title of the page that will be set in the HTML title.
+- `description` `(string)` - This is a description of the page that will be set in the HTML description.
+
+> ⚠️Since `api` is a reserved directory within NextJS, all `/api/**` pages are listed under the `/pages/api-docs` path.
+
+### Editing Sidebars
+
+The structure of the sidebars are controlled by files in the [`/data` directory](data).
+
+- Edit [this file](data/docs-navigation.js) to change the **docs** sidebar
+- Edit [this file](data/api-navigation.js) to change the **api** sidebar
+- Edit [this file](data/guides-navigation.js) to change the **guides** sidebar
+- Edit [this file](data/intro-navigation.js) to change the **intro** sidebar
+
+To nest sidebar items, you'll want to add a new `category` key/value accompanied by the appropriate embedded `content` values.
+
+- `category` values will be **directory names** within the `pages` directory
+- `content` values will be **file names** within their appropriately nested directory.
+
+### Creating New Pages
+
+There is currently a small bug with new page creation - if you create a new page and link it up via subnav data while the server is running, it will report an error saying the page was not found. This can be resolved by restarting the server.
+
+### Changing the Release Version
+
+To change the version of vagrant displayed for download on the website, head over to `data/version.js` and change the number there. It's important to note that the version number must match a version that has been released and is live on `releases.hashicorp.com` -- if it does not, the website will be unable to fetch links to the binaries and will not compile. So this version number should be changed _only after a release_.
+
+#### Displaying a Prerelease
+
+If there is a prerelease of any type that should be displayed on the downloads page, this can be done by editing `pages/downloads/index.jsx`. By default, the download component might look something like this:
+
+```jsx
+<ProductDownloader
+  product="Vagrant"
+  version={VERSION}
+  downloads={downloadData}
+  community="/resources"
+/>
+```
+
+To add a prerelease, an extra `prerelease` property can be added to the component as such:
+
+```jsx
+<ProductDownloader
+  product="Vagrant"
+  version={VERSION}
+  downloads={downloadData}
+  community="/resources"
+  prerelease={{
+    type: 'release candidate', // the type of prerelease: beta, release candidate, etc.
+    name: 'v1.0.0', // the name displayed in text on the website
+    version: '1.0.0-rc1', // the actual version tag that was pushed to releases.hashicorp.com
+  }}
+/>
+```
+
+This configuration would display something like the following text on the website, emphasis added to the configurable parameters:
+
+```
+A {{ release candidate }} for Vagrant {{ v1.0.0 }} is available! The release can be <a href='https://releases.hashicorp.com/vagrant/{{ 1.0.0-rc1 }}'>downloaded here</a>.
+```
+
+You may customize the parameters in any way you'd like. To remove a prerelease from the website, simply delete the `prerelease` paremeter from the above component.
+
+### Markdown Enhancements
+
+There are several custom markdown plugins that are available by default that enhance standard markdown to fit our use cases. This set of plugins introduces a couple instances of custom syntax, and a couple specific pitfalls that are not present by default with markdown, detailed below:
+
+- If you see the symbols `~>`, `->`, `=>`, or `!>`, these represent [custom alerts](https://github.com/hashicorp/remark-plugins/tree/master/plugins/paragraph-custom-alerts#paragraph-custom-alerts). These render as colored boxes to draw the user's attention to some type of aside.
+- If you see `@include '/some/path.mdx'`, this is a [markdown include](https://github.com/hashicorp/remark-plugins/tree/master/plugins/include-markdown#include-markdown-plugin). It's worth noting as well that all includes resolve from `website/pages/partials` by default.
+- If you see `# Headline ((#slug))`, this is an example of an [anchor link alias](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-link-aliases). It adds an extra permalink to a headline for compatibility and is removed from the output.
+- Due to [automatically generated permalinks](https://github.com/hashicorp/remark-plugins/tree/je.anchor-link-adjustments/plugins/anchor-links#anchor-links), any text changes to _headlines_ or _list items that begin with inline code_ can and will break existing permalinks. Be very cautious when changing either of these two text items.
+
+  Headlines are fairly self-explanitory, but here's an example of how list items that begin with inline code look.
+
+  ```markdown
+  - this is a normal list item
+  - `this` is a list item that begins with inline code
+  ```
+
+  Its worth noting that _only the inline code at the beginning of the list item_ will cause problems if changed. So if you changed the above markup to...
+
+  ```markdown
+  - lsdhfhksdjf
+  - `this` jsdhfkdsjhkdsfjh
+  ```
+
+  ...while it perhaps would not be an improved user experience, no links would break because of it. The best approach is to **avoid changing headlines and inline code at the start of a list item**. If you must change one of these items, make sure to tag someone from the digital marketing development team on your pull request, they will help to ensure as much compatibility as possible.
+
+### Redirects
+
+This website structures URLs based on the filesystem layout. This means that if a file is moved, removed, or a folder is re-organized, links will break. If a path change is necessary, it can be mitigated using redirects.
+
+To add a redirect, head over to the `_redirects` file - the format is fairly simple. On the left is the current path, and on the right is the path that should be redirected to. It's important to note that if there are links to a `.html` version of a page, that must also be explicitly redirected. For example:
+
+```
+/foo       /bar   301!
+/foo.html  /bar   301!
+```
+
+This redirect rule will send all incoming links to `/foo` and `/foo.html` to `/bar`. For more details on the redirects file format, [check out the docs on netlify](https://docs.netlify.com/routing/redirects/rewrites-proxies). Note that it is critical that `301!` is added to every one-to-one redirect - if it is left off the redirect may not work.
+
+There are a couple important caveats with redirects. First, redirects are applied at the hosting layer, and therefore will not work by default in local dev mode. To test in local dev mode, you can use [`netlify dev`](https://www.netlify.com/products/dev/), or just push a commit and check using the deploy preview.
+
+Second, redirects do not apply to client-side navigation. By default, all links in the navigation and docs sidebar will navigate purely on the client side, which makes navigation through the docs significantly faster, especially for those with low-end devices and/or weak internet connections. In the future, we plan to convert all internal links within docs pages to behave this way as well. This means that if there is a link on this website to a given piece of content that has changed locations in some way, we need to also _directly change existing links to the content_. This way, if a user clicks a link that navigates on the client side, or if they hit the url directly and the page renders from the server side, either one will work perfectly.
+
+Let's look at an example. Say you have a page called `/docs/foo` which needs to be moved to `/docs/nested/foo`. Additionally, this is a page that has been around for a while and we know there are links into `/docs/foo.html` left over from our previous website structure. First, we move the page, then adjust the docs sidenav, in `data/docs-navigation.js`. Find the category the page is in, and move it into the appropriate subcategory. Next, we add to `_redirects` as such:
+
+```
+/foo       /nested/foo  301!
+/foo.html  /nested/foo  301!
+```
+
+Finally, we run a global search for internal links to `/foo`, and make sure to adjust them to be `/nested/foo` - this is to ensure that client-side navigation still works correctly. _Adding a redirect alone is not enough_.
+
+One more example - let's say that content is being moved to an external website. A common example is guides moving to `learn.hashicorp.com`. In this case, we take all the same steps, except that we need to make a different type of change to the `docs-navigation` file. If previously the structure looked like:
+
+```js
+{
+  category: 'docs',
+  content: [
+    'foo'
+  ]
+}
+```
+
+If we no longer want the link to be in the side nav, we can simply remove it. If we do still want the link in the side nav, but pointing to an external destnation, we need to slightly change the structure as such:
+
+```js
+{
+  category: 'docs',
+  content: [
+    { title: 'Foo Title', href: 'https://learn.hashicorp.com/vault/foo' }
+  ]
+}
+```
+
+As the majority of items in the side nav are internal links, the structure makes it as easy as possible to represent these links. This alternate syntax is the most concise manner than an external link can be represented. External links can be used anywhere within the docs sidenav.
+
+It's also worth noting that it is possible to do glob-based redirects, for example matching `/docs/*`, and you may see this pattern in the `_redirects` file. This type of redirect is much higher risk and the behavior is a bit more nuanced, so if you need to add a glob redirect, please reach out to the website maintainers and ask about it first.

-Then open up `http://localhost:4567`. Note that some URLs you may need to append
-".html" to make them work (in the navigation).
+### Deployment

-[middleman]: https://www.middlemanapp.com
-[vagrant]: https://www.vagrantup.com
+This website is hosted on Netlify and configured to automatically deploy anytime you push code to the `stable-website` branch. Any time a pull request is submitted that changes files within the `website` folder, a deployment preview will appear in the github checks which can be used to validate the way docs changes will look live. Deployments from `stable-website` will look and behave the same way as deployment previews.
--- a/website/_redirects
+++ b/website/_redirects
+# REDIRECTS FILE
+#
+# See the README file in this directory for documentation. Please do not
+# modify or delete existing redirects without first verifying internally.
--- a/website/babel.config.js
+++ b/website/babel.config.js
+module.exports = {
+  presets: ['next/babel'],
+  plugins: ['import-glob-array'],
+}
--- a/website/components/footer/index.jsx
+++ b/website/components/footer/index.jsx
+import Link from 'next/link'
+
+export default function Footer({ openConsentManager }) {
+  return (
+    <footer className="g-footer">
+      <div className="g-container">
+        <div className="left">
+          <Link href="/intro">
+            <a>Intro</a>
+          </Link>
+          <Link href="/docs">
+            <a>Docs</a>
+          </Link>
+          <a href="https://www.amazon.com/gp/product/1449335837/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1449335837&linkCode=as2&tag=vagrant-20">
+            Book
+          </a>
+          <Link href="/vmware">
+            <a>VMWare</a>
+          </Link>
+          <a href="https://hashicorp.com/privacy">Privacy</a>
+          <Link href="/security">
+            <a>Security</a>
+          </Link>
+          <Link href="/files/press-kit.zip">
+            <a>Press Kit</a>
+          </Link>
+          <a onClick={openConsentManager}>Consent Manager</a>
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/website/components/footer/style.css
+++ b/website/components/footer/style.css
+.g-footer {
+  padding: 25px 0 17px 0;
+  flex-shrink: 0;
+  display: flex;
+
+  & .g-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  & a {
+    color: black;
+    opacity: 0.5;
+    transition: opacity 0.25s ease;
+    cursor: pointer;
+    display: inline-block;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  & .left > a {
+    margin-right: 20px;
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
--- a/website/components/subnav/index.jsx
+++ b/website/components/subnav/index.jsx
+import Subnav from '@hashicorp/react-subnav'
+import subnavItems from '../../data/subnav'
+import { useRouter } from 'next/router'
+
+export default function VagrantSubnav() {
+  const router = useRouter()
+  return (
+    <Subnav
+      titleLink={{
+        text: 'vagrant',
+        url: '/',
+      }}
+      ctaLinks={[
+        { text: 'GitHub', url: 'https://www.github.com/hashicorp/vagrant' },
+        { text: 'Download', url: '/downloads' },
+      ]}
+      currentPath={router.pathname}
+      menuItemsAlign="right"
+      menuItems={subnavItems}
+      constrainWidth
+    />
+  )
+}
--- a/website/config.rb
+++ b/website/config.rb
-set :base_url, "https://www.vagrantup.com/"
-
-set :vmware_utility_name, "vagrant-vmware-utility"
-set :vmware_utility_version, "1.0.9"
-
-activate :hashicorp do |h|
-  h.name         = "vagrant"
-  h.version      = "2.2.9"
-  h.github_slug  = "hashicorp/vagrant"
-  h.website_root = "website"
-end
-
-helpers do
-  # Returns a segment tracking ID such that local development is not
-  # tracked to production systems.
-  def segmentId()
-    if (ENV['ENV'] == 'production')
-      'wFMyBE4PJCZttWfu0pNhYdWr7ygW0io4'
-    else
-      '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
-    end
-  end
-
-  # Returns the FQDN of the image URL.
-  #
-  # @param [String] path
-  #
-  # @return [String]
-  def image_url(path)
-    File.join(base_url, image_path(path))
-  end
-
-  # Get the title for the page.
-  #
-  # @param [Middleman::Page] page
-  #
-  # @return [String]
-  def title_for(page)
-    if page && page.data.page_title
-      return "#{page.data.page_title} - Vagrant by HashiCorp"
-    end
-
-     "Vagrant by HashiCorp"
-   end
-
-  # Get the description for the page
-  #
-  # @param [Middleman::Page] page
-  #
-  # @return [String]
-  def description_for(page)
-    description = (page.data.description || "")
-      .gsub('"', '')
-      .gsub(/\n+/, ' ')
-      .squeeze(' ')
-
-    return escape_html(description)
-  end
-
-  # This helps by setting the "active" class for sidebar nav elements
-  # if the YAML frontmatter matches the expected value.
-  def sidebar_current(expected)
-    current = current_page.data.sidebar_current || ""
-    if current.start_with?(expected)
-      return " class=\"active\""
-    else
-      return ""
-    end
-  end
-
-  # Returns the id for this page.
-  # @return [String]
-  def body_id_for(page)
-    if !(name = page.data.sidebar_current).blank?
-      return "page-#{name.strip}"
-    end
-    if page.url == "/" || page.url == "/index.html"
-      return "page-home"
-    end
-    if !(title = page.data.page_title).blank?
-      return title
-        .downcase
-        .gsub('"', '')
-        .gsub(/[^\w]+/, '-')
-        .gsub(/_+/, '-')
-        .squeeze('-')
-        .squeeze(' ')
-    end
-    return ""
-  end
-
-  # Returns the list of classes for this page.
-  # @return [String]
-  def body_classes_for(page)
-    classes = []
-
-    if !(layout = page.data.layout).blank?
-      classes << "layout-#{page.data.layout}"
-    end
-
-    if !(title = page.data.page_title).blank?
-      title = title
-        .downcase
-        .gsub('"', '')
-        .gsub(/[^\w]+/, '-')
-        .gsub(/_+/, '-')
-        .squeeze('-')
-        .squeeze(' ')
-      classes << "page-#{title}"
-    end
-
-    return classes.join(" ")
-  end
-end
--- a/website/data/docs-navigation.js
+++ b/website/data/docs-navigation.js
+// The root folder for this documentation category is `pages/docs`
+//
+// - A string refers to the name of a file
+// - A "category" value refers to the name of a directory
+// - All directories must have an "index.mdx" file to serve as
+//   the landing page for the category, or a "name" property to
+//   serve as the category title in the sidebar
+
+export default []
--- a/website/data/intro-navigation.js
+++ b/website/data/intro-navigation.js
+// The root folder for this documentation category is `pages/vmware`
+//
+// - A string refers to the name of a file
+// - A "category" value refers to the name of a directory
+// - All directories must have an "index.mdx" file to serve as
+//   the landing page for the category, or a "name" property to
+//   serve as the category title in the sidebar
+
+export default []
--- a/website/data/subnav.js
+++ b/website/data/subnav.js
+export default [
+  {
+    text: 'Intro',
+    url: '/intro',
+    type: 'inbound',
+  },
+  {
+    text: 'Docs',
+    url: '/docs',
+    type: 'inbound',
+  },
+  {
+    text: 'Book',
+    url:
+      'https://www.amazon.com/gp/product/1449335837/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1449335837&linkCode=as2&tag=vagrant-20',
+    type: 'outbound',
+  },
+
+  {
+    text: 'VMWare',
+    url: '/vmware',
+    type: 'inbound',
+  },
+  {
+    text: 'Community',
+    url: '/community',
+    type: 'inbound',
+  },
+]
--- a/website/data/version.js
+++ b/website/data/version.js
+export default '2.2.8'
--- a/website/data/vmware-navigation.js
+++ b/website/data/vmware-navigation.js
+// The root folder for this documentation category is `pages/guides`
+//
+// - A string refers to the name of a file
+// - A "category" value refers to the name of a directory
+// - All directories must have an "index.mdx" file to serve as
+//   the landing page for the category, or a "name" property to
+//   serve as the category title in the sidebar
+
+export default []
--- a/website/layouts/docs.jsx
+++ b/website/layouts/docs.jsx
+import DocsPage from '@hashicorp/react-docs-page'
+import order from '../data/docs-navigation.js'
+import { frontMatter as data } from '../pages/docs/**/*.mdx'
+import { MDXProvider } from '@mdx-js/react'
+import Head from 'next/head'
+import Link from 'next/link'
+
+const DEFAULT_COMPONENTS = {}
+
+function DocsLayoutWrapper(pageMeta) {
+  function DocsLayout(props) {
+    return (
+      <MDXProvider components={DEFAULT_COMPONENTS}>
+        <DocsPage
+          {...props}
+          product="vagrant"
+          head={{
+            is: Head,
+            title: `${pageMeta.page_title} | Vagrant by HashiCorp`,
+            description: pageMeta.description,
+            siteName: 'Vagrant by HashiCorp',
+          }}
+          sidenav={{
+            Link,
+            category: 'docs',
+            currentPage: props.path,
+            data,
+            order,
+          }}
+          resourceURL={`https://github.com/hashicorp/vagrant/blob/master/website/pages/${pageMeta.__resourcePath}`}
+        />
+      </MDXProvider>
+    )
+  }
+
+  DocsLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
+
+  return DocsLayout
+}
+
+export default DocsLayoutWrapper