@awolf81/gatsby-theme-scrollycoding v0.3.0-next.11-rc1

Gatsby theme for ScrollyCoding

This is a theme to add @code-hike/scrollycoding to your Gatbsy site.

Version info

This is alpha software and the version is oriented on scrollycoding version to know which version is working with the theme.

Examples

Checkout the examples in https://github.com/AWolf81/gatsby-theme-scrollycoding-workspace.

Usage

Run npm install @awolf81/gatsby-theme-scrollycoding gatsby-plugin-postcss to install the theme. Install ScrollyCoding with npm install @code-hike/scrollycoding@0.3.0-next.11 (Note: Exact version required as Scrollycoding is pretty young and may change at any time)

Postcss added so we can use Tailwindcss for styling.

Run npx tailwindcss init -p so you can configure Tailwind later.

Next, add the theme to your gatsby-config.js:

module.exports = {
  // rest of your config...
  plugins: [
    '@awolf81/gatsby-theme-scrollycoding',
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`
      }
    },
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          pages: require.resolve('./src/components/posts-layout.jsx')
          // default: require.resolve("./src/components/default-page-layout.js"),
        }
      }
    }
  ]
}

Now, we can create our layout component in ./src/components/posts-layout.jsx:

import React from 'react'
import { ScrollycodingContextProviderComponent } from '@awolf81/gatsby-theme-scrollycoding/src/context'
import '../styles/global.css'

const classes = {
  'ch-hike-step-content-unfocused': 'opacity-25 transition-opacity',
  'ch-hike-step-content': 'border-none',
  'ch-frame-button': 'bg-gray-300 border-gray-600'
}

const preset = {
  template: 'react',
  customSetup: {
    dependencies: { 
      'react-svg-curve': 'latest',
    }
  }
}

// codeProps is optional --> defaults to minColumns: 40
const codeProps = {
  minColumns: 40,
  minZoom: 0.7
}

export default function Layout({ children, ...props }) {
  return (
    <ScrollycodingContextProviderComponent
      classes={classes}
      codeProps={codeProps}
      preset={preset}
    >
      <div className="container p-5 mx-auto">
        <h1 className="blog-heading">Blog</h1>
        {children}
      </div>
    </ScrollycodingContextProviderComponent>
  )
}

For styling add src/styles/global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

License

MIT

Issues

If you're having issues or if there is something to improve, please add an issue at Github AWolf81/gatsby-theme-scrollycoding-workspace.