Activities of "enisn"

It should be properly working after the workaround that I mentioned above

Hello,

CSS and Javascript files will be attached at the document after you saved. Unfortunately, you can't see CSS and Javascript working on the Preview tab of the editor, you can see them only when you save and navigated to that page by going to /pages/{slug} (default path if you didn't changed)

Javascript issue might be related to the same problem with https://support.abp.io/QA/Questions/5784

CMS Kit manipulates the entire content to prevent XSS attacks. But It's no necessary admin-created pages & blog posts. Now we made a change about that and PreventXSS will be enabled only comments and configurable for blogs with the following PR: https://github.com/abpframework/abp/pull/17681

But, until the next version released you can sue the same workaround with https://support.abp.io/QA/Questions/5784#answer-3a0dc39d-70af-5fd6-453b-873d141585c5

Hi, Content rendering is a common operation that is used across BlogsPosts, Comments, Pages etc. By default all af them uses preventXSS as true

You can use the following workaround to make it work.

1. Create a cshtml in your project in the exactly same path ContentFragment.cshtml
2. Fill the following content in that file and make sure preventXSS parameter is false

@using Microsoft.AspNetCore.Mvc.ViewComponents
@using Volo.Abp.Data
@using Volo.Abp.Reflection
@using Volo.CmsKit.Contents
@using Volo.CmsKit.Web.Renderers;
@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents;

@model ContentFragmentViewComponent

@inject IMarkdownToHtmlRenderer MarkdownRenderer
@inject IViewComponentSelector ViewComponentSelector

@foreach (var contentFragment in Model.ContentDto.ContentFragments)
{
    if (contentFragment.Type == ContentConsts.Markdown)
    {
        @Html.Raw(await MarkdownRenderer.RenderAsync(contentFragment.GetProperty<string>("Content"), preventXSS: false))
    }
    else if (contentFragment.Type == ContentConsts.Widget)
    {
        var componentName = contentFragment.GetProperty<string>("Type");
        var descriptor = ViewComponentSelector.SelectComponent(componentName);
        var componentParameters = descriptor.Parameters;
        var parameters = new Dictionary<string, object>(contentFragment.ExtraProperties);

        foreach (var componentParameter in componentParameters)
        {
            if (string.IsNullOrWhiteSpace(componentParameter.Name))
            {
                continue;
            }
            if(parameters.TryGetValue(componentParameter.Name, out var value))
            {
                parameters[componentParameter.Name] = TypeHelper.ConvertFrom(componentParameter.ParameterType, value);
            }
        }

        @await Component.InvokeAsync(componentName, parameters)
    }
}

How it should be working.

Hi, there was a problem in breadcrumbs, we just fixed it and it'll be available in the next version (2.4) of LeptonX

Hi phil@travelengine.com.au

Yes, there was a confusing implementation for BrandingProvider. We've just made some changes and improved it. It'll work same as documentation says in the next release of LeptonX.

It seems working, If it meets your requirements that is acceptable.

Bu if you don't want to customize the theme source code, you can use the original JS file and customize loading CSS logic.

(function () {
    window.initLeptonX = function (layout = currentLayout) {
        currentLayout = layout;
        
        // 👇 This event will be called when user interacts a theme change button.
        leptonx.CSSLoadEvent.on(event => {
            // 👇 You can even customize here according to your requirements.
            loadThemeCSS('bootstrap', event, 'bootstrap-');
            loadThemeCSS('color', event, '');
        });

        leptonx.init.run();
    }
        function isAlreadyLoaded(id) {
        return document.querySelector(`link[id^="lpx-theme-${id}-"]`)?.id;
    }
  
    function loadThemeCSS(key, event, cssPrefix) {
        const newThemeId = createId(event.detail.theme, key);
        const previousThemeId = createId(event.detail.previousTheme, key);
        const loadedCSS = isAlreadyLoaded(key);
  
        if (newThemeId !== loadedCSS) {
            leptonx.replaceStyleWith(
                createStyleUrl(cssPrefix + event.detail.theme),
                newThemeId,
                previousThemeId || loadedCSS
            );
        }
      }

    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    }

    leptonx.CSSLoadEvent.on(event => {
        loadThemeCSS('bootstrap', event, 'bootstrap-');
        loadThemeCSS('color', event, '');
    });

    function createStyleUrl(theme, type) {

        if (isRtl()) {
            theme = theme + '.rtl';
        }
        
        if (type) {
            return `/Themes/LeptonX/Global/${currentLayout}/css/${type}-${theme}.css`;
        }
        return `/Themes/LeptonX/Global/${currentLayout}/css/${theme}.css`;
    }

    function isRtl() {
        return document.documentElement.getAttribute('dir') === 'rtl';
    }
})();

Hello kfrancis Let me check this out. Probably some APIs or XAML extensions might be changed that we used.

By default, it's not possible with an option or configuration but you can try the following approach:

1. You can override the Application Layout. ( Check here )
2. You can inject any service that you check style for tenant and place style according to your logic.

There is a section in the layout like below

<head>

    @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)

    <title>@title</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta charset="UTF-8" />
    <meta name="description" content="@ViewBag.MetaDescription" />

    <link rel="icon" href="~/favicon.svg" type="image/svg+xml">
    
    <!-- 👇 You can customize this section in cshtml 👇 -->
    <link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
    <link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />

    <abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />

You can access the entire page code by downloading LeptonX source code

Hi Enisn, We use ABP 7.3, and we manually setup lepton in 2.3 instead of 2.4-preview.

We try to understand why being up to date on a stable version we end up with a preview.

By putting the lepton manually in 2.3 it works.

ABP Framework/Commercial & LeptonX are different products and they have different versions & release cycles and pipleines. And LeptonX depends on ABP, so we can't publish it before ABP is released. ABP templates are shipped with ABP release, so the templates includes 2.3.*-* version pattern to make the build successful, because LeptonX stable version isn't available when the ABP is released.

So, this is the main reason why templates can't know the latest version of LeptonX, and it references the latest stable or premium version of a specific major version

Hi,

LeptonX 2.3 packages for ABP 7.3

If you use ABP 2.2, you should use LeptonX v2.2.x

Can you try with 2.2.2 LeptonX version?