Skip to content
Bring scrollytelling to your MDX
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 84 commits ahead of jlengstorf:master.
pomber Merge pull request #13 from 0xflotus/patch-1
fixed small error in Coming Soon
Latest commit 1ff42a5 Nov 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
blog-demo Fix gatsby dep Jul 29, 2019
demo
rehype-waves Fix nested codeblocks Sep 25, 2019
theme v0.1.5 Nov 12, 2019
.gitignore
license Add docs Jul 22, 2019
package.json Use use-spring Sep 23, 2019
readme.md
yarn.lock

readme.md

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.

The MDX looks like this:

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:

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

    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)

    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

    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);
  1. Import CodeWave and use it in any MDX file

    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.

Code Blocks

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

```js 1:3,6
// highlights line 1,2,3 and 6
```

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

Coming Soon

  • Import code from files
  • Better custom code syntax highlighting using theme-ui
  • More waves
  • More docs
You can’t perform that action at this time.