hexo-theme-gnix 9.0.0 → 10.0.0

package/layout/misc/open_graph.jsx

@@ -1,7 +1,18 @@
 const { Component, isValidDate, parseISO } = require("../../include/util/common");
-const { encodeURL, stripHTML, escapeHTML } = require("hexo-util");
+const { encodeURL, stripHTML } = require("hexo-util");
+
+const DESCRIPTION_LENGTH = 160;
+const IMAGE_TYPES = {
+  avif: "image/avif",
+  gif: "image/gif",
+  jpeg: "image/jpeg",
+  jpg: "image/jpeg",
+  png: "image/png",
+  webp: "image/webp",
+};
 
 const localeMap = {
+  zh: "zh_CN",
   en: "en_US",
   de: "de_DE",
   es: "es_ES",
@@ -17,91 +28,176 @@ const localeMap = {
   tr: "tr_TR",
   vi: "vi_VN",
 };
-const localeRegex = new RegExp(Object.keys(localeMap).join("|"), "i");
+
+function normalizeText(value, maxLength) {
+  if (typeof value !== "string") return "";
+
+  const text = stripHTML(value).replace(/\s+/g, " ").trim();
+  if (!maxLength || text.length <= maxLength) return text;
+
+  return (
+    text
+      .slice(0, maxLength)
+      .replace(/\s+\S*$/, "")
+      .trim() || text.slice(0, maxLength).trim()
+  );
+}
+
+function normalizeUrl(value, base) {
+  if (!value) return "";
+
+  try {
+    return encodeURL(new URL(value, base).toString());
+  } catch (_) {
+    return "";
+  }
+}
+
+function normalizeLocale(language) {
+  if (typeof language !== "string") return "";
+
+  const normalized = language.replace("_", "-").trim();
+  if (normalized.length === 2) {
+    return localeMap[normalized.toLowerCase()] || "";
+  }
+
+  if (/^[a-z]{2}-[a-z]{2}$/i.test(normalized)) {
+    const [lang, territory] = normalized.split("-");
+    return `${lang.toLowerCase()}_${territory.toUpperCase()}`;
+  }
+
+  return "";
+}
+
+function normalizeImageUrls(images, base) {
+  const values = Array.isArray(images) ? images : [images];
+
+  return [
+    ...new Set(
+      values
+        .filter(Boolean)
+        .map((path) => normalizeUrl(path, base))
+        .filter(Boolean)
+        .filter((url) => {
+          try {
+            const { protocol } = new URL(url);
+            return protocol === "http:" || protocol === "https:";
+          } catch (_) {
+            return false;
+          }
+        }),
+    ),
+  ];
+}
+
+function getImageType(url) {
+  try {
+    const ext = new URL(url).pathname.split(".").pop().toLowerCase();
+    return IMAGE_TYPES[ext] || "";
+  } catch (_) {
+    return "";
+  }
+}
+
+function normalizeKeywords(keywords) {
+  const values = Array.isArray(keywords) ? keywords : [keywords];
+  const names = values.flatMap((keyword) => {
+    const value = keyword && typeof keyword === "object" ? keyword.name : keyword;
+    if (typeof value !== "string") return [];
+    return value.split(",");
+  });
+
+  return [...new Set(names.map((keyword) => normalizeText(keyword)).filter(Boolean))];
+}
+
+function normalizeTwitterHandle(value) {
+  const handle = normalizeText(value);
+  if (!handle) return "";
+
+  return handle.startsWith("@") ? handle : `@${handle}`;
+}
+
+function normalizeDate(value) {
+  if (!value) return "";
+
+  const date = typeof value === "string" ? parseISO(value) : value;
+  return isValidDate(date) ? date.toISOString() : "";
+}
 
 module.exports = class extends Component {
   render() {
-    const { type, title, date, updated, author, url, siteName, twitterCard, twitterSite, googlePlus, facebookAdmins, facebookAppId } = this.props;
-    let { description, language, images, keywords, twitterId } = this.props;
+    const { type, title, date, updated, author, url, siteName, twitterCard, twitterSite, googlePlus, facebookAdmins, facebookAppId, section, imageWidth, imageHeight } = this.props;
 
-    const htmlTags = [];
+    let { description, language, images, keywords, twitterId, imageAlt } = this.props;
 
+    const htmlTags = [];
+    const ogType = type || "website";
+    const isArticle = ogType === "article";
+    const pageUrl = normalizeUrl(url, url);
+    const normalizedTitle = normalizeText(title || siteName);
+    const normalizedSiteName = normalizeText(siteName);
+    const normalizedAuthor = normalizeText(author);
+    const publishedTime = normalizeDate(date);
+    const modifiedTime = normalizeDate(updated);
+    const normalizedKeywords = normalizeKeywords(keywords);
+
+    description = normalizeText(description, DESCRIPTION_LENGTH);
     if (description) {
-      description = escapeHTML(stripHTML(description).substring(0, 200).trim()).replace(/\n/g, " ");
       htmlTags.push(<meta name="description" content={description} />);
       htmlTags.push(<meta property="og:description" content={description} />);
     }
 
-    htmlTags.push(<meta property="og:type" content={type || "website"} />);
-    htmlTags.push(<meta property="og:title" content={title} />);
-    htmlTags.push(<meta property="og:url" content={encodeURL(url)} />);
-    htmlTags.push(<meta property="og:site_name" content={siteName} />);
-
-    if (language) {
-      if (language.length === 2) {
-        language = language.replace(localeRegex, (str) => localeMap[str]);
-        htmlTags.push(<meta property="og:locale" content={language} />);
-      } else if (language.length === 5) {
-        const territory = language.slice(-2);
-        const territoryRegex = new RegExp(territory.concat("$"));
-        language = language.replace("-", "_").replace(territoryRegex, territory.toUpperCase());
-        htmlTags.push(<meta property="og:locale" content={language} />);
-      }
-    }
-
-    if (!Array.isArray(images)) {
-      images = [images];
-    }
-    images
-      .map((path) => {
-        const parsed = new URL(path, url);
-        return parsed.toString();
-      })
-      .forEach((path) => {
-        htmlTags.push(<meta property="og:image" content={path} />);
-      });
-
-    if (date) {
-      const d = typeof date === "string" ? parseISO(date) : date;
-      if (isValidDate(d)) {
-        htmlTags.push(<meta property="article:published_time" content={d.toISOString()} />);
-      }
-    }
+    htmlTags.push(<meta property="og:type" content={ogType} />);
+    if (normalizedTitle) htmlTags.push(<meta property="og:title" content={normalizedTitle} />);
+    if (pageUrl) htmlTags.push(<meta property="og:url" content={pageUrl} />);
+    if (normalizedSiteName) htmlTags.push(<meta property="og:site_name" content={normalizedSiteName} />);
 
-    if (updated) {
-      const u = typeof updated === "string" ? parseISO(updated) : updated;
-      if (isValidDate(u)) {
-        htmlTags.push(<meta property="article:modified_time" content={u.toISOString()} />);
-      }
-    }
+    language = normalizeLocale(language);
+    if (language) htmlTags.push(<meta property="og:locale" content={language} />);
 
-    if (author) htmlTags.push(<meta property="article:author" content={author} />);
+    const imageUrls = normalizeImageUrls(images, pageUrl || url);
+    imageAlt = normalizeText(imageAlt || title);
 
-    if (keywords) {
-      if (typeof keywords === "string") {
-        keywords = [keywords];
-      }
+    imageUrls.forEach((path) => {
+      htmlTags.push(<meta property="og:image" content={path} />);
+      if (path.startsWith("https://")) htmlTags.push(<meta property="og:image:secure_url" content={path} />);
 
-      keywords
-        .map((tag) => {
-          return tag.name ? tag.name : tag;
-        })
-        .filter(Boolean)
-        .forEach((keyword) => {
-          htmlTags.push(<meta property="article:tag" content={keyword} />);
-        });
-    }
+      const imageType = getImageType(path);
+      if (imageType) htmlTags.push(<meta property="og:image:type" content={imageType} />);
+      if (imageWidth) htmlTags.push(<meta property="og:image:width" content={imageWidth} />);
+      if (imageHeight) htmlTags.push(<meta property="og:image:height" content={imageHeight} />);
+      if (imageAlt) htmlTags.push(<meta property="og:image:alt" content={imageAlt} />);
+    });
 
-    htmlTags.push(<meta property="twitter:card" content={twitterCard || "summary"} />);
+    if (isArticle) {
+      if (publishedTime) htmlTags.push(<meta property="article:published_time" content={publishedTime} />);
+      if (modifiedTime) htmlTags.push(<meta property="article:modified_time" content={modifiedTime} />);
+      if (normalizedAuthor) htmlTags.push(<meta property="article:author" content={normalizedAuthor} />);
 
-    if (twitterId) htmlTags.push(<meta property="twitter:creator" content={twitterId} />);
+      const normalizedSection = normalizeText(section);
+      if (normalizedSection) htmlTags.push(<meta property="article:section" content={normalizedSection} />);
 
-    if (twitterSite) htmlTags.push(<meta property="twitter:site" content={twitterSite} />);
+      normalizedKeywords.forEach((keyword) => {
+        htmlTags.push(<meta property="article:tag" content={keyword} />);
+      });
+    } else if (modifiedTime) {
+      htmlTags.push(<meta property="og:updated_time" content={modifiedTime} />);
+    }
 
+    htmlTags.push(<meta name="twitter:card" content={twitterCard || (imageUrls.length > 0 ? "summary_large_image" : "summary")} />);
+    if (normalizedTitle) htmlTags.push(<meta name="twitter:title" content={normalizedTitle} />);
+    if (description) htmlTags.push(<meta name="twitter:description" content={description} />);
+    if (pageUrl) htmlTags.push(<meta name="twitter:url" content={pageUrl} />);
+    if (imageUrls.length > 0) {
+      htmlTags.push(<meta name="twitter:image" content={imageUrls[0]} />);
+      if (imageAlt) htmlTags.push(<meta name="twitter:image:alt" content={imageAlt} />);
+    }
+    const normalizedTwitterId = normalizeTwitterHandle(twitterId);
+    const normalizedTwitterSite = normalizeTwitterHandle(twitterSite);
+    if (normalizedTwitterId) htmlTags.push(<meta name="twitter:creator" content={normalizedTwitterId} />);
+    if (normalizedTwitterSite) htmlTags.push(<meta name="twitter:site" content={normalizedTwitterSite} />);
     if (googlePlus) htmlTags.push(<link rel="publisher" href={googlePlus} />);
-
     if (facebookAdmins) htmlTags.push(<meta property="fb:admins" content={facebookAdmins} />);
-
     if (facebookAppId) htmlTags.push(<meta property="fb:app_id" content={facebookAppId} />);
 
     return <>{htmlTags}</>;

package/layout/misc/paginator.jsx

@@ -57,16 +57,10 @@ module.exports = class extends Component {
     return (
       <nav class="pagination card" aria-label="pagination">
         <a href={getPageUrl(current - 1)} class={`pagination-previous`} style={current > 1 ? {} : { visibility: "hidden" }}>
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-            <title>go to previous page</title>
-            <path fill="currentColor" d="m4 10l9 9l1.4-1.5L7 10l7.4-7.5L13 1z" />
-          </svg>
+          Prev
         </a>
         <a href={getPageUrl(current + 1)} class={`pagination-next`} style={current < total ? {} : { visibility: "hidden" }}>
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-            <title>go to next page</title>
-            <path fill="currentColor" d="M7 1L5.6 2.5L13 10l-7.4 7.5L7 19l9-9z" />
-          </svg>
+          Next
         </a>
         <ul class="pagination-list is-hidden-mobile">{pagination(current, total)}</ul>
       </nav>

package/layout/plugin/cookie_consent.jsx

@@ -1,51 +1,264 @@
 const { Component, cacheComponent } = require("../../include/util/common");
 
+const STORAGE_KEY = "gnix:cookie-consent";
+const LEGACY_STORAGE_KEY = "cookieconsent_status";
+
+const COOKIE_CONSENT_STYLE = `
+.gnix-cookie-consent {
+  --cookie-consent-x: 0;
+  --cookie-consent-y: 0.5rem;
+  position: fixed;
+  bottom: max(1rem, env(safe-area-inset-bottom));
+  left: max(1rem, env(safe-area-inset-left));
+  z-index: 140;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.875rem 1rem;
+  width: min(32rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--surface0);
+  border-radius: var(--radius);
+  background: var(--mantle);
+  color: var(--text);
+  box-shadow:
+    0 20px 60px -32px rgba(0, 0, 0, 0.58),
+    0 0 0 1px hsl(from var(--base) h s l / 0.18);
+  font-family: var(--font-sans-serif);
+  line-height: 1.55;
+  opacity: 0;
+  transform: translate3d(var(--cookie-consent-x), var(--cookie-consent-y), 0);
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+@supports (background: color-mix(in oklch, black 50%, transparent)) {
+  .gnix-cookie-consent {
+    background: color-mix(in oklch, var(--mantle) 88%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    backdrop-filter: blur(16px) saturate(1.2);
+  }
+}
+
+.gnix-cookie-consent.is-visible {
+  --cookie-consent-y: 0;
+  opacity: 1;
+}
+
+.gnix-cookie-consent.is-hiding {
+  --cookie-consent-y: 0.5rem;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.gnix-cookie-consent.is-static {
+  position: static;
+  width: min(42rem, calc(100% - 2rem));
+  margin: 1rem auto;
+}
+
+.gnix-cookie-consent__message {
+  min-width: 0;
+  margin: 0;
+  color: var(--subtext1);
+  font-size: 0.9rem;
+}
+
+.gnix-cookie-consent__link {
+  color: var(--lavender);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.gnix-cookie-consent__link:hover {
+  text-decoration: underline;
+}
+
+.gnix-cookie-consent__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.gnix-cookie-consent__button {
+  min-height: 2.25rem;
+  padding: 0.55rem 0.8rem;
+  border: 1px solid var(--surface0);
+  border-radius: 8px;
+  background: hsl(from var(--surface0) h s l / 0.24);
+  color: var(--text);
+  cursor: pointer;
+  font: 600 0.78rem/1 var(--font-sans-serif);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.gnix-cookie-consent__button:hover {
+  border-color: var(--overlay0);
+  background: hsl(from var(--surface0) h s l / 0.38);
+  transform: translateY(-1px);
+}
+
+.gnix-cookie-consent__button:focus-visible {
+  outline: 2px solid var(--lavender);
+  outline-offset: 2px;
+}
+
+.gnix-cookie-consent__button--primary {
+  border-color: var(--lavender);
+  background: var(--lavender);
+  color: var(--base);
+}
+
+.gnix-cookie-consent__button--primary:hover {
+  border-color: var(--mauve);
+  background: var(--mauve);
+  color: var(--base);
+}
+
+@media (max-width: 640px) {
+  .gnix-cookie-consent {
+    left: max(0.75rem, env(safe-area-inset-left));
+    grid-template-columns: 1fr;
+    width: auto;
+    padding: 0.875rem;
+    --cookie-consent-x: 0;
+  }
+
+  .gnix-cookie-consent__actions {
+    justify-content: stretch;
+  }
+
+  .gnix-cookie-consent__button {
+    flex: 1 1 auto;
+  }
+}
+`;
+
+function stringifyScriptData(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
 class CookieConsent extends Component {
-  // https://www.osano.com/cookieconsent/documentation/javascript-api/
   render() {
-    const { head, text, jsUrl, cssUrl } = this.props;
-    const { type, theme, position, policyLink } = this.props;
-    const { message, dismiss, allow, deny, link, policy } = text;
+    const { head } = this.props;
 
     if (head) {
-      return <link rel="preload" href={cssUrl} as="style" onload="this.onload=null;this.rel='stylesheet'" />;
+      return <style id="gnix-cookie-consent-style" dangerouslySetInnerHTML={{ __html: COOKIE_CONSENT_STYLE }} />;
     }
+
+    const options = {
+      storageKey: STORAGE_KEY,
+      legacyStorageKey: LEGACY_STORAGE_KEY,
+      policyLink: this.props.policyLink,
+      isStatic: this.props.isStatic,
+    };
+
     return (
       <script
         dangerouslySetInnerHTML={{
           __html: `
           (function() {
-            var s = document.createElement('script');
-            s.src = ${JSON.stringify(jsUrl)};
-            s.defer = true;
-            s.onload = function() {
-              window.cookieconsent.initialise(${JSON.stringify({
-                type,
-                theme,
-                static: this.props.static,
-                position,
-                content: {
-                  message,
-                  dismiss,
-                  allow,
-                  deny,
-                  link,
-                  policy,
-                  href: policyLink,
-                },
-                palette: {
-                  popup: {
-                    background: "var(--base)",
-                    text: "var(--text)",
-                  },
-                  button: {
-                    background: "var(--lavender)",
-                    text: "var(--base)",
-                  },
-                },
-              })});
-            };
-            document.body.appendChild(s);
+            var options = ${stringifyScriptData(options)};
+            var rootSelector = "[data-gnix-cookie-consent]";
+
+            function readStoredConsent() {
+              try {
+                var stored = window.localStorage && (localStorage.getItem(options.storageKey) || localStorage.getItem(options.legacyStorageKey));
+                if (stored) return stored;
+              } catch (_) {}
+
+              var match = document.cookie.match(/(?:^|; )cookieconsent_status=([^;]+)/);
+              return match ? decodeURIComponent(match[1]) : "";
+            }
+
+            function writeConsent(status) {
+              try {
+                localStorage.setItem(options.storageKey, status);
+                localStorage.setItem(options.legacyStorageKey, status);
+              } catch (_) {}
+
+              document.cookie = "cookieconsent_status=" + encodeURIComponent(status) + "; path=/; max-age=31536000; SameSite=Lax";
+              window.gnixCookieConsent = { status: status };
+
+              try {
+                window.dispatchEvent(new CustomEvent("gnix:cookie-consent", { detail: { status: status } }));
+              } catch (_) {}
+            }
+
+            function createButton(label, action, variant) {
+              var button = document.createElement("button");
+              button.type = "button";
+              button.className = "gnix-cookie-consent__button" + (variant ? " gnix-cookie-consent__button--" + variant : "");
+              button.textContent = label;
+              button.setAttribute("data-cookie-consent-action", action);
+              return button;
+            }
+
+            function closeConsent(root, status) {
+              writeConsent(status);
+              root.classList.remove("is-visible");
+              root.classList.add("is-hiding");
+              window.setTimeout(function() {
+                if (root.parentNode) root.parentNode.removeChild(root);
+              }, 180);
+            }
+
+            function initCookieConsent() {
+              if (readStoredConsent() || document.querySelector(rootSelector)) return;
+
+              var root = document.createElement("aside");
+              root.className = "gnix-cookie-consent" + (options.isStatic ? " is-static" : "");
+              root.setAttribute("data-gnix-cookie-consent", "");
+              root.setAttribute("role", "dialog");
+              root.setAttribute("aria-live", "polite");
+              root.setAttribute("aria-label", "Cookie notice");
+
+              var message = document.createElement("p");
+              message.className = "gnix-cookie-consent__message";
+              message.appendChild(document.createTextNode("This website uses cookies to improve your experience."));
+
+              if (options.policyLink) {
+                var link = document.createElement("a");
+                link.className = "gnix-cookie-consent__link";
+                link.href = options.policyLink;
+                link.target = "_blank";
+                link.rel = "noopener";
+                link.textContent = "Learn more";
+                message.appendChild(document.createTextNode(" "));
+                message.appendChild(link);
+              }
+
+              var actions = document.createElement("div");
+              actions.className = "gnix-cookie-consent__actions";
+              actions.appendChild(createButton("Decline", "deny"));
+              actions.appendChild(createButton("Accept", "allow", "primary"));
+
+              actions.addEventListener("click", function(event) {
+                var button = event.target.closest("[data-cookie-consent-action]");
+                if (!button) return;
+                closeConsent(root, button.getAttribute("data-cookie-consent-action"));
+              });
+
+              root.appendChild(message);
+              root.appendChild(actions);
+              document.body.appendChild(root);
+              window.requestAnimationFrame(function() {
+                root.classList.add("is-visible");
+              });
+            }
+
+            if (document.readyState === "loading") {
+              document.addEventListener("DOMContentLoaded", initCookieConsent, { once: true });
+            } else {
+              initCookieConsent();
+            }
           })();
         `,
         }}
@@ -55,26 +268,12 @@ class CookieConsent extends Component {
 }
 
 CookieConsent.Cacheable = cacheComponent(CookieConsent, "plugin.cookieconsent", (props) => {
-  const { head, plugin, helper } = props;
-  const { type = "info", theme = "edgeless", position = "bottom-left", policyLink = "https://www.cookiesandyou.com/" } = plugin;
+  const { head, plugin } = props;
 
   return {
     head,
-    type,
-    theme,
-    position,
-    policyLink,
-    static: plugin.static || false,
-    text: {
-      message: helper.__("plugin.cookie_consent.message"),
-      dismiss: helper.__("plugin.cookie_consent.dismiss"),
-      allow: helper.__("plugin.cookie_consent.allow"),
-      deny: helper.__("plugin.cookie_consent.deny"),
-      link: helper.__("plugin.cookie_consent.link"),
-      policy: helper.__("plugin.cookie_consent.policy"),
-    },
-    cssUrl: helper.cdn("cookieconsent", "3.1.1", "build/cookieconsent.min.css"),
-    jsUrl: helper.cdn("cookieconsent", "3.1.1", "build/cookieconsent.min.js"),
+    policyLink: plugin.policyLink || "https://www.cookiesandyou.com/",
+    isStatic: plugin.static || false,
   };
 });
 

package/layout/plugin/swup.jsx

@@ -6,7 +6,7 @@ class Swup extends Component {
       return null;
     }
 
-    return <script defer src="/js/swup.bundle.js"></script>;
+    return <script type="module" data-swup-ignore-script src="/js/swup.js"></script>;
   }
 }
 

package/layout/search/insight.jsx

@@ -52,7 +52,7 @@ Insight.Cacheable = cacheComponent(Insight, "search.insight", (props) => {
       pages: helper._p("common.page", Infinity),
       tags: helper._p("common.tag", Infinity),
     },
-    contentUrl: helper.url_for("/content.json"),
+    contentUrl: helper.is_i18n_enabled() ? helper.localized_url_for("/content.json") : helper.url_for("/content.json"),
     jsUrl: helper.url_for("/js/insight.js"),
   };
 });

package/layout/tag.jsx

@@ -48,7 +48,8 @@ const breadcrumb_css = `
 module.exports = class extends Component {
   render() {
     const { config, page, helper } = this.props;
-    const { url_for, _p } = helper;
+    const { _p } = helper;
+    const langKey = helper.language_key(page);
 
     return (
       <Fragment>
@@ -57,7 +58,7 @@ module.exports = class extends Component {
           <ul>
             <li>
               <font style="color: var(--green)">$</font>&nbsp;ls&nbsp;
-              <a href={url_for("/tags/")}>{_p("common.tag", Infinity)}/</a>
+              <a href={helper.localized_url_for("/tags/", langKey)}>{_p("common.tag", Infinity)}/</a>
             </li>
             <li>
               <a href="#" aria-current="page" style="cursor: default; pointer-events: none; color: var(--mauve);">