add website template (#200)

6 years ago · 1514ee1e27
parent 5826bf42fd
commit 1514ee1e27
64 changed files with 18174 additions and 0 deletions
--- a/website/.editorconfig
+++ b/website/.editorconfig
@ -0,0 +1,18 @@
+# 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
@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@hashicorp/nextjs-scripts/.eslintrc.js'),
+  ignorePatterns: ['public/'],
+}
--- a/website/.gitignore
+++ b/website/.gitignore
@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+.next
+out
+.mdx-data
--- a/website/.stylelintrc.js
+++ b/website/.stylelintrc.js
@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@hashicorp/nextjs-scripts/.stylelintrc.js'),
+  /* Specify overrides here */
+}
--- a/website/LICENSE.md
+++ b/website/LICENSE.md
@ -0,0 +1,10 @@
+# Proprietary License
+
+This license is temporary while a more official one is drafted. However,
+this should make it clear:
+
+The text contents of this website are MPL 2.0 licensed.
+
+The design contents of this website are proprietary and may not be reproduced
+or reused in any way other than to run the website locally. The license for
+the design is owned solely by HashiCorp, Inc.
--- a/website/README.md
+++ b/website/README.md
@ -0,0 +1,431 @@
+# Watchtower Documentation Website
+
+[![Netlify Status](https://img.shields.io/netlify/<NETLIFY-API-ID>?style=flat-square)](https://app.netlify.com/sites/<NETLIFY-SLUG>/deploys)
+
+This subdirectory contains the entire source for the [Watchtower Website](https://example.com/). This is a [NextJS](https://nextjs.org/) project, which builds a static site from these source files.
+
+<!--
+  This readme file contains several blocks of generated text, to make it easier to share common information
+  across documentation website readmes. To generate these blocks from their source, run `npm run generate:readme`
+
+  Any edits to the readme are welcome outside the clearly noted boundaries of the blocks. Alternately, a
+  block itself can be safely "forked" from the central implementation simply by removing the "BEGIN" and
+  "END" comments from around it.
+-->
+
+## Table of Contents
+
+- [Contributions](#contributions-welcome)
+- [Running the Site Locally](#running-the-site-locally)
+- [Editing Markdown Content](#editing-markdown-content)
+- [Editing Navigation Sidebars](#editing-navigation-sidebars)
+- [Changing the Release Version](#changing-the-release-version)
+- [Redirects](#redirects)
+- [Browser Support](#browser-support)
+- [Deployment](#deployment)
+
+<!-- BEGIN: contributions -->
+<!-- Generated text, do not edit directly -->
+
+## Contributions Welcome!
+
+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 🚀
+
+<!-- END: contributions -->
+
+## Running the Site Locally
+
+The website can be run locally through [node.js](https://nodejs.org). It works with any supported version. Node.js [can be installed quickly and easily via universal binary](https://nodejs.org).
+
+The first time you are running the site, you will need to run the command `npm install` to install dependencies. Any time after this, `npm start` can be used to run the site locally. It can be seen at `http://localhost:3000`. As you change content, the website will automatically reload to show the latest content.
+
+<!-- BEGIN: editing-markdown -->
+<!-- Generated text, do not edit directly -->
+
+## Editing Markdown 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.
+
+### 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.
+
+### Markdown Enhancements
+
+There are several custom markdown plugins that are available by default that enhance [standard markdown](https://commonmark.org/) 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, and that changes to partials will not live-reload the website.
+- 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.
+
+### Custom Components
+
+A number of custom [mdx components](https://mdxjs.com/) are available for use within any `.mdx` file. Each one is documented below:
+
+#### Tabs
+
+The `Tabs` component creates tabbed content of any type, but is often used for code examples given in different languages. Here's an example of how it looks from the Vagrant documentation website:
+
+![Tabs Component](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALZ4/Screen%20Recording%202020-06-11%20at%2006.03%20PM.gif?v=1de81ea720a8cc8ade83ca64fb0b9edd)
+
+It can be used as such within a markdown file:
+
+````mdx
+Normal **markdown** content.
+
+<Tabs>
+<Tab heading="CLI command">
+            <!-- Intentionally skipped line.. -->
+```shell-session
+$ command ...
+```
+            <!-- Intentionally skipped line.. -->
+</Tab>
+<Tab heading="API call using cURL">
+
+```shell-session
+$ curl ...
+```
+
+</Tab>
+</Tabs>
+
+Contined normal markdown content
+````
+
+The intentionally skipped line is a limitation of the mdx parser which is being actively worked on. All tabs must have a heading, and there is no limit to the number of tabs, though it is recommended to go for a maximum of three or four.
+
+#### Enterprise Alert
+
+This component provides a standard way to call out functionality as being present only in the enterprise version of the software. It can be presented in two contexts, inline or standalone. Here's an example of standalone usage from the Consul docs website:
+
+![Enterprise Alert Component - Standalone](https://p176.p0.n0.cdn.getcloudapp.com/items/WnubALp8/Screen%20Shot%202020-06-11%20at%206.06.03%20PM.png?v=d1505b90bdcbde6ed664831a885ea5fb)
+
+The standalone component can be used as such in markdown files:
+
+```mdx
+# Page Headline
+
+<EnterpriseAlert />
+
+Continued markdown content...
+```
+
+It can also receive custom text contents if you need to change the messaging but wish to retain the style. This will replace the text `This feature is available in all versions of Consul Enterprise.` with whatever you add. For example:
+
+```mdx
+# Page Headline
+
+<EnterpriseAlert>
+  My custom text here, and <a href="#">a link</a>!
+</EnterpriseAlert>
+
+Continued markdown content...
+```
+
+It's important to note that once you are adding custom content, it must be html and can not be markdown, as demonstrated above with the link.
+
+Now let's look at inline usage, here's an example:
+
+![Enterprise Alert Component - Inline](https://p176.p0.n0.cdn.getcloudapp.com/items/L1upYLEJ/Screen%20Shot%202020-06-11%20at%206.07.50%20PM.png?v=013ba439263de8292befbc851d31dd78)
+
+And here's how it could be used in your markdown document:
+
+```mdx
+### Some Enterprise Feature <EnterpriseAlert inline />
+
+Continued markdown content...
+```
+
+It's also worth noting that this component will automatically adjust to the correct product colors depending on the context.
+
+#### Other Components
+
+Other custom components can be made available on a per-site basis, the above are the standards. If you have questions about custom components that are not documented here, or have a request for a new custom component, please reach out to @hashicorp/digital-marketing.
+
+### Syntax Highlighting
+
+When using fenced code blocks, the recommendation is to tag the code block with a language so that it can be syntax highlighted. For example:
+
+````
+```
+// BAD: Code block with no language tag
+```
+
+```javascript
+// GOOD: Code block with a language tag
+```
+````
+
+Check out the [supported languages list](https://prismjs.com/#supported-languages) for the syntax highlighter we use if you want to double check the language name.
+
+It is also worth noting specifically that if you are using a code block that is an example of a terminal command, the correct language tag is `shell-session`. For example:
+
+🚫**BAD**: Using `shell`, `sh`, `bash`, or `plaintext` to represent a terminal command
+
+````
+```shell
+$ terraform apply
+```
+````
+
+✅**GOOD**: Using `shell-session` to represent a terminal command
+
+````
+```shell-session
+$ terraform apply
+```
+````
+
+<!-- END: editing-markdown -->
+
+<!-- BEGIN: editing-docs-sidebars -->
+<!-- Generated text, do not edit directly -->
+
+## Editing Navigation Sidebars
+
+The structure of the sidebars are controlled by files in the [`/data` directory](data). For example, [this file](data/docs-navigation.js) controls the **docs** sidebar. Within the `data` folder, any file with `-navigation` after it controls the navigation for the given section.
+
+The sidebar uses a simple recursive data structure to represent _files_ and _directories_. A file is represented by a string, and a directory is represented by an object. The sidebar is meant to reflect the structure of the docs within the filesystem while also allowing custom ordering. Let's look at an example. First, here's our example folder structure:
+
+```text
+.
+├── docs
+│   └── directory
+│       ├── index.mdx
+│       ├── file.mdx
+│       ├── another-file.mdx
+│       └── nested-directory
+│           ├── index.mdx
+│           └── nested-file.mdx
+```
+
+Here's how this folder structure could be represented as a sidebar navigation, in this example it would be the file `website/data/docs-navigation.js`:
+
+```js
+export default {
+  category: 'directory',
+  content: [
+    'file',
+    'another-file',
+    {
+      category: 'nested-directory',
+      content: ['nested-file'],
+    },
+  ],
+}
+```
+
+- `category` values will be **directory names** within the `pages/<section>` directory
+- `content` values will be **file names** within their appropriately nested directory
+
+A couple more important notes:
+
+- Within this data structure, ordering does not matter, but hierarchy does. So while you could put `file` and `another-file` in any order, or even leave one or both of them out, you could not decide to un-nest the `nested-directory` object without also un-nesting it in the filesystem.
+- The `sidebar_title` frontmatter property on each `mdx` page is responsible for displaying the human-readable page name in the navigation.
+- _By default_, every directory/category must have an `index.mdx` file. This file will be automatically added to the navigation as "Overview", and its `sidebar_title` property will set the human-readable name of the entire category.
+
+Below we will discuss a couple of more unusual but still helpful patterns.
+
+### Index-less Categories
+
+Sometimes you may want to include a category but not have a need for an index page for the category. This can be accomplished, but a human-readable category name needs to be set manually, since the category name is normally pulled from the `sidebar_title` property of the index page. Here's an example of how an index-less category might look:
+
+```text
+.
+├── docs
+│   └── indexless-category
+│       └── file.mdx
+```
+
+```js
+// website/data/docs-navigation.js
+export default {
+  category: 'indexless-category',
+  name: 'Indexless Category',
+  content: ['file'],
+}
+```
+
+The addition of the `name` property to a category object is all it takes to be able to skip the index file.
+
+### Custom or External Links
+
+Sometimes you may have a need to include a link that is not directly to a file within the docs hierarchy. This can also be supported using a different pattern. For example:
+
+```js
+export default {
+  category: 'directory',
+  content: [
+    'file',
+    'another-file',
+    { title: 'Tao of HashiCorp', href: 'https://www.hashicorp.com/tao-of-hashicorp' }
+    }
+  ]
+}
+```
+
+If the link provided in the `href` property is external, it will display a small icon indicating this. If it's internal, it will appear the same way as any other direct file link.
+
+<!-- END: editing-docs-sidebars -->
+
+<!-- BEGIN: releases -->
+<!-- Generated text, do not edit directly -->
+
+## Changing the Release Version
+
+To change the version 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="<Product>"
+  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="<Product>"
+  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 <Product> {{ v1.0.0 }} is available! The release can be <a href='https://releases.hashicorp.com/<product>/{{ 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.
+
+<!-- END: releases -->
+
+<!-- BEGIN: redirects -->
+<!-- Generated text, do not edit directly -->
+
+## 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/<product>/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.
+
+<!-- END: redirects -->
+
+<!-- BEGIN: browser-support -->
+<!-- Generated text, do not edit directly -->
+
+## Browser Support
+
+We support the following browsers targeting roughly the versions specified.
+
+| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_24x24.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_24x24.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_24x24.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_24x24.png) | ![Internet Explorer](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_24x24.png) |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| **Latest**                                                                                          | **Latest**                                                                                             | **Latest**                                                                                       | **Latest**                                                                                          | **11+**                                                                                                    |
+
+<!-- END: browser-support -->
+
+<!-- BEGIN: deployment -->
+<!-- Generated text, do not edit directly -->
+
+## Deployment
+
+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.
+
+<!-- END: deployment -->
--- a/website/_redirects
+++ b/website/_redirects
@ -0,0 +1,4 @@
+# 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
@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['next/babel'],
+  plugins: ['import-glob-array'],
+}
--- a/website/components/footer/index.jsx
+++ b/website/components/footer/index.jsx
@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export default function Footer({ openConsentManager }) {
+  return (
+    <footer className="g-footer">
+      <div className="g-container">
+        <div className="left">
+          <Link href="/docs">
+            <a>Docs</a>
+          </Link>
+          <a onClick={openConsentManager}>Consent Manager</a>
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/website/components/footer/style.css
+++ b/website/components/footer/style.css
@ -0,0 +1,32 @@
+.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
@ -0,0 +1,27 @@
+import Subnav from '@hashicorp/react-subnav'
+import { useRouter } from 'next/router'
+import subnavItems from 'data/navigation'
+import { productSlug } from 'data/metadata'
+
+export default function ProductSubnav() {
+  const router = useRouter()
+  return (
+    <Subnav
+      titleLink={{
+        text: productSlug,
+        url: '/',
+      }}
+      ctaLinks={[
+        {
+          text: 'GitHub',
+          url: `https://www.github.com/hashicorp/${productSlug}`,
+        },
+        { text: 'Download', url: '/downloads' },
+      ]}
+      currentPath={router.pathname}
+      menuItemsAlign="right"
+      menuItems={subnavItems}
+      constrainWidth
+    />
+  )
+}
--- a/website/data/docs-navigation.js
+++ b/website/data/docs-navigation.js
@ -0,0 +1,17 @@
+// 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 [
+  'example',
+  {
+    category: 'nested',
+    content: ['nested-example'],
+  },
+  '---',
+  { title: 'External Link', href: 'https://www.hashicorp.com' },
+]
--- a/website/data/metadata.js
+++ b/website/data/metadata.js
@ -0,0 +1,2 @@
+export const productName = 'Watchtower'
+export const productSlug = 'watchtower'
--- a/website/data/navigation.js
+++ b/website/data/navigation.js
@ -0,0 +1,12 @@
+export default [
+  {
+    text: 'Docs',
+    url: '/docs',
+    type: 'inbound',
+  },
+  {
+    text: 'Community',
+    url: '/community',
+    type: 'inbound',
+  },
+]
--- a/website/data/version.js
+++ b/website/data/version.js
@ -0,0 +1 @@
+export default '1.4.1'
--- a/website/jsconfig.json
+++ b/website/jsconfig.json
@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
--- a/website/layouts/docs.jsx
+++ b/website/layouts/docs.jsx
@ -0,0 +1,42 @@
+import DocsPage from '@hashicorp/react-docs-page'
+import order from 'data/docs-navigation.js'
+import { productName, productSlug } from 'data/metadata'
+import { frontMatter as data } from '../pages/docs/**/*.mdx'
+import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
+import Head from 'next/head'
+import Link from 'next/link'
+
+const MDXProvider = createMdxProvider({ product: 'watchtower' })
+
+function DocsLayoutWrapper(pageMeta) {
+  function DocsLayout(props) {
+    return (
+      <MDXProvider>
+        <DocsPage
+          {...props}
+          product={productSlug}
+          head={{
+            is: Head,
+            title: `${pageMeta.page_title} | ${productName} by HashiCorp`,
+            description: pageMeta.description,
+            siteName: `${productName} by HashiCorp`,
+          }}
+          sidenav={{
+            Link,
+            category: 'docs',
+            currentPage: props.path,
+            data,
+            order,
+          }}
+          resourceURL={`https://github.com/hashicorp/${productSlug}/blob/master/website/pages/${pageMeta.__resourcePath}`}
+        />
+      </MDXProvider>
+    )
+  }
+
+  DocsLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
+
+  return DocsLayout
+}
+
+export default DocsLayoutWrapper
--- a/website/layouts/index.jsx
+++ b/website/layouts/index.jsx
@ -0,0 +1,36 @@
+import DocsPage from '@hashicorp/react-docs-page'
+import Head from 'next/head'
+import Link from 'next/link'
+import { productName, productSlug } from 'data/metadata'
+
+function DefaultLayoutWrapper(pageMeta) {
+  function DefaultLayout(props) {
+    return (
+      <DocsPage
+        {...props}
+        product={productSlug}
+        head={{
+          is: Head,
+          title: `${pageMeta.page_title} | ${productName} by HashiCorp`,
+          description: pageMeta.description,
+          siteName: `${productName} by HashiCorp`,
+        }}
+        sidenav={{
+          Link,
+          category: 'docs',
+          currentPage: props.path,
+          data: [],
+          order: [],
+          disableFilter: true,
+        }}
+        resourceURL={`https://github.com/hashicorp/${productSlug}/blob/master/website/pages/${pageMeta.__resourcePath}`}
+      />
+    )
+  }
+
+  DefaultLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
+
+  return DefaultLayout
+}
+
+export default DefaultLayoutWrapper
--- a/website/netlify.toml
+++ b/website/netlify.toml
@ -0,0 +1,18 @@
+
+# This file sets configuration for Netlify
+# ref: https://www.netlify.com/docs/netlify-toml-reference/
+
+[build]
+  publish = "out"
+  command = "npm run static"
+
+[context.production]
+  environment = { HASHI_ENV = "production", NODE_ENV = "production"}
+
+[context.deploy-preview]
+  environment = { HASHI_ENV = "staging" }
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "SAMEORIGIN"
--- a/website/next.config.js
+++ b/website/next.config.js
@ -0,0 +1,16 @@
+const withHashicorp = require('@hashicorp/nextjs-scripts')
+const path = require('path')
+
+module.exports = withHashicorp({
+  defaultLayout: true,
+  transpileModules: ['is-absolute-url', '@hashicorp/react-mega-nav'],
+  mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
+})({
+  experimental: { modern: true },
+  env: {
+    HASHI_ENV: process.env.HASHI_ENV || 'development',
+    SEGMENT_WRITE_KEY: 'xxx',
+    BUGSNAG_CLIENT_KEY: 'xxx',
+    BUGSNAG_SERVER_KEY: 'xxx',
+  },
+})
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -0,0 +1,50 @@
+{
+  "name": "example-docs",
+  "description": "Documentation website for <product name>",
+  "version": "1.0.0",
+  "author": "HashiCorp",
+  "dependencies": {
+    "@hashicorp/nextjs-scripts": "^11.1.1",
+    "@hashicorp/react-content": "^4.0.1",
+    "@hashicorp/react-docs-page": "^4.0.1",
+    "@hashicorp/react-docs-sidenav": "^3.2.6",
+    "@hashicorp/react-global-styles": "^4.4.1",
+    "@hashicorp/react-head": "^1.1.2",
+    "@hashicorp/react-image": "^2.0.2",
+    "@hashicorp/react-mega-nav": "^4.0.1-2",
+    "@hashicorp/react-product-downloader": "^4.0.3",
+    "@hashicorp/react-section-header": "^2.0.1",
+    "@hashicorp/react-subnav": "^3.2.4",
+    "@hashicorp/react-vertical-text-block-list": "^2.0.2",
+    "babel-plugin-import-glob-array": "^0.2.0",
+    "next": "9.4.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "dart-linkcheck": "^2.0.15",
+    "glob": "^7.1.6",
+    "husky": "^4.2.5",
+    "post-npm-install": "^2.0.0",
+    "prettier": "^2.0.5"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "next-hashicorp precommit",
+      "post-merge": "post-npm-install",
+      "post-rebase": "post-npm-install"
+    }
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "node --max-old-space-size=2048 ./node_modules/.bin/next build",
+    "export": "node --max-old-space-size=2048 ./node_modules/.bin/next export",
+    "format": "next-hashicorp format",
+    "generate:component": "next-hashicorp generate component",
+    "generate:readme": "next-hashicorp markdown-blocks README.md",
+    "lint": "next-hashicorp lint",
+    "start": "rm -rf .next/cache/next-babel-loader/ && next dev",
+    "static": "npm run build && npm run export && cp _redirects out/.",
+    "linkcheck": "linkcheck <website url>"
+  }
+}
--- a/website/pages/404.jsx
+++ b/website/pages/404.jsx
@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { useEffect } from 'react'
+
+export default function NotFound() {
+  useEffect(() => {
+    if (
+      typeof window !== 'undefined' &&
+      typeof window?.analytics?.track === 'function' &&
+      typeof window?.document?.referrer === 'string' &&
+      typeof window?.location?.href === 'string'
+    )
+      window.analytics.track(window.location.href, {
+        category: '404 Response',
+        label: window.document.referrer || 'No Referrer',
+      })
+  }, [])
+
+  return (
+    <div id="p-404" className="g-grid-container">
+      <h1>Page Not Found</h1>
+      <p>
+        We&lsquo;re sorry but we can&lsquo;t find the page you&lsquo;re looking
+        for.
+      </p>
+      <p>
+        <Link href="/">
+          <a>Back to Home</a>
+        </Link>
+      </p>
+    </div>
+  )
+}
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@ -0,0 +1,80 @@
+import './style.css'
+import '@hashicorp/nextjs-scripts/lib/nprogress/style.css'
+
+import NProgress from '@hashicorp/nextjs-scripts/lib/nprogress'
+import createConsentManager from '@hashicorp/nextjs-scripts/lib/consent-manager'
+import useAnchorLinkAnalytics from '@hashicorp/nextjs-scripts/lib/anchor-link-analytics'
+import Router from 'next/router'
+import HashiHead from '@hashicorp/react-head'
+import Head from 'next/head'
+import { ErrorBoundary } from '@hashicorp/nextjs-scripts/lib/bugsnag'
+import MegaNav from '@hashicorp/react-mega-nav'
+import ProductSubnav from '../components/subnav'
+import Footer from 'components/footer'
+import Error from './_error'
+import { productName } from '../data/metadata'
+
+NProgress({ Router })
+const { ConsentManager, openConsentManager } = createConsentManager({
+  preset: 'oss',
+})
+
+function App({ Component, pageProps }) {
+  useAnchorLinkAnalytics()
+
+  return (
+    <ErrorBoundary FallbackComponent={Error}>
+      <HashiHead
+        is={Head}
+        title={`${productName} by HashiCorp`}
+        siteName={`${productName} by HashiCorp`}
+        description="Write your description here"
+        image="https://www.example.com/img/og-image.png"
+        stylesheet={[
+          {
+            href:
+              'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap',
+          },
+        ]}
+        icon={[{ href: '/favicon.ico' }]}
+        preload={[
+          { href: '/fonts/klavika/medium.woff2', as: 'font' },
+          { href: '/fonts/gilmer/light.woff2', as: 'font' },
+          { href: '/fonts/gilmer/regular.woff2', as: 'font' },
+          { href: '/fonts/gilmer/medium.woff2', as: 'font' },
+          { href: '/fonts/gilmer/bold.woff2', as: 'font' },
+          { href: '/fonts/metro-sans/book.woff2', as: 'font' },
+          { href: '/fonts/metro-sans/regular.woff2', as: 'font' },
+          { href: '/fonts/metro-sans/semi-bold.woff2', as: 'font' },
+          { href: '/fonts/metro-sans/bold.woff2', as: 'font' },
+          { href: '/fonts/dejavu/mono.woff2', as: 'font' },
+        ]}
+      />
+      <MegaNav product={productName} />
+      <ProductSubnav />
+      <div className="content">
+        <Component {...pageProps} />
+      </div>
+      <Footer openConsentManager={openConsentManager} />
+      <ConsentManager />
+    </ErrorBoundary>
+  )
+}
+
+App.getInitialProps = async ({ Component, ctx }) => {
+  let pageProps = {}
+
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx)
+  } else if (Component.isMDXComponent) {
+    // fix for https://github.com/mdx-js/mdx/issues/382
+    const mdxLayoutComponent = Component({}).props.originalType
+    if (mdxLayoutComponent.getInitialProps) {
+      pageProps = await mdxLayoutComponent.getInitialProps(ctx)
+    }
+  }
+
+  return { pageProps }
+}
+
+export default App
--- a/website/pages/_document.js
+++ b/website/pages/_document.js
@ -0,0 +1,27 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import HashiHead from '@hashicorp/react-head'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <html>
+        <HashiHead is={Head} />
+        <body>
+          <Main />
+          <NextScript />
+          <script
+            noModule
+            dangerouslySetInnerHTML={{
+              __html: `window.MSInputMethodContext && document.documentMode && document.write('<script src="/ie-custom-properties.js"><\\x2fscript>');`,
+            }}
+          />
+        </body>
+      </html>
+    )
+  }
+}
--- a/website/pages/_error.jsx
+++ b/website/pages/_error.jsx
@ -0,0 +1,14 @@
+import NotFound from './404'
+import Bugsnag from '@hashicorp/nextjs-scripts/lib/bugsnag'
+
+function Error({ statusCode }) {
+  return <NotFound statusCode={statusCode} />
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  if (err) Bugsnag.notify(err)
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+export default Error
--- a/website/pages/community/index.jsx
+++ b/website/pages/community/index.jsx
@ -0,0 +1,41 @@
+import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
+import SectionHeader from '@hashicorp/react-section-header'
+import Head from 'next/head'
+import { productName, productSlug } from 'data/metadata'
+
+export default function CommunityPage() {
+  return (
+    <div id="p-community">
+      <Head>
+        <title key="title">Community | {productName} by HashiCorp</title>
+      </Head>
+      <SectionHeader
+        headline="Community"
+        description={`${productName} is an open source project with a growing community. There are active, dedicated users willing to help you through various mediums.`}
+        use_h1={true}
+      />
+      <VerticalTextBlockList
+        data={[
+          {
+            header: 'IRC',
+            body: `#${productSlug} on freenode`,
+          },
+          {
+            header: 'Announcement List',
+            body:
+              '[HashiCorp Announcement Google Group](https://groups.google.com/group/hashicorp-announce)',
+          },
+          {
+            header: 'Bug Tracker',
+            body: `[Issue tracker on GitHub](https://github.com/hashicorp/${productSlug}/issues). Please only use this for reporting bugs. Do not ask for general help here. Use IRC or the mailing list for that.`,
+          },
+          {
+            header: 'Training',
+            body:
+              'Paid [HashiCorp training courses](https://www.hashicorp.com/training) are also available in a city near you. Private training courses are also available.',
+          },
+        ]}
+      />
+    </div>
+  )
+}
--- a/website/pages/community/style.css
+++ b/website/pages/community/style.css
@ -0,0 +1,8 @@
+#p-community {
+  max-width: var(--site-max-width);
+  margin: 72px auto;
+
+  & .g-section-header {
+    margin-bottom: 100px;
+  }
+}
--- a/website/pages/docs/example.mdx
+++ b/website/pages/docs/example.mdx
@ -0,0 +1,69 @@
+---
+layout: docs
+page_title: Markdown Examples
+sidebar_title: Examples
+description: |-
+  Write a description here, this appears in search engines and social shares
+---
+
+# Example Page
+
+This is an example of a typical documentation page. Below are demos of various markdown features that are available to docs authors.
+
+### Code Blocks
+
+```shell-session
+$ echo 'shell example'
+```
+
+```hcl
+# These control access to the key/value store.
+key_prefix "" {
+  policy = "read"
+}
+```
+
+### Includes
+
+@include 'example.mdx'
+
+### Anchor Links ((#anchors))
+
+- the following syntax can be used for anchor link aliases: ((#foo))
+- `foo` ((#bar)) - lists that begin with inline code get anchor links
+- normal list items do not though
+
+### Alerts
+
+=> This is a **success** alert
+
+-> This is an **info** alert
+
+~> This is a **warning** alert
+
+!> This is a **danger** alert
+
+### Custom MDX Components
+
+<EnterpriseAlert product="vault" />
+
+<Tabs>
+<Tab heading='Ruby'>
+
+Here's some tabbed content. Make sure to check out the other tab too!
+
+```ruby
+puts 'hello world'
+```
+
+</Tab>
+<Tab heading='Javascript'>
+
+Hi I'm the other tab, nice to meet you!
+
+```js
+console.log('hello world')
+```
+
+</Tab>
+</Tabs>
--- a/website/pages/docs/index.mdx
+++ b/website/pages/docs/index.mdx
@ -0,0 +1,30 @@
+---
+layout: docs
+page_title: Documentation
+sidebar_title: Overview
+description: |-
+  Write a description here, this appears in search engines and social shares
+---
+
+# Example Documentation
+
+This is typically a generic introduction page to the documentation. Below is a showcase of some of the custom components that are available within documentation pages.
+
+### Enterprise Alert
+
+<EnterpriseAlert />
+
+### Tabs
+
+<Tabs>
+<Tab heading='Tab 1'>
+
+Content for Tab 1
+
+</Tab>
+<Tab heading='Tab 2'>
+
+Content for Tab 2
+
+</Tab>
+</Tabs>
--- a/website/pages/docs/nested/index.mdx
+++ b/website/pages/docs/nested/index.mdx
@ -0,0 +1,11 @@
+---
+layout: docs
+page_title: Nested Content Index
+sidebar_title: Nested Content
+description: |-
+  Write a description here, this appears in search engines and social shares
+---
+
+# Example Page
+
+This is an example of a typical documentation page, nested within a folder. This is an index, or "overview" page.
--- a/website/pages/docs/nested/nested-example.mdx
+++ b/website/pages/docs/nested/nested-example.mdx
@ -0,0 +1,11 @@
+---
+layout: docs
+page_title: Nested Content
+sidebar_title: Nested Page
+description: |-
+  Write a description here, this appears in search engines and social shares
+---
+
+# Example Page
+
+This is an example of a typical documentation page, nested within a folder.
--- a/website/pages/downloads/index.jsx
+++ b/website/pages/downloads/index.jsx
@ -0,0 +1,36 @@
+import VERSION from 'data/version.js'
+import ProductDownloader from '@hashicorp/react-product-downloader'
+import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'
+import { productName, productSlug } from 'data/metadata'
+
+export default function DownloadsPage({ releaseData }) {
+  return (
+    <div id="p-downloads" className="g-container">
+      <HashiHead is={Head} title={`Downloads | ${productName} by HashiCorp`} />
+      <ProductDownloader
+        product={productName}
+        version={VERSION}
+        releaseData={releaseData}
+      />
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+  // NOTE: make sure to change "vault" here to your product slug
+  return fetch(`https://releases.hashicorp.com/vault/${VERSION}/index.json`)
+    .then((r) => r.json())
+    .then((releaseData) => ({ props: { releaseData } }))
+    .catch(() => {
+      throw new Error(
+        `--------------------------------------------------------
+        Unable to resolve version ${VERSION} on releases.hashicorp.com from link
+        <https://releases.hashicorp.com/${productSlug}/${VERSION}/index.json>. Usually this
+        means that the specified version has not yet been released. The downloads page
+        version can only be updated after the new version has been released, to ensure
+        that it works for all users.
+        ----------------------------------------------------------`
+      )
+    })
+}
--- a/website/pages/downloads/style.css
+++ b/website/pages/downloads/style.css
@ -0,0 +1,4 @@
+#p-downloads {
+  margin-top: 72px;
+  margin-bottom: 72px;
+}
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <p className="g-grid-container">Home page template</p>
+}
--- a/website/pages/home/style.css
+++ b/website/pages/home/style.css
@ -0,0 +1,3 @@
+p {
+  color: black;
+}
--- a/website/pages/index.jsx
+++ b/website/pages/index.jsx
@ -0,0 +1,2 @@
+import Homepage from './home'
+export default Homepage
--- a/website/pages/jsconfig.json
+++ b/website/pages/jsconfig.json
@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
--- a/website/pages/partials/example.mdx
+++ b/website/pages/partials/example.mdx
@ -0,0 +1 @@
+This is content from a partial!
--- a/website/pages/print.css
+++ b/website/pages/print.css
@ -0,0 +1,255 @@
+/* Print Styles - Hide Elements */
+@media print {
+  iframe,
+  .g-footer,
+  .g-mega-nav,
+  .g-product-subnav,
+  .g-subnav,
+  [aria-hidden='true'],
+  [id='__next-build-watcher'],
+  [id='edit-this-page'],
+  [id='jump-to-section'],
+  [id='sidebar'] {
+    display: none !important;
+  }
+}
+
+/* Print Styles - Page Spacing */
+@media print {
+  @page {
+    margin: 2cm 0.5cm;
+  }
+
+  @page :first {
+    margin-top: 0;
+  }
+
+  @page :last {
+    margin-top: 0;
+  }
+
+  blockquote {
+    break-inside: avoid;
+  }
+
+  body {
+    margin-bottom: 2cm;
+    margin-top: 2cm;
+  }
+
+  dl,
+  ol,
+  ul {
+    break-before: avoid;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
+    break-inside: avoid;
+  }
+
+  img {
+    break-inside: avoid;
+    break-after: avoid;
+  }
+
+  pre,
+  table {
+    break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap;
+  }
+}
+
+@media print {
+  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
+  .g-container {
+    /*
+    * A “measure” is the number of characters in a line of text.
+    * Long lines fatique readers as they find the start of a new line of text.
+    * It seems widely accepted that an ideal measure is 66 characters per line.
+    * An average character takes up .5em, and so we define a measure of 33em.
+    * See: https://webtypography.net/2.1.2
+    */
+    max-width: 33em;
+    padding-left: 0;
+    padding-right: 0;
+    word-break: break-word;
+  }
+
+  /* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
+  table {
+    margin-bottom: 0;
+    margin-top: 20px;
+  }
+}
+
+/* @todo: move print styles to @hashicorp/react-global-styles/global.css */
+@media print {
+  pre code,
+  code,
+  pre {
+    font-weight: inherit;
+  }
+
+  pre {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+    color: inherit;
+    padding: 0.5em;
+
+    & > code {
+      white-space: inherit;
+    }
+  }
+}
+
+/* @todo: move print styles to @hashicorp/react-content/dist/style.css */
+@media print {
+  .g-content {
+    & a {
+      color: inherit;
+      font-weight: 700;
+
+      &:not(.anchor) {
+        &::after {
+          background-color: transparent;
+          position: static;
+          opacity: 1;
+        }
+      }
+
+      &[href^='http'] {
+        &::after {
+          content: ' <' attr(href) '>';
+          font-size: 0.8em;
+          font-style: italic;
+          letter-spacing: -0.01875em;
+          vertical-align: top;
+        }
+      }
+
+      &:not([href^='http']) {
+        text-decoration: underline;
+      }
+
+      & > code {
+        color: inherit;
+        font-weight: 700;
+
+        &::before,
+        &::after {
+          content: none;
+        }
+      }
+    }
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+      & code {
+        background: none;
+        font-size: 1em;
+        padding: 0;
+      }
+    }
+
+    & h2 {
+      margin: 1em 0 0;
+    }
+
+    & h3 {
+      margin: 1em 0 0;
+      padding-bottom: 0.25em;
+    }
+
+    & img {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+      margin: 1em 0 0;
+    }
+
+    & ol,
+    & ul {
+      margin: 1em 0 0;
+
+      & li {
+        margin-bottom: 0;
+        margin-top: 0.5em;
+
+        & p:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    & p {
+      margin: 1em 0 0;
+    }
+
+    & pre {
+      background-color: transparent;
+      border-radius: 0;
+      margin: 1.5em 0 0;
+
+      & code {
+        background: transparent;
+        color: inherit;
+      }
+    }
+
+    & dd,
+    & dt,
+    & li,
+    & p,
+    & td,
+    & th {
+      & > :not(pre) code,
+      & > code {
+        background: transparent;
+        font-weight: 700;
+        padding: 0;
+      }
+    }
+
+    & .alert.alert-danger,
+    & .alert.alert-info,
+    & .alert.alert-success,
+    & .alert.alert-warning {
+      background-color: transparent;
+    }
+  }
+}
+
+/* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
+@media print {
+  .hljs {
+    & * {
+      color: inherit;
+    }
+  }
+}
+
+/* @todo: remove when working on website/components/docs-page/style.css */
+@media print {
+  #p-docs {
+    & #inner {
+      overflow: visible;
+      width: auto;
+
+      & pre,
+      & code {
+        font-size: 0.844rem;
+      }
+    }
+  }
+}
--- a/website/pages/style.css
+++ b/website/pages/style.css
@ -0,0 +1,143 @@
+/* Global Component Styles */
+@import '~@hashicorp/react-global-styles/style.css';
+@import '~@hashicorp/nextjs-scripts/prism/style.css';
+@import '~@hashicorp/react-global-styles/custom-properties/color.css';
+@import '~@hashicorp/react-global-styles/custom-properties/font.css';
+@import '~@hashicorp/react-global-styles/_temporary-to-remove/layout.css';
+@import '~@hashicorp/react-global-styles/_temporary-to-remove/tables.css';
+
+@import '~@hashicorp/react-button/dist/style.css';
+@import '~@hashicorp/react-consent-manager/dist/style.css';
+@import '~@hashicorp/react-toggle/dist/style.css';
+@import '~@hashicorp/react-section-header/dist/style.css';
+@import '~@hashicorp/react-product-downloader/dist/style.css';
+@import '~@hashicorp/react-vertical-text-block-list/dist/style.css';
+@import '~@hashicorp/react-docs-sidenav/dist/style.css';
+@import '~@hashicorp/react-content/dist/style.css';
+@import '~@hashicorp/react-subnav/dist/style.css';
+@import '~@hashicorp/react-tabs/dist/style.css';
+@import '~@hashicorp/react-enterprise-alert/dist/style.css';
+@import '~@hashicorp/react-mega-nav/style.css';
+@import '~@hashicorp/react-docs-page/style.css';
+
+/* Local Components */
+@import '../components/footer/style.css';
+
+/* Local Pages */
+@import './downloads/style.css';
+@import './community/style.css';
+@import './home/style.css';
+
+/* Print Styles */
+@import './print.css';
+
+/* Expand content so footer is always at the bottom */
+.__next > .content {
+  min-height: calc(100vh - 260px);
+}
+
+/*
+ * About this selector:
+ * `.g-subnav ~ *` finds all elements after the navigation.
+ * `:target` finds the active permalink on the page.
+ *
+ * About this style:
+ * `scroll-margin-top` adjusts the vertical scroll of a permalink.
+ * `64px` adjusts the scroll to account for the navigation.
+ * `0.5em` further adjusts the scroll to give the permalink breathing room.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
+ */
+.g-subnav ~ * :target {
+  scroll-margin-top: calc(64px + 0.5em);
+}
+
+/* Sticky Footer */
+.content {
+  min-height: calc(100vh - 260px);
+}
+
+/* Web Fonts */
+@font-face {
+  font-family: 'klavika-web';
+  src: url('/fonts/klavika/medium.woff2') format('woff2'),
+    url('/fonts/klavika/medium.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Display Font (Gilmer) */
+@font-face {
+  font-family: 'gilmer-web';
+  src: url('/fonts/gilmer/light.woff2') format('woff2'),
+    url('/fonts/gilmer/light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'gilmer-web';
+  src: url('/fonts/gilmer/regular.woff2') format('woff2'),
+    url('/fonts/gilmer/regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'gilmer-web';
+  src: url('/fonts/gilmer/medium.woff2') format('woff2'),
+    url('/fonts/gilmer/medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'gilmer-web';
+  src: url('/fonts/gilmer/bold.woff2') format('woff2'),
+    url('/fonts/gilmer/bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Body Font (Metro) */
+@font-face {
+  font-family: 'metro-web';
+  src: url('/fonts/metro-sans/book.woff2') format('woff2'),
+    url('/fonts/metro-sans/book.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'metro-web';
+  src: url('/fonts/metro-sans/regular.woff2') format('woff2'),
+    url('/fonts/metro-sans/regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'metro-web';
+  src: url('/fonts/metro-sans/semi-bold.woff2') format('woff2'),
+    url('/fonts/metro-sans/semi-bold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'metro-web';
+  src: url('/fonts/metro-sans/bold.woff2') format('woff2'),
+    url('/fonts/metro-sans/bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Code Font (Deja Vu) */
+@font-face {
+  font-family: 'dejavu-sans-mono-web';
+  src: url('/fonts/dejavu/mono.woff2') format('woff2'),
+    url('/fonts/dejavu/mono.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+}
--- a/website/prettier.config.js
+++ b/website/prettier.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@hashicorp/nextjs-scripts/prettier.config.js'),
+}
--- a/website/public/fonts/dejavu/mono.woff
+++ b/website/public/fonts/dejavu/mono.woff
--- a/website/public/fonts/dejavu/mono.woff2
+++ b/website/public/fonts/dejavu/mono.woff2
--- a/website/public/fonts/gilmer/bold.woff
+++ b/website/public/fonts/gilmer/bold.woff
--- a/website/public/fonts/gilmer/bold.woff2
+++ b/website/public/fonts/gilmer/bold.woff2
--- a/website/public/fonts/gilmer/light.woff
+++ b/website/public/fonts/gilmer/light.woff
--- a/website/public/fonts/gilmer/light.woff2
+++ b/website/public/fonts/gilmer/light.woff2
--- a/website/public/fonts/gilmer/medium.woff
+++ b/website/public/fonts/gilmer/medium.woff
--- a/website/public/fonts/gilmer/medium.woff2
+++ b/website/public/fonts/gilmer/medium.woff2
--- a/website/public/fonts/gilmer/regular.woff
+++ b/website/public/fonts/gilmer/regular.woff
--- a/website/public/fonts/gilmer/regular.woff2
+++ b/website/public/fonts/gilmer/regular.woff2
--- a/website/public/fonts/klavika/medium.woff
+++ b/website/public/fonts/klavika/medium.woff
--- a/website/public/fonts/klavika/medium.woff2
+++ b/website/public/fonts/klavika/medium.woff2
--- a/website/public/fonts/metro-sans/bold.woff
+++ b/website/public/fonts/metro-sans/bold.woff
--- a/website/public/fonts/metro-sans/bold.woff2
+++ b/website/public/fonts/metro-sans/bold.woff2
--- a/website/public/fonts/metro-sans/book.woff
+++ b/website/public/fonts/metro-sans/book.woff
--- a/website/public/fonts/metro-sans/book.woff2
+++ b/website/public/fonts/metro-sans/book.woff2
--- a/website/public/fonts/metro-sans/regular.woff
+++ b/website/public/fonts/metro-sans/regular.woff
--- a/website/public/fonts/metro-sans/regular.woff2
+++ b/website/public/fonts/metro-sans/regular.woff2
--- a/website/public/fonts/metro-sans/semi-bold.woff
+++ b/website/public/fonts/metro-sans/semi-bold.woff
--- a/website/public/fonts/metro-sans/semi-bold.woff2
+++ b/website/public/fonts/metro-sans/semi-bold.woff2
--- a/website/public/ie-custom-properties.js
+++ b/website/public/ie-custom-properties.js
@ -0,0 +1,769 @@
+/*! ie11CustomProperties.js v3.1.0 | MIT License | https://git.io/fjXMN */
+!(function () {
+  'use strict'
+
+  // check for support
+  var testEl = document.createElement('i')
+  testEl.style.setProperty('--x', 'y')
+  if (testEl.style.getPropertyValue('--x') === 'y' || !testEl.msMatchesSelector)
+    return
+
+  if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector
+
+  var listeners = [],
+    root = document,
+    Observer
+
+  function qsa(el, selector) {
+    try {
+      return el.querySelectorAll(selector)
+    } catch (e) {
+      // console.warn('the Selector '+selector+' can not be parsed');
+      return []
+    }
+  }
+  function onElement(selector, callback) {
+    var listener = {
+      selector: selector,
+      callback: callback,
+      elements: new WeakMap(),
+    }
+    var els = qsa(root, listener.selector),
+      i = 0,
+      el
+    while ((el = els[i++])) {
+      listener.elements.set(el, true)
+      listener.callback.call(el, el)
+    }
+    listeners.push(listener)
+    if (!Observer) {
+      Observer = new MutationObserver(checkMutations)
+      Observer.observe(root, {
+        childList: true,
+        subtree: true,
+      })
+    }
+    checkListener(listener)
+  }
+  function checkListener(listener, target) {
+    var i = 0,
+      el,
+      els = []
+    try {
+      target && target.matches(listener.selector) && els.push(target)
+    } catch (e) {}
+    if (loaded) {
+      // ok? check inside node on innerHTML - only when loaded
+      Array.prototype.push.apply(els, qsa(target || root, listener.selector))
+    }
+    while ((el = els[i++])) {
+      if (listener.elements.has(el)) continue
+      listener.elements.set(el, true)
+      listener.callback.call(el, el)
+    }
+  }
+  function checkListeners(inside) {
+    var i = 0,
+      listener
+    while ((listener = listeners[i++])) checkListener(listener, inside)
+  }
+  function checkMutations(mutations) {
+    var j = 0,
+      i,
+      mutation,
+      nodes,
+      target
+    while ((mutation = mutations[j++])) {
+      ;(nodes = mutation.addedNodes), (i = 0)
+      while ((target = nodes[i++]))
+        target.nodeType === 1 && checkListeners(target)
+    }
+  }
+
+  var loaded = false
+  document.addEventListener('DOMContentLoaded', function () {
+    loaded = true
+  })
+
+  // svg polyfills
+  function copyProperty(prop, from, to) {
+    var desc = Object.getOwnPropertyDescriptor(from, prop)
+    Object.defineProperty(to, prop, desc)
+  }
+  if (!('classList' in Element.prototype)) {
+    copyProperty('classList', HTMLElement.prototype, Element.prototype)
+  }
+  if (!('innerHTML' in Element.prototype)) {
+    copyProperty('innerHTML', HTMLElement.prototype, Element.prototype)
+  }
+  if (!('sheet' in SVGStyleElement.prototype)) {
+    Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
+      get: function () {
+        var all = document.styleSheets,
+          i = 0,
+          sheet
+        while ((sheet = all[i++])) {
+          if (sheet.ownerNode === this) return sheet
+        }
+      },
+    })
+  }
+
+  // main logic
+
+  // cached regexps, better performance
+  const regFindSetters = /([\s{;])(--([A-Za-z0-9-_]*)\s*:([^;!}{]+)(!important)?)(?=\s*([;}]|$))/g
+  const regFindGetters = /([{;]\s*)([A-Za-z0-9-_]+\s*:[^;}{]*var\([^!;}{]+)(!important)?(?=\s*([;}$]|$))/g
+  const regRuleIEGetters = /-ieVar-([^:]+):/g
+  const regRuleIESetters = /-ie-([^};]+)/g
+  //const regHasVar = /var\(/;
+  const regPseudos = /:(hover|active|focus|target|visited|link|:before|:after|:first-letter|:first-line)/
+
+  onElement('link[rel="stylesheet"]', function (el) {
+    fetchCss(el.href, function (css) {
+      var newCss = rewriteCss(css)
+      if (css === newCss) return
+      newCss = relToAbs(el.href, newCss)
+      el.disabled = true
+      var style = document.createElement('style')
+      if (el.media) style.setAttribute('media', el.media)
+      el.parentNode.insertBefore(style, el)
+      activateStyleElement(style, newCss)
+    })
+  })
+
+  function foundStyle(el) {
+    if (el.ieCP_polyfilled) return
+    if (el.ieCP_elementSheet) return
+    var css = el.innerHTML
+    var newCss = rewriteCss(css)
+    if (css === newCss) return
+    activateStyleElement(el, newCss)
+  }
+  onElement('style', foundStyle)
+  // immediate, to pass w3c-tests, bud its a bad idea
+  // addEventListener('DOMNodeInserted',function(e){ e.target.tagName === 'STYLE' && foundStyle(e.target); });
+
+  onElement('[ie-style]', function (el) {
+    var newCss = rewriteCss('{' + el.getAttribute('ie-style')).substr(1)
+    el.style.cssText += ';' + newCss
+    var found = parseRewrittenStyle(el.style)
+    if (found.getters) addGetterElement(el, found.getters, '%styleAttr')
+    if (found.setters) addSetterElement(el, found.setters)
+  })
+
+  function relToAbs(base, css) {
+    return css.replace(/url\(([^)]+)\)/g, function ($0, $1) {
+      $1 = $1.trim().replace(/(^['"]|['"]$)/g, '')
+      if ($1.match(/^([a-z]+:|\/)/)) return $0
+      base = base.replace(/\?.*/, '')
+      return 'url(' + base + './../' + $1 + ')'
+    })
+  }
+
+  // ie has a bug, where unknown properties at pseudo-selectors are computed at the element
+  // #el::after { -content:'x'; } => getComputedStyle(el)['-content'] == 'x'
+  // should we add something like -ieVar-pseudo_after-content:'x'?
+  function rewriteCss(css) {
+    /* uncomment if spec finished and needed by someone
+		css = css.replace(/@property ([^{]+){([^}]+)}/, function($0, prop, body){
+			prop = prop.trim();
+			const declaration = {name:prop};
+			body.split(';').forEach(function(pair){
+				const x = pair.split(':');
+				if (x[1]) declaration[ x[0].trim() ] = x[1];
+			});
+			declaration['inherits'] = declaration['inherits'].trim()==='true' ? true : false;
+			declaration['initialValue'] = declaration['initial-value'];
+			CSS.registerProperty(declaration)
+			return '/*\n @property ... removed \n*'+'/';
+		});
+		*/
+    return css
+      .replace(regFindSetters, function ($0, $1, $2, $3, $4, important) {
+        return (
+          $1 + '-ie-' + (important ? '❗' : '') + $3 + ':' + encodeValue($4)
+        )
+      })
+      .replace(regFindGetters, function ($0, $1, $2, important) {
+        return $1 + '-ieVar-' + (important ? '❗' : '') + $2 + '; ' + $2 // keep the original, so chaining works "--x:var(--y)"
+      })
+  }
+  function encodeValue(value) {
+    return value
+    return value.replace(/ /g, '␣')
+  }
+  const keywords = { initial: 1, inherit: 1, revert: 1, unset: 1 }
+  function decodeValue(value) {
+    return value
+    if (value === undefined) return
+    value = value.replace(/␣/g, ' ')
+    const trimmed = value.trim()
+    if (keywords[trimmed]) return trimmed
+    return value
+  }
+
+  // beta
+  const styles_of_getter_properties = {}
+
+  function parseRewrittenStyle(style) {
+    // less memory then parameter cssText?
+
+    // beta
+    style['z-index'] // ie11 can access unknown properties in stylesheets only if accessed a dashed known property
+
+    const cssText = style.cssText
+    var matchesGetters = cssText.match(regRuleIEGetters),
+      j,
+      match
+    if (matchesGetters) {
+      var getters = [] // eg. [border,color]
+      for (j = 0; (match = matchesGetters[j++]); ) {
+        let propName = match.slice(7, -1)
+        if (propName[0] === '❗') propName = propName.substr(1)
+        getters.push(propName)
+
+        // beta
+        if (!styles_of_getter_properties[propName])
+          styles_of_getter_properties[propName] = []
+        styles_of_getter_properties[propName].push(style)
+      }
+    }
+    var matchesSetters = cssText.match(regRuleIESetters)
+    if (matchesSetters) {
+      var setters = {} // eg. [--color:#fff, --padding:10px];
+      for (j = 0; (match = matchesSetters[j++]); ) {
+        let x = match.substr(4).split(':')
+        let propName = x[0]
+        let propValue = x[1]
+        if (propName[0] === '❗') propName = propName.substr(1)
+        setters[propName] = propValue
+      }
+    }
+    return { getters: getters, setters: setters }
+  }
+  function activateStyleElement(style, css) {
+    style.innerHTML = css
+    style.ieCP_polyfilled = true
+    var rules = style.sheet.rules,
+      i = 0,
+      rule // cssRules = CSSRuleList, rules = MSCSSRuleList
+    while ((rule = rules[i++])) {
+      const found = parseRewrittenStyle(rule.style)
+      if (found.getters) addGettersSelector(rule.selectorText, found.getters)
+      if (found.setters) addSettersSelector(rule.selectorText, found.setters)
+
+      // mediaQueries: redraw the hole document
+      // better add events for each element?
+      const media =
+        rule.parentRule &&
+        rule.parentRule.media &&
+        rule.parentRule.media.mediaText
+      if (media && (found.getters || found.setters)) {
+        matchMedia(media).addListener(function () {
+          drawTree(document.documentElement)
+        })
+      }
+    }
+
+    // beta
+    redrawStyleSheets()
+  }
+
+  function addGettersSelector(selector, properties) {
+    selectorAddPseudoListeners(selector)
+    onElement(unPseudo(selector), function (el) {
+      addGetterElement(el, properties, selector)
+      drawElement(el)
+    })
+  }
+  function addGetterElement(el, properties, selector) {
+    var i = 0,
+      prop,
+      j
+    const selectors = selector.split(',') // split grouped selectors
+    el.setAttribute('iecp-needed', true)
+    if (!el.ieCPSelectors) el.ieCPSelectors = {}
+    while ((prop = properties[i++])) {
+      for (j = 0; (selector = selectors[j++]); ) {
+        const parts = selector.trim().split('::')
+        if (!el.ieCPSelectors[prop]) el.ieCPSelectors[prop] = []
+        el.ieCPSelectors[prop].push({
+          selector: parts[0],
+          pseudo: parts[1] ? '::' + parts[1] : '',
+        })
+      }
+    }
+  }
+  function addSettersSelector(selector, propVals) {
+    selectorAddPseudoListeners(selector)
+    onElement(unPseudo(selector), function (el) {
+      addSetterElement(el, propVals)
+    })
+  }
+  function addSetterElement(el, propVals) {
+    if (!el.ieCP_setters) el.ieCP_setters = {}
+    for (var prop in propVals) {
+      // eg. {foo:#fff, bar:baz}
+      el.ieCP_setters['--' + prop] = 1
+    }
+    drawTree(el)
+  }
+
+  //beta
+  function redrawStyleSheets() {
+    for (var prop in styles_of_getter_properties) {
+      let styles = styles_of_getter_properties[prop]
+      for (var i = 0, style; (style = styles[i++]); ) {
+        if (style.owningElement) continue
+        var value = style['-ieVar-' + prop]
+        if (!value) continue
+        value = styleComputeValueWidthVars(
+          getComputedStyle(document.documentElement),
+          value
+        )
+        if (value === '') continue
+        try {
+          style[prop] = value
+        } catch (e) {}
+      }
+    }
+  }
+
+  const pseudos = {
+    hover: {
+      on: 'mouseenter',
+      off: 'mouseleave',
+    },
+    focus: {
+      on: 'focusin',
+      off: 'focusout',
+    },
+    active: {
+      on: 'CSSActivate',
+      off: 'CSSDeactivate',
+    },
+  }
+  function selectorAddPseudoListeners(selector) {
+    // ie11 has the strange behavoir, that groups of selectors are individual rules, but starting with the full selector:
+    // td, th, button { color:red } results in this rules:
+    // "td, th, button" | "th, th" | "th"
+    selector = selector.split(',')[0]
+    for (var pseudo in pseudos) {
+      var parts = selector.split(':' + pseudo)
+      if (parts.length > 1) {
+        var ending = parts[1].match(/^[^\s]*/) // ending elementpart of selector (used for not(:active))
+        let sel = unPseudo(parts[0] + ending)
+        const listeners = pseudos[pseudo]
+        onElement(sel, function (el) {
+          el.addEventListener(listeners.on, drawTreeEvent)
+          el.addEventListener(listeners.off, drawTreeEvent)
+        })
+      }
+    }
+  }
+  let CSSActive = null
+  document.addEventListener('mousedown', function (e) {
+    setTimeout(function () {
+      if (e.target === document.activeElement) {
+        var evt = document.createEvent('Event')
+        evt.initEvent('CSSActivate', true, true)
+        CSSActive = e.target
+        CSSActive.dispatchEvent(evt)
+      }
+    })
+  })
+  document.addEventListener('mouseup', function () {
+    if (CSSActive) {
+      var evt = document.createEvent('Event')
+      evt.initEvent('CSSDeactivate', true, true)
+      CSSActive.dispatchEvent(evt)
+      CSSActive = null
+    }
+  })
+
+  function unPseudo(selector) {
+    return selector.replace(regPseudos, '').replace(':not()', '')
+  }
+
+  var uniqueCounter = 0
+
+  /* old *
+	function _drawElement(el) {
+		if (!el.ieCP_unique) { // use el.uniqueNumber? but needs class for the css-selector => test performance
+			el.ieCP_unique = ++uniqueCounter;
+			el.classList.add('iecp-u' + el.ieCP_unique);
+		}
+		var style = getComputedStyle(el);
+		if (el.ieCP_sheet) while (el.ieCP_sheet.rules[0]) el.ieCP_sheet.deleteRule(0);
+		for (var prop in el.ieCPSelectors) {
+			var important = style['-ieVar-❗' + prop];
+			let valueWithVar = important || style['-ieVar-' + prop];
+			if (!valueWithVar) continue; // todo, what if '0'
+
+			var details = {};
+			var value = styleComputeValueWidthVars(style, valueWithVar, details);
+
+			if (important) value += ' !important';
+			for (var i=0, item; item=el.ieCPSelectors[prop][i++];) { // todo: split and use requestAnimationFrame?
+				if (item.selector === '%styleAttr') {
+					el.style[prop] = value;
+				} else {
+
+					// beta
+					if (!important && details.allByRoot !== false) continue; // dont have to draw root-properties
+
+					//let selector = item.selector.replace(/>? \.[^ ]+/, ' ', item.selector); // todo: try to equalize specificity
+					let selector = item.selector;
+					elementStyleSheet(el).insertRule(selector + '.iecp-u' + el.ieCP_unique + item.pseudo + ' {' + prop + ':' + value + '}', 0);
+				}
+			}
+		}
+	}
+	function elementStyleSheet(el){
+		if (!el.ieCP_sheet) {
+			const styleEl = document.createElement('style');
+			styleEl.ieCP_elementSheet = 1;
+			//el.appendChild(styleEl); // yes! self-closing tags can have style as children, but - if i set innerHTML, the stylesheet is lost
+			document.head.appendChild(styleEl);
+			el.ieCP_sheet = styleEl.sheet;
+		}
+		return el.ieCP_sheet;
+	}
+
+	/* */
+  function _drawElement(el) {
+    if (!el.ieCP_unique) {
+      // use el.uniqueNumber? but needs class for the css-selector => test performance
+      el.ieCP_unique = ++uniqueCounter
+      el.classList.add('iecp-u' + el.ieCP_unique)
+    }
+    var style = getComputedStyle(el)
+    let css = ''
+    for (var prop in el.ieCPSelectors) {
+      var important = style['-ieVar-❗' + prop]
+      let valueWithVar = important || style['-ieVar-' + prop]
+      if (!valueWithVar) continue // todo, what if '0'
+      var details = {}
+      var value = styleComputeValueWidthVars(style, valueWithVar, details)
+      //if (value==='initial') value = initials[prop];
+      if (important) value += ' !important'
+      for (var i = 0, item; (item = el.ieCPSelectors[prop][i++]); ) {
+        // todo: split and use requestAnimationFrame?
+        if (item.selector === '%styleAttr') {
+          el.style[prop] = value
+        } else {
+          // beta
+          if (!important && details.allByRoot !== false) continue // dont have to draw root-properties
+
+          //let selector = item.selector.replace(/>? \.[^ ]+/, ' ', item.selector); // todo: try to equalize specificity
+          let selector = item.selector
+          css +=
+            selector +
+            '.iecp-u' +
+            el.ieCP_unique +
+            item.pseudo +
+            '{' +
+            prop +
+            ':' +
+            value +
+            '}\n'
+          // el.runtimeStyle[prop] = value; // todo
+        }
+      }
+    }
+    elementSetCss(el, css)
+  }
+  function elementSetCss(el, css) {
+    if (!el.ieCP_styleEl && css) {
+      const styleEl = document.createElement('style')
+      styleEl.ieCP_elementSheet = 1
+      //el.appendChild(styleEl); // yes! self-closing tags can have style as children, but - if i set innerHTML, the stylesheet is lost
+      document.head.appendChild(styleEl)
+      el.ieCP_styleEl = styleEl
+    }
+    if (el.ieCP_styleEl) el.ieCP_styleEl.innerHTML = css
+  }
+  /* */
+
+  function drawTree(target) {
+    if (!target) return
+    var els = target.querySelectorAll('[iecp-needed]')
+    if (target.hasAttribute && target.hasAttribute('iecp-needed'))
+      drawElement(target) // self
+    for (var i = 0, el; (el = els[i++]); ) drawElement(el) // tree
+  }
+  // draw queue
+  let drawQueue = new Set()
+  let collecting = false
+  let drawing = false
+  function drawElement(el) {
+    drawQueue.add(el)
+    if (collecting) return
+    collecting = true
+    requestAnimationFrame(function () {
+      //setImmediate(function(){
+      collecting = false
+      drawing = true
+      drawQueue.forEach(_drawElement)
+      drawQueue.clear()
+      setTimeout(function () {
+        // mutationObserver will trigger delayed, requestAnimationFrame will miss some changes
+        drawing = false
+      })
+    })
+  }
+
+  function drawTreeEvent(e) {
+    drawTree(e.target)
+  }
+
+  function findVars(str, cb) {
+    // css value parser
+    let level = 0,
+      openedLevel = null,
+      lastPoint = 0,
+      newStr = '',
+      i = 0,
+      char,
+      insideCalc
+    while ((char = str[i++])) {
+      if (char === '(') {
+        ++level
+        if (
+          openedLevel === null &&
+          str[i - 4] + str[i - 3] + str[i - 2] === 'var'
+        ) {
+          openedLevel = level
+          newStr += str.substring(lastPoint, i - 4)
+          lastPoint = i
+        }
+        if (str[i - 5] + str[i - 4] + str[i - 3] + str[i - 2] === 'calc') {
+          insideCalc = level
+        }
+      }
+      if (char === ')' && openedLevel === level) {
+        let variable = str.substring(lastPoint, i - 1).trim(),
+          fallback
+        let x = variable.indexOf(',')
+        if (x !== -1) {
+          fallback = variable.slice(x + 1)
+          variable = variable.slice(0, x)
+        }
+        newStr += cb(variable, fallback, insideCalc)
+        lastPoint = i
+        openedLevel = null
+      }
+      if (char === ')') {
+        --level
+        if (insideCalc === level) insideCalc = null
+      }
+    }
+    newStr += str.substring(lastPoint)
+    return newStr
+  }
+  function styleComputeValueWidthVars(style, valueWithVars, details) {
+    return findVars(valueWithVars, function (variable, fallback, insideCalc) {
+      var value = style.getPropertyValue(variable)
+      if (insideCalc) value = value.replace(/^calc\(/, '(') // prevent nested calc
+      if (details && style.lastPropertyServedBy !== document.documentElement)
+        details.allByRoot = false
+      if (value === '' && fallback)
+        value = styleComputeValueWidthVars(style, fallback, details)
+      return value
+    })
+  }
+
+  // mutation listener
+  var observer = new MutationObserver(function (mutations) {
+    if (drawing) return
+    for (var i = 0, mutation; (mutation = mutations[i++]); ) {
+      if (mutation.attributeName === 'iecp-needed') continue // why?
+      // recheck all selectors if it targets new elements?
+      drawTree(mutation.target)
+    }
+  })
+  setTimeout(function () {
+    observer.observe(document, { attributes: true, subtree: true })
+  })
+
+  // :target listener
+  var oldHash = location.hash
+  addEventListener('hashchange', function (e) {
+    var newEl = document.getElementById(location.hash.substr(1))
+    if (newEl) {
+      var oldEl = document.getElementById(oldHash.substr(1))
+      drawTree(newEl)
+      drawTree(oldEl)
+    } else {
+      drawTree(document)
+    }
+    oldHash = location.hash
+  })
+
+  // add owningElement to Element.style
+  var descriptor = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    'style'
+  )
+  var styleGetter = descriptor.get
+  descriptor.get = function () {
+    const style = styleGetter.call(this)
+    style.owningElement = this
+    return style
+  }
+  Object.defineProperty(HTMLElement.prototype, 'style', descriptor)
+
+  // add computedFor to computed style-objects
+  var originalGetComputed = getComputedStyle
+  window.getComputedStyle = function (el) {
+    var style = originalGetComputed.apply(this, arguments)
+    style.computedFor = el
+    //style.pseudoElt = pseudoElt; //not needed at the moment
+    return style
+  }
+
+  // getPropertyValue / setProperty hooks
+  const StyleProto = CSSStyleDeclaration.prototype
+
+  const oldGetP = StyleProto.getPropertyValue
+  StyleProto.getPropertyValue = function (property) {
+    this.lastPropertyServedBy = false
+    property = property.trim()
+
+    /* *
+		if (this.owningElement) {
+			const ieProperty = '-ieVar-'+property;
+			const iePropertyImportant = '-ieVar-❗'+property;
+			let value = this[iePropertyImportant] || this[ieProperty];
+			if (value !== undefined) {
+				// todo, test if syntax valid
+				return value;
+			}
+		}
+		/* */
+
+    if (property[0] !== '-' || property[1] !== '-')
+      return oldGetP.apply(this, arguments)
+    const undashed = property.substr(2)
+    const ieProperty = '-ie-' + undashed
+    const iePropertyImportant = '-ie-❗' + undashed
+    let value = decodeValue(this[iePropertyImportant] || this[ieProperty])
+
+    if (this.computedFor) {
+      // computedStyle
+      if (value !== undefined && !inheritingKeywords[value]) {
+        //if (regHasVar.test(value))  // todo: to i need this check?!!! i think its faster without
+        value = styleComputeValueWidthVars(this, value)
+        this.lastPropertyServedBy = this.computedFor
+      } else {
+        // inherited
+        if (
+          inheritingKeywords[value] ||
+          !register[property] ||
+          register[property].inherits
+        ) {
+          //let el = this.pseudoElt ? this.computedFor : this.computedFor.parentNode;
+          let el = this.computedFor.parentNode
+          while (el.nodeType === 1) {
+            // how slower would it be to getComputedStyle for every element, not just with defined ieCP_setters
+            if (el.ieCP_setters && el.ieCP_setters[property]) {
+              // i could make
+              // value = el.nodeType ? getComputedStyle(this.computedFor.parentNode).getPropertyValue(property)
+              // but i fear performance, stupid?
+              var style = getComputedStyle(el)
+              var tmpVal = decodeValue(
+                style[iePropertyImportant] || style[ieProperty]
+              )
+              if (tmpVal !== undefined) {
+                // calculated style from current element not from the element the value was inherited from! (style, value)
+                //value = tmpVal; if (regHasVar.test(tmpVal))  // todo: to i need this check?!!! i think its faster without
+                value = styleComputeValueWidthVars(this, tmpVal)
+                this.lastPropertyServedBy = el
+                break
+              }
+            }
+            el = el.parentNode
+          }
+        }
+      }
+      if (value === 'initial') return ''
+    }
+    //if ((value === undefined || value === 'initial') && register[property]) value = register[property].initialValue; // todo?
+    if (value === undefined && register[property])
+      value = register[property].initialValue
+    if (value === undefined) return ''
+    return value
+  }
+  const inheritingKeywords = { inherit: 1, revert: 1, unset: 1 }
+
+  const oldSetP = StyleProto.setProperty
+  StyleProto.setProperty = function (property, value, prio) {
+    if (property[0] !== '-' || property[1] !== '-')
+      return oldSetP.apply(this, arguments)
+    const el = this.owningElement
+    if (el) {
+      if (!el.ieCP_setters) el.ieCP_setters = {}
+      el.ieCP_setters[property] = 1
+    }
+    property = '-ie-' + (prio === 'important' ? '❗' : '') + property.substr(2)
+    this.cssText += '; ' + property + ':' + encodeValue(value) + ';'
+    //this[property] = value;
+    el === document.documentElement && redrawStyleSheets()
+    el && drawTree(el) // its delayed internal
+  }
+
+  /*
+	var descriptor = Object.getOwnPropertyDescriptor(StyleProto, 'cssText');
+	var cssTextGetter = descriptor.get;
+	var cssTextSetter = descriptor.set;
+	// descriptor.get = function () {
+	// 	const style = styleGetter.call(this);
+	// 	style.owningElement = this;
+	// 	return style;
+	// }
+	descriptor.set = function (css) {
+		var el = this.owningElement;
+		if (el) {
+			css = rewriteCss('{'+css).substr(1);
+			cssTextSetter.call(this, css);
+			var found = parseRewrittenStyle(this);
+			if (found.getters) addGetterElement(el, found.getters, '%styleAttr');
+			if (found.setters) addSetterElement(el, found.setters);
+			return;
+		}
+		return cssTextSetter.call(this, css);
+	}
+	Object.defineProperty(StyleProto, 'cssText', descriptor);
+	*/
+
+  if (!window.CSS) window.CSS = {}
+  const register = {}
+  CSS.registerProperty = function (options) {
+    register[options.name] = options
+  }
+
+  // fix "initial" keyword with generated custom properties, this is not supported ad all by ie, should i make a separate "inherit"-polyfill?
+  /*
+	const computed = getComputedStyle(document.documentElement)
+	const initials = {};
+	for (let i in computed) {
+		initials[i.replace(/([A-Z])/, function(x){ return '-'+x.toLowerCase(x) })] = computed[i];
+	}
+	initials['display'] = 'inline';
+	*/
+
+  // utils
+  function fetchCss(url, callback) {
+    var request = new XMLHttpRequest()
+    request.open('GET', url)
+    request.overrideMimeType('text/css')
+    request.onload = function () {
+      if (request.status >= 200 && request.status < 400) {
+        callback(request.responseText)
+      }
+    }
+    request.send()
+  }
+})()
--- a/website/public/img/og-image.png
+++ b/website/public/img/og-image.png