Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-20 02:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor assets loading

Browse Source 
* move fonts first
* move CSS and JS along with the rest
* move default auto theme media checks to the HEAD instead of imports

Also, use `script defer`. This makes the JS files non-blocking.

Signed-off-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
XhmikosR
2025-03-08 15:34:29 +02:00
parent 877d5f8cb9
commit 1acb80536b
25 changed files with 100 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/lua/footer.lp
View File

@@ -66,7 +66,7 @@ end
</div>
<!-- ./wrapper -->
<script src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
<script defer src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
<div id="advanced-info-data" style="display: none;" data-starttime="<?=starttime?>" data-endtime="<?=mg.time(true)?>" data-client-ip="<?=mg.request_info.remote_addr?>" data-xff="<?=x_forwarded_for?>"></div>
</body>

45
scripts/lua/header.lp
View File

@@ -64,18 +64,8 @@ is_authenticated = mg.request_info.is_authenticated
<link rel="shortcut icon" href="<?=webhome?>img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="<?=theme.color?>">
<meta name="msapplication-TileImage" content="<?=webhome?>img/favicons/mstile-150x150.png">
<!-- Theme styles -->
<meta name="theme-color" content="<?=theme.color?>">
<? if theme.dark then ?>
<style>
html { background-color: #000; }
</style>
<? end ?>
<script src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/nprogress/nprogress.min.css')?>">
<!-- Theme fonts -->
<? if theme.name == 'lcars' then ?>
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/fonts/ubuntu-mono/ubuntu-mono.css')?>">
@@ -84,13 +74,20 @@ is_authenticated = mg.request_info.is_authenticated
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/fonts/source-sans-pro/source-sans-pro.css')?>">
<? end ?>
<? if theme.dark then ?>
<style>
html { background-color: #000; }
</style>
<? end ?>
<!-- Common styles -->
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap/css/bootstrap.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/animate/animate.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/font-awesome/css/all.min.css')?>">
<?
if startsWith(scriptname, 'groups') then
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/nprogress/nprogress.min.css')?>">
<? if startsWith(scriptname, 'groups') then
-- Group management styles
?>
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.css')?>">
@@ -102,20 +99,26 @@ if startsWith(scriptname, 'groups') then
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.css')?>">
<? end ?>
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/select2/select2.min.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/adminLTE/AdminLTE.min.css')?>">
<!-- Theme styles -->
<!-- Theme styles (<?= theme.name ?>) -->
<link rel="stylesheet" href="<?=pihole.fileversion('style/pi-hole.css')?>">
<link rel="stylesheet" href="<?=pihole.fileversion('style/themes/'..theme.name..'.css')?>">
<? if theme.name == "default-auto" then ?>
<link rel="stylesheet" href="<?=pihole.fileversion('style/themes/default-dark.css')?>" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="<?=pihole.fileversion('style/themes/default-light.css')?>" media="not (prefers-color-scheme: dark)">
<? else ?>
<link rel="stylesheet" href="<?=pihole.fileversion('style/themes/' ..theme.name.. '.css')?>">
<? end ?>
<noscript><link rel="stylesheet" href="<?=pihole.fileversion('vendor/js-warn/js-warn.css')?>"></noscript>
<!-- scripts -->
<script src="<?=pihole.fileversion('vendor/jquery/jquery.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
<link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
<script defer src="<?=pihole.fileversion('vendor/jquery/jquery.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>

24
scripts/lua/header_authenticated.lp
View File

@@ -9,18 +9,18 @@
]]--
mg.include('header.lp','r')
?>
<script src="<?=pihole.fileversion('scripts/js/logout.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/select2/select2.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/datatables/datatables.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/datatables-select/datatables.select.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/datatables-buttons/datatables.buttons.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/chartjs/chart.umd.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/chartjs-plugin-deferred/chartjs-plugin-deferred.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/moment/moment.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/chartjs-adapter-moment/chartjs-adapter-moment.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/hammer/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom -->
<script src="<?=pihole.fileversion('vendor/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/select2/select2.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/datatables/datatables.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/datatables-select/datatables.select.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/datatables-buttons/datatables.buttons.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/chartjs/chart.umd.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/chartjs-plugin-deferred/chartjs-plugin-deferred.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/moment/moment.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/chartjs-adapter-moment/chartjs-adapter-moment.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/hammer/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom -->
<script defer src="<?=pihole.fileversion('vendor/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.js')?>"></script>
<script defer src="<?=pihole.fileversion('scripts/js/logout.js')?>"></script>
</head>
<body class="<?=theme.name?> hold-transition sidebar-mini <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in" data-apiurl="<?=pihole.api_url()?>">
<noscript>