[Theme] Finish development of Stellar

[nodox]

The Stellar theme can be found on the feat-stellar-theme branch of this repo.

$ git clone https://github.com/gatsbymanor/gatsby-theme-kit.git
$ cd gatsby-theme-kit 
$ yarn
$ git checkout feat-stellar-theme
$ gatsby develop

Goal

The final version of the theme on this branch should look and behave like this live demo.

Initial work

The branch currently has the theme styles implemented. Styles can be found in the sass/ folder. Javascript animation as seen in the live demo as not been implemented.

Proposed Approach

The goal is make React components out of the HTML elements and enable the theme to act and behave in the same manner of the demo. Our proposed implementation is to make a component for each section that is commented out in src/pages/index.js. Add the corresponding unit tests for each component using Jest and Enzyme. A nice to have are e2e tests with nightwatch.js which is built into the theme kit. Use the Massively source code in our gallery as a guide to testing. The component creation approach in Massively does not play well with SSR of gatsby. If you do get inspiration from here use that strategy as a loose guide. The end result component structure will be more like the Tessellate source code.

Proposed hierarchy:

<div id="wrapper">
  <Header />
  <Nav />
  <Main>
    <Intro />
    <First />
    <Second />
    <GetStarted />
  </Main>
  <Footer />
</div>

Common mistakes and Pitfalls

The lead developer is constrained to work within the bounds of the css classes already declared in the stylesheet to have the smoothest development experience. The above hierarchy might not be possible because of the way the css classes are interacting. Therefore create additional classes in a separate file called custom.scss and import those additional styles to get the desired effect. Beware of Gatsby SSR.

These are just suggestions, if you have extensive experience with React please use your judgement when creating best practices.

Acceptance Criteria (ACs):

• [Required] Create React components from HTML in src/pages/index.js
• [Required] Add unit tests for each component
• [Required] Provide a README
• [Nice to have] Simple e2e tests

Contribution Guidelines

Follow the steps outline in our docs on how to Contribute a theme.

Developers to contact for help

React out to @nodox fi you need help any step of the way.

Final notes

Developers of all experience levels are welcome to tackle this development effort. Thank you so much for contributing to our community! ❤️ 😄

[nodox]

@BryanSmith33 would you like to work on this issue? 😄

[nodox]

@pbrudny started working on this!

[BryanSmith33]

Awesome. Sorry for th delay. I’ve been swamped at work but it should cool soon

[nodox]

@BryanSmith33 I can draft another theme spec similar to the one above since someone started on this one in your absence. Trust me there is plenty of contributions to be made 😅

Thanks for helping out!

[pbrudny]

@nodox Done with test coverage and animations. Please have a look: https://github.com/gatsbymanor/gatsby-theme-kit/pull/11

[pbrudny]

@nodox Here is the 'clean' version only theme without Gatsby files https://github.com/gatsbymanor/gatsby-theme-kit/pull/12

[pbrudny]

@nodox PR is ready: https://github.com/gatsbymanor/gatsby-theme-stellar/pull/1

[nodox]

PR Shipped!