diff --git a/Oqtane.Client/UI/ThemeBuilder.razor b/Oqtane.Client/UI/ThemeBuilder.razor index 262a919a..b30f8a34 100644 --- a/Oqtane.Client/UI/ThemeBuilder.razor +++ b/Oqtane.Client/UI/ThemeBuilder.razor @@ -53,6 +53,15 @@ { headcontent = AddHeadContent(headcontent, PageState.Page.HeadContent); } + + // stylesheets and scripts on static rendering + if (PageState.RenderMode == RenderModes.Static) + { + headcontent = AddHeadContent(headcontent, ManageStyleSheets(PageState.Page.Resources, PageState.Alias)); + headcontent = AddHeadContent(headcontent, ManageScripts(PageState.Page.Resources, PageState.Alias)); + } + + // send to Head component SiteState.Properties.HeadContent = headcontent; DynamicComponent = builder => @@ -193,4 +202,67 @@ await interop.IncludeScripts(scripts.ToArray()); } } + + private string ManageStyleSheets(List resources, Alias alias) + { + var stylesheets = ""; + if (resources != null) + { + string batch = DateTime.UtcNow.ToString("yyyyMMddHHmmssfff"); + int count = 0; + foreach (var resource in resources.Where(item => item.ResourceType == ResourceType.Stylesheet)) + { + if (resource.Url.StartsWith("~")) + { + resource.Url = resource.Url.Replace("~", "/Themes/" + Utilities.GetTypeName(resource.Namespace) + "/").Replace("//", "/"); + } + if (!resource.Url.Contains("://") && alias.BaseUrl != "" && !resource.Url.StartsWith(alias.BaseUrl)) + { + resource.Url = alias.BaseUrl + resource.Url; + } + + if (!stylesheets.Contains(resource.Url, StringComparison.OrdinalIgnoreCase)) + { + count++; + string id = "id=\"app-stylesheet-" + ResourceLevel.Page.ToString().ToLower() + "-" + batch + "-" + count.ToString("00") + "\" "; + stylesheets += "" + Environment.NewLine; + } + } + } + return stylesheets; + } + + private string ManageScripts(List resources, Alias alias) + { + var scripts = ""; + if (resources != null) + { + foreach (var resource in resources.Where(item => item.ResourceType == ResourceType.Script && item.Location == ResourceLocation.Head)) + { + var script = CreateScript(resource, alias); + if (!scripts.Contains(script, StringComparison.OrdinalIgnoreCase)) + { + scripts += script + Environment.NewLine; + } + } + } + return scripts; + } + + private string CreateScript(Resource resource, Alias alias) + { + if (!string.IsNullOrEmpty(resource.Url)) + { + var url = (resource.Url.Contains("://")) ? resource.Url : alias.BaseUrl + resource.Url; + return ""; + } + else + { + // inline script + return ""; + } + } } diff --git a/Oqtane.Server/Components/App.razor b/Oqtane.Server/Components/App.razor index c566722d..ff8fe475 100644 --- a/Oqtane.Server/Components/App.razor +++ b/Oqtane.Server/Components/App.razor @@ -168,34 +168,33 @@ CreateJwtToken(alias); } - // stylesheets - var themes = ThemeRepository.GetThemes().ToList(); - var resources = new List(); - if (string.IsNullOrEmpty(page.ThemeType)) + // initial stylesheets (to prevent FOUC in interactive rendering) + if (_renderMode == RenderModes.Interactive) { - page.ThemeType = site.DefaultThemeType; - } - var theme = themes.FirstOrDefault(item => item.Themes.Any(item => item.TypeName == page.ThemeType)); - if (theme?.Resources != null) - { - resources.AddRange(theme.Resources); - } - var type = Type.GetType(page.ThemeType); - if (type != null) - { - var obj = Activator.CreateInstance(type) as IThemeControl; - if (obj?.Resources != null) + var themes = ThemeRepository.GetThemes().ToList(); + var resources = new List(); + if (string.IsNullOrEmpty(page.ThemeType)) { - resources.AddRange(obj.Resources); + page.ThemeType = site.DefaultThemeType; } + var theme = themes.FirstOrDefault(item => item.Themes.Any(item => item.TypeName == page.ThemeType)); + if (theme?.Resources != null) + { + resources.AddRange(theme.Resources); + } + var type = Type.GetType(page.ThemeType); + if (type != null) + { + var obj = Activator.CreateInstance(type) as IThemeControl; + if (obj?.Resources != null) + { + resources.AddRange(obj.Resources); + } + } + ManageStyleSheets(resources, alias, theme.ThemeName); } - ManageStyleSheets(resources, alias, theme.ThemeName); // scripts - if (_renderMode == RenderModes.Static) - { - ManageScripts(resources, alias); - } if (_renderMode == RenderModes.Interactive && _runtime == Runtimes.Server) { _reconnectScript = CreateReconnectScript();