This repository contains the code and content of the SI's website. The website was developed using Gatsby by Ilias Trichopoulos in collaboration with Konrad Seifert and is hosted on Netlify.

NetlifyCMS was integrated to provide CMS features for easy content editing. It is available at https://simoninstitute.ch/admin

Changes in the main branch of this repository will be deployed on the production website.

• Pages
• Content
• Images
• Updating the content and previewing changes
• 3rd party services

All the content of the website lives in the /src/content folder. The content is grouped in subfolders that represent different content types. Do not change the names of these subfolders because the website will not know where to find the content. The subfolders are:

Each subfolder inside the blog folder represents a blog post.

The name of the folder defines the URL of the blog post. For example, the src/content/blog/review-of-inception folder corresponds to the https://www.simoninstitute.ch/blog/post/review-of-inception/ page. Changing the name of the blog post folder will change the URL.

Inside a blog post folder there is an index.md file which contains the content of the blog post. See the blog post documentation for more details about the content structure of a blog post.

Each subfolder inside the member folder represents a member of the team.

The name of the folder defines the URL of the member detail page. For example, the src/content/member/konrad-seifert folder correspnds to the https://www.simoninstitute.ch/about/member/konrad-seifert/ page. Changing the name of the member folder will change the URL.

Similarly to the blog folder, inside the member folder there is an index.md file which contains the content of the team member. See the member documentation for more details about the member content structure.

Same as above, but for the project content type. The name of the folder defines the URL and changing it will alter the URL. See the project documentation for more details about the project content structure.

The project content type has been archived.

The subpage content type allows you to create simple pages with the "standard" layout. The standard layout is the "side-by-side" title and content layout that the project pages also use. The subfolders of this folder represent different pages where the name of the subfolder is the URL of the page. For example, the src/content/subpage/legal folder corresponds to the https://www.simoninstitute.ch/legal/ page.

As above, each subpage folder contains an index.md file with the contents of the page. The content structure is a more simplified version of the project content structure. See the subpage documentation for more details.

Some pages need a customized layout. The files listed in this subfolder represent the content of each individual page. ⚠️ Changing the names of these files will not change the URLs of the pages and it will break the website because the customized layout template will not know where to find the content of the page.

For more details, see the documentation of the custom pages:

• Home page
• About page
• Contact page
• Our work page

The _configuration folder includes different kinds of configuration options for the website:

• Texts of the 404 page
• List of blog posts tags that are featured in the blog overview and blog tag overview pages.
• The links of the footer
• Metadata including the default SEO title and description
• Navigation menu items

To display a blog posts in a section of the "Our work" page, a category needs to be assigned to it. To add/remove categories you'll need to edit this content type.

Each team member can have a group assigned to it. To add/remove groups you'll need to edit this content type.

All images can be found in the /src/images folder. The idea of grouping all images together is to enable the feature of an "image gallery" once a CMS is integrated. You can upload images here and reference them in the content of the website.

To update the content and preview the changes before publishing them, follow this procedure:

• Go to the update-content branch of this GitHub repository.
• Perform the changes that you want and "commit" your changes.
• Create a pull request against the main branch.
• Wait for Netlify to create a preview link.
• Check the preview link to visualize the changes you made.
• Make further changes if needed.
• Once happy with how the changes look like on the preview site, merge the pull request. This will trigger a production deployment and your changes will shortly become live.

The website relies on the following services:

• GitHub: Hosting of the contents and the code of the website
• Netlify: (Free) hosting of the actual website, connected to the GitHub repository.
• Basin: Backend of the contact form.
• Airtable: Application form.

Add the following at the top of the /static/admin/config.yml file:

local_backend: true

and run:

yarn start:cms