update dependencies, fapply upgrades, fix breaking changes
This commit is contained in:
parent
ec35a78ffc
commit
06dc0a38ca
|
@ -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)
|
|
@ -1,5 +0,0 @@
|
|||
import EnterpriseAlert from '@hashicorp/react-enterprise-alert'
|
||||
|
||||
export default function EnterpriseAlertConsul(props) {
|
||||
return <EnterpriseAlert product="consul" {...props} />
|
||||
}
|
|
@ -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>
|
||||
```
|
|
@ -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}</>
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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"
|
||||
|
|
|
@ -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">» 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(
|
||||
`--------------------------------------------------------
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
Loading…
Reference in New Issue