2021-04-16 01:00:00 +02:00
<! doctype html >
< html lang = " en " >
< head >
< title > Studio ⚙️ {{ config ( 'app.name' ) }} </ title >
< meta charset = " utf-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1, shrink-to-fit=no " >
2021-07-06 10:48:50 +02:00
< link href = " //fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900 " rel = " stylesheet " >
2021-04-16 01:00:00 +02:00
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css " >
2022-02-20 22:56:09 +01:00
<!-- begin dark mode detection -->
< script src = " { { asset('littlelink/js/js.cookie.min.js') }} " ></ script >
< script >
// code to set the `color_scheme` cookie
var $color_scheme = Cookies . get ( " color_scheme " );
function get_color_scheme () {
return ( window . matchMedia && window . matchMedia ( " (prefers-color-scheme: dark) " ) . matches ) ? " dark " : " light " ;
}
function update_color_scheme () {
Cookies . set ( " color_scheme " , get_color_scheme ());
}
// read & compare cookie `color-scheme`
if (( typeof $color_scheme === " undefined " ) || ( get_color_scheme () != $color_scheme ))
update_color_scheme ();
// detect changes and change the cookie
if ( window . matchMedia )
window . matchMedia ( " (prefers-color-scheme: dark) " ) . addListener ( update_color_scheme );
</ script >
< ? php // loads dark mode CSS if dark mode detected
$color_scheme = isset ( $_COOKIE [ " color_scheme " ]) ? $_COOKIE [ " color_scheme " ] : false ; ?>
@ if ( $color_scheme == 'dark' )
<!-- switch the two < link > Tags below to default to dark mode if cookie detection fails -->
< link rel = " stylesheet " href = " { { asset('/studio/css/bootstrap.min-dark.css') }} " >
< link rel = " stylesheet " href = " { { asset('/studio/css/style-dashboard-dark.css') }} " >
@ else
< link rel = " stylesheet " href = " { { asset('/studio/css/bootstrap.min.css') }} " >
< link rel = " stylesheet " href = " { { asset('/studio/css/style-dashboard.css') }} " >
@ endif
<!-- end dark mode detection -->
2021-04-16 01:00:00 +02:00
2022-02-20 13:12:25 +01:00
@ if ( file_exists ( base_path ( " littlelink/images/avatar.png " )))
2021-04-16 01:00:00 +02:00
< link rel = " icon " type = " image/png " href = " { { asset('littlelink/images/avatar.png') }} " >
2022-02-20 13:12:25 +01:00
@ else
2022-02-20 13:20:21 +01:00
< link rel = " icon " type = " image/svg+xml " href = " { { asset('littlelink/images/logo.svg') }} " >
2022-02-20 13:12:25 +01:00
@ endif
2021-04-16 01:00:00 +02:00
</ head >
< body >
< div class = " wrapper d-flex align-items-stretch " >
< nav id = " sidebar " >
< div class = " p-4 pt-5 " >
2021-07-06 10:48:50 +02:00
@ if ( auth () -> user () -> role == 'user' || auth () -> user () -> role == 'vip' )
2021-04-16 01:00:00 +02:00
< a href = " { { url('/studio/index') }} " >
@ elseif ( auth () -> user () -> role == 'admin' )
< a href = " { { url('/panel/index') }} " >
@ endif
2022-02-20 14:09:08 +01:00
@ if ( file_exists ( base_path ( " littlelink/images/avatar.png " )))
2022-02-21 20:22:21 +01:00
< img class = " img logo " src = " { { asset('littlelink/images/avatar.png') }} " srcset = " { { asset('littlelink/images/avatar@2x.png 2x') }} " style = " width: 150px;>
2022-02-20 14:09:08 +01:00
@ else
2022-02-21 20:22:21 +01:00
< img class = " img logo " type = " image/svg+xml " src = " { { asset('littlelink/images/logo.svg') }} " style = " width:100px; " >
2022-02-20 14:09:08 +01:00
@ endif
2021-04-16 01:00:00 +02:00
</ a >
< ul class = " list-unstyled components mb-5 " >
@ if ( auth () -> user () -> role == 'admin' )
< ul class = " list-unstyled components mb-5 " >
< li class = " active " >
< a href = " #adminSubmenu " data - toggle = " collapse " aria - expanded = " false " class = " dropdown-toggle " > Admin </ a >
< ul class = " collapse list-unstyled " id = " adminSubmenu " >
< li >
< a href = " { { url('panel/users/all') }} " > Users </ a >
</ li >
< li >
< a href = " { { url('panel/pages') }} " > Pages </ a >
</ li >
< li >
< a href = " { { url('panel/site') }} " > Site </ a >
</ li >
</ ul >
</ li >
@ endif
< li >
< li class = " active " >
< a href = " { { url('/studio/add-link') }} " > Add Link </ a >
</ li >
< li >
< a href = " { { url('/studio/links') }} " > Links </ a >
</ li >
< li >
< a href = " { { url('/studio/page') }} " > Page </ a >
</ li >
< li >
< a href = " { { url('/studio/profile') }} " > Profile </ a >
</ li >
< form action = " { { route('logout') }} " method = " post " >
< input type = " hidden " name = " _token " value = " { { csrf_token() }} " >
2021-07-06 10:48:50 +02:00
< button type = " submit " class = " buttonLogout " > Logout </ button >
2021-04-16 01:00:00 +02:00
</ form >
</ ul >
2021-07-06 10:48:50 +02:00
< div class = " footer " style = " display:none " >
2021-04-16 01:00:00 +02:00
< p >
Copyright & copy ; @ php echo date ( 'Y' ); @ endphp < i class = " icon-heart " aria - hidden = " true " ></ i > </ br >
< a href = " / " target = " _blank " > Home </ a > .
2021-07-06 10:48:50 +02:00
< a href = " { { config('app.url') }}/pages/terms " target = " _blank " > Terms </ a > .
< a href = " { { config('app.url') }}/pages/privacy " target = " _blank " > Privacy </ a > .
< a href = " { { config('app.url') }}/pages/contact " target = " _blank " > Contact </ a >
2021-04-16 01:00:00 +02:00
</ p >
</ div >
</ div >
</ nav >
<!-- Page Content -->
< div id = " content " class = " p-4 p-md-5 " >
< nav class = " navbar navbar-expand-lg navbar-light bg-light " >
< div class = " container-fluid " >
< button type = " button " id = " sidebarCollapse " class = " btn btn-primary " >
2022-02-20 15:20:57 +01:00
< i class = " bi bi-list " ></ i >
2021-04-16 01:00:00 +02:00
< span class = " sr-only " > Toggle Menu </ span >
</ button >
< button class = " btn btn-dark d-inline-block d-lg-none ml-auto " type = " button " data - toggle = " collapse " data - target = " #navbarSupportedContent " aria - controls = " navbarSupportedContent " aria - expanded = " false " aria - label = " Toggle navigation " >
2022-02-20 15:20:57 +01:00
< i class = " bi bi-list " ></ i >
2021-04-16 01:00:00 +02:00
</ button >
< div class = " collapse navbar-collapse " id = " navbarSupportedContent " >
< ul class = " nav navbar-nav ml-auto " >
< li class = " nav-item " >
Added automatic update detection
This displays an update notice if a new version of LittleLink Custom has been released.
This one is definitely a messy one. Everything I added is commented, but I'm going to try explaining it here one more time.
General outcome:
• This feature checks the local version against the newest version stored on a separate server.
Error prevention:
• I used 'file_get_contents' to get the version number from a JSON file. If 'file_get_contents' cant find the file, PHP will throw an Error Exception.
• To prevent this, I put the update section in an if-statement that only applies if the following conditions are met.
Check if files exist:
• To test whether the file on the server exists (remember, if the server can't be reached, you will get an Error Exception) I used a function that checks if the URL to the file on the server successfully returns a '200 OK' response (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200).
• If this condition is met, it sets the variable '$ServerExists' to true, if not to false.
• Now, the previous mentioned if-statement simply checks if the local file exists and the '$ServerExists' variable equals 'true' to proceed.
Get version number:
• If all previous conditions are met, two variables get defined via 'file_get_contents' '$Vgit' and '$Vlocal'.
• Both the file on the server and the local file simply contain the version number.
• The variable '$Vgit' is the newest version number retrieved from the server.
• The variable '$Vlocal' is the local version number.
Display update notice:
• To finally display the version number (added with HTML) one last check via an if-statement is performed. This simply checks if the current user is an admin AND if the version retrieved from the server is higher than the local one.
• If both conditions are met, the notice is displayed.
In addition, I should mention that I put the existing 'Watch Page' link as well as the update notice in a div with the class 'row' to display both links next to another instead of them being stacked.
2022-02-23 13:38:15 +01:00
< div class = " row " >
<! – – #### begin update detection #### – –
< ? php // Checks if URL exists
function URL_exists ( string $url ) : bool
{
return str_contains ( get_headers ( $url )[ 0 ], " 200 OK " );
}
// Sets $ServerExists to true if URL exists
if ( URL_exists ( " https://littlelink-custom.tru.io/version.json " )){
$ServerExists = " true " ;
} else {
$ServerExists = " false " ;
}
?>
<! – – Checks if file version . json exists AND if version . json exists on server to continue ( without this PHP will throw ErrorException ) – – >
@ if ( file_exists ( base_path ( " version.json " )) and $ServerExists == 'true' )
< ? php // Requests newest version from server and sets it as variable
$Vgit = file_get_contents ( " https://littlelink-custom.tru.io/version.json " );
// Requests current version from the local version file and sets it as variable
$Vlocal = file_get_contents ( base_path ( " version.json " ));
?>
<! – – If user has role admin AND newest GitHub release version is higher than the local one an update notice will be displayed – – >
@ if ( auth () -> user () -> role == 'admin' and $Vgit > $Vlocal )
< a style = " color:#007bff " class = " nav-link " href = " https://littlelink-custom.tru.io/how-to-update.html " target = " _blank " title = " Click here to learn more about how to update " > An update is available </ a >
@ endif
@ endif
<! – – #### end update detection #### – –
2021-07-06 10:48:50 +02:00
< a class = " nav-link " href = " { { config('app.url') }}/@<?= Auth::user()->littlelink_name ?> " target = " _blank " > Watch Page </ a >
Added automatic update detection
This displays an update notice if a new version of LittleLink Custom has been released.
This one is definitely a messy one. Everything I added is commented, but I'm going to try explaining it here one more time.
General outcome:
• This feature checks the local version against the newest version stored on a separate server.
Error prevention:
• I used 'file_get_contents' to get the version number from a JSON file. If 'file_get_contents' cant find the file, PHP will throw an Error Exception.
• To prevent this, I put the update section in an if-statement that only applies if the following conditions are met.
Check if files exist:
• To test whether the file on the server exists (remember, if the server can't be reached, you will get an Error Exception) I used a function that checks if the URL to the file on the server successfully returns a '200 OK' response (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200).
• If this condition is met, it sets the variable '$ServerExists' to true, if not to false.
• Now, the previous mentioned if-statement simply checks if the local file exists and the '$ServerExists' variable equals 'true' to proceed.
Get version number:
• If all previous conditions are met, two variables get defined via 'file_get_contents' '$Vgit' and '$Vlocal'.
• Both the file on the server and the local file simply contain the version number.
• The variable '$Vgit' is the newest version number retrieved from the server.
• The variable '$Vlocal' is the local version number.
Display update notice:
• To finally display the version number (added with HTML) one last check via an if-statement is performed. This simply checks if the current user is an admin AND if the version retrieved from the server is higher than the local one.
• If both conditions are met, the notice is displayed.
In addition, I should mention that I put the existing 'Watch Page' link as well as the update notice in a div with the class 'row' to display both links next to another instead of them being stacked.
2022-02-23 13:38:15 +01:00
</ div >
2021-04-16 01:00:00 +02:00
</ li >
</ ul >
</ div >
</ div >
</ nav >
@ yield ( 'content' )
</ div >
</ div >
< script src = " { { asset('/studio/js/jquery.min.js') }} " ></ script >
< script src = " { { asset('/studio/js/popper.js') }} " ></ script >
< script src = " { { asset('/studio/js/bootstrap.min.js') }} " ></ script >
< script src = " { { asset('/studio/js/main-dashboard.js') }} " ></ script >
</ body >
</ html >
