Krashna Musika Website

Static site generator for the site of Delft's student music association Krashna Musika, built with React and Gatsby.js.

Installation

To get started, you'll need the Node.js environment and the Yarn package manager. Once you have those installed, run the following commands from the root directory of this repo:

yarn
yarn global add gatsby-cli

Running

Development

To run a development server (with live-reloading), run:

gatsby develop

There should now be a server listening on localhost:8000!

Production

To build a production bundle, run:

gatsby build

Changes to the master branch are automatically deployed to the live site (at krashna.nl), through the Netlify build service.

Documentation

Overall Structure

In general, this project follows the common Gatsby.js folder structure:

• Pages are defined in /src/pages. The file name of each JS file is used as the URL of the corresponding page.
• Page templates (boilerplate structures for how different types of pages should look) are located in /src/templates.
• The main page layout is defined in /src/layouts.
• Components which these pages and templates use are contained in the /src/components folder.

However, there are some ways in which it differs, to offer internationalization and other features:

• All translations are contained in the YAML files of the /src/locales folder. Each sub-folder contains a copy of each translation definition file, in a specific language. These translation files are compiled down to JSON, which is served alongside the rest of the content and dynamically inserted into the page at runtime.
• All data on which page generation is based, such as the list of concerts, is contained in /src/data.

Adding a Page

To add a page...

1. Add a JS file in /src/pages with as name the URL you want to put that page on. When in doubt on how to structure this file, have a look at the other existing pages in that folder.
2. Add the needed translations for any translation keys you use, in /src/locales. Refer to existing pages and translations for examples of how one can access such a translation key in the page file, and how this can be defined in the translation file.

Adding a Concert

To add a concert...

1. Add an entry to the /src/data/concerts.yaml list, following the same format as the other entries.
2. Add language-dependent texts to the concerts.yaml files in the /src/locales folder, in both languages.