We’ve already presented a case study for the Show Orchard website focusing on migrating an Orchard 1 DotNest website to Orchard Core with content migration using the Orchard 1 Recipe Migration feature; you can read that here. Now, the GPU Day website is very similar except the content migration was simplified and we didn’t overhaul the website markup and styling. It’s a great example of how you can easily transition to Orchard Core keeping everything as is if you don’t have the time or budget to modernize every area of the site.

As most of what we at Lombiq do, this project is also open-source. If you’d like to follow along, you can have a look at the theme’s source code here.

This is a post by Márk Bartha, software engineer at Lombiq.

Introduction

GPU Day is a conference organized by the Wigner Scientific Computational Laboratory that focuses on massively parallel computing, visualization, and data analysis in both scientific and industrial applications. We also presented our Hastlayer .NET hardware accelerator project many times there too.

The website serves as an information hub for these annual conferences. It was initially running on Orchard 1 DotNest, but now it was time to migrate it to Orchard Core. While these migrations always come with certain challenges due to the new features introduced in Orchard Core, we tried to keep things easy by not changing the frontend of the site, even though it's somewhat outdated.

Rethinking content types

Each GPU Day event needed to display various types of information, such as the schedule, speakers, and location details. Previously, with Orchard 1, this process required creating separate content items for each type of information and then linking them using the Projection or Content Elements in the Layouts editor. However, Orchard Core offered a more streamlined approach and we could simplify it.

First, there was no real need for the option to organize the elements' position, so we didn’t just replace it with FlowPart. We used content fields instead, for example, the "About GPU Day" section is now just an HtmlField instead of a separate content item.

For organizing the event schedule, we introduced an Event Day content type to represent each day of the event, capturing its title and date. Additionally, we created an Event content type for each specific activity, detailing its time and other relevant information. There’s another content type called Event with their details along with the date and time of it. With all this information we were able to add a BagPart called Schedule to the GPU Day type and let the admins add Event Day items. Then, there was a query responsible for fetching all the Event items where their day matches with the one set to the Event Day item.

The Speaker items, similarly to the Event items, are managed separately, but we also use a Taxonomy called Year. It’s the same implementation we had on the Orchard 1 site: if the Year value matches with the one selected in the Year TaxonomyField on the GPUDay type, then a query can fetch the related speakers.

Migrating the old events

While we didn't utilize the migration utility, we still needed to transfer all the past events. Although there weren't many content items, recreating the events manually would have required us to also create all the speakers and scheduled programs, and there were around a hundred of them. Considering these events are already in the past, the easiest solution was to create a content type called Old GPU Day with an HtmlBodyPart and simply grab the markup from the live site. The only adjustments needed were to the image URLs. The relative paths were fine since we copied the entire media library, but in the old system, they were prefixed with "https://dotneststatic.com/”. We had to replace this with a Liquid media filter (e.g., https://dotneststatic.com/media/images/wigner-logo.png became {{ "~/mediatheme/images/wigner-logo.png" | href }}). Finally, we ensured that these are rendered exactly the same as the normal GPU Day items and that the queries listing the old events capture both the old and new ones, ensuring that a visitor won’t notice any discrepancies.

Keeping the original styling completely

Back then, the theme was originally built on a third-party template. We implemented multiple shape templates where the markup followed the original design. With the migration, we didn’t aim to overhaul or modernize the styling. We still wanted to use our NodeJS Extensions for asset compilation, though. So, we simply copied over the old .scss files along with the third-party assets and ensured they compiled, resulting in the same styling. It was more or less straightforward; however, we had to fix a few breaking changes with the new compiler, such as using math.div() instead of a slash (see more about this here).

To keep the markup as it was, we copied the original Liquid code into their corresponding templates. The Liquid code had to be modified since it is not entirely compatible with Orchard Core, which uses a different library and set of filters. For example, the {% Href "~/Themes/GpuDay.Theme/Images/wigner-logo.png" %} code was changed to {{ "~/mediatheme/images/wigner-logo.png" | href }}.

Lombiq modules and utilities involved

During development, the NodeJS Extensions utility proved invaluable, as it automatically compiles all assets during the build process. The Lombiq Media Theme is an ideal choice for developing a media theme for DotNest, compiling your templates and assets into a deployable package; refer to the documentation for further details. Lastly, we used the Lombiq Privacy module to ensure GDPR compliance.

Summary

Migrating old websites from Orchard to Orchard Core doesn’t have to be a huge hassle if you're willing to make some compromises. We were content to use the old markup and assets, and we managed to store the entire HTML markup of the old events in an HtmlField to keep the process simple and less labor-intensive. Ultimately, the admins can now enjoy the more user-friendly content editing capabilities of Orchard Core to create this year's GPU Day event – see what Balázs Kacskovics told us about it:

Our work became much easier with the new admin panel. With fewer menu items, it became much more transparent and intuitive than before. Now, finding the relevant options and content items is a simple task. Also, fewer content types mean less hassle for us, e.g. the editing of the new GPUDay content item is more efficient and less time-consuming, also we can make fewer mistakes with the new frame.

If you're considering migrating your Orchard 1 website to DotNest Core, this is an excellent time. Should you have any questions or encounter challenges don’t hesitate to reach out to us. We're always ready to bring our expertise to your unique project needs. Get in touch with us today, and let's start making your Orchard Core website even better!

No Comments