hexo-theme-gnix 7.0.0 → 9.0.0

package/layout/archive.jsx

@@ -1,5 +1,4 @@
-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 {
@@ -7,201 +6,6 @@ module.exports = class extends Component {
     const { page, helper, site, config } = this.props;
     const { url_for, date_xml, date } = helper;
 
-    const inlineCSS = `
-            @keyframes blink {
-              0%, 100% { opacity: 1; }
-              50% { opacity: 0; }
-            }
-
-            .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);
-              }
-            }
-
-            .archive-breadcrumb {
-              color: var(--blue);
-              font-family: var(--font-mono);
-              margin: 0 0 1rem 0;
-              padding-left: 1em;
-              display: flex;
-              flex-wrap: wrap;
-              align-items: center;
-              gap: 0;
-            }
-            .archive-breadcrumb .prompt {
-              color: var(--green);
-              user-select: none;
-              margin-right: 0.25em;
-            }
-            .archive-breadcrumb .cursor {
-              display: inline-block;
-              color: var(--mauve);
-              font-weight: bold;
-              margin-left: 2px;
-              animation: blink 1s step-end infinite;
-              user-select: none;
-            }
-            .archive-breadcrumb__cmd {
-              color: var(--yellow);
-              user-select: none;
-              padding-right: 0.5em;
-            }
-            .archive-breadcrumb__picker {
-              position: relative;
-              display: inline-flex;
-              align-items: center;
-            }
-            .archive-breadcrumb__trigger {
-              display: inline-flex;
-              align-items: center;
-              border: none;
-              background: transparent;
-              color: var(--yellow);
-              font-family: var(--font-mono);
-              padding: 0.05em 0.15em;
-              border-radius: 4px;
-              text-decoration: underline;
-              text-decoration-color: hsl(from var(--yellow) h s l / 0.6);
-              text-decoration-thickness: 1px;
-              text-underline-offset: 0.22em;
-              cursor: pointer;
-              transition: transform 120ms ease, color 120ms ease, background 120ms ease, text-decoration-color 120ms ease;
-            }
-            .archive-breadcrumb__trigger:hover {
-              color: var(--mauve);
-              background: hsl(from var(--base) h s l / 0.35);
-              text-decoration-color: hsl(from var(--mauve) h s l / 0.75);
-            }
-            .archive-breadcrumb__trigger:focus-visible {
-              outline: 2px solid hsl(from var(--mauve) h s l / 0.7);
-              outline-offset: 2px;
-              background: hsl(from var(--base) h s l / 0.35);
-            }
-            .archive-breadcrumb__trigger[aria-expanded="true"] {
-              transform: translateY(-1px);
-              color: var(--mauve);
-              text-decoration-color: hsl(from var(--mauve) h s l / 0.9);
-            }
-            .archive-breadcrumb__trigger[disabled] {
-              opacity: 0.45;
-              cursor: not-allowed;
-              text-decoration-color: hsl(from var(--subtext1) h s l / 0.4);
-            }
-            .archive-breadcrumb__menu {
-              position: absolute;
-              top: calc(100% + 6px);
-              left: 0;
-              min-width: 12rem;
-              max-height: 15rem;
-              overflow: auto;
-              background: hsl(from var(--base) h s l / 0.9);
-              border: 1px solid hsl(from var(--surface1) h s l / 0.9);
-              border-radius: 10px;
-              padding: 0.35rem;
-              box-shadow: 0 18px 50px hsl(from var(--crust) h s l / 0.45);
-              opacity: 0;
-              transform: translateY(-6px);
-              visibility: hidden;
-              pointer-events: none;
-              transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
-              z-index: 20;
-            }
-            .archive-breadcrumb__trigger[aria-expanded="true"] + .archive-breadcrumb__menu {
-              opacity: 1;
-              transform: translateY(0);
-              visibility: visible;
-              pointer-events: auto;
-              transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
-            }
-            .archive-breadcrumb__option {
-              width: 100%;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              gap: 0.5rem;
-              padding: 0.35rem 0.5rem;
-              border-radius: 8px;
-              border: none;
-              background: transparent;
-              color: var(--text);
-              font-family: var(--font-mono);
-              font-size: 0.9rem;
-              cursor: pointer;
-              transition: background 120ms ease, color 120ms ease;
-              text-align: left;
-            }
-            .archive-breadcrumb__option:hover,
-            .archive-breadcrumb__option:focus-visible {
-              background: hsl(from var(--surface1) h s l / 0.55);
-              color: var(--yellow);
-              outline: none;
-            }
-            .archive-breadcrumb__option[aria-selected="true"] {
-              background: hsl(from var(--surface1) h s l / 0.75);
-              color: var(--mauve);
-            }
-            @media (max-width: 480px) {
-              .archive-breadcrumb {
-                padding-left: 0.5em;
-              }
-              .archive-breadcrumb__menu {
-                min-width: 8rem;
-                max-width: calc(100vw - 2rem);
-              }
-            }
-
-            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, var(--lavender)) h s l / 0.3);
-              line-height: 1;
-              user-select: none;
-            }
-
-            .winter {
-              --accent: var(--blue);
-            }
-            .autumn {
-              --accent: var(--red);
-            }
-            .summer {
-              --accent: var(--green);
-            }
-            .spring {
-              --accent: var(--peach);
-            }
-            .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";
@@ -219,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");
+      } else if (month !== null && isValidDate(time)) {
+        title = dateFormatters.longMonth.format(time);
       }
 
       return (
@@ -266,14 +70,14 @@ module.exports = class extends Component {
       articleList = renderArticleList(page.posts, page.year, page.month, null, season);
     }
 
-    const archiveDir = (config && config.archive_dir) || "archives";
+    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 && site.posts ? site.posts.sort("date", -1) : page.posts;
-    if (allPosts && allPosts.each) {
+    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;
@@ -290,8 +94,8 @@ module.exports = class extends Component {
 
     return (
       <Fragment>
-        <script data-swup-ignore-script defer src="/js/archive-breadcrumb.js"></script>
-        <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)">

package/layout/comment/twikoo.jsx

@@ -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)},` : ""} el: '#tko' };`;
-    const lazy_load_css_script = lazy_load_css("/css/twikoo.css");
-    return (
-      <Fragment>
-        <div id="tko" 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/common/article.jsx

@@ -1,6 +1,4 @@
-import { format } from "date-fns";
-
-const { Component, Fragment } = require("../../include/util/common");
+const { Component, Fragment, dateFormatters } = require("../../include/util/common");
 const Comment = require("./comment");
 const ArticleLicensing = require("../misc/article_licensing");
 const ArticleCover = require("./article_cover");
@@ -36,28 +34,20 @@ module.exports = class extends Component {
           {/* Cover image */}
           {cover ? <ArticleCover page={page} cover={cover} index={index} helper={helper} /> : null}
           <article class={`card-content article${"direction" in page ? ` ${page.direction}` : ""}`}>
-            {/* Title */}
-            {page.title !== "" && index ? (
-              <h2 class="article-title">
-                <a href={url_for(page.link || page.path)}>{page.title}</a>
-              </h2>
-            ) : null}
-            {page.title !== "" && !index ? <h1 class="article-title">{page.title}</h1> : null}
-
             {/* Metadata - Medium style */}
             {page.layout !== "page" ? (
               <div class="article-header-meta">
                 <div class="article-meta-info">
                   {page.date && (
                     <time class="article-date" datetime={page.date.toISOString()}>
-                      {format(page.date, "LLL dd")}
+                      {dateFormatters.shortDay.format(page.date)}
                     </time>
                   )}
-                  {page.date && (wordCount > 0 || !index) && <span class="meta-separator">/</span>}
+                  {page.date && (wordCount > 0 || !index) && <span class="meta-separator">·</span>}
                   {wordCount > 0 && <span class="article-reading-time">{readTime} min</span>}
                   {!index && (
                     <Fragment>
-                      <span class="meta-separator">/</span>
+                      <span class="meta-separator">·</span>
                       <span
                         class="article-visit-count"
                         data-flag-title={page.title}
@@ -68,27 +58,50 @@ module.exports = class extends Component {
                     </Fragment>
                   )}
                 </div>
-                {page.tags?.length ? (
-                  <div class="article-tags-inline">
-                    {page.tags.map((tag) => (
-                      <Fragment>
-                        <a class="article-tag" rel="tag" href={url_for(tag.path)}>
-                          {tag.name}
-                        </a>
-                      </Fragment>
-                    ))}
-                  </div>
-                ) : null}
               </div>
             ) : null}
 
-            {/* Content/Excerpt */}
-            <div
-              class="content"
-              dangerouslySetInnerHTML={{
-                __html: index && page.excerpt ? page.excerpt : page.content,
-              }}
-            ></div>
+            {/* Title */}
+            {page.title !== "" && index ? (
+              <h2 class="article-title">
+                <a href={url_for(page.link || page.path)}>{page.title}</a>
+              </h2>
+            ) : null}
+            {page.title !== "" && !index ? <h1 class="article-title">{page.title}</h1> : null}
+
+            {!index && page.excerpt && <div class="content article-excerpt" dangerouslySetInnerHTML={{ __html: page.excerpt }}></div>}
+
+            {(index || !page.excerpt) && (
+              <div
+                class={index && page.excerpt ? "content article-excerpt" : "content"}
+                dangerouslySetInnerHTML={{
+                  __html: index && page.excerpt ? page.excerpt : page.content,
+                }}
+              ></div>
+            )}
+
+            {page.tags?.length && (
+              <div class="article-footer">
+                <div class="article-tags">
+                  {page.tags.map((tag, i) => (
+                    <Fragment>
+                      {i > 0 && <span class="meta-separator">·</span>}
+                      <a class="article-tag" rel="tag" href={url_for(tag.path)}>
+                        {tag.name}
+                      </a>
+                    </Fragment>
+                  ))}
+                </div>
+                {index && (
+                  <a class="article-read-more" href={url_for(page.link || page.path)}>
+                    Read More →
+                  </a>
+                )}
+              </div>
+            )}
+
+            {!index && page.excerpt && <div class="content" dangerouslySetInnerHTML={{ __html: page.content }}></div>}
+
             {/* Licensing block */}
             {!index && article && article.licenses && Object.keys(article.licenses) ? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
           </article>

package/layout/common/article_cover.jsx

@@ -11,7 +11,17 @@ module.exports = class extends Component {
     return (
       <a href={url_for(page.link || page.path)} class="cover-image">
         <img class="cover-lqip" src={lqip_src} alt="placeholder" />
-        <img class="cover-origin" src={cover} alt={page.title || cover} srcset={imageSrcset} referrerpolicy="no-referrer" decoding="async" loading={index ? "lazy" : "eager"} />
+        <img
+          class="cover-origin"
+          src={cover}
+          alt={page.title || cover}
+          srcset={imageSrcset}
+          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, 960px"
+          referrerpolicy="no-referrer"
+          decoding="async"
+          loading={index ? "lazy" : "eager"}
+          fetchpriority={index ? undefined : "high"}
+        />
       </a>
     );
   }

package/layout/common/article_media.jsx

@@ -1,14 +1,12 @@
 /**
  * Article media component, used in article lists such as archive page and recent posts widget
  */
-const { Component } = require("inferno");
-const { format, parseISO } = require("date-fns");
+const { Component, dateFormatters, parseISO } = require("../../include/util/common");
 
 module.exports = class extends Component {
   render() {
     const { url, title, date } = this.props;
-    // Formatted like May.15
-    const formattedDate = format(parseISO(date), "MMM dd");
+    const formattedDate = dateFormatters.shortDay.format(parseISO(date));
 
     return (
       <article class="archive-item">

package/layout/common/footer.jsx

@@ -25,10 +25,10 @@ class Footer extends Component {
         <p class="footer-meta">
           <span
             dangerouslySetInnerHTML={{
-              __html: `&copy; ${siteYear} ${author || siteTitle}`,
+              __html: `&copy; 2022 - ${siteYear}`,
             }}
           ></span>
-          &nbsp;Powered by Hexo&nbsp;& Icarus
+          &nbsp;Powered by Hexo
           {showVisitorCounter ? (
             <>
               <br />
@@ -72,7 +72,7 @@ class Footer extends Component {
             ? Object.keys(subdomains).map((name) => {
                 const link = subdomains[name];
                 return (
-                  <a class="footer-link" target="_blank" rel="noopener" title={name} href={link.url}>
+                  <a class="footer-link" target="_self" rel="noopener" title={name} href={link.url}>
                     {name}
                   </a>
                 );
@@ -83,17 +83,13 @@ class Footer extends Component {
     );
 
     return (
-      <>
-        {" "}
-        {svg_line}
-        <footer class="footer">
-          <div class="footer-grid">
-            {footer_brand}
-            {footer_subdomains}
-            {footer_social}
-          </div>
-        </footer>
-      </>
+      <footer class="footer">
+        <div class="footer-grid">
+          {footer_brand}
+          {footer_subdomains}
+          {footer_social}
+        </div>
+      </footer>
     );
   }
 }

package/layout/common/head.jsx

@@ -28,7 +28,7 @@ module.exports = class extends Component {
     const { site, config, helper, page } = this.props;
     const { url_for, is_post } = helper;
     const { url, head = {}, article } = config;
-    const { meta = [], open_graph = {}, structured_data = {}, canonical_url = page.permalink, rss, favicon } = head;
+    const { meta = [], open_graph = {}, structured_data = {}, canonical_url = page.permalink, favicon } = head;
 
     const noIndex = helper.is_archive() || helper.is_tag();
 
@@ -51,15 +51,7 @@ module.exports = class extends Component {
         images.push(img[1]);
       }
     } else {
-      images = [url_for("/img/og_image.png")];
-    }
-
-    let adsenseClientId = null;
-    if (Array.isArray(config.widgets)) {
-      const widget = config.widgets.find((widget) => widget.type === "adsense");
-      if (widget) {
-        adsenseClientId = widget.client_id;
-      }
+      images = [url_for("/img/og_image.webp")];
     }
 
     let openGraphImages = images;
@@ -100,7 +92,7 @@ module.exports = class extends Component {
 
     return (
       <head>
-        <script data-swup-ignore-script dangerouslySetInnerHTML={{ __html: themeInitScript }}></script>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }}></script>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {noIndex ? <meta name="robots" content="noindex" /> : null}
@@ -141,7 +133,6 @@ module.exports = class extends Component {
           />
         ) : null}
         {canonical_url ? <link rel="canonical" href={canonical_url} /> : null}
-        {rss ? <link rel="alternate" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}
         {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
         <link rel="stylesheet" href={url_for("/css/default.css")} />
         <link rel="stylesheet" href={url_for("/css/responsive/mobile.css")} media="screen and (max-width:768px)" />
@@ -149,12 +140,13 @@ module.exports = class extends Component {
         <link rel="stylesheet" href={url_for("/css/responsive/touch.css")} media="screen and (max-width:1023px)" />
         <link rel="stylesheet" href={url_for("/css/responsive/desktop.css")} media="screen and (min-width:1024px)" />
         <link rel="preload" as="style" href={url_for("/css/callout_blocks.css")} onload="this.onload=null;this.rel='stylesheet'" />
-        {/* Maple Mono CN */}
+        <link rel="preload" href={url_for("/css/font/woff2/HomemadeApple.woff2")} as="font" type="font/woff2" crossorigin />
         <link rel="preconnect" href="https://fontsapi.zeoseven.com" />
+        <link rel="preload" as="style" href="https://fontsapi.zeoseven.com/285/main/result.css" onload="this.onload=null;this.rel='stylesheet'" />
         <link rel="preload" as="style" href="https://fontsapi.zeoseven.com/442/main/result.css" onload="this.onload=null;this.rel='stylesheet'" />
-        <link rel="stylesheet" href="/css/shiki/shiki.css" />
+        <link rel="preload" as="style" href="/css/shiki/shiki.css" onload="this.onload=null;this.rel='stylesheet'" />
+        {page.encrypt ? <link rel="stylesheet" href={url_for("/css/encrypt.css")} /> : null}
         <Plugins site={site} config={config} helper={helper} page={page} head={true} />
-        {adsenseClientId ? <script data-swup-ignore-script data-ad-client={adsenseClientId} src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script> : null}
       </head>
     );
   }

package/layout/common/navbar.jsx

@@ -36,22 +36,7 @@ class Navbar extends Component {
 
     return (
       <nav class="navbar navbar-main">
-        <div
-          class="navbar-container"
-          onclick="
-            const burger = this.querySelector('.navbar-burger');
-            const menu = this.querySelector('.navbar-menu');
-            const target = event.target;
-
-            if (target.closest('.navbar-burger')) {
-              burger.classList.toggle('is-active');
-              menu.classList.toggle('is-active');
-            } else if (target.closest('.navbar-item')) { // 点击菜单项：自动关闭菜单
-              burger.classList.remove('is-active');
-              menu.classList.remove('is-active');
-            }
-          "
-        >
+        <div class="navbar-container" onclick="toggleNav(event)">
           <a href={siteUrl} style={"font-family: homemade-apple; color: var(--text); display: flex; align-items: center; padding: 0 1em;"}>
             GnixAij
           </a>
@@ -82,7 +67,7 @@ class Navbar extends Component {
                   })}
                 </Fragment>
               ) : null}
-              <button type="button" class="navbar-item" id="theme-selector-trigger" title="Choose Theme" onclick="window.openThemeModal?.()">
+              <button type="button" class="navbar-item" title="Choose Theme" popovertarget="theme-selector-popover">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <title>brightness_fill</title>
                   <g id="brightness_fill" fill="currentColor">
@@ -90,7 +75,7 @@ class Navbar extends Component {
                   </g>
                 </svg>
               </button>
-              <button type="button" class="navbar-item search" title={searchTitle}>
+              <button type="button" class="navbar-item search" popovertarget="searchbox" title={searchTitle}>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <title>search_line</title>
                   <g id="search_line" fill="currentColor">

package/layout/common/scripts.jsx

@@ -10,11 +10,12 @@ module.exports = class extends Component {
       <Fragment>
         <Plugins site={site} config={config} page={page} helper={helper} head={false} />
         <Swup head={false} />
-        <script data-swup-ignore-script defer src="/js/host/iconify-icon/3.0.2/iconify-icon.min.js"></script>
-        <script data-swup-ignore-script defer src="/js/theme-selector.js"></script>
-        <script data-swup-ignore-script defer src="/js/host/medium-zoom/dist/medium-zoom.min.js"></script>
-        <script data-swup-ignore-script defer src="/js/main.js"></script>
-        <script data-swup-ignore-script async src="/js/instant-page.min.js" type="module"></script>
+        <script defer src="/js/host/iconify-icon/3.0.2/iconify-icon.min.js"></script>
+        <script defer src="/js/theme-selector.js"></script>
+        <script defer src="/js/host/medium-zoom/dist/medium-zoom.min.js"></script>
+        <script defer src="/js/main.js"></script>
+        {page.encrypt ? <script src="/js/decrypt.js" type="module"></script> : null}
+        <script async src="/js/instant-page.min.js" type="module"></script>
       </Fragment>
     );
   }

package/layout/common/theme_selector.jsx

@@ -13,13 +13,12 @@ const themes = [
 class ThemeSelector extends Component {
   render() {
     return (
-      <div id="theme-selector-modal" onclick="window.handleThemeModalClick?.(event)">
-        <div class="theme-selector-backdrop"></div>
-        <div class="theme-selector-list">
+      <div id="theme-selector-popover" popover="auto" tabindex="-1">
+        <div class="theme-selector-list" role="listbox" aria-label="Select theme">
           {themes.map((theme, index) => (
-            <div class="theme-option" data-theme-option={theme.value} data-index={index} onclick={`window.selectThemeOption?.(event, ${index})`}>
-              <span class="theme-name">{theme.name}</span>
-            </div>
+            <button class="theme-option" type="submit" data-theme-option={theme.value} data-index={index} onclick={`window.selectThemeOption?.(${index})`}>
+              {theme.name}
+            </button>
           ))}
         </div>
       </div>

package/layout/common/toc.jsx

@@ -8,25 +8,19 @@ class FloatingToc extends Component {
       list_number: false,
     });
 
-    if (!tocContent) {
+    if (!tocContent && !page.encrypt) {
       return null;
     }
 
     return (
-      <div class="toc-container" id="icarus-toc-container">
-        <button class="toc-button" type="button" onclick="document.getElementById('icarus-toc-container').classList.toggle('is-open')">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <title>Table of Contents</title>
-            <line x1="8" y1="6" x2="21" y2="6"></line>
-            <line x1="8" y1="12" x2="21" y2="12"></line>
-            <line x1="8" y1="18" x2="21" y2="18"></line>
-            <line x1="3" y1="6" x2="3.01" y2="6"></line>
-            <line x1="3" y1="12" x2="3.01" y2="12"></line>
-            <line x1="3" y1="18" x2="3.01" y2="18"></line>
-          </svg>
+      <div class="toc-container" id="icarus-toc-container" style={page.encrypt ? "display:none" : null}>
+        <button class="toc-button" type="button" popovertarget="toc-body" aria-label="Table of Contents">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
         </button>
-        <div class="toc-body" onclick="if(event.target === this || event.target.matches('.toc-link')) { document.getElementById('icarus-toc-container').classList.remove('is-open'); }">
-          <div dangerouslySetInnerHTML={{ __html: tocContent }} />
+        <div id="toc-body" popover="auto" class="toc-body" onclick="if(event.target===this||event.target.closest('.toc-link'))this.hidePopover();">
+          <div id="toc-insert" dangerouslySetInnerHTML={{ __html: tocContent || "" }} />
         </div>
       </div>
     );