Monaco editor supports preview, Vue.js Single File Components in Lombiq Vue.js module - This week in Orchard (25/02/2022)
This week you can read about updating the Monaco editor to support preview, improving the documentation of Orchard Core, search form improvements, and a demo about using Vue.js Single File Components in Lombiq Vue.js module for Orchard Core! Are you interested in the details? Check out this post for more!
Orchard Core updates
Make the Monaco editor Field support preview
Now the Monaco editor Field correctly supports the content preview feature on every change. To test this out, you just need to have a content type with a Text Field attached. Don't forget to set the editor type to Monaco editor for that field.
Documentation improvements
The documentation of Orchard Core has been improved. Documentation for the Audit Trail, SEO Meta, Deployment, Remote Deployment, Redis modules have been added, and there were some missing Orchard Core Demo YouTube videos that are now embedded into the corresponding page of the documentation.
Search Form: allow to override Index used
Let's say you have a content type, called Blog. Inside that, there are a lot of blog posts, and there is a need to search inside of that content type of Blog. The question is, how can you limit the full-text search based on that content type? Well, from now there is a new feature that allows passing a QueryString param in the search form page to override the current default Index used for displaying results. This can also be set as a hidden form input fixed value if used from a different form. These Indices are protected by permissions, so it should be fine to allow to do this, instead of needing to create a different controller per index required to be searched from. You can use this in the following way: /search?Terms=moon&Index=BlogIndex
Demos
Vue.js Single File Components in Lombiq Vue.js module for Orchard Core
The Lombiq Vue.js module for Orchard Core is an Orchard Core module, that contains Vue.js and commonly used Vue.js components to be used in other Vue.js apps as dependencies. Provides extensibility to create Vue.js component templates as Orchard Core shapes making them able to override in themes or modules. And from now, you have the option to use Vue.js Single File Components!
The module identifies Single File Components in the Assets/Scripts/VueComponents directory and harvests them as shapes. They have a custom .vue file renderer that displays the content of the <template> element after applying localization for the custom [[ ... ]] expression that calls IStringLocalizer. Besides that, it's pure Vue, yet you can still make use of shape overriding if needed. You can read more about it in the module's readme file. Now it's time to see it in action!
You will find a Lombiq.VueJs.Samples project in the repository that contains some Vue files. The module now supports these special files (where you can put the template and the script in the same file) and harvest these as shapes. If you open up the demo-sfc.vue file, you can see one unique solution for localization. As we mentioned, by using the [[ ... ]] syntax, you can perform localization via IStringLocalizer at runtime.
Let's run the Vue.js Single File Component sample in the Lombiq.VueJs.Samples module! As you can see, this sample is about providing a table with some data and a pager that you can use to navigate between the pages of the table with the help of the Single File Components.
And we are just scratching the surface here! If you would like to know more about using Vue.js Single File Components with the help of the Lombiq Vue.js module, check out this recording on YouTube!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 237 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!