g0v logbot simple navigation userscript

README.md

g0v logbot simple navigation userscript

Add the bottom right buttons for more sensible navigation.

Installation

Install Greasemonkey

And click this link or https://gist.githubusercontent.com/Yukaii/a1da186dd92e647ec000dba0358bb0de/raw/g0v-logbot-enhance.user.js

Note: You might get net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 error when browsing g0v logbot with a Chromium-based browser when DevTools are opened. Use Firefox instead.

Features

• Next/Previous day switch
• Quick access Calendar
• Randomize date
• Auto switch between g0v.tw/g0v-general URL path based on this doc

g0v-logbot-enhance.user.js

// ==UserScript==
// @name         LogBot Date Navigation
// @namespace    http://tampermonkey.net/
// @version      0.7
// @Author       Yukai Huang and Claude 3 Opus
// @downloadURL https://gist.githubusercontent.com/Yukaii/a1da186dd92e647ec000dba0358bb0de/raw/g0v-logbot-enhance.user.js
// @updateURL https://gist.githubusercontent.com/Yukaii/a1da186dd92e647ec000dba0358bb0de/raw/g0v-logbot-enhance.user.js
// @description  Add date navigation buttons, date picker, and random date button to logbot.g0v.tw
// @match        https://logbot.g0v.tw/channel/g0v.tw/*
// @match        https://logbot.g0v.tw/channel/g0v-general/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const CHANNEL_SWITCH_DATE = new Date('2021-06-26');

    // Parse date and channel from URL
    const urlPath = window.location.pathname;
    const pathParts = urlPath.split('/');
    const channel = pathParts[2];
    let currentDate = new Date();

    if (pathParts.length > 3) {
        const [year, month, day] = pathParts[3].split('-');
        currentDate = new Date(year, parseInt(month) - 1, day);
    }

    // Create floating UI container
    const uiContainer = document.createElement('div');
    uiContainer.style.position = 'fixed';
    uiContainer.style.bottom = '20px';
    uiContainer.style.right = '20px';
    uiContainer.style.zIndex = '9999';
    uiContainer.style.display = 'flex';
    uiContainer.style.alignItems = 'center';
    uiContainer.style.gap = '10px';
    document.body.appendChild(uiContainer);

    // Add previous day button
    const prevDayBtn = document.createElement('button');
    prevDayBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle;"><path d="M15 18l-6-6 6-6"/></svg> Previous Day';
    prevDayBtn.style.padding = '10px 20px';
    prevDayBtn.style.fontSize = '14px';
    prevDayBtn.style.borderRadius = '4px';
    prevDayBtn.style.backgroundColor = '#007BFF';
    prevDayBtn.style.color = 'white';
    prevDayBtn.style.border = 'none';
    prevDayBtn.style.cursor = 'pointer';
    prevDayBtn.onclick = function() {
        const newDate = new Date(currentDate);
        newDate.setDate(newDate.getDate() - 1);
        navigateToDate(newDate);
    };
    uiContainer.appendChild(prevDayBtn);

    // Add next day button
    const nextDayBtn = document.createElement('button');
    nextDayBtn.innerHTML = 'Next Day <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle;"><path d="M9 18l6-6-6-6"/></svg>';
    nextDayBtn.style.padding = '10px 20px';
    nextDayBtn.style.fontSize = '14px';
    nextDayBtn.style.borderRadius = '4px';
    nextDayBtn.style.backgroundColor = '#007BFF';
    nextDayBtn.style.color = 'white';
    nextDayBtn.style.border = 'none';
    nextDayBtn.style.cursor = 'pointer';
    nextDayBtn.onclick = function() {
        const newDate = new Date(currentDate);
        newDate.setDate(newDate.getDate() + 1);
        navigateToDate(newDate);
    };
    uiContainer.appendChild(nextDayBtn);

    // Add date picker
    const datePicker = document.createElement('input');
    datePicker.type = 'date';
    datePicker.value = formatDate(currentDate);
    datePicker.style.padding = '8px';
    datePicker.style.fontSize = '14px';
    datePicker.style.borderRadius = '4px';
    datePicker.style.border = '1px solid #ccc';
    datePicker.onchange = function() {
        navigateToDate(new Date(this.value));
    };
    uiContainer.appendChild(datePicker);

    // Add random date button
    const randomBtn = document.createElement('button');
    randomBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 17.5L16 16m1-6.5l1.5 1.5M4 14l6 6m5-8.5L18 14M2.5 9.5L4 11m4-6l-6 6m15-4.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM10 7.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM6.5 15a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>';
    randomBtn.style.padding = '10px';
    randomBtn.style.borderRadius = '4px';
    randomBtn.style.backgroundColor = '#28a745';
    randomBtn.style.color = 'white';
    randomBtn.style.border = 'none';
    randomBtn.style.cursor = 'pointer';
    randomBtn.onclick = function() {
        const startDate = new Date('2013-07-26');
        const endDate = new Date();
        const randomTimestamp = startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime());
        const randomDate = new Date(randomTimestamp);
        navigateToDate(randomDate);
    };
    uiContainer.appendChild(randomBtn);

    // Date formatting helper
    function formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
    }

    // Navigate to the specified date
    function navigateToDate(date) {
        const targetChannel = date < CHANNEL_SWITCH_DATE ? 'g0v.tw' : 'g0v-general';
        window.location.href = `/channel/${targetChannel}/${formatDate(date)}`;
    }

})();