npm - hexo-theme-gnix - Versions diffs - 6.2.0 → 8.0.0 - Mend

hexo-theme-gnix 6.2.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md +6 -2
package/include/hexo/encrypt.js +42 -0
package/include/hexo/feed.js +329 -0
package/include/util/common.js +7 -9
package/languages/en.yml +6 -3
package/languages/zh-CN.yml +6 -3
package/layout/archive.jsx +86 -65
package/layout/comment/twikoo.jsx +2 -11
package/layout/comment/waline.jsx +2 -2
package/layout/common/article.jsx +5 -8
package/layout/common/article_cover.jsx +11 -1
package/layout/common/article_media.jsx +2 -4
package/layout/common/footer.jsx +11 -31
package/layout/common/head.jsx +6 -14
package/layout/common/navbar.jsx +4 -4
package/layout/common/scripts.jsx +6 -6
package/layout/common/theme_selector.jsx +5 -6
package/layout/common/toc.jsx +8 -14
package/layout/index.jsx +2 -4
package/layout/misc/article_licensing.jsx +4 -2
package/layout/misc/open_graph.jsx +4 -4
package/layout/misc/paginator.jsx +10 -4
package/layout/misc/structured_data.jsx +3 -4
package/layout/plugin/busuanzi.jsx +1 -1
package/layout/plugin/cookie_consent.jsx +40 -31
package/layout/plugin/swup.jsx +2 -22
package/layout/search/insight.jsx +16 -3
package/package.json +12 -8
package/scripts/hot-reload.js +92 -0
package/scripts/index.js +2 -0
package/source/css/archive.css +251 -0
package/source/css/default.css +250 -284
package/source/css/encrypt.css +55 -0
package/source/css/responsive/desktop.css +0 -119
package/source/css/responsive/mobile.css +7 -23
package/source/css/responsive/touch.css +9 -103
package/source/css/shiki/shiki.css +7 -22
package/source/css/twikoo.css +290 -830
package/source/img/og_image.webp +0 -0
package/source/js/archive-breadcrumb.js +132 -0
package/source/js/busuanzi.js +1 -12
package/source/js/components/accordion.js +192 -0
package/source/js/components/chat.js +239 -0
package/source/js/components/device-carousel.js +260 -0
package/source/js/components/image-carousel.js +410 -0
package/source/js/components/text-image-section.js +180 -0
package/source/js/components/theme-stacked.js +526 -0
package/source/js/components/tree.js +437 -0
package/source/js/decrypt.js +112 -0
package/source/js/insight.js +75 -65
package/source/js/main.js +192 -99
package/source/js/mdit/mermaid.js +12 -4
package/source/js/swup.bundle.js +1 -0
package/source/js/theme-selector.js +94 -113
package/source/img/og_image.png +0 -0
package/source/js/host/swup/Swup.umd.min.js +0 -1
package/source/js/host/swup/head-plugin.umd.min.js +0 -1
package/source/js/host/swup/scripts-plugin.umd.min.js +0 -2
package/source/js/mdit/shiki.js +0 -158

package/README.md CHANGED Viewed

@@ -54,9 +54,13 @@ bun i hexo-renderer-markdown-exit
 ## Links
 - Change log: http://vluv.space/change
-- Live Preview: http://vluv.space/test_markdown/
+- Live Preview for Markdown: http://vluv.space/test_markdown/
+- Live Preview for Components: https://vluv.space/test_components/
+- Live Preview for Flavoured Markdown & HTML Element: https://vluv.space/test_flavored_md/
 ## Credit
-[ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo.](https://github.com/ppoffice/hexo-theme-icarus)
+- [ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo.](https://github.com/ppoffice/hexo-theme-icarus)
+- [D0n9X1n/hexo-blog-encrypt: Yet, just another hexo plugin for security.](https://github.com/D0n9X1n/hexo-blog-encrypt)
+- [hexojs/hexo-generator-feed: Feed generator for Hexo.](https://github.com/hexojs/hexo-generator-feed)

package/include/hexo/encrypt.js ADDED Viewed

@@ -0,0 +1,42 @@
+const crypto = require("node:crypto");
+const ITERATIONS = 100_000;
+module.exports = (hexo) => {
+  hexo.extend.filter.register(
+    "after_post_render",
+    (data) => {
+      const password = data.password;
+      if (!password && password !== 0) return data;
+      const passphrase = String(password);
+      const __ = hexo.theme.i18n.__(hexo.config.language);
+      const salt = crypto.randomBytes(16);
+      const iv = crypto.randomBytes(12);
+      const key = crypto.pbkdf2Sync(passphrase, salt, ITERATIONS, 32, "sha256");
+      const cipher = crypto.createCipheriv("aes-256-gcm", key, iv);
+      const encrypted = Buffer.concat([cipher.update(data.content, "utf8"), cipher.final()]);
+      const tag = cipher.getAuthTag();
+      const base64 = Buffer.concat([salt, iv, encrypted, tag]).toString("base64");
+      data.content = `
+<div class="encrypted-content" id="encrypted-article">
+  <div class="encrypted-data" style="display:none">${base64}</div>
+  <form class="encrypt-form" id="encrypt-form">
+    <p class="encrypt-message">${__("encrypt.message")}</p>
+    <div class="encrypt-input-wrap">
+      <input type="password" id="encrypt-pass" placeholder="${__("encrypt.placeholder")}" enterkeyhint="done" autocomplete="off" />
+    </div>
+  </form>
+</div>`;
+      data.excerpt = `<p>${__("encrypt.abstract")}</p>`;
+      data.more = "";
+      data.encrypt = true;
+      return data;
+    },
+    1000,
+  );
+};

package/include/hexo/feed.js ADDED Viewed

@@ -0,0 +1,329 @@
+const { extname } = require("node:path");
+const { generateRssFeed, generateAtomFeed } = require("feedsmith");
+const { gravatar, full_url_for, encodeURL, url_for } = require("hexo-util");
+const VALID_FEED_TYPES = new Set(["atom", "rss2"]);
+const EXISTING_FEED_LINK_RE = /type=['|"]?application\/(atom|rss)\+xml['|"]?/i;
+const HEAD_RE = /<head>(?!<\/head>).+?<\/head>/s;
+function stripControlChars(value) {
+  let sanitizedParts;
+  let start = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    if (code < 0x20 || code === 0x7f) {
+      sanitizedParts ||= [];
+      if (start < index) {
+        sanitizedParts.push(value.slice(start, index));
+      }
+      start = index + 1;
+    }
+  }
+  if (!sanitizedParts) {
+    return value;
+  }
+  if (start < value.length) {
+    sanitizedParts.push(value.slice(start));
+  }
+  return sanitizedParts.join("");
+}
+module.exports = (hexo) => {
+  hexo.config.feed = Object.assign(
+    {
+      enable: true,
+      type: "atom",
+      limit: 20,
+      hub: "",
+      content: true,
+      content_limit: 140,
+      content_limit_delim: "",
+      order_by: "-date",
+      autodiscovery: true,
+    },
+    hexo.config.feed,
+  );
+  const config = hexo.config.feed;
+  if (!config.enable) {
+    return;
+  }
+  let type = config.type;
+  let path = config.path;
+  if (!type || (typeof type !== "string" && !Array.isArray(type))) {
+    type = "atom";
+  }
+  if (Array.isArray(type)) {
+    type = [...new Set(type.filter((item) => VALID_FEED_TYPES.has(item)))];
+    if (type.length === 0) {
+      type = "atom";
+    }
+  }
+  if (typeof type === "string") {
+    if (!VALID_FEED_TYPES.has(type)) type = "atom";
+  }
+  if (!path || typeof path !== typeof type) {
+    if (typeof type === "string") path = type.concat(".xml");
+    else path = type.map((str) => str.concat(".xml"));
+  }
+  if (Array.isArray(path)) {
+    if (path.length !== type.length) {
+      if (path.length > type.length) path = path.slice(0, type.length);
+      else if (path.length === 0) path = type.map((str) => str.concat(".xml"));
+      else path.push(type[1].concat(".xml"));
+    }
+    path = path.map((str) => {
+      if (!extname(str)) return str.concat(".xml");
+      return str;
+    });
+  }
+  if (typeof path === "string") {
+    if (!extname(path)) path += ".xml";
+  }
+  config.type = type;
+  config.path = path;
+  const feedEntries = typeof type === "string" ? [{ type, path }] : type.map((feedType, index) => ({ type: feedType, path: path[index] }));
+  function composePosts(posts, feedConfig) {
+    const { limit, order_by } = feedConfig;
+    let processedPosts = posts.sort(order_by || "-date");
+    processedPosts = processedPosts.filter((post) => post.draft !== true);
+    if (limit) processedPosts = processedPosts.limit(limit);
+    return processedPosts;
+  }
+  function composeFeed(feedConfig, urlConfig, email, feedPath, context, posts) {
+    const { icon: iconConfig, hub } = feedConfig;
+    const latestPost = posts.first();
+    let url = urlConfig;
+    if (url[url.length - 1] !== "/") url += "/";
+    let icon = "";
+    if (iconConfig) icon = full_url_for.call(context, iconConfig);
+    else if (email) icon = gravatar(email);
+    const feedUrl = full_url_for.call(context, feedPath);
+    const currentYear = new Date().getFullYear();
+    return {
+      title: context.title,
+      description: context.subtitle || context.description,
+      url,
+      feedUrl,
+      icon,
+      hub,
+      language: context.language,
+      author: { name: context.author, email: context.email },
+      copyright: context.author && `All rights reserved ${currentYear}, ${context.author}`,
+      updated: latestPost.updated ? latestPost.updated.toDate() : latestPost.date.toDate(),
+    };
+  }
+  function composeFeedLinks(feedUrl, hub, feedType) {
+    const links = [{ href: encodeURL(feedUrl), rel: "self", type: feedType }];
+    if (hub) links.push({ href: encodeURL(hub), rel: "hub" });
+    return links;
+  }
+  function composeItemDescription(post, feedConfig) {
+    const { content_limit, content_limit_delim } = feedConfig;
+    if (post.description) return post.description;
+    if (post.intro) return post.intro;
+    if (post.excerpt) return post.excerpt;
+    if (post.content) {
+      const shortContent = post.content.substring(0, content_limit || 140);
+      if (content_limit_delim) {
+        const delimPos = shortContent.lastIndexOf(content_limit_delim);
+        if (delimPos > -1) {
+          return shortContent.substring(0, delimPos);
+        }
+      }
+      return shortContent;
+    }
+    return "";
+  }
+  function composeItemContent(post, feedConfig) {
+    const { content } = feedConfig;
+    if (content && post.content) {
+      return stripControlChars(post.content);
+    }
+    return "";
+  }
+  function composeItemCategories(post) {
+    const categories = [];
+    if (post.categories) {
+      for (const item of post.categories.toArray()) {
+        categories.push({ name: item.name, domain: item.permalink });
+      }
+    }
+    if (post.tags) {
+      for (const item of post.tags.toArray()) {
+        categories.push({ name: item.name, domain: item.permalink });
+      }
+    }
+    return categories;
+  }
+  function composeItem(post, feedConfig, context) {
+    const published = post.date.toDate();
+    return {
+      title: post.title,
+      link: encodeURL(full_url_for.call(context, post.permalink)),
+      description: composeItemDescription(post, feedConfig),
+      published,
+      updated: post.updated ? post.updated.toDate() : published,
+      content: composeItemContent(post, feedConfig),
+      enclosures: post.image && [{ url: full_url_for.call(context, post.image) }],
+      categories: composeItemCategories(post),
+    };
+  }
+  function composeRssItem(feed, item) {
+    return {
+      title: item.title,
+      link: item.link,
+      guid: item.link,
+      description: item.description,
+      pubDate: item.published,
+      authors: [feed.author],
+      content: { encoded: item.content },
+      enclosures: item.enclosures,
+      categories: item.categories,
+    };
+  }
+  function composeAtomEntry(feed, item) {
+    const entryLinks = [{ href: item.link }, ...(item.enclosures || []).map((enclosure) => ({ href: enclosure.url, rel: "enclosure" }))];
+    return {
+      title: item.title,
+      id: item.link,
+      links: entryLinks,
+      summary: item.description,
+      content: item.content,
+      published: item.published,
+      updated: item.updated || item.published,
+      authors: feed.author.name && [feed.author],
+      categories: item.categories.map((cat) => ({ term: cat.name, scheme: cat.domain })),
+    };
+  }
+  function generateRss(feed, items) {
+    const links = composeFeedLinks(feed.feedUrl, feed.hub, "application/rss+xml");
+    const siteUrl = encodeURL(feed.url);
+    return generateRssFeed(
+      {
+        title: feed.title,
+        description: feed.description,
+        link: siteUrl,
+        language: feed.language,
+        copyright: feed.copyright,
+        generator: "Hexo",
+        lastBuildDate: feed.updated,
+        image: feed.icon && {
+          url: feed.icon,
+          title: feed.title,
+          link: siteUrl,
+        },
+        atom: { links },
+        items: items.map((item) => composeRssItem(feed, item)),
+      },
+      { lenient: true },
+    );
+  }
+  function generateAtom(feed, items) {
+    const siteUrl = encodeURL(feed.url);
+    const links = [{ href: siteUrl, rel: "alternate" }, ...composeFeedLinks(feed.feedUrl, feed.hub)];
+    return generateAtomFeed(
+      {
+        title: feed.title,
+        id: siteUrl,
+        subtitle: feed.description,
+        updated: feed.updated,
+        links,
+        generator: { text: "Hexo", uri: "https://hexo.io/" },
+        icon: feed.icon,
+        rights: feed.copyright,
+        authors: feed.author.name && [feed.author],
+        entries: items.map((item) => composeAtomEntry(feed, item)),
+        language: feed.language,
+      },
+      { lenient: true },
+    );
+  }
+  function createFeedGenerator(feedType, feedPath) {
+    return function (locals) {
+      const { config } = this;
+      const { feed: feedConfig } = config;
+      const posts = composePosts(locals.posts, feedConfig);
+      if (posts.length <= 0) {
+        return;
+      }
+      const feed = composeFeed(feedConfig, config.url, config.email, feedPath, this, posts);
+      const items = posts.toArray().map((post) => composeItem(post, feedConfig, this));
+      let data;
+      switch (feedType) {
+        case "rss2":
+          data = generateRss(feed, items);
+          break;
+        default:
+          data = generateAtom(feed, items);
+      }
+      return {
+        path: feedPath,
+        data,
+      };
+    };
+  }
+  if (typeof type === "string") {
+    hexo.extend.generator.register(type, createFeedGenerator(type, path));
+  } else {
+    for (const entry of feedEntries) {
+      hexo.extend.generator.register(entry.type, createFeedGenerator(entry.type, entry.path));
+    }
+  }
+  if (typeof config.autodiscovery !== "boolean") config.autodiscovery = true;
+  if (config.autodiscovery === true) {
+    hexo.extend.filter.register("after_render:html", function (data) {
+      if (EXISTING_FEED_LINK_RE.test(data) || hexo.config.feed.autodiscovery === false) {
+        return data;
+      }
+      const autodiscoveryTag = feedEntries
+        .map((entry) => `<link rel="alternate" href="${url_for.call(this, entry.path)}" title="${hexo.config.title}" type="application/${entry.type.replace(/2$/, "")}+xml">\n`)
+        .join("");
+      return data.replace(HEAD_RE, (str) => str.replace("</head>", `${autodiscoveryTag}</head>`));
+    });
+  }
+};

package/include/util/common.js CHANGED Viewed

@@ -26,20 +26,11 @@ function cacheComponent(type, prefix, transform) {
   };
 }
-function lazy_load_css(href) {
-  script_str = `var link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = '${href}';
-  document.getElementsByTagName('head')[0].appendChild(link);`;
-  return script_str;
-}
 module.exports = {
   // 导出常用的依赖
   Component,
   Fragment,
   view,
-  lazy_load_css,
   cacheComponent,
   // 通用的组件加载函数
@@ -51,4 +42,11 @@ module.exports = {
       return fallback;
     }
   },
+  isValidDate: (val) => val instanceof Date && !Number.isNaN(val.getTime()),
+  parseISO: (str) => new Date(str),
+  dateFormatters: {
+    shortDay: new Intl.DateTimeFormat("en", { month: "short", day: "2-digit" }),
+    longMonth: new Intl.DateTimeFormat("en", { month: "long" }),
+  },
 };

package/languages/en.yml CHANGED Viewed

@@ -14,8 +14,6 @@ common:
   page:
     one: "Page"
     other: "Pages"
-  prev: "Previous"
-  next: "Next"
 article:
   created_at: "Posted&nbsp;%s"
   more: "Read more"
@@ -41,7 +39,12 @@ plugin:
     policy: Cookie Policy
 search:
   search: "Search"
-  hint: "Search(󰘳 + K)"
+  hint: "Search Something..."
   no_result: "No results for"
   untitled: "(Untitled)"
   empty_preview: "(No preview)"
+encrypt:
+  message: "This article is encrypted, please enter the password to view"
+  placeholder: "Enter password..."
+  wrong_pass: "Wrong password, please try again"
+  abstract: "This article is encrypted"

package/languages/zh-CN.yml CHANGED Viewed

@@ -14,8 +14,6 @@ common:
   page:
     one: "PAGE"
     other: "PAGE"
-  prev: "Previous"
-  next: "Next"
 article:
   created_at: "%s"
   more: "Read"
@@ -41,7 +39,12 @@ plugin:
     policy: Cookie政策
 search:
   search: "搜索"
-  hint: "Search something... (󰘳 + K)"
+  hint: "Search something..."
   no_result: "未找到搜索结果"
   untitled: "(无标题)"
   empty_preview: "(无内容预览)"
+encrypt:
+  message: "此文章已加密，请输入密码查看"
+  placeholder: "输入密码..."
+  wrong_pass: "密码错误，请重试"
+  abstract: "此文章已加密"

package/layout/archive.jsx CHANGED Viewed

@@ -1,71 +1,11 @@
-const { format, isValid, parseISO } = require("date-fns");
-const { Component, Fragment } = require("../include/util/common");
+const { Component, Fragment, isValidDate, parseISO, dateFormatters } = require("../include/util/common");
 const ArticleMedia = require("./common/article_media");
 module.exports = class extends Component {
   render() {
-    const { page, helper } = this.props;
+    const { page, helper, site, config } = this.props;
     const { url_for, date_xml, date } = helper;
-    const inlineCSS = `
-            .winter {
-              --accent: var(--blue);
-            }
-            .autumn {
-              --accent: var(--red);
-            }
-            .summer {
-              --accent: var(--green);
-            }
-            .spring {
-              --accent: var(--peach);
-            }
-            .article-meta {
-              font-size: 0.8rem;
-              color: var(--subtext1);
-              font-family: var(--font-handwriting);
-            }
-            a.archive-title {
-              font-family: var(--font-sans-serif);
-              font-weight: 400;
-              color: var(--text);
-              &:hover {
-                color: var(--accent);
-              }
-            }
-            span.year {
-                position: absolute;
-                top: 1.5rem;
-                right: 1.5rem;
-                z-index: 0;
-                font-weight: bolder;
-                font-family: var(--font-handwriting);
-                font-size: 4em;
-                font-style: italic;
-                color: hsl(from var(--accent) h s l / 0.3);
-                line-height: 1;
-                user-select: none;
-            }
-            .archive-item {
-                display: flex;
-                text-align: left;
-                align-items: flex-start;
-            }
-            .archive-item > div {
-                display: flex;
-                align-items: baseline; /* 时间和标题的文字基线对齐 */
-                gap: 0.75rem;
-            }
-            .archive-item + .archive-item {
-                border: none;
-                margin-top: 0;
-                padding-top: 1em;
-            }
-        `;
     function getSeason(month) {
       if (month >= 2 && month <= 4) return "Spring";
       if (month >= 5 && month <= 7) return "Summer";
@@ -83,8 +23,8 @@ module.exports = class extends Component {
       let title = `'${String(year).slice(-2)}`;
       if (sectionTitle) {
         title = sectionTitle;
-      } else if (month !== null && isValid(time)) {
-        title = format(time, "LLLL 'yy");
+      } else if (month !== null && isValidDate(time)) {
+        title = dateFormatters.longMonth.format(time);
       }
       return (
@@ -130,9 +70,90 @@ module.exports = class extends Component {
       articleList = renderArticleList(page.posts, page.year, page.month, null, season);
     }
+    const archiveDir = config?.archive_dir || "archives";
+    const archiveBasePath = url_for(`/${archiveDir}/`);
+    const currentYear = page.year ? Number(page.year) : null;
+    const currentMonth = page.month ? Number(page.month) : null;
+    const yearToMonths = new Map();
+    const allPosts = site?.posts ? site.posts.sort("date", -1) : page.posts;
+    if (allPosts?.each) {
+      allPosts.each((p) => {
+        const y = p.date.year();
+        const m = p.date.month() + 1;
+        const existing = yearToMonths.get(y);
+        if (existing) {
+          existing.add(m);
+        } else {
+          yearToMonths.set(y, new Set([m]));
+        }
+      });
+    }
+    const years = Array.from(yearToMonths.keys()).sort((a, b) => b - a);
+    const monthsForCurrentYear = currentYear && yearToMonths.get(currentYear) ? Array.from(yearToMonths.get(currentYear)).sort((a, b) => a - b) : [];
     return (
       <Fragment>
-        <style dangerouslySetInnerHTML={{ __html: inlineCSS }}></style>
+        <script data-swup-reload-script defer src="/js/archive-breadcrumb.js"></script>
+        <link rel="stylesheet" href="/css/archive.css" />
+        <nav class="archive-breadcrumb" aria-label="archive breadcrumb" data-archive-breadcrumb data-archive-dir={archiveDir}>
+          <span class="prompt">$</span>{" "}
+          <span class="archive-breadcrumb__cmd" style="color: var(--blue)">
+            ls
+          </span>{" "}
+          <span class="archive-breadcrumb__cmd" style="color: var(--yellow)">
+            posts
+          </span>
+          <span class="archive-breadcrumb__cmd" style="padding: 0">
+            /
+          </span>
+          <span class="archive-breadcrumb__picker" data-picker="year">
+            <button type="button" class="archive-breadcrumb__trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="Select year">
+              <span data-label="year">{currentYear ? String(currentYear) : "*"}</span>
+            </button>
+            <div class="archive-breadcrumb__menu" role="listbox" tabindex="-1" data-menu="year">
+              <button type="button" class="archive-breadcrumb__option" role="option" data-href={archiveBasePath} aria-selected={!currentYear ? "true" : "false"}>
+                *
+              </button>
+              {years.map((y) => (
+                <button type="button" class="archive-breadcrumb__option" role="option" data-href={url_for(`/${archiveDir}/${y}/`)} aria-selected={currentYear === y ? "true" : "false"}>
+                  {y}
+                </button>
+              ))}
+            </div>
+          </span>
+          <span class="archive-breadcrumb__cmd" style="padding: 0">
+            /
+          </span>
+          <span class="archive-breadcrumb__picker" data-picker="month">
+            <button type="button" class="archive-breadcrumb__trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="Select month" disabled={!currentYear}>
+              <span data-label="month">{currentMonth ? String(String(currentMonth).padStart(2, "0")) : "*"}</span>
+            </button>
+            <div class="archive-breadcrumb__menu" role="listbox" tabindex="-1" data-menu="month">
+              <button
+                type="button"
+                class="archive-breadcrumb__option"
+                role="option"
+                data-href={currentYear ? url_for(`/${archiveDir}/${currentYear}/`) : archiveBasePath}
+                aria-selected={!currentMonth ? "true" : "false"}
+              >
+                *
+              </button>
+              {monthsForCurrentYear.map((m) => (
+                <button
+                  type="button"
+                  class="archive-breadcrumb__option"
+                  role="option"
+                  data-href={url_for(`/${archiveDir}/${currentYear}/${String(m).padStart(2, "0")}/`)}
+                  aria-selected={currentMonth === m ? "true" : "false"}
+                >
+                  {String(m).padStart(2, "0")}
+                </button>
+              ))}
+            </div>
+          </span>
+          <span class="cursor">_</span>
+        </nav>
         {articleList}
       </Fragment>
     );

package/layout/comment/twikoo.jsx CHANGED Viewed

@@ -1,18 +1,9 @@
-const { Component, Fragment, cacheComponent, lazy_load_css } = require("../../include/util/common");
+const { Component, cacheComponent } = require("../../include/util/common");
 class Twikoo extends Component {
   render() {
     const { envId, region, lang, jsUrl } = this.props;
-    const configJs = `window.twikooConfig = { envId: '${envId}', ${region ? `region: ${JSON.stringify(region)},` : ""} ${lang ? `lang: ${JSON.stringify(lang)},` : ""} };`;
-    const lazy_load_css_script = lazy_load_css("/css/twikoo.css");
-    return (
-      <Fragment>
-        <div id="twikoo" class="content twikoo"></div>
-        <script dangerouslySetInnerHTML={{ __html: lazy_load_css_script }}></script>
-        <script dangerouslySetInnerHTML={{ __html: configJs }}></script>
-        <script defer src={jsUrl}></script>
-      </Fragment>
-    );
+    return <div id="tko" class="content twikoo" data-env-id={envId} data-region={JSON.stringify(region)} data-lang={JSON.stringify(lang)} data-js-url={jsUrl} data-css-url="/css/twikoo.css"></div>;
   }
 }

package/layout/comment/waline.jsx CHANGED Viewed

@@ -146,8 +146,8 @@ Waline.Cacheable = cacheComponent(Waline, "comment.waline", (props) => {
     pageview: comment.pageview,
     comment: comment.comment,
     copyright: comment.copyright,
-    jsUrl: helper.cdn("@waline/client", "3.3.0", "dist/waline.js"),
-    cssUrl: helper.cdn("@waline/client", "3.3.0", "dist/waline.css"),
+    jsUrl: "https://unpkg.com/@waline/client@v3/dist/waline.js",
+    cssUrl: "https://unpkg.com/@waline/client@v3/dist/waline.css",
   };
 });