feat エントリーのアラート表示をalpineからvanillaに変更

flour621 · flour621 · commit 6866477626a7 · 2025-01-24T16:49:32.000+09:00
diff --git a/src/develop/admin/entry/unit/extend.html b/src/develop/admin/entry/unit/extend.html
@@ -24,5 +24,9 @@
 </table>
 <!-- END custom_unit_space -->
 
+<!-- BEGIN custom_outline -->
+<p>ここに目次（アウトライン）が表示されます</p>
+<!-- END custom_outline -->
+
 <!-- BEGIN custom_sample -->
 <!-- END custom_sample -->
diff --git a/src/develop/include/calendar/month-side.html b/src/develop/include/calendar/month-side.html
@@ -16,7 +16,7 @@ <h3 class="text-lg font-bold">{year}年{month}月</h3>
     <!-- END spacer -->
     <!-- BEGIN none -->
     <div class="flex items-center justify-center px-0.5 py-1.5 text-sm text-center [&:nth-child(n+6)]:text-red-600">
-      <span class="flex items-center justify-center w-7 h-7<!-- BEGIN_IF [{day}/eq/%{d}] -->text-indigo-600 font-bold<!-- END_IF -->">{day}</span>
+      <span class="flex items-center justify-center w-7 h-7<!-- BEGIN_IF [{day}/eq/%{d}] --> text-indigo-600 font-bold<!-- END_IF -->">{day}</span>
     </div>
     <!-- END none -->
     <!-- BEGIN link -->
diff --git a/src/develop/include/entry/body.html b/src/develop/include/entry/body.html
@@ -9,13 +9,13 @@
 
   <!-- BEGIN pageHeader:veil -->
   <header class="text-gray-900">
-    <p x-show="isOldEntry" class="flex items-center gap-3 w-full mb-8 p-4 rounded-md bg-yellow-50 text-yellow-700 text-sm">
+    <p id="js-outdated-alert" class="hidden items-center gap-3 w-full mb-8 p-4 rounded-md bg-yellow-50 text-yellow-700 text-sm" data-updated-at="{date#}[date('Y-m-d')]">
       <span class="text-yellow-400">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
         </svg>
       </span>
-      <span>この記事は最終更新日から<span x-text="elapsedYears"></span>年以上経過しています。</span>
+      <span>この記事は最終更新日から<span id="js-outdated-year"></span>年以上経過しています。</span>
     </p>
     <!-- BEGIN title:veil -->
     <h1 class="font-bold text-2xl entry-title"><a href="{titleUrl}">{title}</a></h1>
@@ -54,21 +54,6 @@ <h1 class="font-bold text-2xl entry-title"><a href="{titleUrl}">{title}</a></h1>
         data-anchorName="heading-$1"
         data-levelLimit="2"
         data-exceptClass="js-except">
-        <details class=" p-4 rounded-md bg-gray-50 [&:not(:has(li))]:hidden [&_svg]:open:-rotate-180" open>
-          <summary class="flex items-center gap-x-4">
-            <p class="not-prose font-bold">目次</p>
-            <p class="not-prose text-indigo-600 cursor-pointer">
-              <span class="inline-flex items-center gap-x-2">
-                <span class="label-close inline">非表示</span>
-                <span class="label-open hidden">表示</span>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColo</svg>r" class="size-3">
-                  <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
-                </svg>
-              </span>
-            </p>
-          </summary>
-          <div class="js-outline-yield text-sm"></div>
-        </details>
         @include("/include/unit.html")
       </div>
     </div>
@@ -90,7 +75,7 @@ <h1 class="font-bold text-2xl entry-title"><a href="{titleUrl}">{title}</a></h1>
     <!-- END_IF -->
   </div>
   <!-- END entry:loop -->
-  
+
   <!-- BEGIN pager:veil -->
   <div class="mt-10">
   @include("/include/parts/serial-navi.html")
diff --git a/src/develop/include/parts/navigation-pc.html b/src/develop/include/parts/navigation-pc.html
@@ -1,5 +1,5 @@
 <ul class="flex flex-wrap items-center list-none leading-6 [&_a.stay]:border-b-2 [&_a.stay]:border-solid [&_a.stay]:border-indigo-600">
-  <li class="mx-5 font-medium text-center group">
+  <li class="mx-4 font-medium text-center group">
     <a href="%{HOME_URL}" class="js-child-toggle [&.is-active+div]:opacity-100 [&.is-active+div]:pointer-events-auto [&.is-active_span.nav-icon]:-rotate-180 <!-- BEGIN_IF [%{CCD}/neq/contact/_and_/%{ECD}/neq/profile.html] -->stay<!-- END_IF --> flex items-center gap-2 h-14 px-1 hover:opacity-70">
       <span>Blogs</span>
       <span class="text-gray-400 transition-transform nav-icon">
@@ -22,12 +22,12 @@ <h2 class="inline-block mr-12 pr-12 py-2 border-r border-gray-200 font-normal">B
       </div>
     </div>
   </li>
-  <li class="mx-5 font-medium text-center">
+  <li class="mx-4 font-medium text-center">
     <a href="%{HOME_URL}profile.html" class="js-link_match_location-full  flex items-center h-14 px-1 hover:opacity-70">
       <span>Profile</span>
     </a>
   </li>
-  <li class="ml-5 font-medium text-center">
+  <li class="ml-4 font-medium text-center">
     <a href="%{HOME_URL}contact/" class="js-link_match_location-category  flex items-center h-14 px-1 hover:opacity-70">
       <span>Contact</span>
     </a>
diff --git a/src/develop/include/unit/extend.html b/src/develop/include/unit/extend.html
@@ -6,5 +6,23 @@
 <hr class="my-8">
 <!-- END unit#custom_hr -->
 
+<!-- BEGIN unit#custom_outline -->
+<details class="p-4 rounded-md bg-gray-50 [&:not(:has(li))]:hidden [&_span.label-open]:open:hidden [&:not([open])_span.label-close]:hidden [&_svg]:open:-rotate-180" open>
+  <summary class="flex items-center gap-x-4">
+    <p class="not-prose font-bold">目次</p>
+    <p class="not-prose text-indigo-600 cursor-pointer">
+      <span class="inline-flex items-center gap-x-1 text-sm">
+        <span class="label-close">非表示</span>
+        <span class="label-open">表示</span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3 transition-transform">
+          <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
+        </svg>
+      </span>
+    </p>
+  </summary>
+  <div class="js-outline-yield text-sm"></div>
+</details>
+<!-- END unit#custom_outline -->
+
 <!-- BEGIN unit#custom_sample -->
 <!-- END unit#custom_sample -->
diff --git a/src/develop/src/js/alpinejs/oldEntryAlert.component.js b/src/develop/src/js/alpinejs/oldEntryAlert.component.js
diff --git a/src/develop/src/js/alpinejs/sideMenu.component.js b/src/develop/src/js/alpinejs/sideMenu.component.js
diff --git a/src/develop/src/js/entryOutdated.js b/src/develop/src/js/entryOutdated.js
@@ -0,0 +1,22 @@
+/**
+ * 「この記事は最終更新日から年以上経過しています」の警告表示
+ */
+
+export default () => {
+  function _checkOutdated(element) {
+    const updatedAt = new Date(element.dataset.updatedAt);
+    const now = new Date();
+    const diff = now.getTime() - updatedAt.getTime();
+    const diffDays = diff / (1000 * 60 * 60 * 24);
+    return [diffDays > 365, Math.floor(diffDays / 365)];
+  }
+
+  const outdatedAlert = document.getElementById('js-outdated-alert');
+  const outdatedYear = document.getElementById('js-outdated-year');
+
+  if(outdatedAlert && _checkOutdated(outdatedAlert)[0]) {
+    outdatedYear.textContent = _checkOutdated(outdatedAlert)[1];
+    outdatedAlert.classList.remove('hidden');
+    outdatedAlert.classList.add('flex');
+  }
+};
diff --git a/src/develop/src/js/main.js b/src/develop/src/js/main.js
@@ -3,8 +3,9 @@ import 'vite/modulepreload-polyfill'
 // import collapse from '@alpinejs/collapse';
 import htmx from 'htmx.org';
 import domContentLoaded from 'dom-content-loaded';
-// import Dispatcher from 'a-dispatcher';
+import Dispatcher from 'a-dispatcher';
 import fonts from './fonts';
+import entryOutdated from './entryOutdated';
 import scrollToInvalid from './scrollToInvalid';
 import './lib/polyfill';
 import {
@@ -145,7 +146,7 @@ async function main() {
   /**
    * Dispatcher
    */
-  // const dispatcher = new Dispatcher();
+  const dispatcher = new Dispatcher();
 
   // ダイナミックインポート
   // dispatcher.addRoute('^/app.html$', async () => {
@@ -155,8 +156,9 @@ async function main() {
 
   // 通常のバンドル
   // dispatcher.addRoute('^/example/$', examplePage);
+  dispatcher.addRoute('.html$', entryOutdated);
 
-  // dispatcher.run(window.location.pathname);
+  dispatcher.run(window.location.pathname);
 
   /**
    * Content Ready
@@ -165,18 +167,18 @@ async function main() {
     /* PC nav */
     const childToggle = document.querySelectorAll('.js-child-toggle');
     childToggle && childToggle.forEach((toggle) => {
-      toggle.addEventListener('click', (e) => {
-        e.preventDefault();
-        const _self = e.currentTarget;
+      toggle.addEventListener('click', (event) => {
+        event.preventDefault();
+        const _self = event.currentTarget;
         _self.classList.toggle('is-active');
       });
     });
 
     /* SP menu */
     const menu = document.querySelector('.js-menu');
     const menuToggle = document.querySelector('.js-menu-toggle');
-    menuToggle && menuToggle.addEventListener('click', (e) => {
-      const _self = e.currentTarget;
+    menuToggle && menuToggle.addEventListener('click', (event) => {
+      const _self = event.currentTarget;
       _self.classList.toggle('is-active');
       menu.classList.toggle('is-active');
     });
