de Linde

Mogens de Linde is a Danish company that renews buildings with great care, taking in account their historical background and peculiarities that make them unique, since 1975.

In 2020, a collaboration with Limbo gave me the honor of coding their new website in order to make their work pop out of the screen and give them the life they deserve. The design, by Romain Gorisse, highlights the great picture collection (both historical and contemporary), which made it look absolutely beautiful, along with its minimal aesthetics.

This project is made of 3 parts: Content Management System, Website and PDF Generator.

Content Management System

This was the most technically challenging part of this project. Romain designed a modular system, where pages could be assembled with a combination of the available modules, for the most part.

To meet this requirement, I leveraged Gutenberg, Wordpress’ newest editor to create my own Gutenberg Block, which has a custom interface that allows the administrator to select whatever module and compose any given page.

I proceeded to “lock” pages of certain types to certain Gutenberg Blocks templates. The result is that the CMS is very easy to use, and at the same time very powerful. If you are interested in knowing more about it, just write me a line, I’ll be glad to share my process with you.

Website

The website allows the user to navigate through the content with ease of an app (despite the large number of pages). The large images posed a challenge since they could easily make the navigation glitchy while they loaded, but thanks to intensive coding work they are loaded as small as possible for each device and only appear when the user is close to revealing them via scrolling.

The content is sourced via custom REST routes which serve Gutenberg’s information as JSON strings that are simple to consume.

The application itself is a NextJS implementation, which allows us to generate static pages with ease and at the same time refresh the generated content every time we have new entries or changes. Also it made it possible to create “cloud Node functions” in a straightforward manner, which came in handy.

Needless to say, the React environment NextJS makes available was very valuable when implementing the equivalents to the Modules created inside Gutenberg.

PDF Generator

The third part of this solution was a PDF generator. It is a Node app that uses Puppeteer to visit a specific page on the NextJS site, which has a layout that’s made for this purpose, and generate a PDF file out of it. Then, it sends the file back to the user. It has a custom caching and refreshing system that allows for faster downloads.

This feature was core to the solution since PDFs are very valuable in de Linde’s industry and what they had before was not as polished or flexible. With my code they are now able to throw whatever contents at the CMS and have a nice PDF file be generated.