browndust2.com news viewer (Vue 3 + Tailwind CSS)

Custom news viewer for browndust2.com using Vue 3 and Tailwind CSS
当前为 2024-10-17 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         browndust2.com news viewer (Vue 3 + Tailwind CSS)
// @namespace    http://tampermonkey.net/
// @version      1.2.0
// @description  Custom news viewer for browndust2.com using Vue 3 and Tailwind CSS
// @author       SouSeiHaku
// @match        https://www.browndust2.com/robots.txt
// @grant        none
// @run-at       document-end
// @license      WTFPL
// ==/UserScript==
 
/*
 * This script is based on the original work by Rplus:
 * @name browndust2.com news viewer
 * @namespace Violentmonkey Scripts
 * @version 1.2.0
 * @author Rplus
 * @description custom news viewer for sucking browndust2.com
 * @license WTFPL
 *
 * Modified and extended by SouSeiHaku
 */
 
(function () {
    'use strict';
 
    function addScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }
 
    function addGlobalStyle() {
        const style = document.createElement('style');
        style.textContent = `
            body {
                color: white;
            }
 
            .content-box * {
                font-size: 1rem !important;
            }
 
            .content-box [style*="font-size"] {
                font-size: 1rem !important;
            }
 
            .content-box span[style*="font-size"],
            .content-box p[style*="font-size"],
            .content-box div[style*="font-size"] {
                font-size: 1rem !important;
                color: #d1d5db;
            }
 
            .content-box strong {
                color: white;
            }
 
            .content-box p {
                margin-bottom:16px;
            }
 
        `;
        document.head.appendChild(style);
    }
 
    Promise.all([
        addScript('https://unpkg.com/vue@3/dist/vue.global.js'),
        addScript('https://cdn.tailwindcss.com')
    ]).then(() => {
        addGlobalStyle();
        initializeApp();
    }).catch(error => {
        console.error('Error loading scripts:', error);
    });
 
    function initializeApp() {
        if (!window.Vue) return;
 
        const { createApp, ref, computed, onMounted } = Vue;
 
        const app = createApp({
            setup() {
                const data = ref([]);
                const newsMap = ref(new Map());
                const searchInput = ref('');
                const showAll = ref(false);
                const language = ref('tw')
 
                const filteredData = computed(() => {
                    const keyword = searchInput.value.trim().toLowerCase();
                    if (!keyword) return data.value;
                    return data.value.filter(item => {
                        const info = item.attributes;
                        return [
                            item.id.toString(),
                            info.content,
                            info.NewContent,
                            info.tag,
                            info.subject
                        ].some(field => field && field.toLowerCase().includes(keyword));
                    });
                });
 
                const visibleData = computed(() => {
                    if (showAll.value) return filteredData.value;
                    return filteredData.value.slice(0, 20);
                });
 
                function formatTime(time) {
                    const _time = time ? new Date(time) : new Date();
                    return _time.toLocaleString('zh-TW', {
                        weekday: 'narrow',
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                    });
                }
 
                function show(id) {
                    const info = newsMap.value.get(parseInt(id))?.attributes;
                    if (!info) return '';
                    const content = (info.content || info.NewContent).replace(/\<img\s/g, '<img loading="lazy" ');
                    const oriLink = `<a class="text-blue-400 underline mt-10" href="https://www.browndust2.com/zh-tw/news/view?id=${id}" target="_bd2news" title="official link">官方連結 ></a>`;
                    const closeButton = `<div class="flex justify-center pt-3"><button class="close-details mt-4 px-3 py-1 bg-slate-600 hover:bg-slate-500 text-white rounded-full text-xs" onclick="closeDetails(${id})">關閉</button></div>`;
                    return content + oriLink + closeButton;
                }
 
                const closeDetails = (id) => {
                    const detailsElement = document.querySelector(`details[data-detail-id="${id}"]`);
                    if (detailsElement) {
                        detailsElement.open = false;
                    }
                };
 
                const languageOptions = [
                    {
                        label: '繁體中文',
                        value: 'tw'
                    },
                    {
                        label: '日本語',
                        value: 'jp'
                    },
                    {
                        label: 'English',
                        value: 'en'
                    },
                    {
                        label: '한국어',
                        value: 'kr'
                    },
                    {
                        label: '简体中文',
                        value: 'cn'
                    },
                ]
 
                const handleLangChange = () => {
                    searchInput.value = '';
                    load();
                }
 
                async function load() {
                    const dataUrl = `https://www.browndust2.com/api/newsData_${language.value}.json`;
 
                    try {
                        const response = await fetch(dataUrl);
                        const json = await response.json();
                        console.log('Data fetched successfully, item count:', json.data.length);
                        data.value = json.data.reverse();
                        data.value.forEach(item => {
                            newsMap.value.set(item.id, item);
                        });
                    } catch (error) {
                        console.error('Error fetching or processing data:', error);
                    }
                }
 
                onMounted(() => {
                    load()
                    window.closeDetails = closeDetails;
                });
 
                return {
                    visibleData,
                    searchInput,
                    showAll,
                    language,
                    languageOptions,
                    formatTime,
                    show,
                    handleLangChange,
                };
            }
        });
 
        // Create a container for the Vue app
        const appContainer = document.createElement('div');
        appContainer.id = 'app';
        document.body.innerHTML = '';
        document.body.appendChild(appContainer);
 
        // Add the Vue template
        appContainer.innerHTML = `
        <div class=" w-full min-h-[100dvh] relative bg-slate-900">
        <header class="sticky top-0 left-0 h-[60px] border-b border-slate-600 flex justify-between items-center bg-slate-900 z-10 px-3">
			<label class="flex gap-1 items-center">
				Filter
				<input v-model="searchInput" type="search" class="py-1 px-2 block w-full rounded text-sm disabled:pointer-events-none bg-neutral-700 border-neutral-700 text-neutral-100 placeholder-neutral-500 focus:ring-neutral-600" tabindex="1">
			</label>
            <div class="flex gap-3 items-center">
                <label class="cursor-pointer flex gap-1 items-center">
                    <select v-model="language" @change="handleLangChange" class="py-1 px-2 block w-full rounded text-sm disabled:pointer-events-none bg-neutral-700 border-neutral-700 text-neutral-100 placeholder-neutral-500 focus:ring-neutral-600" tabindex="1">
                        <option v-for="option in languageOptions" :key="option.value" :value="option.value">
                            {{ option.label }}
                        </option>
                    </select>
                </label>
                <label class="cursor-pointer flex gap-1 items-center">
                    <input v-model="showAll" type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
                    Show all list
                </label>
            </div>
        </header>
            <div class="flex flex-col mx-auto w-full max-w-7xl py-8 px-3 space-y-4">
                <details v-for="item in visibleData" :key="item.id" :data-detail-id="item.id" class="rounded overflow-hidden">
                    <summary class="pl-4 pr-2 py-2 cursor-pointer bg-slate-700 hover:bg-slate-600 active:bg-slate-600 transition duration-200">
                        <img :src="'https://www.browndust2.com/img/newsDetail/tag-' + item.attributes.tag + '.png'"
                            :alt="item.attributes.tag" :title="'#' + item.attributes.tag"
                            class="w-10 h-10 inline-block mr-2">
                            #{{ item.id }} -
                            <time :datetime="item.attributes.publishedAt" :title="item.attributes.publishedAt">
                                {{ formatTime(item.attributes.publishedAt) }}
                            </time>
                            {{ item.attributes.subject }}
                    </summary>
                    <div class="bg-gray-700/50 p-4 whitespace-pre-wrap content-box" v-html="show(item.id)"></div>
                </details>
            </div>
        </div>
        `;
 
        app.mount('#app');
    }
})();