Static site generator for the site of Delft's student music association Krashna Musika, built with React and Gatsby.js.
yarn yarn global add gatsby-cli
To start a development server (with live-reloading), run:
There will now be a server listening on localhost:8000!
To build a production bundle, run:
In general, this project follows the common Gatsby.js folder structure:
- Pages are defined in
/src/pages. The file name base of each JS file (excluding the
.jsextension) is used as the URL of the corresponding page.
- Page templates (boilerplate structures for how different types of pages should look) are located in
- Components which these pages and templates use are contained in the
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/localesfolder. 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. We use the
react-intllibrary, integrated by
gatsby-plugin-intl, for translation.
- All data on which page generation is based, such as the list of concerts, is contained in
Adding a Page
To add a page...
- Add a JS file in
/src/pageswith 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.
- 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...
- Add an entry to the
/src/data/concerts.yamllist, following the same format as the other entries.
- Add language-dependent texts to the
concerts.yamlfiles in the
/src/localesfolder, in both languages.