In this post I take the opportunity of a question from @mieke to document The Reef’s website.
Overview
The Reef’s website is 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 website works like this:
- All the content lives on this single post. You can find it going to the web content subcategory on the forum, where you will find it as “The Reef - page”
- The rendered website lives at
https://start.edgeryders.eu/page/16699. - Every time someone navigates to the website, 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).
- Every time someone navigates to
https://thereef.brussels, the DNS servers redirect ontohttps://start.edgeryders.eu/page/16699
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.