mirror of https://github.com/hashicorp/packer
feat(website): add official and HCP Packer Ready labels (#11449)
* refactor(website): use prop and CSS for plugin label spacing * fix: add official tier label to built-in plugin docs * feat(website): add BadgesHeader component * refactor(website): use BadgesHeader in all content * feat(website): add HCP ready demo, tweak badge look * refactor: integrate work from add-plugin-version branch * fix(website): correct bad import * fix: use updated MDX custom component * chore: remove plugin version label work from this branch * chore: remove unused var * fix: use new BadgesHeader interface for dual tags * chore: remove unused var, refine comment * fix: remove unused broken import * fix: shorten property for HCP packer readiness * Apply suggestions from code review Remove a few demo labels before merging Co-authored-by: Wilken Rivera <dev@wilkenrivera.com>pull/11489/head
Zachary Shilton
4 years ago
committed by
Kevin Wang
parent
d8bf6503ad
commit
c6e8f877ef
@ -0,0 +1,28 @@
|
||||
import React from 'react'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
import classnames from 'classnames'
|
||||
import s from './style.module.css'
|
||||
|
||||
type BadgeTheme = 'gray' | 'blue' | 'gold'
|
||||
|
||||
interface BadgeProps {
|
||||
label: string
|
||||
iconSvg?: string
|
||||
theme?: BadgeTheme
|
||||
}
|
||||
|
||||
function Badge({
|
||||
theme = 'gray',
|
||||
label,
|
||||
iconSvg,
|
||||
}: BadgeProps): React.ReactElement {
|
||||
return (
|
||||
<div className={classnames(s.root, s[`theme-${theme}`])}>
|
||||
{iconSvg ? <InlineSvg className={s.icon} src={iconSvg} /> : null}
|
||||
<span className={s.text}>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export type { BadgeTheme }
|
||||
export default Badge
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import s from './style.module.css'
|
||||
|
||||
function BadgesHeader({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactChild[]
|
||||
}): React.ReactElement {
|
||||
const childrenArray = React.Children.toArray(children)
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div className={s.surroundSpaceCompensator}>
|
||||
{childrenArray.map((badge, idx) => {
|
||||
return (
|
||||
<div className={s.badgeSpacer} key={idx}>
|
||||
{badge}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BadgesHeader
|
||||
@ -0,0 +1,21 @@
|
||||
.root {
|
||||
position: relative;
|
||||
margin: 32px 0 0 0;
|
||||
|
||||
/* subsequent page titles should get cozy,
|
||||
otherwise the label doesn't look associated */
|
||||
& + h1 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.surroundSpaceCompensator {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
.badgeSpacer {
|
||||
line-height: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,31 @@
|
||||
import React from 'react'
|
||||
import Badge, { BadgeTheme } from '../badge'
|
||||
import svgRibbonIcon from './ribbon-icon.svg?include'
|
||||
import svgCheckIcon from './check-icon.svg?include'
|
||||
|
||||
type PluginLabelType = 'official' | 'community' | 'hcp_packer_ready'
|
||||
|
||||
const badgeTypes = {
|
||||
official: {
|
||||
label: 'Official',
|
||||
theme: 'gold',
|
||||
iconSvg: svgRibbonIcon,
|
||||
},
|
||||
community: {
|
||||
label: 'Community',
|
||||
theme: 'gray',
|
||||
iconSvg: false,
|
||||
},
|
||||
hcp_packer_ready: {
|
||||
label: 'HCP Packer Ready',
|
||||
theme: 'blue',
|
||||
iconSvg: svgCheckIcon,
|
||||
},
|
||||
}
|
||||
|
||||
function PluginBadge({ type }: { type: PluginLabelType }): React.ReactElement {
|
||||
const { label, theme, iconSvg } = badgeTypes[type]
|
||||
return <Badge label={label} theme={theme as BadgeTheme} iconSvg={iconSvg} />
|
||||
}
|
||||
|
||||
export default PluginBadge
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@ -1,22 +0,0 @@
|
||||
import React from 'react'
|
||||
import InlineSvg from '@hashicorp/react-inline-svg'
|
||||
import svgRibbonIcon from './ribbon-icon.svg?include'
|
||||
import s from './style.module.css'
|
||||
|
||||
const tierNames = {
|
||||
official: 'Official',
|
||||
community: 'Community',
|
||||
}
|
||||
|
||||
function PluginTierLabel({ tier }) {
|
||||
return (
|
||||
<div className={s.root} data-tier={tier}>
|
||||
{tier === 'official' ? (
|
||||
<InlineSvg className={s.icon} src={svgRibbonIcon} />
|
||||
) : null}
|
||||
<span className={s.text}>{tierNames[tier]}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PluginTierLabel
|
||||
@ -1,42 +1,45 @@
|
||||
---
|
||||
description: |
|
||||
Data sources used to data from the HCP Packer registry.
|
||||
Data sources used to data from the HCP Packer registry.
|
||||
page_title: HCP - Data sources
|
||||
sidebar_title: Overview
|
||||
---
|
||||
|
||||
<BadgesHeader>
|
||||
<PluginBadge type="official" />
|
||||
</BadgesHeader>
|
||||
|
||||
# HCP Packer Registry Data sources
|
||||
|
||||
The HCP Packer registry bridges the gap between image factories and image
|
||||
deployments, allowing development and security teams to work together to create,
|
||||
The HCP Packer registry bridges the gap between image factories and image
|
||||
deployments, allowing development and security teams to work together to create,
|
||||
manage, and consume golden images in a centralized way.
|
||||
|
||||
The HCP Packer registry stores metadata about your images, including when they
|
||||
were created, where the image exists in the cloud, and what (if any) git commit
|
||||
is associated with your image build. You can use the registry to track
|
||||
information about the golden images your Packer builds produce, clearly
|
||||
designate which images are appropriate for test and production environments,
|
||||
and query for the right golden images to use in both Packer and Terraform
|
||||
The HCP Packer registry stores metadata about your images, including when they
|
||||
were created, where the image exists in the cloud, and what (if any) git commit
|
||||
is associated with your image build. You can use the registry to track
|
||||
information about the golden images your Packer builds produce, clearly
|
||||
designate which images are appropriate for test and production environments,
|
||||
and query for the right golden images to use in both Packer and Terraform
|
||||
configurations.
|
||||
|
||||
HCP Packer is under active development, and we are currently offering a public
|
||||
beta version to collect feedback and continue improving the product. We
|
||||
HCP Packer is under active development, and we are currently offering a public
|
||||
beta version to collect feedback and continue improving the product. We
|
||||
encourage you to try HCP Packer and submit your feedback.
|
||||
|
||||
Packer has two data sources that work together to retrieve information from the
|
||||
HCP Packer registry:
|
||||
|
||||
* [hcp-packer-iteration](/docs/datasources/hcp/hcp-packer-iteration) -
|
||||
retrieves information about an iteration in HCP Packer registry
|
||||
* [hcp-packer-image](/docs/datasources/hcp/hcp-packer-image) - retrieves
|
||||
information about a specific image created in the HCP Packer registry
|
||||
- [hcp-packer-iteration](/docs/datasources/hcp/hcp-packer-iteration) -
|
||||
retrieves information about an iteration in HCP Packer registry
|
||||
- [hcp-packer-image](/docs/datasources/hcp/hcp-packer-image) - retrieves
|
||||
information about a specific image created in the HCP Packer registry
|
||||
|
||||
These data sources are intended to be used together to determine source images
|
||||
for pipelined Packer builds.
|
||||
for pipelined Packer builds.
|
||||
|
||||
## How to use this plugin
|
||||
|
||||
This plugin comes bundled with the Packer core, so you do not need to install
|
||||
This plugin comes bundled with the Packer core, so you do not need to install
|
||||
it separately. Please install Packer v1.7.7 or above to use the latest version
|
||||
of the HCP Packer registry datasources.
|
||||
of the HCP Packer registry datasources.
|
||||
|
||||
Loading…
Reference in new issue