open-index/open-npm huggingface dataset:
npm package: @jbolda/gatsby-theme-components
Description: Helper components used in @jbolda/gatsby-theme-*.
Author: Jacob Bolda
Latest version: 0.0.1

# `@jbolda/gatsby-theme-components`

## Installation
Install from npm or yarn:
```
npm install @jbolda/gatsby-theme-components
```
or
```
yarn add @jbolda/gatsby-theme-components
```

## Usage
This is primarily a small component library powered by `theme-ui`.
npm package: @jbolda/gatsby-theme-layout
Description: Gatsby theme generally ingested by other themes to set navigation and default SEO.
Author: Jacob Bolda
Latest version: 0.3.5

# `@jbolda/gatsby-theme-layout`

## Installation
Install from npm or yarn:
```
npm install @jbolda/gatsby-theme-layout
```
or
```
yarn add @jbolda/gatsby-theme-layout
```

We also rely on peer dependencies of the following packages. Consult the package installation guides for each to potentially additional peer depedencies that require installation.

```
yarn add gatsby-plugin-mdx@^1.0.49 gatsby-plugin-sharp@^2.2.31 gatsby-plugin-theme-ui@^0.2.46 gatsby-source-filesystem@^2.1.0 gatsby-transformer-sharp@^2.2.20 theme-ui@^0.2.46
```

## Convention
This theme is primarily used in other themes. There is only configuration requirements.

## Configuration
```js
module.exports = {
  siteMetadata: {
    siteTitle: `Jacob Bolda`,
    siteDescription: `Structural Engineer with a knack for creative solutions using code and ingenuity.`,
    siteAuthor: `Jacob Bolda`,
    siteContact: "https://twitter.com/jacobbolda",
    navLinks: [
      { url: "/articles/", text: "Articles" },
      { url: "/recipes/", text: "Our Recipes" }
    ]
  }
}
```

## Design Tokens
The following are design tokens that are applied by variants through this theme. You may use them to apply styles to elements as a stopgap before needing to shadow a component.

```js
{
  jboldaGatsbyTheme: {
    layout: {
      header: { /* add tokens here */ },
      content: { /* add tokens here */ },
      footer: { /* add tokens here */ },
      heading: { /* add tokens here */ },
      text: { /* add tokens here */ },
      link: { /* add tokens here */ }
    }
  }
}
```
npm package: @jbolda/isolated-theme-ui-components
Description: Components that implement the isolated-theme-ui context and pragma (eventually).
Author: Jacob Bolda
Latest version: 0.2.0

# `@jbolda/isolated-theme-ui-components`

## Installation
Install from npm or yarn:
```
npm install @jbolda/isolated-theme-ui-components
```
or
```
yarn add @jbolda/isolated-theme-ui-components
```

## Usage
This is primarily a small component library powered by `theme-ui`. The use of isolation between ingesting themes is still in an experimental state. The current phase will not provide isolation, and will expect a theme with specific keys and breakpoints.
npm package: @jbonigomes/create-react-slides
Description: React presentation deck framework heavily inspired by Impress.js
Author: Jose B. Gomes
Latest version: 1.0.8

# Create React Slides

This is a React app, heavily inspired by the known and loved
[Impress.js](https://impress.js.org).

It is a lot less feature rich but let's you create slides as separate React
components leaving the slides author free to be creative.

## Getting started

    npx @jbonigomes/create-react-slides my-awesome-presentation
    cd my-awesome-presentation
    npm start

## Creating slides

Create a React component under `src/slides` (Samples provided) then add it to
the routes array on `src/routes.js`, note that the order in which components
appear in the array will be the order in which they render in the presentation.
Each slide must have at least one `Step` and be wrapped by a `Slide`. Refer to
samples.

## Slides navigation

Google Chrome is the only supported browser, navigation can be achieved by the
space bar `␣`, left `←` and right `→` arrows. You may also add multiple steps
per slide and switch them with the up `↑` and down `↓` arrows.

## Images

Images should be added to the `src/img` folder. They can then be consumed via
the `Img` component. Samples provided in the slides.

## Fonts

You can add fonts via WebFontLoader (Google fonts and the likes), in the
`index.js` file.

## Code highligthing

Code highligthing is done via [Prism.js](https://prismjs.com), wrapped via the
`Highlight` component. By default it will only highlight Markup, CSS, JS and
C-Like languages. You can however load other languages on
`src/components/Highlight/index.js`. Samples on usage are included in the
sample slides. By default the `Okaidia` theme is in preset.
npm package: @jbonigomes/react-impress-like-slides
Description: React presentation deck framework heavily inspired by Impress.js
Author: Jose B. Gomes
Latest version: 1.0.7

# React Impress Like Slides

This is a React app heavily inspired by the known and loved
[Impress.js](https://impress.js.org).

It is a lot less feature rich but let's you create slides as separate React
components leaving the slides author free to be creative.

## Getting started

    npx react-impress-like-slides my-slides
    cd my-slides
    npm start

## Creating slides

Create a React component under `src/slides` (Samples provided) then add it to
the routes array on `src/routes.js`, note that the order in which components
appear in the array will be the order in which they render in the presentation.

## Slides navigation

Google Chrome is the only supported browser, navigation can be achieved by the
space bar `␣`, right arrow `→` and left arrow `←`.

## Images

Images should be added to the `src/img` folder. They can then be consumed via
the `Img` component. Samples provided in the slides.

## Fonts

You can add fonts via WebFontLoader (Google fonts and the likes), in the
`index.js` file.

## Code hightligthing

Code hightligthing is done via [Prism.js](https://prismjs.com), wrapped via the
`Hightlight` component. By default it will only hightlight Markup, CSS, JS and
C-Like languages. You can however load other languages on
`src/components/Hightlight/index.js`. Samples on usage are included in the
sample slides.