Skip to content
Bring scrollytelling to your MDX
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 75 commits ahead of jlengstorf:master.
Latest commit aabc580 Aug 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Rename funding.yml Jul 29, 2019
blog-demo Fix gatsby dep Jul 29, 2019
demo Bump code surfer Aug 10, 2019
theme v0.1.1 Aug 11, 2019
.gitignore chore: ignore local Netlify stuff Jul 3, 2019
license Add docs Jul 22, 2019
package.json Add blog demo Jul 21, 2019
readme.md Correct typo Aug 13, 2019
yarn.lock Bump code-surfer version Aug 11, 2019

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 highligthing using theme-ui
  • More waves
  • More docs
You can’t perform that action at this time.