# gatsby-theme-waves

> Bring scrollytelling to your mdx.

Latest version **0.1.6** (published 2020-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-theme-waves
pnpm add gatsby-theme-waves
yarn add gatsby-theme-waves
bun add gatsby-theme-waves
```

## 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.6 |
| Published | 2020-03-25 |
| First published | 2019-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 16.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 719 |
| Author | Rodrigo Pombo |
| Maintainers | pomber |
| Keywords | gatsby, gatsby-theme, gatsby-plugin, code, scrollytelling, mdx, blog |

## Links

- npm: https://www.npmjs.com/package/gatsby-theme-waves
- Repository: https://github.com/pomber/gatsby-theme-waves
- Homepage: https://github.com/pomber/gatsby-theme-waves#readme
- Issues: https://github.com/pomber/gatsby-theme-waves/issues
- npm.io page: https://npm.io/package/gatsby-theme-waves

## Dependencies (5)

- [rebound](https://npm.io/package/rebound.md) ^0.1.0
- [use-spring](https://npm.io/package/use-spring.md) ^0.2.2
- [shell-quote](https://npm.io/package/shell-quote.md) ^1.6.1
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.0.21
- [@code-surfer/standalone](https://npm.io/package/@code-surfer/standalone.md) 3.1.1

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2020-03-25
- 0.1.5 — 2019-11-12
- 0.1.3 — 2019-09-24
- 0.1.1 — 2019-08-11
- 0.1.0 — 2019-08-10
- 0.0.5 — 2019-07-30
- 0.0.4 — 2019-07-29
- 0.0.3 — 2019-07-25
- 0.0.2 — 2019-07-22
- 0.0.1 — 2019-07-20

## README

# Gatsby Theme Waves

> Still experimental but you can give it a try

Bring scrollytelling to your mdx. Animate code, images, charts, maps and more as you scroll.

<div align="center">
<a href="https://waves.pomb.us/blog/post">
<img alt="gatsby waves demo" src="https://user-images.githubusercontent.com/1911623/62062600-971a5780-b229-11e9-9c13-cd6a265594d1.gif" />
</a>
<div><a href="https://waves.pomb.us/">See the live demo</a></div>
</div>

The MDX looks like this:

````md
import { CodeWave } from "gatsby-theme-waves"

<CodeWave>

```py
# some code
```

# Some markdown

```py
# more code
```

More markdown

> and more

```py
# and more
```

- ok
- that's enough

</CodeWave>
````

## Installation

You need a Gatsby site with MDX. For example, this is how you add gatsby-theme-waves to a site that uses [gatsby-theme-blog](https://www.npmjs.com/package/gatsby-theme-blog):

1.  Install the theme (and `deepmerge` for merging the theme styles)

    ```sh
    npm install --save gatsby-theme-waves deepmerge
    ```

2.  Add the theme to your `gatsby-config.js` (at the end of the plugin list just in case)

    ```js
    module.exports = {
      plugins: [
        "gatsby-theme-blog",
        "gatsby-theme-waves", // <-- add this
      ],
    }
    ```

3.  Merge the styles: create or edit `src/gatsby-plugin-theme-ui/index.js`

    ```js
    import wavesTheme from "gatsby-theme-waves/src/gatsby-plugin-theme-ui/index"
    import blogTheme from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/index"
    import merge from "deepmerge"

    export default merge(blogTheme, wavesTheme)
    ```

4)  Import `CodeWave` and use it in any MDX file

    ````md
    import { CodeWave } from "gatsby-theme-waves"

    <CodeWave>

    ```py
    # some code
    ```

    # Some markdown

    ```py
    # more code
    ```

    More markdown

    > and more

    ```py
    # and more
    ```

    - ok
    - that's enough

    </CodeWave>
    ````

Your set up should look like [this example](https://github.com/pomber/gatsby-theme-waves/tree/master/blog-demo).

### Code Blocks

By default the lines that changed between two consecutive code blocks will be highlighted. You can change it to highlihgt the line (and columns) you want:

````md
```js 1:3,6
// highlihgts line 1,2,3 and 6
```

```js 5[1,3:6],8
// highlihgts:
// columns 1,3,4,5 and 6 from line 5
// and line 8
```
````

## Coming Soon

- Import code from files
- Better custom code syntax highligthing using theme-ui
- More waves
- More docs

---
_Source: https://npm.io/package/gatsby-theme-waves · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._