From a6e4d25bd3d222d13ea88458b81286ed1400c6bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= <jkjoy@live.cn>
Date: Sun, 16 Jun 2024 11:14:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E4=B8=AA=E7=83=AD=E5=8A=9B=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/farallon/layouts/index.html           |   2 +
 themes/farallon/layouts/partials/hotmap.html | 430 +++++++++++++++++++
 themes/farallon/layouts/partials/talks.html  |  85 ++++
 3 files changed, 517 insertions(+)
 create mode 100644 themes/farallon/layouts/partials/hotmap.html
 create mode 100644 themes/farallon/layouts/partials/talks.html

diff --git a/themes/farallon/layouts/index.html b/themes/farallon/layouts/index.html
index dd11466..3705362 100644
--- a/themes/farallon/layouts/index.html
+++ b/themes/farallon/layouts/index.html
@@ -3,7 +3,9 @@
     {{ if $.Site.Params.showprofile }}
     {{ partial "profile.html" . }}
     {{ end }}
+    {{ partial "talks.html" . }}
     <div class="articleList">
+        {{ partial "hotmap.html" . }}
         {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
         {{ $paginator := .Paginate ($pages) }}
         {{ range $paginator.Pages }}
diff --git a/themes/farallon/layouts/partials/hotmap.html b/themes/farallon/layouts/partials/hotmap.html
new file mode 100644
index 0000000..e18b34b
--- /dev/null
+++ b/themes/farallon/layouts/partials/hotmap.html
@@ -0,0 +1,430 @@
+<div class="heatmap-container" data-rss-url="/index.xml"></div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var containers = document.querySelectorAll('.heatmap-container');
+            containers.forEach(function(container) {
+                var card = document.createElement('heatmap-card');
+                card.rss_url = container.getAttribute('data-rss-url'); // 从 data-rss-url 属性中获取 RSS 订阅链接
+                container.appendChild(card);
+            });
+        });
+    </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
diff --git a/themes/farallon/layouts/partials/talks.html b/themes/farallon/layouts/partials/talks.html
new file mode 100644
index 0000000..d7dc20d
--- /dev/null
+++ b/themes/farallon/layouts/partials/talks.html
@@ -0,0 +1,85 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+<script src="https://momentjs.cn/downloads/moment-with-locales.js"></script>
+<article class="post--item post--item__status" itemtype="http://schema.org/Article" itemscope="itemscope">
+    <div class="content">
+<div id="bber-talk"></div>
+</div>
+</article>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        var bbDom = document.querySelector('#bber-talk');
+        if (bbDom) {
+            memoTalks();
+            moment.locale('zh-CN'); 
+        }
+        function memoTalks() {
+            var bbUrl = "https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";
+            fetch(bbUrl)
+                .then(res => res.json())
+                .then(resdata => {
+                    var result = '', resultAll = "", data = resdata.memos;
+                    for (var i = 0; i < data.length; i++) {
+                        var bbTime = data[i].createTime;
+                        var relativeTime = moment(bbTime).fromNow(); // 使用 moment.js 格式化相对时间
+                        var bbCont = data[i].content;
+                        var img = data[i].externalLink;  // 获取 `externalLink` 字段
+                        var memouid = data[i].uid;
+                        // 标志变量，用于跟踪是否匹配到图片
+                        var hasImage = false;
+
+                        // 更智能的图片检测逻辑
+                        var newbbCont = bbCont
+                            .replace(/!\[.*?\]\((.*?)\)/g, function (match, url) {
+                                hasImage = true; // 设置标志变量
+                                return '<a href="' + url + '" target="_blank">🌅</a>'; // 返回带有图片图标的链接
+                            })
+                            .replace(/\[(.*?)\]\((.*?)\)/g, function (match, text, url) {
+                                // 提取文件名部分
+                                var filename = url.split('/').pop().split('?')[0].split('#')[0];
+                                // 检查文件名是否包含常见图片格式
+                                if (/\b(jpg|jpeg|png|gif|bmp)\b/i.test(filename)) {
+                                    hasImage = true; // 设置标志变量
+                                    return '<a href="' + url + '" target="_blank">🌅</a>'; // 返回带有图片图标的链接
+                                }
+                                return '<a href="' + url + '" target="_blank">' + text + ' 🔗</a>'; // 返回普通链接
+                            });
+
+                        // 如果 `img` 字段存在且包含图片格式，也添加带图片图标的链接
+                        if (img && /\b(jpg|jpeg|png|gif|bmp)\b/i.test(img)) {
+                            newbbCont += ' <a href="' + img + '" target="_blank">🌅</a>';
+                        }
+
+                        result += `<li class="item">💬 <a href="https://memos.ee/m/${memouid}" target="_blank"><span class="datetime">${relativeTime}</span>：${newbbCont}</a></li>`;
+                    }
+                    var bbBefore = `<div class="talk-wrap"><ul class="talk-list">`;
+                    var bbAfter = `</ul></div>`;
+                    resultAll = bbBefore + result + bbAfter;
+                    if (bbDom) {
+                        bbDom.innerHTML = resultAll;
+                    }
+
+                    // 设置定时功能，防止querySelectorAll错误
+                    setInterval(function () {
+                        var n = document.querySelector(".talk-list");
+                        if (n) {
+                            var e = n.querySelectorAll(".item");
+                            for (var t = 0; t < e.length; t++) {
+                                setTimeout(function () {
+                                    if (e[0]) n.appendChild(e[0]);
+                                }, 1000);
+                            }
+                        }
+                    }, 2000);
+
+                });
+        }
+    });
+</script>
+<style>
+.talk-list .item {
+    display: none;
+}
+.talk-list .item:nth-child(1) {
+    display: block;
+}
+</style>
\ No newline at end of file