refactor(ui): unify date format and improve accessibility

Author: xihale

assets/js/code-block.js

@@ -10,9 +10,11 @@ document.addEventListener('DOMContentLoaded', () => {
     preElement.parentNode.insertBefore(codeContainer, preElement);
     codeContainer.appendChild(preElement);
 
-    const copyButton = document.createElement('button');
-    copyButton.className = 'copy-code-btn';
-    copyButton.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+     const copyButton = document.createElement('button');
+     copyButton.className = 'copy-code-btn';
+     copyButton.setAttribute('aria-label', 'Copy code to clipboard');
+     copyButton.setAttribute('title', 'Copy code');
+     copyButton.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
     codeContainer.appendChild(copyButton);
 
     copyButton.addEventListener('click', () => {

assets/js/toc.js

@@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
       });
       ticking = true;
     }
-  });
+  }, { passive: true });
 
   onScroll(); // Initial check
 });

content/learn/heap-memory.smd

@@ -248,7 +248,7 @@ defer allocator.free(say);
 
 另一种形式是将 `Allocator` 传递给 `init` ，然后由对象**内部使用**。这种方法不那么明确，因为你已经给了对象一个分配器来使用，但你不知道哪些方法调用将实际分配。对于长寿命对象来说，这种方法更实用。
 
-注入分配器的优势不仅在于显式，还在于灵活性。`std.mem.Allocator` 是一个接口，提供了 `alloc`、`free`、`create` 和 `destroy` 函数以及其他一些函数。到目前为止，我们只看到了 `std.heap.GeneralPurposeAllocator`，但标准库或第三方库中还有其他实现.
+注入分配器的优势不仅在于显式，还在于灵活性。`std.mem.Allocator` 是一个接口，提供了 `alloc`、`free`、`create` 和 `destroy` 函数以及其他一些函数。到目前为止，我们只看到了 `std.heap.GeneralPurposeAllocator`，但标准库或第三方库中还有其他实现。
 
 > Zig 没有用于创建接口的语法糖。一种类似于接口的模式是带标签的联合（tagged unions），不过与真正的接口相比，这种模式相对受限。整个标准库中也探索了一些其他模式，例如 `std.mem.Allocator`。本指南不探讨这些接口模式。
 

content/post/2024-06-11-zig-hashmap-2.smd

@@ -365,7 +365,7 @@ if (gop.found_existing) {
 }
 ```
 
-当然，只要不对哈希表进行修改，`value_ptr` 就应被视为有效. 顺便提一句，这同样适用于我们通过 `iterator()`、`valueIterator` 和 `keyIterator` 获取的迭代键和值，原因相同。
+当然，只要不对哈希表进行修改，`value_ptr` 就应被视为有效。顺便提一句，这同样适用于我们通过 `iterator()`、`valueIterator` 和 `keyIterator` 获取的迭代键和值，原因相同。
 
 ## [结论]($heading.id('conclusion'))
 

layouts/learn.shtml

@@ -12,7 +12,7 @@
       <h1 :text="$page.title" data-pagefind-meta="title" data-pagefind-ignore></h1>
       <div data-pagefind-sort="date" :text="$page.date.format('2006-01-02')" style="display:none"></div>
       <div class="toc-fallback" :if="$page.isSection().not().and($page.custom.getOr('toc', true))" data-pagefind-ignore>
-        <h3>Table Of Content</h3>
+        <h3>Table of Contents</h3>
         <div :html="$page.toc()"></div>
       </div>
       <div :html="$page.content()"></div>

layouts/monthly.shtml

@@ -22,9 +22,7 @@
             <a href="$loop.it.link()" class="monthly-item">
               <span class="monthly-item-title" :text="$loop.it.title"></span>
               <div class="monthly-item-meta">
-                <span class="monthly-date-part" :text="$loop.it.date.format('01')"></span>
-                <span class="monthly-sep">/</span>
-                <span class="monthly-date-part" :text="$loop.it.date.format('2006')"></span>
+                <span class="monthly-date-part" :text="$loop.it.date.format('2006-01-02')"></span>
               </div>
             </a>
           </div>
@@ -34,7 +32,7 @@
       <!-- Article Page: Content + Prev/Next -->
       <div :if="$page.isSection().not()">
         <div class="toc-fallback" :if="$page.custom.getOr('toc', true)" data-pagefind-ignore>
-          <h3>Table Of Content</h3>
+          <h3>Table of Contents</h3>
           <div :html="$page.toc()"></div>
         </div>
         <div :html="$page.content()" class="monthly-content"></div>

layouts/post.shtml

@@ -47,11 +47,7 @@
             <a href="$loop.it.link()" class="monthly-item">
               <span class="monthly-item-title" :text="$loop.it.title"></span>
               <div class="monthly-item-meta">
-                <span class="monthly-date-part" :text="$loop.it.date.format('02')"></span>
-                <span class="monthly-sep">/</span>
-                <span class="monthly-date-part" :text="$loop.it.date.format('01')"></span>
-                <span class="monthly-sep">/</span>
-                <span class="monthly-date-part" :text="$loop.it.date.format('2006')"></span>
+                <span class="monthly-date-part" :text="$loop.it.date.format('2006-01-02')"></span>
               </div>
             </a>
           </div>
@@ -64,11 +60,11 @@
             <p>
                 <span id="author" :text="$page.author"></span>
                 |
-                <span :text="$page.date.format('January 02, 2006')"></span>
+                <span :text="$page.date.format('2006-01-02')"></span>
             </p>
         </div>
         <div class="toc-fallback" :if="$page.custom.getOr('toc', true)" data-pagefind-ignore>
-          <h3>Table Of Content</h3>
+          <h3>Table of Contents</h3>
           <div :html="$page.toc()"></div>
         </div>
         <div :html="$page.content()"></div>

layouts/templates/base.shtml

@@ -25,8 +25,8 @@
       fetch('https://en.liujiacai.net/pv/write?' + new URLSearchParams(payload),
             {mode: 'no-cors'}).catch(console.log);
     </script>
-    <script src="$site.asset('js/toc.js').link()"></script>
-    <script src="$site.asset('js/code-block.js').link()"></script>
+    <script defer src="$site.asset('js/toc.js').link()"></script>
+    <script defer src="$site.asset('js/code-block.js').link()"></script>
 
     <super>
   </head>
@@ -41,7 +41,7 @@
           <a href="$site.page('contributing').link()">贡献</a>
           <a href="$site.page('search').link()">搜索</a>
         </nav>
-        <button class="mobile-menu-toggle" id="menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
+        <button class="mobile-menu-toggle" id="menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="nav-menu">
           <span class="mobile-menu-line"></span>
           <span class="mobile-menu-line"></span>
           <span class="mobile-menu-line"></span>
@@ -50,8 +50,10 @@
     </div>
     <script>
       document.getElementById('menu-toggle').addEventListener('click', function() {
-        document.getElementById('nav-menu').classList.toggle('active');
+        const nav = document.getElementById('nav-menu');
+        const active = nav.classList.toggle('active');
         this.classList.toggle('active');
+        this.setAttribute('aria-expanded', active);
       });
     </script>
     <super>

layouts/templates/content.shtml

@@ -13,19 +13,19 @@
       <h1 :text="$page.title" data-pagefind-meta="title" data-pagefind-ignore></h1>
       <div data-pagefind-sort="date" :text="$page.date.format('2006-01-02')" style="display:none"></div>
       <div id="meta" :if="$page.isSection().not()" data-pagefind-ignore>
-        <p :text="$page.date.format('2006-01-03')"></p>
+        <p :text="$page.date.format('2006-01-02')"></p>
         <p :text="$page.author" id="author"></p>
       </div>
       <div class="toc-fallback" :if="$page.custom.getOr('toc', true).and($page.isSection().not())" data-pagefind-ignore>
-        <h3>Table Of Content</h3>
+        <h3>Table of Contents</h3>
         <div :html="$page.toc()"></div>
       </div>
       <ul class="article-list" :loop="$page.subpages()" data-pagefind-ignore>
         <li>
           <a href="$loop.it.link()" class="article-item">
             <span class="article-title" :text="$loop.it.title"></span>
             <span class="article-date" :if="$page.custom.getOr('showTocDate', true)">
-              <time datetime="$loop.it.date.format('2006-01-03')" :text="$loop.it.date.format('2006-01-03')"></time>
+              <time datetime="$loop.it.date.format('2006-01-02')" :text="$loop.it.date.format('2006-01-02')"></time>
             </span>
           </a>
         </li>