# @hashicorp/platform-product-meta

> Product metadata utility for HashiCorp next.js websites

Latest version **0.1.1** (published 2022-07-14) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @hashicorp/platform-product-meta
pnpm add @hashicorp/platform-product-meta
yarn add @hashicorp/platform-product-meta
bun add @hashicorp/platform-product-meta
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-07-14 |
| First published | 2021-06-21 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | HashiCorp |
| Maintainers | hashibot-hds, lackeyjb1, alexcarpenter, youriwims, jpogran, ashleemboyer, _natmegs, thrashr888, amyrlam, melsumner, johncowen, mwickett, didoo, zchsh, brandonromano, hcitsec, gregone, meirish, enmod, kylemac, kaxcode, anubhavmishra-hashicorp, hashibot-web, cstitt-hashi, bkalow, kstraut, mocohen, dhaulagiri |

## Links

- npm: https://www.npmjs.com/package/@hashicorp/platform-product-meta
- npm.io page: https://npm.io/package/@hashicorp/platform-product-meta

## Dependencies (1)

- [@hashicorp/platform-util](https://npm.io/package/@hashicorp/platform-util.md) ^0.2.0

## Recent versions

- 0.1.1 (latest) — 2022-07-14
- 1.0.0-canary-202472323590 (canary) — 2024-08-23
- 1.0.0-canary-2024723224258 — 2024-08-23
- 1.0.0-canary-202472321400 — 2024-08-23
- 0.2.0-canary-2024723171741 — 2024-08-23
- 0.1.1-canary-2022614181233 — 2022-07-14
- 0.1.1-canary-202261418638 — 2022-07-14
- 0.1.1-canary-2022614163324 — 2022-07-14
- 0.1.1-canary-2022614162925 — 2022-07-14
- 0.1.1-canary-202261415942 — 2022-07-14
- 0.1.0 — 2021-07-14
- 0.1.0-canary.0 — 2021-06-21

## README

## `@hashicorp/platform-product-meta`

This package contains helpers for accessing Product related metadata. This is specifically helpful with theme color overrides.

```ts
interface ProductMeta {
  name: string
  slug: string
  themeClass?: string // a class that resets `brand` css variables
}
```

The following are available functions and components for use:

- `useProductMeta`: A hook for accessing Product Metadata
- `ProductMetaProvider`: A provider component that _sets_ the product for all child consumers.
- `withProductMeta`: A Higher Order Component that passes Product Metadata as the `product` prop — helpful with class components.

### `useProductMeta`

This function is designed to work both within and outside of a Product Context. Components can pass a product name directly and get metadata outside of context, or they can set the 'product' higher up in the tree via `ProductProvider`, call `useProductMeta` without passing a product argument, context will provide the correct metadata.

```ts
useProductMeta(product?: Products): ProductMeta

type Products =
  | 'hashicorp'
  | 'boundary'
  | 'consul'
  | 'nomad'
  | 'packer'
  | 'terraform'
  | 'vault'
  | 'vagrant'
  | 'waypoint'
```

**Defaults**

If `useProductMeta` is passed `undefined` or a non-product string, the values will default to:

```js
{
  name: 'Hashicorp',
  slug: 'hashicorp',
  // themeClass is undefined, defaults to HC brand colors
}
```

### Examples:

Consuming metadata by passing `product` directly (not within context)

```js
export default function Content({ content, product }) {
  const { name, themeClass } = useProductMeta(product)

  return (
    <article className={`${themeClass || ''} `}>
      <h1>{name}</h1>
      {content}
    </article>
  )
}
```

#### `ProductMetaProvider`

Accessing metadata from a product set by a provider:

```js
export default function SomeParent({ children }) {
  return (
    <ProductMetaProvider product="terraform">
      //... renders `Content` further down the tree
    </ProductMetaProvider>
  )
}

function Content({ content }) {
  const { name, theme } = useProductMeta()

  return (
    <article className={`${themeClass ?? ''} `}>
      <h1>{name}</h1>
      {content}
    </article>
  )
}
```

In this usecase, the child components don't need a `product` prop, because it is set within the parent context.

#### `withProductMeta`

Using the `withProductMeta` HOC to pass down product metadata.

```js
class Content extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { name, themeClass } = this.props.product

    return (
      <article className={`${themeClass ?? ''} `}>
        <h1>{name}</h1>
        {content}
      </article>
    )
  }
}

export default withProductMeta(Content)
```

#### Resetting Product Theme Variables

The final client usecase in Markdown or on a page for this `Content` component could look like:

```jsx
<Content product="terraform" content="LoremIpsum">
```

And say the corresponding CSS is:

```css
h1 {
  color: var(--brand);
}
```

This `--brand` value will be overridden to be `--terraform` purple.

---
_Source: https://npm.io/package/@hashicorp/platform-product-meta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._