The Reef's website: understanding it and making changes

In this post I take the opportunity of a question from @mieke to document The Reef’s website.

Overview

The Reef’s website consists of two parts.

  1. A landing page, that lives at https://thereef.brussels.
  2. Microsites that are accessible from the landing page. At the time of writing they are 5.

The landing page is, technically, a Wordpress blog reduced to one single page. It will normally not need frequent changes. Login credentials are to be found on Login – Nextcloud.

The microsites contain the actual information about The Reef. They were created with a technology called Webkit. It was developed by the mighty @owen to support Edgeryders’s working style, which often calls for deploying simple microsites. Since the Edgeryders community is very comfortable working with this Discourse platform, the idea was that people would use it to create and update the content, and Webkit takes care of “translating” posts on edgeryders.eu into website pages. So, The Reef’s microsites works like this:

  • All the content of each microsite lives on a single post. For example, the English microsite’s is here. You can find all the topics for microsites in the web content subcategory on the forum. If you should make a new one, you should also put in the same subcategory.
  • The rendered websites lives at URLs structured like this https://start.edgeryders.eu/page/TOPIC_NUMBER. For example, the English microsite lives at https://start.edgeryders.eu/page/16699, as the URL of the topic on Edgeryders ends in 16699.
  • Every time someone navigates to a microsite, Webkit reads the post and renders the content. This means that updating is immediate: as soon as you make a change to the post, it becomes visible on the website right away (you might need to reload the page).

The price we pay for this simplicity is that the design of the website is highly constrained. We can change text and pictures on the fly, but anything more complicated than that requires throwing away the website completely and starting from scratch.

Making changes

To make changes to the website you need moderation rights on the Edgeryders forum. This is to avoid anyone making changes by mistake. If you don’t have such rights, ask @reef-it to make the change for you. If you do, navigate to the content post, you will see an icon with a red pencil next to the publication date, like this:

Clicking on the pencil icon allows you to edit the post, which automatically triggers a change to the website.

Be mindful that Webkit interprets text in a different way from the Discourse platform, so your content on the website will look different from what it looks like in the forum. For example, level 1 and 2 titles (like this: # My title or ## My title) generate items in the navbar of the website. A webkit manual is here. In general, I recommend to proceed with care.

Reverting changes

If you make a mistake and the website “breaks” you can easily return to the status quo ante. Just navigate to the content post and click on the pencil icon: you will see the revision history screen:

Use the arrows at the bottom left of this screen to navigate to the revision you want to restore, then click on the “revert to revision XX” button. Normally it will be the last but one revision, revision 99, but if you have saved more than once you will have to go back to an earlier revision.

4 Likes