A website to get potential new users of Signalen to get to know it and get them started.
This site is a collaborative project by the Signalen community and is meant to be easy to contribute to.
This site is built using Gatsby. First make sure you have Node installed on your machine. Then install the dependencies with the npm install
command. After this you can use the npm start
to start a local web server and build/update the site.
The master
branch of this repository is automatically deployed using Netlify.
You can add a news article to the website by adding a Markdown document to the pages/news/
folder. The news section of the website has multilingual support. Copy an existing file and edit it. Use the following filename convention: YYYY-MM-DD-filename.en.md
Make sure the document includes the following frontmatter:
---
path: "/en/news/2021-02-11-filename/"
date: "2021-02-11"
title: "Welcome to the Signalen news"
lang: en
template: default
Make sure you set the path
and lang
parameters. The lang is used to filter out the specific posts for a particular language.
If you want to provide a Dutch version of your news article make sure you prefix the path with nl
and your filename includes a language local using the following convention: YYYY-MM-DD-filename.md
(NOTE: that for the default language set in Gatsby config you don't need to include language code in the filename)
Example:
---
path: "/news/2021-02-11-filename/"
date: "2021-02-11"
title: "Welkom op het Signalen nieuws"
lang: nl
template: default
For more information on how the news section is implemented refer to (https://www.gatsbyjs.com/blog/2017-07-19-creating-a-blog-with-gatsby/). For more information on how multilingual support is implemented refer to the section 'Localization'
This site has basic multilingual support using the gatsby-plugin-i18n. It is implemented by the guidelines written in this blogpost: https://www.gatsbyjs.com/blog/2020-02-19-how-to-build-multilingual-sites-with-gatsby/
You can start your won translation by prefixing the extensions of files which serve up pages by using the ISO country codes. Files which do not include such a prefix will be defaulted to the language as configured in the gatbsy-config.js
file.
example:
index.en.js serves the English equivalent of that page.
The plugin makes all the language specific files available under the site-root/ so in the case of English site-root/en/.
The navigation menu uses a a key-value list to translate the separate navigation items. The pages/menu.json
file
contains all the items and translations. To add a new language simply copy another language array, insert the language code and make the language specific translations.
"nl": [
{
"title": "Over Signalen",
"link": "/#over-signalen",
"partiallyActive": false
},
The footer part of the website is generated using the values listed in the menu.json
file.
Imports in pages need to be referenced explicitly and do not resolve automatically.
For example import Payoff from '../components/Payoff/
will always resolve to import Payoff from '../components/Payoff/index.js
. So if you need to reference a language specific version you should indicate the filename import Payoff from '../components/Payoff/index.en.js
.
In order to add a translation refer to all English related files and make a copy of them including the new language code. Check the import
statements in the page to check whether they point to the correct translated version of that file.
In the current configuration only the Payoff component and the road map page and component needs to be translated in this fashion.
More information about the configuration and implementation can be found here: https://www.gatsbyjs.com/blog/2020-02-19-how-to-build-multilingual-sites-with-gatsby/
We have a code of conduct that we expect you to follow.
Copyright © the Signalen contributors.
Licensed under EUPLv1.2.