This 'bug' was caused due to the way the dark mode was applied. The dark mode detection detects the preferred theme style from the client and then saves the preferred type with a cookie, all with JavaScript. Then a simple PHP if-else statement loads either the dark or light mode CSS theme, depending on the cookie.
The problem here was that the cookie would only be detected if the page was refreshed, so once the cookie was set, the dark mode was applied every time without a problem. But the first time a user visited the site and the preferred theme was set to dark mode, the page would still display the white version until the page was refreshed.
Now, I could have changed how the page applies the dark mode, however I decided against that and went with this commit instead.
Now I'm not really experienced with JavaScript at all, so this definitely could have been solved in a more elegant way, but this is what I did:
I added a bit to the JavaScript that sets and reads the cookie. When the page finished loading, a simple if statement is run that requires the following conditions:
The URL contains a '#' and the color scheme equals 'dark' and the cookie isn't set yet.
After these conditions are met, '#dark' is added to the URL and the page will be refreshed.
This refresh is only performed without the cookie, thus only refreshing the page on the first visit if the dark mode would be applied.
The '#dark' is only added to the URL to fail the first requirement of the if statement, preventing the page from being reloaded in an infinite loop. Otherwise, the '#dark' part of the URL fulfills no purpose and only the '#' part is required, so it doesn't even matter what comes after the hash. I just chose this for clarification.
If the dark mode cookie is blocked by the user, the page will be set to light mode and refreshed every time they visit but the '#dark' will still be added to the URL, preventing the infinite refresh-loop.
Fixed bug where users littlelink pages (domain.com/@username) would display a 404 error. This was caused due to the .env config file not containing an App URL. This issue could be solved by simply adding a URL to the config, this is now not necessary anymore, making the setup process easier and less confusing.
I changed every instance of "{{ config('app.url') }}" to "{{ url(' ') }}". This effectively automatically uses the correct URL for LittleLink links, even if LittleLink Custom is set up in a subdirectory.
In my testing, I couldn't find any problems this might have caused, so this appears to do the job just as well as setting the URL in the config. If I find any issues with this, I will revert this change.
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.
This fixed the issue of dark mode not displaying on the register, login, forgot password and a few other pages.
This one took me a while to fix, and I still don't really know what is going on here.
The aforementioned pages already implemented a dark mode, but it didn't seem to work for me. After some testing, I discovered that the dark mode preset doesn't load on chromium based browsers.
I have absolutely no idea why that is, if someone could help me with this that would be amazing. I might make an issue out of this later on.
As I still wanted to fix this, I finally achieved my goal by doing the caveman approach:
I first added the usual dark mode detection. The same used on the home and little link pages (see previous commits if you're interested).
Then I wrote and if statement that loads the newly added app-dark.css (see previous commit) that changes text and background color on the pages in question, if the browser type is chromium and dark mode is selected in the browser settings.
"@if(strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome' !== false) and $color_scheme == 'dark')"
This doesn't look optimal, and I would rather just have the same dark mode as on Firefox, but this is the best I can currently do with my available time.
Just a quick fix, the logo wasn't displaying correctly I probably should do this with a separate CSS file for all images, but I just did this quick and dirty with a style attribute
As part of the new logo (https://github.com/JulianPrieber/littlelink-custom/milestone/1) I'm now using the new 'logo.svg' vector logo.
For this, I added an if-else statement in most cases, which first check for a custom logo uploaded by the admin or the avatar of an individual user. If the image doesn't exist, the default logo (logo.svg) is used.
