This is the official site of The Wonder Bars, a live electronic music band from Philadelphia.

Install the Gatsby CLI globally, if you don't already have v2.x installed

yarn global add gatsby

Clone this repository

git clone https://github.com/mindbrain/wonderbars.git

Install packages

yarn install

Run the server

yarn start

Visit http://localhost:8000 to view the site.

To add a new page, create a .md file in src/pages. This can also be a .js file, but it must wrap the <Page> component with a unique ID.

Use the generators to add new blog posts, events, and releases.

To add blog posts:

yarn generate article 'Hello New York'

This will generate a file in src/articles with the following contents:

---
title: Hello New York
date: 2018-10-01
category: tour
---

This gives you a starting point to write a new blog post.

To add events:

yarn generate event 'Event Name'

This will generate the following YAML in src/data/events:

---
name: Event Name
location: TBD
date: 2019-08-08
facebook_id: 1234567
description:

Adding releases is similar:

yarn generate release 'Release Name'

...which generates this YAML in src/data/releases:

---
name: Release Name
catalog_number: MB007

The architecture of this application is based on cssguidelin.es and an ITCSS-based approach, with the JavaScript and markup following the organization of the CSS. Here's an overview of the directory structure:

src
├── articles
├── assets
│   ├── events
│   └── releases
├── base
├── components
├── data
│   ├── events
│   └── releases
├── objects
├── pages
├── settings
│   └── fonts
└── templates

Global CSS settings, including variable declarations and @font-face installation. Loaded first.

Includes the base layout styles, the <Layout> component that wraps all pages, and base typography styles for the entire application. Most base and settings styles are included when one wraps the <Layout> component, which happens as a result of rendering a <Page>.

Objects have minimal styling, and are typically thought of as "interfaces" which are built upon either by styling or being wrapped in a component.

Code which shares common styles, behavior, and/or state. These are typically called on a page and make up the "pieces" of each page.

This is where the content for the application is contained, whether it be in structured YAML files for events and releases, or free-form content with YAML metadata for articles.

The various static pages which make up the site. They are typically composed of various components, but all implement the <Page> object for site-wide standardization and metadata settings. Pages can be either bespoke components (defined in a .js file), content with metadata (defined in a .md file), or generated automatically using a template.

Found in the src/templates directory, this is a feature of Gatsby which is used to compile bespoke pages for each blog post and static page. The <PageTemplate> component, for example, is used to compile .md files in src/pages, while the <ArticleTemplate> component is used to compile blog articles in src/data/articles.

Deployment is handled automatically with pushes to master of this repository. To deploy your changes manually, run the following command:

yarn deploy

You'll need access to https://thewonderbars.com to continue.

Create a pull request to make content changes, or file a new issue if you see something wrong. We're open to all kinds of contributions! Please make sure to follow the code of conduct while interacting with this project.