Reworked all css and js imports using new bundler
This commit is contained in:
Marcel Baumgartner
@@ -4,98 +4,126 @@ namespace Moonlight.App.Services.Sessions;
|
||||
|
||||
public class BundleService
|
||||
{
|
||||
private readonly ConfigService ConfigService;
|
||||
|
||||
public BundleService(ConfigService configService)
|
||||
{
|
||||
ConfigService = configService;
|
||||
var url = configService
|
||||
.GetSection("Moonlight")
|
||||
.GetValue<string>("AppUrl");
|
||||
|
||||
#region JS
|
||||
|
||||
JsFiles = new();
|
||||
|
||||
JsFiles.AddRange(new[]
|
||||
{
|
||||
url + "/_framework/blazor.server.js",
|
||||
url + "/assets/plugins/global/plugins.bundle.js",
|
||||
url + "/_content/XtermBlazor/XtermBlazor.min.js",
|
||||
url + "/_content/BlazorTable/BlazorTable.min.js",
|
||||
url + "/_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js",
|
||||
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.js",
|
||||
"https://www.google.com/recaptcha/api.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-search@0.8.2/lib/xterm-addon-search.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.5.0/lib/xterm-addon-web-links.min.js",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js",
|
||||
"require.config({ paths: { 'vs': '/_content/BlazorMonaco/lib/monaco-editor/min/vs' } });",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js",
|
||||
url + "/_content/BlazorMonaco/jsInterop.js",
|
||||
url + "/assets/js/scripts.bundle.js",
|
||||
url + "/assets/js/moonlight.js",
|
||||
"moonlight.loading.registerXterm();",
|
||||
url + "/_content/Blazor-ApexCharts/js/apex-charts.min.js",
|
||||
url + "/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"
|
||||
});
|
||||
|
||||
#endregion
|
||||
|
||||
#region CSS
|
||||
|
||||
CssFiles = new();
|
||||
|
||||
CssFiles.AddRange(new[]
|
||||
{
|
||||
"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700",
|
||||
url + "/assets/css/style.bundle.css",
|
||||
url + "/assets/css/flashbang.css",
|
||||
url + "/assets/css/snow.css",
|
||||
url + "/assets/css/utils.css",
|
||||
url + "/assets/css/blazor.css",
|
||||
url + "/_content/XtermBlazor/XtermBlazor.css",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css",
|
||||
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.css",
|
||||
url + "/assets/plugins/global/plugins.bundle.css"
|
||||
});
|
||||
|
||||
#endregion
|
||||
|
||||
CacheId = Guid.NewGuid().ToString();
|
||||
|
||||
Task.Run(Bundle);
|
||||
}
|
||||
|
||||
|
||||
// Javascript
|
||||
public string BundledJs { get; private set; }
|
||||
public readonly List<string> JsFiles;
|
||||
|
||||
// CSS
|
||||
public string BundledCss { get; private set; }
|
||||
public readonly List<string> CssFiles;
|
||||
|
||||
// States
|
||||
public string CacheId { get; private set; }
|
||||
public bool BundledFinished { get; set; } = false;
|
||||
private bool IsBundling { get; set; } = false;
|
||||
|
||||
public async Task Bundle()
|
||||
private async Task Bundle()
|
||||
{
|
||||
if (!IsBundling)
|
||||
IsBundling = true;
|
||||
|
||||
|
||||
Logger.Info("Bundling js and css files");
|
||||
|
||||
|
||||
BundledJs = "";
|
||||
BundledCss = "";
|
||||
|
||||
var url = ConfigService
|
||||
.GetSection("Moonlight")
|
||||
.GetValue<string>("AppUrl");
|
||||
|
||||
BundledJs = await BundleFiles(
|
||||
new[]
|
||||
{
|
||||
url + "/_framework/blazor.server.js",
|
||||
url + "/assets/plugins/global/plugins.bundle.js",
|
||||
url + "/_content/XtermBlazor/XtermBlazor.min.js",
|
||||
url + "/_content/BlazorTable/BlazorTable.min.js",
|
||||
url + "/_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js",
|
||||
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.js",
|
||||
"https://www.google.com/recaptcha/api.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-search@0.8.2/lib/xterm-addon-search.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.5.0/lib/xterm-addon-web-links.min.js",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js",
|
||||
"require.config({ paths: { 'vs': '/_content/BlazorMonaco/lib/monaco-editor/min/vs' } });",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js",
|
||||
url + "/_content/BlazorMonaco/jsInterop.js",
|
||||
url + "/assets/js/scripts.bundle.js",
|
||||
url + "/assets/js/moonlight.js",
|
||||
"moonlight.loading.registerXterm();",
|
||||
url + "/_content/Blazor-ApexCharts/js/apex-charts.min.js",
|
||||
url + "/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"
|
||||
}
|
||||
JsFiles
|
||||
);
|
||||
|
||||
BundledCss = await BundleFiles(
|
||||
new[]
|
||||
{
|
||||
"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700",
|
||||
url + "/assets/css/style.bundle.css",
|
||||
url + "/assets/css/flashbang.css",
|
||||
url + "/assets/css/snow.css",
|
||||
url + "/assets/css/utils.css",
|
||||
url + "/assets/css/blazor.css",
|
||||
url + "/_content/XtermBlazor/XtermBlazor.css",
|
||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css",
|
||||
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.css",
|
||||
url + "/assets/plugins/global/plugins.bundle.css",
|
||||
}
|
||||
CssFiles
|
||||
);
|
||||
|
||||
|
||||
Logger.Info("Successfully bundled");
|
||||
BundledFinished = true;
|
||||
}
|
||||
|
||||
private async Task<string> BundleFiles(string[] jsUrls)
|
||||
|
||||
private async Task<string> BundleFiles(IEnumerable<string> items)
|
||||
{
|
||||
var bundledJs = "";
|
||||
var bundled = "";
|
||||
|
||||
using HttpClient client = new HttpClient();
|
||||
foreach (string url in jsUrls)
|
||||
foreach (string item in items)
|
||||
{
|
||||
if (url.StartsWith("http"))
|
||||
// Item is a url, fetch it
|
||||
if (item.StartsWith("http"))
|
||||
{
|
||||
var jsCode = await client.GetStringAsync(url);
|
||||
bundledJs += jsCode + "\n";
|
||||
try
|
||||
{
|
||||
var jsCode = await client.GetStringAsync(item);
|
||||
bundled += jsCode + "\n";
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
Logger.Warn($"Error fetching '{item}' while bundling");
|
||||
Logger.Warn(e);
|
||||
}
|
||||
}
|
||||
else
|
||||
bundledJs += url + "\n";
|
||||
else // If not, it is probably a manual addition, so add it
|
||||
bundled += item + "\n";
|
||||
}
|
||||
|
||||
return bundledJs;
|
||||
return bundled;
|
||||
}
|
||||
}
|
||||
@@ -38,6 +38,7 @@
|
||||
|
||||
<link rel="shortcut icon" href="@(moonlightConfig.GetValue<string>("AppUrl"))/api/moonlight/resources/images/logo.svg"/>
|
||||
|
||||
@*This import is not in the bundle because the files it references are linked relative to the current lath*@
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/boxicons.min.css"/>
|
||||
|
||||
@if (BundleService.BundledFinished)
|
||||
@@ -46,20 +47,19 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.bundle.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/flashbang.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/snow.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/utils.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/boxicons.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/blazor.css"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/_content/XtermBlazor/XtermBlazor.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/_content/Blazor.ContextMenu/blazorContextMenu.min.css"/>
|
||||
|
||||
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
|
||||
foreach (var cssFile in BundleService.CssFiles)
|
||||
{
|
||||
if (cssFile.StartsWith("http"))
|
||||
{
|
||||
<link rel="stylesheet" type="text/css" href="@(cssFile)">
|
||||
}
|
||||
else
|
||||
{
|
||||
<style>
|
||||
@cssFile
|
||||
</style>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
@@ -113,31 +113,17 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<script src="/_framework/blazor.server.js"></script>
|
||||
<script src="/assets/plugins/global/plugins.bundle.js"></script>
|
||||
<script src="/_content/XtermBlazor/XtermBlazor.min.js"></script>
|
||||
<script src="/_content/BlazorTable/BlazorTable.min.js"></script>
|
||||
<script src="/_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
|
||||
<script src="/_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>
|
||||
|
||||
<script src="https://www.google.com/recaptcha/api.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-search@0.8.2/lib/xterm-addon-search.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.5.0/lib/xterm-addon-web-links.min.js"></script>
|
||||
|
||||
<script src="/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
|
||||
<script>require.config({ paths: { 'vs': '/_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
|
||||
<script src="/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
|
||||
<script src="/_content/BlazorMonaco/jsInterop.js"></script>
|
||||
|
||||
<script src="/assets/js/scripts.bundle.js"></script>
|
||||
<script src="/assets/js/moonlight.js"></script>
|
||||
|
||||
<script>moonlight.loading.registerXterm();</script>
|
||||
|
||||
<script src="/_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
|
||||
<script src="/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>
|
||||
foreach (var jsFile in BundleService.JsFiles)
|
||||
{
|
||||
if (jsFile.StartsWith("http"))
|
||||
{
|
||||
<script src="@(jsFile)"></script>
|
||||
}
|
||||
else
|
||||
{
|
||||
@Html.Raw("<script>" + jsFile +"</script>")
|
||||
}
|
||||
}
|
||||
}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user