hexo-theme-solitude 3.0.10 → 3.0.12

package/source/js/post_ai.js

@@ -0,0 +1,118 @@
+class AIPostRenderer {
+  static ANIMATION_DELAY_MS = 30;
+  static AI_EXPLANATION_SELECTOR = ".ai-explanation";
+  static AI_TAG_SELECTOR = ".ai-tag";
+
+  constructor() {
+    this.startTextAnimation = this.startTextAnimation.bind(this);
+    this.animationFrame = null;
+  }
+
+  init() {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", this.initialize.bind(this));
+    } else {
+      this.initialize();
+    }
+  }
+
+  initialize() {
+    this.cacheElements();
+    this.validateContent() && this.renderAIContent();
+  }
+
+  cacheElements() {
+    this.refs = new WeakMap();
+    this.refs.set(document, {
+      explanationElement: document.querySelector(
+        AIPostRenderer.AI_EXPLANATION_SELECTOR
+      ),
+      tagElement: document.querySelector(AIPostRenderer.AI_TAG_SELECTOR),
+    });
+
+    const { explanationElement, tagElement } = this.refs.get(document) || {};
+    this.explanationElement = explanationElement;
+    this.tagElement = tagElement;
+  }
+
+  validateContent() {
+    return !!(
+      this.explanationElement &&
+      this.tagElement &&
+      this.aiContent.length &&
+      !this.isAnimating
+    );
+  }
+
+  renderAIContent() {
+    this.prepareAnimation();
+    this.animationFrame = requestAnimationFrame(() =>
+      this.startTextAnimation(0)
+    );
+  }
+
+  prepareAnimation() {
+    this.isAnimating = true;
+    this.tagElement.classList.add("loadingAI");
+    this.explanationElement.textContent = "";
+  }
+
+  startTextAnimation(index) {
+    if (index >= this.aiContent.length) {
+      this.completeAnimation();
+      return;
+    }
+
+    this.appendCharacter(this.aiContent[index]);
+    this.animationFrame = requestAnimationFrame(() =>
+      this.startTextAnimation(index + 1)
+    );
+  }
+
+  appendCharacter(char) {
+    if (!this.fragment) this.fragment = document.createDocumentFragment();
+
+    const charElement = document.createElement("span");
+    charElement.className = "char";
+    charElement.textContent = char;
+    this.fragment.appendChild(charElement);
+
+    if (this.fragment.childNodes.length % 1 === 0) {
+      this.explanationElement.appendChild(this.fragment);
+      this.fragment = null;
+    }
+  }
+
+  completeAnimation() {
+    if (this.fragment) {
+      this.explanationElement.appendChild(this.fragment);
+      this.fragment = null;
+    }
+
+    cancelAnimationFrame(this.animationFrame);
+    this.isAnimating = false;
+    this.tagElement.classList.remove("loadingAI");
+
+    const event = new CustomEvent("aiRenderComplete", {
+      detail: { element: this.explanationElement },
+    });
+    document.dispatchEvent(event);
+  }
+
+  get aiContent() {
+    return PAGE_CONFIG?.ai_text || "";
+  }
+}
+
+const aiPostRenderer = (() => {
+  let instance;
+  return () => {
+    if (!instance) {
+      instance = new AIPostRenderer();
+      instance.init();
+    }
+    return instance;
+  };
+})();
+
+const ai = aiPostRenderer();

package/source/js/utils.js

@@ -31,12 +31,6 @@
             ele.addEventListener('animationend', resetStyles);
             ele.style.animation = `to_hide ${time}s`;
         },
-        sidebarPaddingR: () => {
-            const paddingRight = window.innerWidth - document.body.clientWidth;
-            if (paddingRight > 0) {
-                document.body.style.paddingRight = `${paddingRight}px`;
-            }
-        },
         snackbarShow: (text, showAction = false, duration = 5000) => {
             Snackbar.show({ text, showAction, duration, pos: 'top-center' });
         },

package/layout/includes/widgets/post/post-ai.pug

@@ -1,12 +0,0 @@
-.post-ai
-    .ai-title
-        .ai-title-left
-            i.ai-title-icon.solitude.fab.fa-bilibili
-            .ai-title-text=_p('post.ai.title')
-        .ai-tag#ai-tag= theme.post_ai.modelName
-    .ai-explanation(style="display: block;")
-    .ai-suggestions
-    .ai-bottom
-        .ai-tips= theme.post_ai.tips
-        if theme.post_ai.report
-            a.ai-report(title=_p('post.ai.tip'), href=url_for(theme.post_ai.report))=_p('post.ai.tip')

package/layout/includes/widgets/third-party/tianli-talk.pug

@@ -1,26 +0,0 @@
-- const {key,option,title} = theme.tianli_talk
-
-span.needEndHide#efuTalk(onclick="togglePostChatContainer(); return false;" title=title)
-    i.solitude.fab.fa-bilibili
-    span.efuTalkTitle=title
-
-script.
-    var postChatConfig = {
-    backgroundColor: "var(--efu-main)",
-    bottom: "60px",
-    ...!{JSON.stringify(option)}
-    };
-
-    let b = true;
-
-    document.getElementById('efuTalk').addEventListener('click', function () {
-        this.classList.toggle('on');
-        let efu = this
-        b && setTimeout(() => {
-            document.getElementById('close-button').addEventListener('click', function () {
-                efu.classList.remove('on');
-            })
-        }, 0);
-        b = false
-    });
-script(pjax data-postChat_key=key src="https://ai.tianli0.top/static/public/postChatUser.min.js")

package/source/css/_post/postAI.styl

@@ -1,132 +0,0 @@
-.post-ai
-  background var(--efu-secondbg)
-  border-radius 12px
-  padding 12px
-  line-height 1.3
-  border var(--style-border-always)
-  margin-top 16px
-  min-height 101.22px
-  box-shadow var(--efu-shadow-border)
-
-  +maxWidth768()
-    margin-top 0
-
-  .ai-title
-    display flex
-    color var(--efu-lighttext)
-    border-radius 8px
-    align-items center
-    user-select none
-
-    .ai-title-left
-      display flex
-      align-items center
-      color var(--efu-lighttext)
-
-      i.ai-title-icon
-        width 24px
-        height 24px
-        display flex
-        background var(--efu-lighttext)
-        color var(--efu-card-bg)
-        font-size 14px
-        border-radius 20px
-        justify-content center
-        align-items center
-
-      .ai-title-text
-        font-weight 700
-        margin-left 8px
-        line-height 1
-        font-size 14px
-
-    .ai-tag
-      font-size 12px
-      background-color var(--efu-lighttext)
-      box-shadow var(--efu-shadow-main)
-      color var(--efu-card-bg)
-      font-weight 700
-      border-radius 12px
-      margin-left auto
-      line-height 12px
-      padding 6px 8px
-      display flex
-      align-items center
-      justify-content center
-      cursor pointer
-      transition .3s
-
-      &.loadingAI
-        animation-duration 2s
-        animation-name AILoading
-        animation-iteration-count infinite
-        animation-direction alternate
-        cursor default
-
-      &:hover:not(.loadingAI)
-        background var(--efu-fontcolor)
-        color var(--efu-card-bg)
-
-  .ai-explanation
-    margin-top 12px
-    padding 8px 12px
-    background var(--efu-card-bg)
-    border-radius 8px
-    border var(--style-border-always)
-    font-size 15px
-    line-height 1.4
-    display none
-    text-align left
-
-    .blinking-cursor
-      background-color var(--efu-lighttext)
-      width 14px
-      height 14px
-      border-radius 16px
-      display inline-block
-      vertical-align middle
-      animation blinking-cursor 2s infinite
-      margin-left 4px
-      margin-bottom 3px
-      transform scale(.6)
-
-  .ai-suggestions
-    display flex
-    flex-wrap wrap
-
-    .ai-suggestions-item
-      margin-top 12px
-      padding 8px 12px
-      background var(--efu-card-bg)
-      border-radius 8px 8px 8px 0
-      border var(--style-border-always)
-      font-size 14px
-      line-height 1.4
-      display flex
-      width fit-content
-      margin-right 12px
-      cursor pointer
-      transition .3s
-
-      &:hover
-        background var(--efu-main)
-        color var(--efu-white)
-
-  .ai-bottom
-    width 100%
-    margin-top 12px
-    display flex
-
-    .ai-tips
-      font-size 12px
-      color var(--efu-secondtext)
-      margin-right auto
-
-    .ai-report
-      font-size 12px
-      color var(--efu-secondtext) !important
-      white-space nowrap
-      border-bottom none!important
-
-      &:hover
-        background: none !important

package/source/css/third_party/tianli_talk.styl

@@ -1,77 +0,0 @@
-#efuTalk
-  display flex
-  align-items center
-  z-index 1001
-  position fixed
-  bottom 70px
-  left 20px
-  height 38px
-  cursor pointer
-  transition .3s
-  box-shadow var(--efu-shadow-border)
-  background var(--efu-card-bg)
-  border-radius 20px
-  overflow hidden
-  padding 10px
-  color var(--efu-fontcolor)
-  width 42px
-  border var(--style-border-always)
-
-  &:hover
-    background var(--efu-lighttext)
-    color var(--efu-card-bg)
-    width 159px
-    border-color var(--efu-lighttext)
-
-    span.efuTalkTitle
-      color var(--efu-card-bg)
-      opacity 1
-
-  i.solitude.efuTalkIcon
-    width 18px
-    height 18px
-    font-size 18px
-    margin-left 3px
-    line-height 1
-
-span.efuTalkTitle
-  display flex
-  font-size 14px
-  padding 0 12px
-  line-height 1
-  white-space nowrap
-  opacity 0
-  transition .3s
-
-#post_chat_button
-  display none
-
-  +maxWidth768()
-    display block
-
-#postChat_iframeContainer
-  z-index 1000
-  border var(--style-border-always)
-  background var(--efu-card-bg)
-  animation to_show_fromLeftBottom .2s ease-out
-  border-radius 12px
-
-  +maxWidth768()
-    width 100% !important
-    height 100% !important
-    bottom 0 !important
-    left 0 !important
-    max-width 100% !important
-    max-height 100% !important
-    border-radius 0 !important
-
-#postChat_button
-  display none !important
-
-@keyframes to_show_fromLeftBottom
-  from
-    opacity 0
-    transform scale(0)
-  to
-    opacity 1
-    transform scale(1)

package/source/js/third_party/post_ai.min.js

@@ -1,184 +0,0 @@
-class POST_AI {
-    constructor() {
-        this.root = "https://summary.tianli0.top";
-        this.aiTalkMode = false;
-        this.aiPostExplanation = '';
-        this.config = GLOBAL_CONFIG.post_ai;
-        this.scoGPTIsRunning = false;
-        console.log('%c TianliGPT %c 文章摘要 %c https://postchat.zhheo.com', 
-                    'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff', 
-                    'background:#ff9a9a ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff', 
-                    'background:unset ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff');
-    }
-
-    init() {
-        const explanationElement = document.querySelector(".ai-explanation");
-        if (!explanationElement) return;
-
-        this.scoGPTIsRunning = false;
-        this.aiPostExplanation = PAGE_CONFIG.ai_text || '';
-
-        if (!this.aiPostExplanation) {
-            this.generate();
-        } else {
-            this.aiShowAnimation(Promise.resolve(this.aiPostExplanation));
-        }
-        this.AIEngine();
-    }
-
-    getTitleAndContent() {
-        const articleContainer = document.querySelector(".article-container");
-        const title = document.title;
-        const paragraphs = articleContainer.getElementsByTagName("p");
-        const headers = articleContainer.querySelectorAll("h1, h2, h3, h4, h5");
-
-        return (title + " " + [...headers, ...paragraphs]
-            .map(element => element.innerText.replace(/https?:\/\/[^\s]+/g, ""))
-            .join(" ")).slice(0, 1000);
-    }
-
-    async generate() {
-        const title = document.title;
-        const content = this.getTitleAndContent();
-        const key = this.config.key;
-        this.aiShowAnimation(this.fetch(title, content, key));
-    }
-
-    async fetch(title, content, key) {
-        const url = `${this.root}/?content=${encodeURIComponent(content)}&title=${title}&key=${encodeURIComponent(key)}&url=${encodeURIComponent(window.location.href)}`;
-        try {
-            const response = await fetch(url);
-            const data = await response.json();
-            if (response.ok) {
-                this.aiPostExplanation = data.summary;
-                return data.summary;
-            } else {
-                console.error("Request failed:", data.err_msg);
-                return data.err_msg;
-            }
-        } catch (error) {
-            console.error("Fetch error:", error);
-            return "Error fetching data";
-        }
-    }
-
-    aiShowAnimation(promise, onComplete = false, delay = 0) {
-        const explanationElement = document.querySelector(".ai-explanation");
-        const tagElement = document.querySelector(".ai-tag");
-        if (!explanationElement || this.scoGPTIsRunning) return;
-
-        this.scoGPTIsRunning = true;
-        this.cleanSuggestions();
-        tagElement.classList.add("loadingAI");
-        explanationElement.style.display = "block";
-        explanationElement.innerHTML = '生成中...<span class="blinking-cursor"></span>';
-
-        setTimeout(() => {
-            let startTime, update, currentIndex = 0, isIntersecting = true, isInitial = true;
-            const observer = new IntersectionObserver(entries => {
-                isIntersecting = entries[0].isIntersecting;
-                if (isIntersecting) requestAnimationFrame(update);
-            }, { threshold: 0 });
-
-            promise.then(result => {
-                startTime = performance.now();
-                update = () => {
-                    if (currentIndex < result.length && isIntersecting) {
-                        const now = performance.now();
-                        const timeElapsed = now - startTime;
-                        const char = result.slice(currentIndex, currentIndex + 1);
-                        const isPunctuation = /[，。！、？,.!?]/.test(char);
-                        const isAlphaNumeric = /[a-zA-Z0-9]/.test(char);
-                        const delay = isPunctuation ? 100 * Math.random() + 100 : (isAlphaNumeric ? 10 : 25);
-
-                        if (timeElapsed >= delay) {
-                            explanationElement.innerText = result.slice(0, currentIndex + 1);
-                            startTime = now;
-                            currentIndex++;
-                            if (currentIndex < result.length) {
-                                explanationElement.innerHTML = result.slice(0, currentIndex) + '<span class="blinking-cursor"></span>';
-                            } else {
-                                explanationElement.innerHTML = result;
-                                explanationElement.style.display = "block";
-                                this.scoGPTIsRunning = false;
-                                tagElement.classList.remove("loadingAI");
-                                observer.disconnect();
-                                if (onComplete) this.createSuggestions();
-                            }
-                        }
-                        if (isIntersecting) requestAnimationFrame(update);
-                    }
-                };
-                if (isIntersecting && isInitial) {
-                    requestAnimationFrame(update);
-                    isInitial = false;
-                }
-                observer.observe(explanationElement);
-            }).catch(error => {
-                console.error("检索信息失败：", error);
-                explanationElement.innerHTML = "检索信息失败";
-                explanationElement.style.display = "block";
-                this.scoGPTIsRunning = false;
-                tagElement.classList.remove("loadingAI");
-                observer.disconnect();
-            });
-        }, delay);
-    }
-
-    AIEngine() {
-        const tagElement = document.querySelector(".ai-tag");
-        if (tagElement) {
-            tagElement.addEventListener("click", () => {
-                if (!this.scoGPTIsRunning) {
-                    this.aiTalkMode = true;
-                    this.aiShowAnimation(Promise.resolve(this.config.talk), true);
-                }
-            });
-        }
-    }
-
-    cleanSuggestions() {
-        const suggestionsElement = document.querySelector(".ai-suggestions");
-        if (suggestionsElement) {
-            suggestionsElement.innerHTML = "";
-        } else {
-            console.error("没有这个元素：'ai-suggestions'");
-        }
-    }
-
-    createSuggestions() {
-        if (this.aiTalkMode) {
-            this.cleanSuggestions();
-            this.createSuggestionItemWithAction("这篇文章讲了什么？", () => {
-                if (this.aiPostExplanation === "") {
-                    setTimeout(() => {
-                        this.generate();
-                    }, 3000);
-                } else {
-                    setTimeout(() => {
-                        this.aiShowAnimation(Promise.resolve(this.aiPostExplanation), true);
-                    }, 3000);
-                }
-            });
-            if (this.config.randomPost) {
-                this.createSuggestionItemWithAction("带我去看看其他文章", () => toRandomPost());
-            }
-            this.aiTalkMode = true;
-        }
-    }
-
-    createSuggestionItemWithAction(text, action) {
-        const suggestions = document.querySelector(".ai-suggestions");
-        if (!suggestions) {
-            console.error("无法找到具有class为ai-suggestions的元素");
-            return;
-        }
-        const item = document.createElement("div");
-        item.classList.add("ai-suggestions-item");
-        item.textContent = text;
-        item.addEventListener("click", action);
-        suggestions.appendChild(item);
-    }
-}
-
-const ai = new POST_AI();