Skip to content
Gatsby Theme - Child theme for Catalyst Core which adds single page anchor navigation
JavaScript
Branch: master
Clone or download
Latest commit 320c27a Aug 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/gatsby-theme-catalyst-core/components Updated versions and small improvements Aug 1, 2019
.babelrc
.gitignore Initial Commit Jun 16, 2019
LICENSE Initial Commit Jun 16, 2019
README.md Update README.md Aug 1, 2019
gatsby-config.js Updated config Jul 31, 2019
index.js Use deepmerge, use baseTheme Jul 24, 2019
package-lock.json Fix lock files Aug 7, 2019
package.json Reverted depedencies Aug 22, 2019
yarn.lock Fix lock files Aug 7, 2019

README.md

Gatsby Theme Catalyst Onepage

Blazing Start

# create a new Gatsby site using the catalyst core starter site
gatsby new my-catalyst-starter-onepage https://github.com/ehowey/gatsby-starter-catalyst-onepage

Read the Gatsby Quick Start Guide

Demo

https://gatsby-starter-catalyst-onepage.netlify.com/

Overview

Read the documentation for the Catalyst core theme

This is a child theme for gatsby-theme-catalyst-core which adds anchor link navigation and "onepage" functionality to the core theme. This would be ideal for a personal portfolio site or small single page brochure site.

menuLinks -> anchorLinks

In the gatsby-config file the onepage theme looks for an anchorLinks array to specify the links used in the theme. See the starter site for a basic implementation of this. These anchor links should use the hastag in the format #anchorlink. These values are then used by react-scroll to create the anchor based navigation menu.

Example sites based on this theme

Catalyst Themes and Starters

  • Gatsby-Theme-Catalyst-Core: This acts as the core theme on which all other themes are based. It houses a basic, unstyled, site architecture along with most commonly needed dependencies. Uses theme-ui under the hood for styling changes and MDX for pages.

Shadowed Components

The following components (other than theme-ui settings) are modified from gatsby-theme-catalyst-core:

src/gatsby-theme-catalyst-core/components/nav.js
src/gatsby-theme-catalyst-core/components/navLinks.js
src/gatsby-theme-catalyst-core/components/branding.js

The main change in this theme is modification of the navigation element to provide built in support for single page scrolling navigation using react-scroll. This allows the theme to track where the user is on the page and also to provide a smooth scrolling experience. The navigation menu is automatically created from the gatsby-config.js file using the anchorLinks array. There is not currently support for blended anchor links and standard internal links in the Nav menu however this is a planned feature. Links to other pages on site do work, and the nav menu is automatically adjusted to link back to the root page.

The branding element had to be modified to provide scroll to top functionality on the main index page and link functionality on other pages in the site. All settings remain the same as those used in gatsby-theme-catalyst-core

Next Steps

This is a passion project for me. I would love any additional feedback, suggestions and pull requests. I can be contacted via email at: eric@erichowey.dev

You can’t perform that action at this time.