migrate CSS references and remove JS Interop methods

Oqtane.Client/App.razor

@@ -72,6 +72,7 @@
     {
         if (firstRender)
         {
+            // prevents flash on initial page load
             _display = "";
             StateHasChanged();
         }

Oqtane.Client/UI/Interop.cs

@@ -90,21 +90,6 @@ namespace Oqtane.UI
             }
         }
 
-        public Task IncludeLinks(object[] links)
-        {
-            try
-            {
-                _jsRuntime.InvokeVoidAsync(
-                    "Oqtane.Interop.includeLinks", 
-                    (object) links);
-                return Task.CompletedTask;
-            }
-            catch
-            {
-                return Task.CompletedTask;
-            }
-        }
-
         // external scripts need to specify src, inline scripts need to specify id and content
         public Task IncludeScript(string id, string src, string integrity, string crossorigin, string content, string location)
         {
@@ -135,21 +120,6 @@ namespace Oqtane.UI
             }
         }
 
-        public Task RemoveElementsById(string prefix, string first, string last)
-        {
-            try
-            {
-                _jsRuntime.InvokeVoidAsync(
-                    "Oqtane.Interop.removeElementsById",
-                    prefix, first, last);
-                return Task.CompletedTask;
-            }
-            catch
-            {
-                return Task.CompletedTask;
-            }
-        }
-
         public ValueTask<string> GetElementByName(string name)
         {
             try

Oqtane.Client/UI/ThemeBuilder.razor

@@ -41,10 +41,19 @@
         // PWA manifest
         if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
         {
-            headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />";
+            headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />\n";
         }
         // meta
-        headcontent += PageState.Page.Meta ?? "";
+        if (!string.IsNullOrEmpty(PageState.Page.Meta))
+        {
+            headcontent += PageState.Page.Meta + "\n";
+        }
+        // stylesheets
+        foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
+        {
+            var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
+            headcontent += CreateLink(url, resource.Integrity, resource.CrossOrigin) + "\n";
+        }
         SiteState.Properties.HeadContent = headcontent;
 
         // set page body content
@@ -58,34 +67,18 @@
             SiteState.Properties.BodyContent = bodycontent;
         }
 
-		DynamicComponent = builder =>
+        DynamicComponent = builder =>
-		{
-			var themeType = Type.GetType(PageState.Page.ThemeType);
-			builder.OpenComponent(0, themeType);
-			builder.CloseComponent();
-		};
-	}
-
-	protected override async Task OnAfterRenderAsync(bool firstRender)
-	{
-		var interop = new Interop(JsRuntime);
-
-        // manage stylesheets for this page 
-		string batch = DateTime.UtcNow.ToString("yyyyMMddHHmmssfff");
-		var links = new List<object>();
-		foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
-		{
-			var prefix = "app-stylesheet-" + resource.Level.ToString().ToLower();
-			var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
-			links.Add(new { id = prefix + "-" + batch + "-" + (links.Count + 1).ToString("00"), rel = "stylesheet", href = url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", insertbefore = prefix });
-        }
-        if (links.Any())
         {
-            await interop.IncludeLinks(links.ToArray());
+            var themeType = Type.GetType(PageState.Page.ThemeType);
-        }
+            builder.OpenComponent(0, themeType);
-		await interop.RemoveElementsById("app-stylesheet-page-", "", "app-stylesheet-page-" + batch + "-00");
+            builder.CloseComponent();
-		await interop.RemoveElementsById("app-stylesheet-module-", "", "app-stylesheet-module-" + batch + "-00");
+        };
-	}
+    }
+
+    private string CreateLink(string url, string integrity, string crossorigin)
+    {
+        return "<link rel=\"stylesheet\" href=\"" + url + "\"" + (!string.IsNullOrEmpty(integrity) ? " integrity=\"" + integrity + "\"" : "") + (!string.IsNullOrEmpty(crossorigin) ? " crossorigin=\"" + crossorigin + "\"" : "") + " type=\"text/css\"/>";
+    }
 
     private string CreatePWAScript(Alias alias, Site site, Route route)
     {

Oqtane.Server/Pages/_Host.cshtml

@@ -12,8 +12,6 @@
     <script src="js/loadjs.min.js"></script>
     <link rel="stylesheet" href="css/app.css" />
     @Html.Raw(Model.HeadResources)
-	<link id="app-stylesheet-page" rel="stylesheet" href="css/empty.css" disabled />
-	<link id="app-stylesheet-module" rel="stylesheet" href="css/empty.css" disabled />
     <component type="typeof(Oqtane.Head)" render-mode="@((RenderMode)Enum.Parse(typeof(RenderMode), Model.RenderMode, true))" />
 </head>
 <body>

Oqtane.Server/Pages/_Host.cshtml.cs

@@ -148,18 +148,9 @@ namespace Oqtane.Pages
                         {
                             page = _pages.GetPage(site.HomePageId.Value);
                         }
-                        if (page != null && !page.IsDeleted)
+                        if (page == null || page.IsDeleted)
                         {
-                            // include theme resources
+                            // page not found - look for url mapping
-                            if (!string.IsNullOrEmpty(page.ThemeType))
-                            {
-                                ThemeType = page.ThemeType;
-                            }
-                            ProcessThemeResources(ThemeType, alias);
-                        }
-                        else // page not found
-                        {
-                            // look for url mapping
                             var urlMapping = _urlMappings.GetUrlMapping(site.SiteId, route.PagePath);
                             if (urlMapping != null && !string.IsNullOrEmpty(urlMapping.MappedUrl))
                             {
@@ -385,24 +376,6 @@ namespace Oqtane.Pages
             }
         }
 
-        private void ProcessThemeResources(string ThemeType, Alias alias)
-        {
-            var type = Type.GetType(ThemeType);
-            if (type != null)
-            {
-                var obj = Activator.CreateInstance(type) as IThemeControl;
-                if (obj.Resources != null)
-                {
-                    int count = 1;
-                    foreach (var resource in obj.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
-                    {
-                        resource.Level = ResourceLevel.Page;
-                        ProcessResource(resource, count++, alias);
-                    }
-                }
-            }
-        }
-
         private void ProcessResource(Resource resource, int count, Alias alias)
         {
             var url = (resource.Url.Contains("://")) ? resource.Url : alias.BaseUrl + resource.Url;

Oqtane.Server/wwwroot/js/interop.js

@@ -108,11 +108,6 @@ Oqtane.Interop = {
             }
         }
     },
-    includeLinks: function (links) {
-        for (let i = 0; i < links.length; i++) {
-            this.includeLink(links[i].id, links[i].rel, links[i].href, links[i].type, links[i].integrity, links[i].crossorigin, links[i].insertbefore);
-        }
-    },
     includeScript: function (id, src, integrity, crossorigin, content, location) {
         var script;
         if (src !== "") {
@@ -249,15 +244,6 @@ Oqtane.Interop = {
         }
         return getAbsoluteUrl(url);
     },
-    removeElementsById: function (prefix, first, last) {
-        var elements = document.querySelectorAll('[id^=' + prefix + ']');
-        for (var i = elements.length - 1; i >= 0; i--) {
-            var element = elements[i];
-            if (element.id.startsWith(prefix) && (first === '' || element.id >= first) && (last === '' || element.id <= last)) {
-                element.parentNode.removeChild(element);
-            }
-        }
-    },
     getElementByName: function (name) {
         var elements = document.getElementsByName(name);
         if (elements.length) {