🌷 Docs Website Maintenance

website/README.md

@@ -80,6 +80,24 @@ The significant keys in the YAML frontmatter are:
 > ⚠️Since `api` is a reserved directory within NextJS, all `/api/**` pages are
 > listed under the `/pages/api-docs` path.
 
+### Code Highlighting
+
+Code is highlighted using [prism](https://prismjs.com/). Feel free to check out [all the supported languages](https://prismjs.com/#supported-languages) that can be used for code blocks. All code blocks should be tagged with a language as such:
+
+````md
+```language
+// code to be highlighted
+```
+````
+
+If you have a code block that displays a command intended to be run from the terminal, it can be tagged with `shell-session`. This is distinct from `shell` which should represent a shell script. The following example shows a correctly formatted terminal command snippet:
+
+````md
+```shell-session
+$ cowsay "hello world"
+```
+````
+
 ### Editing Sidebars
 
 The structure of the sidebars are controlled by files in the [`/data`
@@ -105,7 +123,7 @@ links to the binaries and will not compile. So this version number should be
 changed _only after a release_.
 
 The `data/version.js` also contains a global variable, `CHANGELOG_URL`, that
-should be updated to point to the latest changelog URL for the particular 
+should be updated to point to the latest changelog URL for the particular
 release version. The URL should be based off the `master` blob such that
 it always reflects the most up-to-date changes.
 
@@ -161,6 +179,9 @@ present by default with markdown, detailed below:
   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.
+
+  > **Note:** Changes to partials will not trigger a hot reload in development
+
 - 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
@@ -193,6 +214,12 @@ present by default with markdown, detailed below:
   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.
 
+There are also some custom components available for use within markdown files, see
+the links below for more information on usage:
+
+- [Enterprise Alert](components/enterprise-alert/README.md)
+- [Tabs](components/tabs/README.md)
+
 ### Redirects
 
 This website structures URLs based on the filesystem layout. This means that if a

website/_redirects

@@ -1,3 +1,9 @@
+
+# REDIRECTS FILE
+#
+# See https://www.netlify.com/docs/redirects/ for documentation. Please do not
+# modify or delete existing redirects without first verifying internally.
+
 /downloads.html /downloads 301!
 /community.html /community 301!
 /api-docs/index /api-docs 301!

website/components/enterprise-alert/README.md

@@ -0,0 +1,27 @@
+# Enterprise Alert Component
+
+This component is an easy way to mark some content as only applicable to the enterprise version of vault. It can be used in any documentation pages in a variety of ways. The basic implementation is written as such, on its own line within a markdown file:
+
+```jsx
+<EnterpriseAlert />
+```
+
+And renders [like this](https://p176.p0.n0.cdn.getcloudapp.com/items/geuWOzkz/Screen%20Shot%202020-05-08%20at%204.17.34%20PM.png?v=2ace1c70f48cf1bbdd17f9ce96684453)
+
+The default text can also be replaced with custom text as such:
+
+```jsx
+<EnterpriseAlert>
+  Custom text <a href="">with a link</a>
+</EnterpriseAlert>
+```
+
+Which renders [as such](https://p176.p0.n0.cdn.getcloudapp.com/items/v1uDE2vQ/Screen%20Shot%202020-05-08%20at%204.18.22%20PM.png?v=3a45268830fac868be50047060bb4303)
+
+Finally, it can be rendered inline as a "tag" to mark a section or option as enterprise only by adding the `inline` attribute:
+
+```jsx
+<EnterpriseAlert inline>
+```
+
+This is typically used after a list item, or after a headline. It renders [as such](https://p176.p0.n0.cdn.getcloudapp.com/items/KouqnrOm/Screen%20Shot%202020-05-08%20at%204.16.34%20PM.png?v=ac21328916aa98a1a853cde5989058bd)

website/components/enterprise-alert/index.jsx

@@ -0,0 +1,5 @@
+import EnterpriseAlert from '@hashicorp/react-enterprise-alert'
+
+export default function EnterpriseAlertConsul(props) {
+  return <EnterpriseAlert product="vault" {...props} />
+}

website/components/footer/index.jsx

@@ -0,0 +1,30 @@
+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>
+          <Link href="/api">
+            <a>API</a>
+          </Link>
+          <a href="https://learn.hashicorp.com/vault">Learn</a>
+          <Link href="/community">
+            <a>Community</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>
+  )
+}

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;
+    }
+  }
+}

website/components/tabs/README.md

@@ -0,0 +1,61 @@
+# Tabs Component
+
+> An MDX-compatible Tabs component
+
+This React component renders tabbed content.
+
+## Usage
+
+- Use the `<Tabs>` tag in your markdown file to begin a tabbed content section.
+- Use the `<Tab>` tag with a `heading` prop to separate your markdown
+
+### Important
+
+A line must be skipped between the `<Tab>` and your markdown (for both above and below said markdown). [This is a limitation of MDX also pointed out by the Docusaurus folks 🔗 ](https://v2.docusaurus.io/docs/markdown-features/#multi-language-support-code-blocks)
+
+### Example
+
+```mdx
+<Tabs>
+<Tab heading="CLI command">
+             <!-- Intentionally skipped line.. -->
+### Content
+            <!-- Intentionally skipped line.. -->
+</Tab>
+<Tab heading="API call using cURL">
+
+### Content
+
+</Tab>
+</Tabs>
+```
+
+### Component Props
+
+`<Tabs>` can be provided any arbitrary `children` so long as the `heading` prop is present the React or HTML tag used to wrap markdown, that said, we provide the `<Tab>` component to separate your tab content without rendering extra, unnecessary markup.
+
+This works:
+
+```mdx
+<Tabs>
+<Tab heading="CLI command">
+
+### Content
+
+</Tab>
+....
+</Tabs>
+```
+
+This _does not_ work:
+
+```mdx
+<Tabs>
+<Tab> <!-- missing the `heading` prop to provide a tab heading -->
+
+### Content
+
+</Tab>
+....
+</Tabs>
+```

website/components/tabs/index.jsx

@@ -0,0 +1,17 @@
+import ReactTabs from '@hashicorp/react-tabs'
+
+export default function Tabs({ children }) {
+  return (
+    <ReactTabs
+      items={children.map((Block) => ({
+        heading: Block.props.heading,
+        // eslint-disable-next-line react/display-name
+        tabChildren: () => Block,
+      }))}
+    />
+  )
+}
+
+export function Tab({ children }) {
+  return <>{children}</>
+}

website/components/tabs/style.css

@@ -0,0 +1,8 @@
+/* This is a CSS overwrite on top of the existing component styles to accommodate the Learn layout */
+.g-tabs {
+  & .g-grid-container,
+  & > .g-grid-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}