Updating ImageSharp.Web v2, removing pagenum=1 from the 1 pager link to improve SEO, adding OnMessageSendingAsync() protected method and news and updates around the Lombiq Helpful Libraries. Check out our current post to read about the details! Orchard Core updates Update ImageSharp.Web v2 ImageSharp is a new, fully-featured, fully managed, cross-platform, 2D graphics library. Designed to simplify image processing, ImageSharp brings you an incredibly powerful yet beautifully simple API. ImageSharp is designed from the ground up to be flexible and extensible. The library provides API endpoints for common image processing operations and the building blocks to allow for the development of additional operations. ImageSharp.Web is a high-performance ASP.NET Core Middleware built on top of ImageSharp that allows the processing and caching of image requests via a simple API. ImageSharp.Web provides API endpoints for common image processing operations and the building blocks to allow for the development of additional extensions to add image sources, caching mechanisms, or even your own processing API. A few weeks ago ImageSharp.Web v2 had been released, and now Orchard is using the latest version of ImageSharp thanks to Dean Marcussen. ImageSharp is used in Orchard Core when you would like to work with Media Profiles or when you work with images (like setting up a crop point) from the Media Library using the Media Field. Remove pagenum=1 from the "1" pager link to improve SEO There's a minor SEO problem with the pager when pagenum=1. Since the content of pagenum=1 is identical to the page where the pagenum parameter is absent, SEO audit tools want a canonical URL to be specified. Though arguably, the pagenum parameter should just be removed when the value is 1. Steps to reproduce the behavior: Set up your site with the Blog recipe. Navigate to Configuration -> Settings -> General and set the Page size to 1. View the content items and observe the pager behavior. The expectation would be the pagenum parameter to be removed for the 1 link like it is for the < and << links. From now, you will not find pagenum=1 when you would like to navigate to the first page of your lists, even when you are hovering over the list item that contains 1 in your pager. Adding OnMessageSendingAsync() protected method There is a new protected virtual method called OnMessageSendingAsync, which is called before you want to send a new email using the STMP service. Now you can define how to configure the SMTP client before sending your message. News from the community Lombiq Helpful Libraries - Resource Management for Orchard Core The resource filter makes it possible to include resources automatically based on the current context. E.g., inject home page styling only when the home page is being loaded., Let's see a quick and simple sample about how you can use it and, what can you do exactly with this filter! Last week we mentioned that our Base Theme for Orchard Core is released, which contains all the foundations to build Orchard themes efficiently with included detailed samples. If you want to quickly try out this project and see it in action, clone our Open-Source Orchard Core Extensions full Orchard Core solution and also see our other useful Orchard Core-related open-source projects! We will clone the Lombiq's Open-Source Orchard Core Extensions repository for this demo as well. We will set up our site using the Blog recipe. After that, you can navigate to Design -> Themes and enable the Lombiq Base Theme and Lombiq Base Theme - Samples themes. You can also make the Samples one as the current site theme. Don't forget to enable the Lombiq Helpful Extensions - Helpful Widgets feature from Configuration -> Features. And now, you can go to the home page of your site and open the predefined blog post that comes from the recipe. You will see that our theme is applied with our stylesheets too, which will apply a different look when the site renders the detailed view of a blog post content item. And here comes the resource filters. To add resource filters the IResourceFilterProvider interface needs to be implemented, and the registration needs to be added to the service collection as well. As you can see here, we used the Always, and WhenContentType methods to define when to inject the stylesheets that we registered using the RegisterStylesheet method. We also have a RegisterFootScript and a RegisterHeadScript method to register scripts that will be displayed in the head or at the foot of the page. If you always want to inject the resource named Site, you can use the Always method. And if you only want to inject the resource named BlogPost when we display the detail view of the BlogPost content type, use the WhenContentType method and provide the BlogPost as the name of the content type. And don't forget to activate the resource filter middleware by adding app.UseResourceFilters() to the Configure method of the Startup file located in a common module or the web project. E.g.: public override void Configure(IApplicationBuilder app, IEndpointRouteBuilder routes, IServiceProvider serviceProvider){ app.UseResourceFilters();} If you check out the ResourceFilterBuilder.cs (right side of the screen) you will find any other helpful methods that can be used to conditionally inject resources. Like the WhenHomePage and the WhenPathStartsWith ones, which have self-describing names. For more information, don't forget to check out the readme file about Resource Management. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 253 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

Fixing that unpublishing and editing content item with uninitialized ContentPickerField breaks, renaming ReverseProxySettings permission to ManageReverseProxySettings, and our Base Theme for Orchard Core is officially released! Check out our current post to read about the details! Orchard Core updates Rename ReverseProxySettings permission to ManageReverseProxySettings The Reverse Proxy Configuration module enables the configuration of hosting scenarios with a reverse proxy, like enabling the forwarding of the HTTP header X-Forwarded-For and so on. You can manage these options under Configuration -> Settings -> Reverse Proxy, but you need to have the proper permission to do that. Now this permission has a new name, called Manage Reverse Proxy Settings, that you can manage for every role under Security -> Roles. Unpublishing and editing the content item with an uninitialized ContentPickerField breaks If you have a custom ContentPart that contains a ContentPickerField and it's not initialized (so null) and you try to unpublish the content type, it will say it was unpublished, but that won't be true. If you try to edit and publish the same content item, you will get "An unhandled exception occurred while processing the request." error. Dávid El-Saig realized this can be avoided by giving the field a default value (public ContentPickerField Related { get; set; } = new();), but it's easy to miss, and the resulting symptoms are not easy to connect with the true problem. Steps to reproduce the behavior: Create a content type via migration. Start and set up the web app. Create a new content item of the content type. Add a part (e.g. public class RelatedPart : ContentPart { public ContentPickerField Related { get; set; } }) via migration update step. Start up the web app again. Try to unpublish or edit the content item created in step 3. Experience the bug described above. The expected behavior would be that the unpublishing or editing should be successful. And the problem was the following: the if (jPart == null) and if (jField == null) will never be true because if the value is JSON null, it will be a JValue type, so the cast on the preceding line will cause the exception as you can see on the screenshot. This can be fixed if type matching is used instead of casting. And as you can see, there is a new GetContentFields extension that uses the GetContentField extension which contains using the type matching instead of casting. News from the community Lombiq Base Theme for Orchard Core is officially released Our Base Theme for Orchard Core is now officially released! It contains all the foundations to build Orchard themes efficiently with included detailed samples. It can contain any shared content that is not specific to a specific project's theme. You can find the sample module with a commented walkthrough in this repository here. If you want to quickly try out this project and see it in action, clone our Open-Source Orchard Core Extensions full Orchard Core solution and also see our other useful Orchard Core-related open-source projects! We will clone the Lombiq's Open-Source Orchard Core Extensions repository for this demo as well. If you remember, two weeks ago, we mentioned that the Lombiq Helpful Libraries contains an abstract class called MainMenuNavigationProviderBase for creating a home page menu structure using the main navigation name. If you use the Lombiq.BaseTheme, it automatically displays the generated menu as a widget in the Navigation zone. Now it's time to see it in action! Just run our Open-Source Orchard Core Extensions solution and set up your site using the Agency recipe, for example. After that, you can navigate to Design -> Themes and enable the Lombiq Base Theme and Lombiq Base Theme - Samples themes. You can also make the Samples one as the current site theme. Now let's enable some features. Our home page menu structure will display as a widget in the Navigation zone. To have the MenuWidget, we need to enable the Lombiq Helpful Extensions - Helpful Widgets feature. The HelpfulLibrariesNavigationProvider sits in the Samples project of Helpful Libraries, so we have to enable the Lombiq Helpful Libraries - Samples feature as well. Now we can navigate to the home page of our site. The styling looks quite awful, but that's not the point here. As you can see, the Helpful Libraries drop-down now appears with the submenu items that we defined in the Build method. You can see the special LINQ to DB label, and the divider as well. And of course, you have the option to navigate to the given actions to test out the LinqToDbSamplesController that provides some examples of querying the database with Lombiq.HelpfulLibraries.LinqToDb and the TypedRouteController. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 247 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

This week you can read about making the Resources module always enabled, fixing HTML accessibility validation in the admin UI, using LinkGenerator instead of IUrlHelper in SignalMethodProvider, and a demo of the Content Preview module for Orchard Core! Are you interested in the details? Check out this post for more! Orchard Core updates Make Resources module always enabled Let's say you have the Resources module enabled on your site. The Resources module declares scripts and stylesheets that you can use across your tenants like you can have jQuery, jQuery UI, Bootstrap, and CodeMirror just by using the assets defined in this module. But you were able to disable the Resources module without any warning. If you disable that module, you will face an exception. From now you can see that the IsAlwaysEnabled property is set to true in the Manifest file of the module. IsAlwaysEnabled only means that you can't disable the feature once it is enabled, so you can still not use it if not defined from a setup recipe, from a configuration, or from the app with the helpers and so on. Fix HTML accessibility validation in the admin UI There were some UI warnings on the admin page if you run through these validators in the admin UI of Orchard Core: https://validator.w3.org/ https://html-validate.org/rules/prefer-native-element.html https://html-validate.org/rules/no-dup-id.html https://html-validate.org/rules/text-content.html Most of the warnings were found in the UserMenu.cshtml and the Layout. cshtml. For example: UserMenu: Attribute class duplicated. Attribute asp-route-returnurl should be lowercase. <button> is missing the required type attribute. Layout: <resources> must not be self-closed. <button> is missing the required type attribute. Anchor link must have a text describing its purpose. Now - as you can see - the button has the type attribute, there are no duplicated class attributes, and the returnurl is lowercased. Use LinkGenerator instead of IUrlHelper in SignalMethodProvider The signalUrl() JavaScript helper method stopped working, and you were faced with this error: The solution was to not use the IUrlHelper interface anymore but instead of that, use the LinkGenerator, which has a GetPathByAction method that can provide the URL for you. Demos Content Preview Module Hisham Bin Ateya has an organization on GitHub called OrchardCore Contrib with a couple of projects under it. The OrchardCoreContrib.Modules repository contains several modules. This demo is about checking how you can use the Content Preview Module. The Content preview feature of Orchard Core allows you to display the result that will be rendered on the front-end in a separate window while you are editing a content item in the admin. A Preview button is available in the action buttons when you create or edit a content item. And this module allows you to preview your page on different devices. So, if you add the OrchardCoreContrib.ContentPreview NuGet package to your Orchard Core host project and run your application, you will find a new feature if you search for the bar word in the Configuration -> Features screen. If you enable the Page Preview Bar feature, you will be able to preview the currently visited page on desktop, tablet, and mobile from within the top page preview bar. In our case, we hit the Preview button of the predefined About article of the Blog recipe. If you would like to know more, head to YouTube for a short demonstration of this module! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 247 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

The new branding assets for Orchard Core are here! Check out our current post for a demo about a scheduling application, for the Auto Setup updates, and many more! Orchard Core updates New branding assets The issue was that we didn't really have concise branding guidelines or even proper branding assets. But the time has come, Orchard Core has now new branding assets! If you open up the Orchard Core Documentation, you will see the new icons and the new colors everywhere. If you click on the Resources option from the menu and select Branding from the left, you will find the updated guidelines and graphic assets for Orchard Core's branding. If you open up the admin UI of your site, you will see the new logo there too. When referring to Orchard Core, please use one of the logo variations without altering anything apart from the resolution (so don't change the colors, aspect ratio, graphics, or anything else). Bootstrap 5 for the front-end themes Orchard Core comes with some built-in front-end themes that you can use for your site. You can use a theme adapted for agency websites, a theme adapted for blogs, a landing page for a project that is under construction, and of course, the default Theme. When you use the latest preview source of Orchard Core you will notice that all of these now using Bootstrap 5, which means if you would like to use or customize them, you have the options to use the features that come from Bootstrap 5! Here is the content of the package.json file of the Blog theme. Add DistributedLock for Multi-instance AutoSetup It can happen that you have multiple deployments of Orchard Core, but you share the same database or the same Redis instance. Now you can see a new section in the documentation that explains how you can use the new optional distributed lock parameters like the LockTimeout or the LockExpiration. These help you to set the timeout in milliseconds to acquire a distributed auto-setup lock and the expiration in milliseconds of the distributed setup lock. Check implied permissions PermissionHandler should check ImpliedBy permissions. RolesPermissionsHandler doesn't have to check all user roles permissions, just Anonymous and Authenticated if applicable. RolesPermissionsHandler is scoped, so we can cache Anonymous and Authenticated permissions and not query them for each permission evaluation. Check out the default implementation of the IPermissionGrantingService interface, which evaluates if the specified PermissionRequirement is granted by provided claims. Demos Scheduling application The StatCan Orchard Core repository houses a collection of custom Orchard Core resources, modules, and themes that support various web applications and software-as-a-service (SaaS) products. Built on top of Orchard Core CMS, developers have a suite of web application features out of the box (e.g., content management, authentication, forms, themes, etc.) by customizing the selection and configuration of components. The extensibility of the framework allows new features and components to be added easily. One of the custom modules called StatCan Scheduling provides types and utilities useful for scheduling appointments. Let's see that module in action! First of all, let's run the solution and set up your site using the Vuetify platform theme recipe. The scheduling application and the Vuetify platform theme recipe are heavily built on the VueForms module that you can also find in this repository. If you haven't heard about it yet, you can open up This week in Orchard post from last year, where you can find a demo about this module. The first thing that you will see is a calendar that you can use to add appointments to it. You can add a bunch of other calendars and employees to the system. Employees can be used to say that I would like to add an appointment to this calendar for this employee. To be able to add an appointment, first, you need to add an employee to the system. It can be done using the admin UI of Orchard Core (Content -> Content Items -> New Employee). Let's say we would like to add an employee, and we assign this employee to the Default calendar. If you would like to add more than one calendar, you will find a taxonomy named Calendars. This has an AppointmentCalendar term content type. If you add a new AppointmentCalendar, you can specify its color, which will mean if you add a new appointment to this calendar, the color of the appointment will be used from here. But without further ado, let's see the front-end if you add an appointment to this calendar using our newly created employee. As you can see, we have one appointment on July 6 for the employee Gábor Domonkos. The list of employees can be seen on the right, which contains only one employee right now. You have the option to edit the given appointment or employee just by clicking on the given appointment. As we mentioned, this application is heavily built on the VueForms module that means if you navigate to Content -> Vue Forms, you will see a Vue Form content item called Create appointment, which is the component that is responsible for handling the appointment creation logic. And we are just scratching the surface of this application here. If you would like to know more about it, head to YouTube now to see it in action! News from the community Lombiq Helpful Extensions: Helpful Content Types and Widgets The Lombiq Helpful Extensions module is an Orchard Core module containing some handy extensions (e.g., filters for Projector). This time we will see the Helpful Widgets and Helpful Content types features. The Helpful Widgets adds multiple helpful widget content types. These are basic widgets that are added by built-in Orchard Core recipes though in the case of using a custom setup recipe these can be added by this feature too. Includes: ContainerWidget: Works as a container for further widgets. It has a FlowPart attached to it so it can contain additional widgets as well. HtmlWidget: Adds HTML editing and displaying capabilities using a WYSIWYG editor. LiquidWidget: Adds Liquid code editing and rendering capabilities. The Helpful Content Types includes basic content types that are added by built-in Orchard Core recipes though in case of using a custom setup recipe these can be added by this feature too. Includes: Page: Highly customizable page content type with FlowPart and AutoroutePart. The only thing you have to do is to navigate to Configuration -> Features on the admin UI and enable the Helpful Content Types - Lombiq Helpful Extensions and Helpful Widgets - Lombiq Helpful Extensions modules. And as may you guess, if you would like to add a new widget in your zone, you will see the three mentioned widgets without the need of running the given recipes that contain the definition of those widgets. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 207 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!

This time you can read about the new Html Menu Item content type, you could see how to use the new Rules module, and can watch a recording about a new Orchard Core theme! Check out our post for more! Orchard Core updates Add new HTML Menu Item content type This is a new content type that is super useful for menus that are customized like you have items that are links but there is one item with a special div or with a custom HTML to provide like images and stuff inside. Let's take a look at the HtmlMenuItemPart. Using that part you can just edit the Row HTML directly. The content here is sanitized by default to prevent custom scripts, but if you navigate to Content -> Content Definition -> Content Types -> Html Menu Item and hit the Edit near the Html Menu Item Part you can disable the sanitization anytime. On the screen below you can see the new HtmlMenuItemPart Content Part and the liquid file that is responsible to render its content when using the Blog theme. But let's see how you can use this content type in your site! Let's say you set up your site using the Blog recipe. By using the Blog recipe you will get a default menu, called Main Menu, that contains two Link Menu Items, called Home and About. The first one is just about redirecting the user to the home page and the second one is about redirecting the user to the slug of the built-in About Article. Now head to the Main Menu option of the admin menu and click on the Add Menu Item button to add a new Menu Item. Here you can see the new option that you can select: the Html Menu Item. Select this one and fill out the form. The Url will be the target link where the user will be redirected when clicking on this menu item. And the Html box will contain the custom HTML of our menu item. Here we are just using the HTML code from the Category terms of the Blog Post and modified it a little. And we put this new menu item between the two existing ones as you can see here. And one last note here. When you add a name to your menu item (you saw we used the My new Html Menu Item just for the sake of demonstration) it will be persisted in the string property called Name that is available on any existing parts that can be used as a menu item (LinkMenuItemPart, ContentMenuItemPart, and MenuItemsListPart). But you cannot see the Name property when you check out the implementation of the HtmlMenuItemPart. The reason for that is the Name property is obsolete and will be removed in a future version and you should use the DisplayText instead. And as you can see, the MigrateMenuItems method in the Migrations.cs of the Menu module is just about to migrate the existing menu items to use the DisplayText property instead of the Name. jQuery 3.6.0 released and added to Orchard Core jQuery 3.6.0 has been released! In jQuery 3.5.0, the major change was a security fix for the HTML prefilter. This release does not include a security fix but does have some good bug fixes and improvements. If you want to read about this new version, head to this post now! But now let's focus on the fact that you can also use this new version of jQuery in your custom themes or modules by default without the need of including it by yourself. If you open up the content of the OrchardCore.Resources module, you will find the ResourceManagementOptionsConfiguration.cs file there which is responsible to register some scripts and stylesheets for you by default that you can easily use anytime you want. So, from now we have several jQuery versions that you can use in Orchard Core, like version 3.6.0, 3.5.1, and 3.4.1. You can specify which version you want to use but if you don't do that, the CMS will inject you the newest one. Demos Rules module Using layers in Orchard Core was not a good idea because every time someone would like to use layers, the members of the community always said to don't do that, layers are too slow. But layers are really useful and the good news is the performance of the layers is now much better. Let's see the topic of this demo, the Rules module which allows you to build rules for the layers without using JavaScript. What you have now if you edit a layer, you have rules that you can add to a layer with a nice little popup. The easiest one is the Always layer, which has a boolean condition of true or you can choose to be false if you never want to show the widgets in this layer. You can also have two types of groups: All condition group, which means all of the rules inside this group should be true. Any condition group, which requires one condition to be true. The easiest way to show how grouping work maybe is to go with a GIF. Here you will see that we are creating an All condition group layer rule and inside that group, we have a Content type condition and a URL condition. We say that we only want to display the content of this layer if the content type of the currently displayed content item is BlogPost and if the URL contains the blog word. So our layer will not be visible if the URL just contains the blog word, we need a BlogPost content item to be displayed too. But you don't really need the all condition group here. If you just put the layer rules without using groups, the layer will be visible only if all the conditions here return true. If you want an OR behavior, use the any condition group layer rule. And one cool thing here: you can use drag and drop to move the rules between the groups. You can easily say that I want to move this outside from the all conditions group and put it into the any conditions group. And don't worry if you prefer the JavaScript conditions, you can still add a JavaScript condition where the script must return true or false to display or hide the content of the layer. And as usual, in Orchard Core everything is extensible. If you would like to add your own custom layer rules you can easily do that just by implementing the ConditionEvaluator abstract class where the EvaluateAsync method is responsible to return a boolean value that represents the result of your rule. Check out an easier one, like the HomepageConditionEvaluator! And as usual for the demos, if you would like to know more about this awesome new feature, don't forget to head to YouTube for a recording! Tailwind Blog Theme If you navigate to the following repository on GitHub you will find a simple blog template built with Tailwind and AlpineJS. Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. Here you can see what kind of classes you need to add to be able to handle the margins, colors, the font-size, and almost everything. Tailwind doesn't give us automatically pre-styled components. Rather, it gives us utility classes that help us style our components in certain ways and allows us to build our own classes using these utility classes. In the following recording, you could see how you can build a blog theme in Orchard Core using the Tailwind blog template. News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 194 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

The Monaco Editor is the code editor that powers VS Code. And from now you can use it in Orchard Core too! Check out our post for the latest improvements of Orchard Core and don't forget to take a look at our Orchard Ambassadors Toolbox! Orchard Core updates Add some comments to DataMigration class It can happen that you don't remember the correct syntax of the methods that you need to implement when you are adding your migration classes. It's useful to have it actually written down somewhere where you don't have to search. Now if you open up the DataMigration class in the OrchardCore.Data.Abstractions project you will find some comments about the correct syntax. Introduce ResourcePosition Imagine you have multiple resources (CSS or script files) to add in the footer and they don't have any dependencies. But maybe you want one of them to be at the end because it has to happen at the end. Then you can say now I want to be this resource to be the last one. But how can you do that? You can find a RequireDependencies method in the ResourceManagerTest that is about to test this new feature. Let's take a look! Here you can see that we defined a resource with the name first-resource and used the SetPosition method to set the position. The first-resource has one dependency: the first-dependency one that we have already defined in line 127. The code should inject the first-resource first but because it has a dependency to the first-dependency, the logic will inject the first-dependency resource first, then it will inject the first-resource resource. The same applies when you use the ResourcePosition.Last enum. We said that we want to define two resources as the last ones: the last-dependency and the last-resource. But the last-resource has a dependency on the last-dependency, and the last-dependency has a dependency on the another-dependency, so the correct order will be: another-dependency, last-dependency, and last-resource. Provide AdminUserId and other properties to recipes People are using recipe migrations (like the RecipeMigrator) to create content items because they can. But when you run them from setup or when you run a setup on a site, this doesn't set up some properties, like the owner of the content item. Now there is a new interface called IRecipeEnvironmentProvider that you can implement to provide different things to the recipes. The RecipeEnvironmentFeatureProvider is used to populate the environment with the AdminUserId, AdminUsername, and SiteName values that you can use when you are executing your recipes. Fix Active Directory logs an unnecessary warning during setup Let's say you activated the OrchardCore.Microsoft.Authentication.AzureAD feature during setup and configured it from the same recipe in the next step. You will see that the site is up and running but there is a warning in the log: OrchardCore.Microsoft.Authentication.Configuration.AzureADOptionsConfiguration|WARN|The AzureAD Authentication is not correctly configured. This has been fixed now by using LoadSettings() in place of GetSettings() for updating the settings in the related recipe steps. The authentication settings being entities held by the SiteSettings document, so as done in other places and for all shared documents. Demos Monaco Editor Monaco Editor is a new editor mode that is available for the Html Field. The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here. Now let's see this editor in action! Let's say you set up your site using the Blog recipe. The Blog recipe contains an Article content type that will be perfect for us to play with. Head to the admin UI of Orchard Core and modify the content definition of the Article content type (Content -> Content Definition -> Content Types -> Article). Let's add a new Html Field to this content type and name it Monaco for example. Don't forget to Edit that Html Field and set the editor mode of that field to Monaco editor. You will see that there is a text area that you can use to configure the options of the editor. If you click on the Documentation for options link below you will be navigated to a page that explains which kind of options you can use in the configuration. Leave it on the default that means the editor will use the HTML language. Now if you save the content definition of the Article content type and edit the predefined Article content item, you will see the new field that you can use. You can see that it's the same editor as you can use in Visual Studio code. In this GIF we just showed you some minor functions of the editor by using the default options. But as we mentioned you can configure your editor as you want. Let's say you would like to change the theme of the editor. Modify the editor options and set the value of the theme string that is the initial theme to be used for rendering. The current out-of-the-box available themes are vs (default), vs-dark, hc-black. Let's try out the last one. There is a playground where you can find several examples to see how to use the different kinds of options. If you would like to know more about the Monaco Editor for Orchard Core, head to YouTube for a recording! Use custom settings to customize your theme In Orchard Core, you have the option to add as many settings to your site as you want. By using these settings you can set up some basic stuff like the name of the site, the default time zone, or the page title format. Some modules can provide their own settings. For example, if you enable the Facebook module, you can set the AppId, the AppSecret parameters that are necessary to make the connection between your site and a Facebook App. You can create a theme that can be easily customized just by using settings from the admin UI. To do that you need to implement your theme to support customization. But if you do that you can easily say what kind of navbar, header, logo, etc. you would like to use. Check out the following recording to see what you can achieve if you already have a theme like that. News from the community Orchard Ambassadors Toolbox Let us introduce the Orchard Ambassadors Toolbox! This repository contains a package of useful tools and content for those who want to evangelize Orchard Core. Check out the Readme.md file of the repository for a detailed description of what you can find in the repository. And if you followed us on YouTube, you may have seen our Showcasing Orchard Core CMS video that is also based on this template. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 192 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

Have you ever wondered how to write end-to-end tests for your Orchard Core application? Check out our current post to read about Cypress, which is a next generation front end testing tool built for the modern web. But first, let's start with the other exciting improvements! Orchard Core updates Specify background color Media Profiles feature in Orchard Core is a powerful feature allowing you to specify image resizing options and much other stuff. A profile can then be called with the profile name resize_url: profile: 'banner' rather than having to specify all the resizing options that may apply. We showed you a great demo in this This week in Orchard post about the Media Profiles feature. And here we mentioned the media crop picker and the alt text editor features with YouTube videos too. If you haven't heard about these features, you should check out those posts and videos, especially if you are dealing with several images on your website. The new feature is that now you can specify the background color for the processed image. Let's try this out! Set up your site using the Blog recipe, then navigate to the admin UI of Orchard Core. Head to Configuration -> Media -> Media Profiles and edit the predefined banner Media Profile. Set the resize mode to Pad or BoxPad. If you do that, you will see a new option here called Background Color. Using that property you can select the background color for the processed image. The hint shows you the example values, let's just put red there. Save this setting and open the predefined blog post. And in the screen below you will see our beautiful header with the red background color. If you check out the documentation of Orchard Core, you will find some examples of how you can use the bgcolor argument to set the background color of the image using Liquid Filters or by using the Orchard.AssetUrl Razor Tag Helper. Fix NRE in feature recipe step Let's say you have a recipe and in your recipe, you have a Feature step. The Feature step can be used to say which module you would like to be enabled or disabled if you are running the given recipe, like "steps": [ { "name": "feature", "disable": [], "enable": [ "OrchardCore.HomeRoute", "OrchardCore.Admin", "OrchardCore.Diagnostics", "OrchardCore.DynamicCache", "OrchardCore.Features", "OrchardCore.Navigation", "OrchardCore.Recipes", "OrchardCore.Resources", "OrchardCore.Roles", "OrchardCore.Settings", "OrchardCore.Themes", "OrchardCore.Users" ] }] Here we enabled several modules, but the disable step is empty. That's because, in this recipe, we just want to enable some modules, don't want to disable any of them. But if you define a feature step in your recipe without a disable or an enable step, you will get an NRE when executing the recipe. It's worth to mention the fix because it's very instructive. Let's see the FetaureStep IRecipeStepHandler, where you can see the ExecuteAsync method, which is responsible to process a given recipe step. The assumption is that the Contains() method returns with true or false and therefore you don't need to add the == true. And it's true. But in this case, the Disable string array can be null and if it's null, it will return null. And null equals true will be false. So, without == true the answer can be null which did not compile: "Cannot implicitly convert type bool? to bool". And now if you don't have the enable or the disable step in your recipe, the execution of the recipe won't fail. Now if you check the built-in recipes, like the blog.reicpe.json file, you will not find the disable step there because it's unnecessary. Improve sending emails from Orchard Core Email sending in Orchard Core has got several improvements lately. You can use the SendAsync method from the SmtpService to send emails from Orchard Core. The MailMessage class represents a class that contains information about the mail message. First, now your message can have multiple authors seperated by the ',' or the ';' chars. The other is according to the following MailKit docs: "When the list of addresses in the Reply-To header is empty, replies should be sent to the mailbox(es) specified in the From header". See the related changes from line 116. Upgrade YesSql and fix multiple taxonomy filter issues The goal is to be able to filter on multiple taxonomies. The All method in the IQuery means, that all the predicates inside need to be true. And inside the All, you can call Any if you would like to. And actually, you can't have the same record with two different properties. But now you can do that multiple times and that would work, you can do an AND, it will work to have two predicates on the same index. GraphQL is building SQL queries dynamically, because in GraphQL you can have complex expressions, like ANDs, ORs, INCLUDEs, STARTSWITHs, and all the things you want on different properties. We parse that thing and convert it to a dynamic SQL. The generated SQL would have to do INNER JOINs on the index table. And it broke GraphQL. Nakamura understood how YesSql was building the query after the change by looking at the code of YesSql. And he changed the code to react to these changes by creating new kinds of dynamic SQL queries by using private reflection to get the dynamic names of the dynamic aliases. Demos Cypress Functional Tests Clone the Orchard Core repository then navigate to the tests/functional folder using Windows PowerShell and type npm install to install the packages among with the package of Cypress OrchardCore that is a collection of Cypress commands for interacting with Orchard Core. Make sure you deleted your App_Data folder inside the OrchardCore.Cms.Web folder and type npm run cms:host to build the application and run it. Check out the package.json file in the OrchardCore.Tests.Functional project to see the built-in scripts that you can use and type in the PowerShell window. Now you have a running instance of Orchard Core, time to do some testing! Open a new PowerShell instance and navigate to the same tests/functional folder. Type npm run cms:cypress, which will open the Cypress UI. After some seconds a new window will open with the Cypress test runner. Here you can run all the tests or just pick one by simply clicking on it. Since the tests generate a GUID for the site name and the URL prefix, you can rerun them over and over again. If you run a test, you can visually see what it's doing in the browser. Cypress verifies the JavaScripts too, so if there is any JavaScipt error on the page you visit using the tests, it will show you. If you hover over with your mouse in the steps on the left side of the browser, you can see what was the highlighted step actually did. Like you could see it was getting the textbox with the UserName ID and typed admin there. If you run the agency-test, you will see the following in your browser. But how can I add tests like these and where are these tests in the solution? Well, navigate to the cms-tests/cypress/integration folder of the OrchardCore.Tests.Functional folder, where you can see the exact same files as you can see in the Cypress UI. As you can see, the blog-test.js files just open the given tenant and after logging in to the site, navigates to the admin UI of Orchard Core. If the HTML element with the ta-content class contains the Welcome text, it means that the login was successful. And that's not all of it! If you would like to know more about Cypress testing, check out this recording on YouTube! News from the community Our full Orchard Core tutorial series, the Dojo Course 3 is here! After a long wait, the new Orchard Core version of our legendary Dojo Course tutorial series is here, the Dojo Course 3! Are you a newcomer and want to learn Orchard Core from the ground up, both from a user's and a developer's perspective? Are you somewhat familiar with Orchard Core but would like to get up to speed and become an Orchard pro? Look no further, check out Dojo Course 3! Dojo Course 3 guides you from the very basics of Orchard Core all up to be able to write your own themes and modules, utilizing various APIs of Orchard. We're publishing a tutorial video every day for 40 days starting on 1 December. So, this is your 40 days of Orchard :). If you're looking for our previous Orchard 1.x tutorial series check out Dojo Course 2. Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 174 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

The dark mode for the admin theme is here! But first, let's check out the new locale Shortcode, the new Select HTML tag in the Forms module, and many more! Orchard Core updates New locale Shortcode This Shortcode will take the text between the tags and only display it if the current culture is the one specified. In this case, write English Text for the English culture and write French Text for the French culture. It also supports culture fallbacks. So, if your culture is en-CA and you would like to show the French text, it will fall back to en. Note that it's not content localization, it's just text localization that you want to use in your templates. Read more about it in the docs! [locale en]English Text[/locale][locale fr]French Text[/locale] New HTML select tag with options for Forms Set up your site using the Agency recipe. Then navigate to the admin UI of Orchard Core and head to Configuration -> Features to enable the Forms module. Now create a new Page content item. This content type has a Flow Part attached and because of that, we can add widgets to this content item. We added a new Form widget here and inside the Form, we added the new Select widget. By using the Select widget, you can have an HTML <select> tag that creates a drop-down list with the options you provided. In this case, we created a Donation drop-down list with two options. You can also predefine the option you would like to be selected by default. Listing Code owners When submitting a PR updating code you're not familiar with, it's not always easy to determine who's the right person to be assigned to for review. To fix that, the community established a list of code owners who will be automatically pinged when the code they own is updated by a PR. Read more about the code owners feature of GitHub here! Add classes / IDs to buttons in admin to allow easier selection in E2E tests This improvement is about adding IDs and classes to different HTML tags in the admin interface. This will allow us to write better selectors for E2E testing. So from now on, if you would like to target specific elements of the admin UI, like buttons to enable or disable a given feature or to run a given recipe, you will have an easier way to do that, because of the additional classes and IDs that you can find in the HTML source code. Recommended development tools for Orchard Core What tools do we recommend to build your app with Orchard Core, or work on Orchard itself? In the end, this is up to your personal preference since as long as you can edit source files and build the app you can use any tool on any platform that .NET Core supports. Check out this page in the documentation to get you going for the general editing experience as well as for other useful tools. Orchard Dojo Library is a portable package of coding and training guidelines and development utilities. These are also part of the best practices and guidelines we use at Lombiq. This library contains Visual Studio code snippets to quickly generate code in some common scenarios for developing Orchard Core modules and themes. To effectively use this collection of VS snippets just point the Snippets Manager to where you cloned or downloaded this folder. To do this, go to Tools → Code Snippets Manager → select the C# language → Add and add the whole folder. For Razor snippets to also work select the HTML Language and do the same. Do note that Razor snippets will only be suggested when you hit Ctrl + space first. You can download the snippets from this GitHub repository and check out this recording to see more snippets in action! Add support for sending email attachments You can use the SendAsync method from the SmtpService to send emails from Orchard Core. The MailMessage class represents a class that contains information about the mail message. And now this class has a new property called Attachments which is a collection of message attachments. Use the MailMessageAttachment class to provide attachments by setting the attachments' filename and the attachments' file stream before calling the SendAsync method to send out your email. Demos Dark mode admin theme Set up your site and navigate to the admin UI. Then go to Configuration -> Settings -> Admin and check Enable dark mode admin theme. If you save the setting you have the option to toggle dark mode for the admin theme. If your OS is using dark mode, it will automatically applies the dark mode theme for you. You might notice that there is a new button in the upper-right corner of the admin theme with different icons: Sun and Moon represent the light and dark mode, respectively. If you switch to the dark mode the admin UI will have the following look and feel. But that's not all of it! Check out this recording on YouTube to know more about the dark mode! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 168 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

Blazing Orchard is a modular application framework that turns your Blazor project into a CMS-powered Blazor application by leveraging Orchard Core as a decoupled backend/CMS server using its REST & GraphQL APIs. Check out our current post to read more about Blazing Orchard and many more! Orchard Core updates Introduce Replace and Delete Content Definition Recipes The Content Definition Recipe deployment step always merges settings. When using this on a dev/stage/prod environment this means arrays, like BagPartSettings and FlowPartSettings are merged. When you've removed a content type on dev, and removed it from the BagPartSettings this change is not reflected on the server when the content definitions step is running. What also happens is the widget content type definition also remains, as the recipe only focuses on updating the definitions in the step. Of course, this is good for the scenario where definitions may have changed on both servers, and for bringing them into sync (kind of, but that scenario gets a bit confusing). But don't worry! Here comes two new deployment steps and recipes to the rescue! Replace Content Definitions: Replaces or Creates Type and Part Definitions. Delete Content Definitions: Allows a comma-separated list of types and/or parts to delete. Let's check them out! Set up your site using the Blog recipe then navigate to the Configuration -> Import/Export -> Deployment Plans and create a new deployment plan. Hit the Add Step button if you are ready and search for the Replace Content Definitions step in the Available Steps modal. Here you can see a list containing all of the available content types and content parts that you have in your tenant. If you choose something from the list, the type and part definitions will be removed and recreated. The Delete Content Definitions deployment step is just about to delete your content type and content part definitions. Remove type="text/javascript" from script tags The W3C validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. The validator found a warning in an Orchard Core site that says: The type attribute is unnecessary for JavaScript resources. If you open up the MDN web docs by Mozilla you can learn more about the script element. Add ShapeResult - RenderWhen The problem is that SummaryAdmin shapes are added during BuildDisplayAsync so the conditions will be evaluated for every front-end BuildDisplayAsync display, even though they're only intended to be placed in a SummaryAdmin display. The goal here to add a Func to the ShapeResult that can be invoked after placing a shape in a location, to evaluate whether it should be placed. This would mean that for all of the SummaryAdmin shapes the RenderWhen will only run after they have been placed in SummaryAdmin. So the evaluation will not occur during a Detail or Summary view on the front end. The AuthorizeAsync isn't a super heavy call, but we often want to conditionally evaluate in a driver whether to return a ShapeResult so it makes sense to have something that can be applied later in the BuildDisplayAsync pipeline when we know that we are actually going to place the shape in a location. The ContentsDriver renders the ContentsButtonActions_SummaryAdmin shape, that is responsible to display the Publish, Preview, Unpublish, etc. buttons. You need to have some permissions to be able to see these buttons. See the refactored logic here using the RenderWhen method. Adding ID for FormPart Now there is a new content part called FormElementPart that turns a content item into a form element by providing an ID to the form. Now the built-in Form widget has this part attached meaning that when you add the Form widget to a FlowPart, you can define an ID. And here comes the modifications in the Form.Wrapper.cshtml wrapper. If the content item has the FormElementPart attached, then get the ID from that and use it as the ID for the form HTML element. Demos Blazing Orchard Blazing Orchard is a modular application framework that turns your Blazor project into a CMS-powered Blazor application by leveraging Orchard Core as a decoupled backend/CMS server using its REST & GraphQL APIs. Orchard Core is used here as a headless CMS, which means that Orchard Core is a separate application in the solution. The Blazor application is also a separate project. Therefore you need to host these two separately in a separate container for example. Clone the repository of the solution and check it out yourself! The structure is the following. The BlazingOrchard.Web.Application is shared by both the Blazor client host (BlazingOrchard.Web.Client) and both the server (BlazingOrchard.Web.Server). Let's see how you can render stuff with the help of Blazor in this solution. Check out how the menu rendering works! There is a NavMenu component (NavMenu.razor) in the Shared folder of the BlazingOrchard.Web.Application project, which comes with the default placement template. But here we are using a custom component (Menu.razor) that comes from the BlazingOrchard.Menu library. This thing is also using another component called ContentItemView, which gets the data from Orchard using an HttpClient. It's reusable, which means you can use this in other components too, like in the ContentPage component. Let's navigate to the server and manipulate the menu items of the Main Menu by adding a new Link Menu Item to it called Readme. Now you can see that the menu structure has been updated in the Blazor application. Or let's see the CounterButton component. This piece of code is about having a currentCount int variable to store how many times the user clicks on that button. The IncrementCount method is responsible to do the business logic for this. If you navigate to the Orchard Core server and create a new Liquid Page, you can use Liquid expressions to render this component. To do that, you can just simply add the following Liquid expression to the body of the content item: {{ "CounterButton" | shape_new | shape_render }}. Notice that here we are creating a new shape based on the CounterButton component and render it in the body of the Liquid Page. The CounterButton component has a public ButtonText parameter. And - because we are dealing with shapes here - you can set the value of that variable by providing it in Liquid when creating the shape like: {{ "CounterButton" | shape_new: ButtonText: "Click on this button!" | shape_render }}. This way we can use the CMS to configure these components. And you can do a lot-lot more using this PoC solution thanks to its creator, Sipke Schoorstra! Head to YouTube and check out the recording of this demo now to know more about what you can achieve by using this solution! News from the community Orchard Dojo Newsletter Lombiq's Orchard Dojo Newsletter has 167 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

This week you could see two great demos: one is about showing you how you can manage and import/export your secrets between servers, the other is about using Blazor WebAssembly with Orchard Core! Orchard Core updates ChallengeOrForbid() in Api controllers Most of the API controllers are configured to use the Api scheme for authentication but return ChallengeOrForbid(), which ultimately uses the default challenge scheme (which is typically the cookie handler when the Users module is enabled). To fix that, the API controllers are updated to do ChallengeOrForbid("Api") instead of ChallengeOrForbid(), so that challenges are properly handled by OpenIddict when the OpenID token validation feature is enabled. Now there is a new override for the ChallengeOrForbid() extension method that accepts the authentication schemes to challenge. And now you can use this extension method in your API controller just by passing the Api, like: return this.ChallengeOrForbid("Api");. Include ContentsMetadata (PageTitle) in Blog Theme Category Taxonomy If you use the Blog recipe, a taxonomy Category with entry Travel is created by default. However, the title for the Travel page was not correct. If you created a site name Blogging using the Blog recipe, the expected title would be: Travel - Blogging, but you got a title: Blogging. The fix was to include the ContentsMetadata in the Content-Category.liquid file. Link to GitHub Discussions in Contributing If you open the GitHub repository of Orchard Core you will find a CONTRIBUTING.md file in the root of the repository. Now this markdown file has a direct link to GitHub Discussions. But what is GitHub Discussions? GitHub only offered issues and pull requests as places to have these conversations. But issues and pull requests both have a linear format - well suited for merging code, but not for creating a community knowledge base. Conversations need their own place - that’s what GitHub Discussions is for. If you have a question and need an answer, just visit the Discussions page and if you haven't find the answer for your issue, let's ask it there. Here you can find detailed and valuable answers for questions like what is a shape? Demos Secret Management Updates Head to the GitHub repository of Orchard Core and checkout to the deanmarcussen/secrets branch to be able to try out this upcoming feature! After you set up your Orchard Core site, head to Configuration -> Features and enable these features: Configuration Secrets Store: The secrets configuration store is a read-only store for secrets. Database Secrets Store: The secrets database stores encrypted secrets in the database. Secrets: The secrets feature manages secrets that other modules can contribute to. After you will find a new option under Configuration called Secrets. Here you can add two kinds of secrets: Authorization Secret: A secret used to manage a secure password or authorization key. Rsa Secret: A public / private RSA key pair used for encryption. Let's add a new Authorization Secret now and see what are Secret Bindings exactly? Secret Bindings can be used to enter secrets, like SMTP passwords. And you can choose where it's gonna come from. Right now they can be stored either in the database or in the configuration. But there is a plan to support the Key Vault provider as well. Let's use the smtp_password as the name and store it now in the Database Secret Store. And add the password into the Authentication String textbox. But how can use that secret? If you enable the Email feature, you can navigate to Configuration -> Settings -> Smtp and set up the network delivery options. If you put a tick on the Require credentials checkbox, you have to provide a user name and a password for authentication. If you would like to use your secret, you can use a Liquid filter to access the password stored in it. Here you can see that we entered the following Liquid expression to retrieve the password: {{ "smtp_password" | auth_secret }}. Remember, the smtp_password was the name of our secret. When we added our secret, we had the option to choose to create an Authorization Secret or an Rsa Secret. We created an Authorization Secret, so let's create an Rsa Secret this time! The RSA key pair is what we could use to actually crypt secrets when transmitting them to another server. At the moment the private key is in the editor, the idea is that once you created the private key you will never see it again. You can use the public key as an encryption key. Now let's create a new Deployment Plan and call it Secrets RSA! Add the All Secrets deployment step to it then hit Execute! After you will end up with a recipe that looks like the following. Here you can see the encriptionKey used for this particular recipe. It's a symmetric encryption key that is encrypted with the public key from the RSA key pair. Then all of the bindings that are available are here in the recipe. You will also find a decryptor here (js: decrypt()) which will use the encriptionKey and the private key on the other end to decrypt them. And when you run this recipe on your remote server - assuming you have installed the private key on the remote server - it will unencrypt your secrets correctly. But it's not all! If you would like to know more about this great upcoming feature, don't hesitate to watch the recording of it! Blazor WebAssembly with Orchard Core In this demo, you will see how to use a Blazor WebAssembly application that queries a blog post content through a REST API call using GraphQL. A JWT token used as a bearer token when calling the REST API GraphQL endpoint. Head to YouTube now to see the full demo! News from the community Orchard Dojo Newsletter Now we have 159 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!