open-index/open-npm huggingface dataset:
npm package: @gainforest/components
Description: shared components for our websites
Author: daviddao
Latest version: 0.2.6

<img
  src='https://dweb.link/ipfs/bafkreihfkhenj6tpjp7kbgtwf6tdvqgbqb5qmg3wrzfvhaiu652swfuqki'
  height='48'
/>

# gainforest / components

**shared react components for our websites**

[![GitHub][github-badge]][github]
[![Build Status]][actions]
![MIT License][]
![NPM Version][]

[github]: https://github.com/gainforest/components
[github-badge]: https://badgen.net/badge/-/github?icon=github&label
[build status]: https://github.com/gainforest/components/actions/workflows/main.yml/badge.svg
[actions]: https://github.com/gainforest/components/actions/workflows/main.yml
[mit license]: https://badgen.net/badge/license/MIT/blue
[npm version]: https://badgen.net/npm/v/@gainforest/components

These are a set of modular but opinionated [`react`](https://github.com/facebook/react) components. They assume and make extensive use of [`theme-ui`](https://github.com/system-ui/theme-ui) and [`next`](https://github.com/vercel/next.js), and are meant to be composed with our [`theme`](https://github.com/gainforest/theme). The main use cases are to encourage consistency throughout our design and streamline building our own websites by reducing boilerplate. However, over time we might expand them to enable easier embedding of our content into other websites.

## usage

To use, import the component(s) you want into your `next` project. Here are some examples.

Use our logo and monogram:

```jsx
import { Logo, Monogram } from '@gainforest/components'
```

Use our icons:

```jsx
import { Icons } from '@gainforest/components'

const { Check, Question, Info } = Icons
```

Render a simple layout without a footer

```jsx
import { Layout, Logo, Monogram } from '@gainforest/components'

const Index = () => {
  return (
    <Layout footer={false}>
      <Logo sx={{ width: 180 }} />
      <Monogram sx={{ width: 60 }} />
    </Layout>
  )
}

export default Index
```

For more usage examples checkout our [`design`](https://github.com/gainforest/design) sample which showcases all these components live.

## development

To update a component and publish a new version, first make your changes, then follow these steps

- Increase the version number in `package.json`
- `npm run build`
- `npm publish`

## license

All the code in this repository is [MIT](https://choosealicense.com/licenses/mit/) licensed, but we request that you please provide attribution if reusing any of our digital content (graphics, logo, articles, etc.).

## about us

We are an interdisciplinary and international nonprofit association based in Zurich, Switzerland 🇨🇭 with engineers, policy makers, and researchers from Germany 🇩🇪, the U.S. 🇺🇸, the UK 🇬🇧, Indonesia 🇮🇩 and Argentina 🇦🇷​. Our goal is to reverse the deterioration of nature by enabling dignified and sustainable work for forest communities using trust-enhancing technologies.

## kudos

Much of this code is based by the amazing work of [carbonplan](https://carbonplan.org)
npm package: @gainforest/layouts
Description: page layout components for reusable content
Author: daviddao
Latest version: 0.0.5

<img
  src='https://dweb.link/ipfs/bafkreihfkhenj6tpjp7kbgtwf6tdvqgbqb5qmg3wrzfvhaiu652swfuqki'
  height='48'
/>

# gainforest / layouts


**page layout components for documents and tools**

[![GitHub][github-badge]][github]
[![Build Status]][actions]
![MIT License][]
![NPM Version][]

[github]: https://github.com/gainforest/layouts
[github-badge]: https://badgen.net/badge/-/github?icon=github&label
[build status]: https://github.com/gainforest/layouts/actions/workflows/main.yml/badge.svg
[actions]: https://github.com/gainforest/layouts/actions/workflows/main.yml
[mit license]: https://badgen.net/badge/license/MIT/blue
[npm version]: https://badgen.net/npm/v/@gainforest/layouts

Reusable [`react`](https://github.com/facebook/react) components for common layouts, such as those used in our articles, tools, blog posts, and maps. All the components here either wrap the base `Layout` from `@gainforest/components` directly, or are linked in their design constraints to one of the layouts in this package that do so. Similar to those in the [`@gainforest/components`](https://github.com/gainforest/components) package, these components assume and make extensive use of [`theme-ui`](https://github.com/system-ui/theme-ui) and [`next`](https://github.com/vercel/next.js), and are meant to be composed with our [`theme`](https://github.com/gainforest/theme). These components also work particularly well with MDX, which we use for authoring lots of our content.

## usage

To use, install the package with

```
npm i @gainforest/layouts
```

and then import the component(s) you want into your `next` project.

## api

Most of these components are wrappers for the [`Layout`](https://github.com/gainforest/components/blob/main/src/layout.js) component that we generally use as the top-level component for our pages. As such, they are also intended to act as top-level page components. In particular, `Article` `Supplement` `Post` `Tool` and `NavSection` all play this role.

The remaining components are either elements of those layouts that might sometimes be useful on their own, llike `NavMenu`, or components that se only in the context of these layouts and are linked via specifid design constraints, like the use of `Cite` and `PullQuote` within an `Article`.

Here are all the components currently available, grouped by where we tend to use them (some components appear in multiple groups):

### research articles

`Article`
`Supplement`
`Endnote`
`Cite`
`PullQuote`

### interactive tools

`Tool`

### blog posts

`Post`

### documentation sites

`NavSection`
`NavMenu`

### map sites

[coming soon]
npm package: @gainforest/theme
Description: theme for styling our websites
Author: daviddao
Latest version: 0.0.2

<img
  src='https://dweb.link/ipfs/bafkreihfkhenj6tpjp7kbgtwf6tdvqgbqb5qmg3wrzfvhaiu652swfuqki'
  height='48'
/>

# gainforest / theme

**lightweight Theme-UI configuration for GainForest websites**

[![GitHub][github-badge]][github]
[![Build Status]][actions]
![MIT License][]
![NPM Version][]

[github]: https://github.com/gainforest/theme
[github-badge]: https://badgen.net/badge/-/github?icon=github&label
[build status]: https://github.com/gainforest/theme/actions/workflows/main.yml/badge.svg
[actions]: https://github.com/gainforest/theme/actions/workflows/main.yml
[mit license]: https://badgen.net/badge/license/MIT/blue
[npm version]: https://badgen.net/npm/v/@gainforest/theme

## usage

To use, import into your package

```js
import theme from '@gainforest/theme'
```

and then either use it directly or extend it for further customization

```js
export default {
  ...theme,
  styles: {
    ...theme,
  },
}
```

## license

All the code in this repository is [MIT](https://choosealicense.com/licenses/mit/) licensed, but we request that you please provide attribution if reusing any of our digital content (graphics, logo, articles, etc.).

## about us

We are an interdisciplinary and international nonprofit association based in Zurich, Switzerland 🇨🇭 with engineers, policy makers, and researchers from Germany 🇩🇪, the U.S. 🇺🇸, the UK 🇬🇧, Indonesia 🇮🇩 and Argentina 🇦🇷​. Our goal is to reverse the deterioration of nature by enabling dignified and sustainable work for forest communities using trust-enhancing technologies. 

## kudos

Much of this code is based by the amazing work of [carbonplan](https://carbonplan.org)