luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

update dependencies, fapply upgrades, fix breaking changes

This commit is contained in:
Jeff Escalante 2020-06-11 20:58:05 -04:00
parent ec35a78ffc
commit 06dc0a38ca
12 changed files with 2411 additions and 731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
website/components/enterprise-alert/README.md
View File

@ -1,27 +0,0 @@
# Enterprise Alert Component
This component is an easy way to mark some content as only applicable to the enterprise version of consul. 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)

5
website/components/enterprise-alert/index.jsx
View File

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

49
website/components/tabs/README.md
View File

@ -1,49 +0,0 @@
# Tabs Component
> An MDX-compatible Tabs component
This React component renders tabbed content. [Example](https://p176.p0.n0.cdn.getcloudapp.com/items/E0ubRrlq/Screen%20Recording%202020-05-08%20at%2004.40%20PM.gif?v=a1f576d2c207f4312ca14adbce8a53ac)
## 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). There is work currently happening with the mdx parser to eliminate this issue.
### Example
```jsx
<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:
```jsx
<Tabs>
<Tab heading="CLI command">### Content</Tab>
....
</Tabs>
```
This _does not_ work, as the `<Tab>` element is missing a `heading` prop:
```jsx
<Tabs>
<Tab>### Content</Tab>
....
</Tabs>
```

20
website/components/tabs/index.jsx
View File

@ -1,20 +0,0 @@
import ReactTabs from '@hashicorp/react-tabs'
export function Tabs({ children }) {
if (!Array.isArray(children))
throw new Error('Multiple <Tab> elements required')
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}</>
}

8
website/components/tabs/style.css
View File

@ -1,8 +0,0 @@
/* 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;
}
}

8
website/layouts/api.jsx
View File

@ -1,18 +1,16 @@
import DocsPage from '@hashicorp/react-docs-page'
import order from '../data/api-navigation.js'
import { frontMatter as data } from '../pages/api-docs/**/*.mdx'
import { MDXProvider } from '@mdx-js/react'
import EnterpriseAlert from '../components/enterprise-alert'
import { Tabs, Tab } from '../components/tabs'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
function ApiDocsLayoutWrapper(pageMeta) {
function ApiDocsLayout(props) {
return (
<MDXProvider components={DEFAULT_COMPONENTS}>
<MDXProvider>
<DocsPage
{...props}
product="consul"

8
website/layouts/docs.jsx
View File

@ -1,18 +1,16 @@
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 EnterpriseAlert from '../components/enterprise-alert'
import { Tabs, Tab } from '../components/tabs'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
function DocsLayoutWrapper(pageMeta) {
function DocsLayout(props) {
return (
<MDXProvider components={DEFAULT_COMPONENTS}>
<MDXProvider>
<DocsPage
{...props}
product="consul"

8
website/layouts/intro.jsx
View File

@ -1,18 +1,16 @@
import DocsPage from '@hashicorp/react-docs-page'
import order from '../data/intro-navigation.js'
import { frontMatter as data } from '../pages/intro/**/*.mdx'
import { MDXProvider } from '@mdx-js/react'
import EnterpriseAlert from '../components/enterprise-alert'
import { Tabs, Tab } from '../components/tabs'
import Head from 'next/head'
import Link from 'next/link'
import { createMdxProvider } from '@hashicorp/nextjs-scripts/lib/providers/docs'
const DEFAULT_COMPONENTS = { EnterpriseAlert, Tabs, Tab }
const MDXProvider = createMdxProvider({ product: 'consul', preset: 'oss' })
function IntroLayoutWrapper(pageMeta) {
function IntroLayout(props) {
return (
<MDXProvider components={DEFAULT_COMPONENTS}>
<MDXProvider>
<DocsPage
{...props}
product="consul"

2968
website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
website/package.json
View File

@ -5,28 +5,26 @@
"author": "HashiCorp",
"dependencies": {
"@hashicorp/nextjs-scripts": "^10.0.2",
"@hashicorp/react-alert": "^2.0.0",
"@hashicorp/react-alert": "^2.0.1",
"@hashicorp/react-alert-banner": "^3.1.0",
"@hashicorp/react-button": "^2.2.0",
"@hashicorp/react-call-to-action": "^0.2.0",
"@hashicorp/react-case-study-slider": "^2.1.0",
"@hashicorp/react-code-block": "^1.2.7",
"@hashicorp/react-content": "^3.0.0-0",
"@hashicorp/react-docs-page": "^2.0.0",
"@hashicorp/react-content": "3.0.0-0",
"@hashicorp/react-docs-page": "^3.0.0",
"@hashicorp/react-docs-sidenav": "^3.2.3",
"@hashicorp/react-enterprise-alert": "^2.1.0",
"@hashicorp/react-featured-slider": "^1.1.0",
"@hashicorp/react-global-styles": "^4.4.0",
"@hashicorp/react-head": "^1.0.0",
"@hashicorp/react-head": "^1.1.1",
"@hashicorp/react-image": "^2.0.1",
"@hashicorp/react-inline-svg": "^1.0.0",
"@hashicorp/react-logo-grid": "^2.1.0",
"@hashicorp/react-mega-nav": "^4.0.1-2",
"@hashicorp/react-product-downloader": "^3.2.0",
"@hashicorp/react-product-downloader": "^4.0.0",
"@hashicorp/react-product-features-list": "^1.0.1",
"@hashicorp/react-section-header": "^2.0.0",
"@hashicorp/react-subnav": "^3.2.0",
"@hashicorp/react-tabs": "^0.4.0",
"@hashicorp/react-subnav": "^3.2.2",
"@hashicorp/react-text-and-content": "^4.1.0",
"@hashicorp/react-text-split": "^0.3.0",
"@hashicorp/react-text-split-with-code": "0.1.0",
@ -38,11 +36,11 @@
"babel-plugin-import-glob-array": "^0.2.0",
"dotenv": "^8.2.0",
"gray-matter": "^4.0.2",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.1.0",
"next": "9.4.1",
"nuka-carousel": "^4.6.7",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"next": "9.4.4",
"nuka-carousel": "^4.7.0",
"react": "^16.13.1",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1"

16
website/pages/downloads/index.jsx
View File

@ -3,14 +3,14 @@ import ProductDownloader from '@hashicorp/react-product-downloader'
import Head from 'next/head'
import HashiHead from '@hashicorp/react-head'
export default function DownloadsPage({ downloadData }) {
export default function DownloadsPage({ releaseData }) {
return (
<div id="p-downloads" className="g-container">
<HashiHead is={Head} title="Downloads | Consul by HashiCorp" />
<ProductDownloader
product="Consul"
version={VERSION}
downloads={downloadData}
releaseData={releaseData}
>
<p>
<a href="/downloads_tools">&raquo; Download Consul Tools</a>
@ -43,16 +43,8 @@ export default function DownloadsPage({ downloadData }) {
export async function getStaticProps() {
return fetch(`https://releases.hashicorp.com/consul/${VERSION}/index.json`)
.then((r) => r.json())
.then((r) => {
// TODO: restructure product-downloader to run this logic internally
return r.builds.reduce((acc, build) => {
if (!acc[build.os]) acc[build.os] = {}
acc[build.os][build.arch] = build.url
return acc
}, {})
})
.then((r) => ({ props: { downloadData: r } }))
.then((res) => res.json())
.then((releaseData) => ({ props: { releaseData } }))
.catch(() => {
throw new Error(
`--------------------------------------------------------

1
website/pages/style.css
View File

@ -40,7 +40,6 @@
@import '../components/basic-hero/style.css';
@import '../components/enterprise-comparison/style.css';
@import '../components/footer/style.css';
@import '../components/tabs/style.css';
@import '../components/learn-callout/style.css';
@import '../components/case-study-carousel/style.css';