From f0a338e5849a0986a8e2effc14b0d41bea4592c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= <jkjoy@live.cn>
Date: Fri, 21 Jun 2024 09:25:01 +0800
Subject: [PATCH] Update hotmap.html

---
 themes/farallon/layouts/partials/hotmap.html | 420 +------------------
 1 file changed, 1 insertion(+), 419 deletions(-)

diff --git a/themes/farallon/layouts/partials/hotmap.html b/themes/farallon/layouts/partials/hotmap.html
index e18b34b..2ee8e8b 100644
--- a/themes/farallon/layouts/partials/hotmap.html
+++ b/themes/farallon/layouts/partials/hotmap.html
@@ -9,422 +9,4 @@
             });
         });
     </script>
-<script>
-class HeatmapCard extends HTMLElement {
-    constructor() {
-        super();
-        this.rss_url = '';
-        this.attachShadow({ mode: 'open' });
-        // 监听系统颜色方案的变化
-        this.colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        this.colorSchemeMediaQuery.addEventListener('change', this.handleColorSchemeChange.bind(this));
-    }
-    connectedCallback() {
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    --ht-main: #334155;
-                    --ht-tooltip: #24292f;
-                    --ht-tooltip-bg: #fff;
-                    --ht-lv-0: #ebedf0;
-                    --ht-lv-1: #9be9a8;
-                    --ht-lv-2: #40c463;
-                    --ht-lv-3: #30a14e;
-                    --ht-lv-4: #216e39;
-                }
-                :host([data-theme="dark"]) {
-                    --ht-main: #94a3b8;
-                    --ht-tooltip: #24292f;
-                    --ht-tooltip-bg: #fff;
-                    --ht-lv-0: #161b22;
-                    --ht-lv-1: #0e4429;
-                    --ht-lv-2: #006d32;
-                    --ht-lv-3: #26a641;
-                    --ht-lv-4: #39d353;
-                }
-                .heatmap_container {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    font-size: 10px;
-                    line-height: 12px;
-                    color: var(--ht-main);
-                    background-color: transparent;
-                }
-                .heatmap_content {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: flex-end;
-                    background-color: transparent;
-                }
-                .heatmap_week {
-                    display: flex;
-                    margin-top: 0.25rem;
-                    margin-right: 0.25rem;
-                    flex-direction: column;
-                    justify-content: flex-start;
-                    align-items: flex-end;
-                    text-align: right;
-                    background-color: transparent;
-                }
-                .heatmap_main {
-                    display: flex;
-                    flex-direction: column;
-                    background-color: transparent;
-                }
-                .heatmap_month {
-                    display: flex;
-                    margin-top: 0.25rem;
-                    margin-right: 0.25rem;
-                    flex-direction: row;
-                    justify-content: space-around;
-                    align-items: flex-end;
-                    text-align: right;
-                }
-                .heatmap {
-                    display: flex;
-                    flex-direction: row;
-                    height: 84px;
-                    background-color: transparent;
-                }
-                .heatmap_footer {
-                    display: flex;
-                    margin-top: 0.5rem;
-                    background-color: transparent;
-                }
-                .heatmap_level {
-                    display: flex;
-                    gap: 2px;
-                    margin: 0 0.25rem;
-                    flex-direction: row;
-                    width: max-content;
-                    height: 10px;
-                    background-color: transparent;
-                }
-                .heatmap_level_item {
-                    display: block;
-                    border-radius: 0.125rem;
-                    width: 10px;
-                    height: 10px;
-                }
-                .heatmap_level_0 {
-                    background: var(--ht-lv-0);
-                }
-                .heatmap_level_1 {
-                    background: var(--ht-lv-1);
-                }
-                .heatmap_level_2 {
-                    background: var(--ht-lv-2);
-                }
-                .heatmap_level_3 {
-                    background: var(--ht-lv-3);
-                }
-                .heatmap_level_4 {
-                    background: var(--ht-lv-4);
-                }
-                .heatmap_day {
-                    width: 10px;
-                    height: 10px;
-                    background-color: transparent;
-                    margin: 1px;
-                    border-radius: 2px;
-                    display: inline-block;
-                    position: relative;
-                }
-                .heatmap_tooltip {
-                    position: absolute;
-                    bottom: 12px;
-                    left: 50%;
-                    width: max-content;
-                    color: var(--ht-tooltip);
-                    background-color: var(--ht-tooltip-bg);
-                    font-size: 12px;
-                    line-height: 16px;
-                    padding: 8px;
-                    border-radius: 3px;
-                    white-space: pre-wrap;
-                    opacity: 1;
-                    transition: 0.3s;
-                    z-index: 1000;
-                    text-align: right;
-                    transform: translateX(-50%);
-                }
-                .heatmap_tooltip_count,
-                .heatmap_tooltip_post {
-                    display: inline-block;
-                }
-                .heatmap_tooltip_title,
-                .heatmap_tooltip_date {
-                    display: block;
-                }        
-                .heatmap_tooltip_title   a {
-                  text-decoration: none; /* 去除下划线 */
-                  color: inherit; /* 继承父元素的字体颜色 */
-                }
-                .heatmap_tooltip_date {
-                    margin: 0 0.25rem;
-                }
-                .heatmap_day_level_0 {
-                    background-color: var(--ht-lv-0);
-                }
-                .heatmap_day_level_1 {
-                    background-color: var(--ht-lv-1);
-                }
-                .heatmap_day_level_2 {
-                    background-color: var(--ht-lv-2);
-                }
-                .heatmap_day_level_3 {
-                    background-color: var(--ht-lv-3);
-                }
-                .heatmap_day_level_4 {
-                    background-color: var(--ht-lv-4);
-                }
-            </style>
-            <div class="heatmap_container">
-                <div class="heatmap_content">
-                    <div class="heatmap_week">
-                        <span>Mon</span>
-                        <span>&nbsp;</span>
-                        <span>Wed</span>
-                        <span>&nbsp;</span>
-                        <span>Fri</span>
-                        <span>&nbsp;</span>
-                        <span>Sun</span>
-                    </div>
-                    <div class="heatmap_main">
-                        <div class="month heatmap_month"></div>
-                        <div id="heatmap" class="heatmap"></div>
-                    </div>
-                </div>
-                <div class="heatmap_footer">
-                    <div class="heatmap_less">Less</div>
-                    <div class="heatmap_level">
-                        <span class="heatmap_level_item heatmap_level_0"></span>
-                        <span class="heatmap_level_item heatmap_level_1"></span>
-                        <span class="heatmap_level_item heatmap_level_2"></span>
-                        <span class="heatmap_level_item heatmap_level_3"></span>
-                        <span class="heatmap_level_item heatmap_level_4"></span>
-                    </div>
-                    <div class="heatmap_more">More</div>
-                </div>
-            </div>
-        `;
-        this.generateMonthLabels();
-        this.fetchData();
-        // 初始化主题
-        this.updateTheme();
-    }
-    fetchData() {
-        fetch(this.rss_url)
-            .then(response => response.text())
-            .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
-            .then(data => {
-                var items = data.querySelectorAll("item");
-                var blogInfo = {
-                    "pages": []
-                };
-                items.forEach(item => {
-                    var page = {
-                        "title": item.querySelector("title").textContent,
-                        "link": item.querySelector("link").textContent,
-                        "date": new Date(item.querySelector("pubDate").textContent).toISOString().split('T')[0],
-                        "word_count": new DOMParser().parseFromString(item.querySelector("description").textContent, "text/html").body.textContent.trim().length.toString()
-                    };
-                    blogInfo.pages.push(page);
-                });
-
-                this.createHeatmap(blogInfo);
-            })
-            .catch(error => {
-                console.log('Request failed: ' + error.message);
-            });
-    }
-    generateMonthLabels() {
-        const monthDiv = this.shadowRoot.querySelector('.month');
-        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-        let numMonths;
-        if (window.innerWidth < 768) {
-            numMonths = 5;
-        } else {
-            numMonths = 12;
-        }
-        const currentDate = new Date();
-        const startMonthIndex = (currentDate.getMonth() - (numMonths - 1) + 12) % 12;
-
-        for (let i = startMonthIndex; i < startMonthIndex + numMonths; i++) {
-            const monthSpan = document.createElement('span');
-            const monthIndex = i % 12;
-            monthSpan.textContent = monthNames[monthIndex];
-            monthDiv.appendChild(monthSpan);
-        }
-    }
-    createHeatmap(blogInfo) {
-    const container = this.shadowRoot.getElementById('heatmap');
-    const startDate = this.getStartDate();
-    const endDate = new Date();
-    
-    let currentWeek = this.createWeek();
-    container.appendChild(currentWeek);
-
-    let currentDate = startDate;
-
-    while (currentDate <= endDate) {
-        const dateString = `${currentDate.getFullYear()}-${("0" + (currentDate.getMonth() + 1)).slice(-2)}-${("0" + (currentDate.getDate())).slice(-2)}`;
-
-        const articleDataList = blogInfo.pages.filter(page => page.date === dateString);
-
-        if (articleDataList.length > 0) {
-            let titlesAndLinks = articleDataList.map(data => ({
-                title: `《${data.title}》`,
-                link: data.link
-            }));
-            let count = 0;
-            let post = articleDataList.length;
-
-            articleDataList.forEach(data => {
-                count += parseInt(data.word_count, 10);
-            });
-
-            const day = this.createDay(dateString, titlesAndLinks, count, post);
-            currentWeek.appendChild(day);
-        } else {
-            const day = this.createDay(dateString, [], '0', '0');
-            currentWeek.appendChild(day);
-        }
-
-        if (currentDate.getDay() === 0) {
-            currentWeek = this.createWeek();
-            container.appendChild(currentWeek);
-        }
-
-        currentDate.setDate(currentDate.getDate() + 1);
-    }
-}
-
-createDay(date, titlesAndLinks, count, post) {
-    const day = document.createElement("div");
-    day.className = "heatmap_day";
-    day.setAttribute("data-titlesAndLinks", JSON.stringify(titlesAndLinks));
-    day.setAttribute("data-count", count);
-    day.setAttribute("data-post", post);
-    day.setAttribute("data-date", date);
-
-    day.addEventListener("mouseenter", function () {
-        const tooltip = document.createElement("div");
-        tooltip.className = "heatmap_tooltip";
-
-        let tooltipContent = "";
-
-        if (post && parseInt(post, 10) !== 0) {
-            tooltipContent += '<span class="heatmap_tooltip_post">' + '共 ' + post + ' 篇' + '</span>';
-        }
-
-        if (count && parseInt(count, 10) !== 0) {
-            tooltipContent += '<span class="heatmap_tooltip_count">' + ' ' + count + ' 字；' + '</span>';
-        }
-
-        if (titlesAndLinks.length > 0) {
-            titlesAndLinks.forEach(item => {
-                tooltipContent += '<span class="heatmap_tooltip_title"><a href="' + item.link + '" target="_blank">' + item.title + '</a></span>';
-            });
-        }
-
-        if (date) {
-            tooltipContent += '<span class="heatmap_tooltip_date">' + date + '</span>';
-        }
-
-        tooltip.innerHTML = tooltipContent;
-        day.appendChild(tooltip);
-    });
-
-    day.addEventListener("mouseleave", function () {
-        const tooltip = day.querySelector(".heatmap_tooltip");
-        if (tooltip) {
-            day.removeChild(tooltip);
-        }
-    });
-
-    if (count == 0) {
-        day.classList.add("heatmap_day_level_0");
-    } else if (count > 0 && count < 1000) {
-        day.classList.add("heatmap_day_level_1");
-    } else if (count >= 1000 && count < 2000) {
-        day.classList.add("heatmap_day_level_2");
-    } else if (count >= 2000 && count < 3000) {
-        day.classList.add("heatmap_day_level_3");
-    } else {
-        day.classList.add("heatmap_day_level_4");
-    }
-
-    return day;
-}
-
-    createWeek() {
-        const week = document.createElement('div');
-        week.className = 'heatmap_week';
-        return week;
-    }
-
-    getStartDate() {
-        const today = new Date();
-        let numMonths;
-        if (window.innerWidth < 768) {
-            numMonths = 4;
-        } else {
-            numMonths = 12;
-        }
-
-        const startDate = new Date(today.getFullYear(), today.getMonth() - numMonths + 1, 1, today.getHours(), today.getMinutes(), today.getSeconds());
-
-        while (startDate.getDay() !== 1) {
-            startDate.setDate(startDate.getDate() + 1);
-        }
-
-        return startDate;
-    }
-
-    setTheme(theme) {
-        if (theme === 'light') {
-            this.setAttribute('data-theme', 'light');
-        } else {
-            this.setAttribute('data-theme', 'dark');
-        }
-    }
-
-    handleColorSchemeChange(event) {
-        if (event.matches) {
-            this.setTheme('dark');
-        } else {
-            this.setTheme('light');
-        }
-    }
-
-    updateTheme() {
-        const systemPrefersDark = this.colorSchemeMediaQuery.matches;
-        const documentTheme = document.documentElement.getAttribute('data-theme');
-        if (documentTheme) {
-            this.setTheme(documentTheme);
-        } else {
-            this.setTheme(systemPrefersDark ? 'dark' : 'light');
-        }
-    }
-}
-
-customElements.define('heatmap-card', HeatmapCard);
-
-document.addEventListener('DOMContentLoaded', () => {
-    const initialTheme = document.documentElement.getAttribute('data-theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    document.querySelectorAll('heatmap-card').forEach(card => card.setTheme(initialTheme));
-
-    const observer = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
-                const newTheme = document.documentElement.getAttribute('data-theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-                document.querySelectorAll('heatmap-card').forEach(card => card.setTheme(newTheme));
-            }
-        });
-    });
-
-    observer.observe(document.documentElement, { attributes: true });
-});    
-</script>
\ No newline at end of file
+<script src="https://blogcdn.loliko.cn/heatmap.js"></script>
\ No newline at end of file