Skip to content

backstrokeapp/www

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5958c56 · Feb 6, 2019

History

31 Commits
Jul 19, 2017
Jan 23, 2018
Feb 6, 2019
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Oct 8, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017
Jul 19, 2017

Repository files navigation

Backstroke's website

This folder contains all the files to build Backstroke's website.

A preview of the site

React Templating

Backstroke's website is a static site. It's created by rendering a tree of stateless React components at build time, which is then added to a html file. Since components are stateless, there are a couple limitations:

  • Components must be pure (ie, functions). Components are only rendered once.
  • Passing a callback function in a component's props isn't really possible, since components are rendered once.

SCSS Styling

Each component has a respective styles.scss that is compiled into css during the build step. On completion, all stylesheets are concatenated together. A stylesheet for each component scopes styles to enforce a seperation of concerns.

Javascript

For ease-of-use, all javascript is required in with script tags and unbundled. While bundling may be required later, with the quantity of javascript used currently it's a bit heavy handed. A list of scripts can be found here: https://github.com/backstrokeapp/www/tree/master/assets/scripts

Development

NOTE tac is required for the Makefile to work properly.

$ cd backstroke/site
$ # Install dependencies
$ yarn
$
$ # Run a live-reloading server for development.
$ make watch
$ # Make a build. (Behind the scenes, make watch calls this when a file changes)
$ make build

Making a new component

We have a script that will scaffold out a component for you - run it with yarn make-component. The template used is located in .component-template, and the script itself is in make-component (both within the root of the site directory). Here's an example invocation of yarn make-component:

$ yarn make-component
Let's make a new component.
Enter the name of your component, in dash-case: my-component-name
* Copying template to src/components/my-component-name...
You have a new component in src/components/my-component-name:
* src/components/my-component-name/index.js contains your component code.
* src/components/my-component-name/_styles.scss contains your component styles.
* Press enter to open the documentation in your $EDITOR...