Levilian / ueno-gatsby-starter

Opinionated Gatsby starter by Ueno.

Ueno Gatsby Starter

Kick off your project with this opinionated boilerplate. This barebones starter ships with the main Gatsby configuration files you might need.

Installation

Install create-ueno-app:

npm install -g create-ueno-app
yarn global add create-ueno-app

Create your app:

create-ueno-app gatsby my-app

Alternative setup

You also have the choice to use gatsby-cli to setup your project without installing create-ueno-app.

npm install -g gatsby-cli
gatsby new my-app "https://github.com/ueno-llc/ueno-gatsby-starter#master --recursive"

We recommend you changing straight away src/components/link/Link.tsx which is use for our 3 starter kits. You probably want something similar to that: Link.tsx.

Things to know

There are couple of things that are good to know about this starter, compared to the default gatsby starter.

TypeScript

We encourage TypeScript usage and have included basic linting.

• Avoid export default ... - the only place you absolutely need to do this is in ./pages/*. Rather export const Module = ... and import { Module } from './file' (details)

See the TypeScript Handbook for more tips and tricks

SCSS

All .scss and .sass imports will:

• include the classnames package
• output css modules

Take the following code snippet as an example:

import React from 'react';
import s from './my-styles.scss';

export const Button = ({ disabled, children }: { disabled: boolean, children: React.ReactNode }) => (
  <button className={s('button', { disabled })}>{children}</button>
);

SVG

You can import SVG files as React components by placing them in the ./src/assets/svg folder.

Usage:

import React from 'react';
import Logo from 'assets/svg/logo.svg';

export const Header = () => (
  <header>
    <Logo style={{ color: 'blue' }} />
  </header>
);

Deploy