Implemented a dark mode feature for the website, including a toggle button in the navigation bar that allows users to switch between light and dark themes. To support this feature, centralized common CSS styles (such as body, table, and button stylings) into main.js to ensure consistent application across all HTML pages. This change improves user experience by providing a visually comfortable alternative for low-light environments and centralizes styling rules for easier maintenance.
- Added dark mode styles for body, table, buttons, and navigation elements in main.js.
- Introduced a toggle mechanism in the navigation bar to switch between light and dark modes.
- Utilized JavaScript to detect system theme preference (`prefers-color-scheme`) and persist user's theme choice using localStorage.
- Removed duplicate and scattered CSS rules from individual HTML files (add.html, index.html, links.html, log.html) and centralized them in main.js to reduce redundancy and facilitate easier updates in the future.
This update enhances accessibility and user preference compliance by allowing users to select their desired theme while simplifying CSS management across the website.
Added a button to the log page allowing users to toggle the order in which logs are displayed (normal or reversed). This feature enhances user experience by providing flexibility in viewing logs. The implementation involves a boolean flag `reverseOrder` to track the current state of log order and dynamically updates the button text to reflect the current mode. Additionally, the log fetching function now conditionally reverses the log array based on this flag, ensuring that the display order matches the user's preference. This change could significantly improve usability for users needing to analyze recent events without scrolling through the entire log history.
Updated various GitHub Actions used in the CI workflows (build.yml, gh-pages.yml, test.yml) to their latest major versions. This includes actions for checking out code, setting up Go, uploading artifacts, configuring Docker, and deploying to GitHub Pages. The update is part of routine maintenance to ensure compatibility with the latest features and improvements provided by these actions.
The applyLogStyling function in log.html has been updated to reverse the array of log lines. After parsing the JSON data, reversing the array ensures that the most recent logs appear at the top of the list. This change enhances the readability for users by displaying the logs in a descending chronological order.