feat 記事詳細

appleple · Jan 16, 2025 · 2c3590c · 2c3590c
1 parent 89f0bc5
commit 2c3590c
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 118 deletions.
diff --git a/src/develop/_entry.html b/src/develop/_entry.html
@@ -6,8 +6,15 @@
     "sns_share": "true"
   })
 
-  <section class="mt-10">
+  <section class="mt-16 md:mt-20">
+    <!-- 関連記事 -->
     @include("/include/entry/tag-relational-card.html")
+    <div class="mt-10">
+      <!-- 新着記事 -->
+      @include("/include/entry/summary-tiny.html", {
+        "wrapper_class": "md:grid md:grid-cols-2 md:gap-8"
+      })
+    </div>
   </section>
 </article>
 @endsection
diff --git a/src/develop/_layouts/two-column.html b/src/develop/_layouts/two-column.html
@@ -73,7 +73,7 @@ <h2 class="mb-4 text-lg text-gray-900 font-bold">アーカイブ</h2>
 
         <section class="mt-8">
           <h2 class="mb-4 text-lg text-gray-900 font-bold">新着記事</h2>
-          @include("/include/entry/summary-side.html")
+          @include("/include/entry/summary-tiny.html")
         </section>
 
         <section class="mt-10">

diff --git a/src/develop/calendar.html b/src/develop/calendar.html
diff --git a/src/develop/images/icons/line.svg b/src/develop/images/icons/line.svg
diff --git a/src/develop/include/entry/body.html b/src/develop/include/entry/body.html
@@ -9,17 +9,28 @@
 
   <!-- 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">
+      <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>
+    </p>
     <!-- BEGIN title:veil -->
-    <h1 class="font-bold text-3xl sm:text-4xl lg:text-5xl entry-title"><a href="{titleUrl}">{title}</a></h1>
+    <h1 class="font-bold text-2xl entry-title"><a href="{titleUrl}">{title}</a></h1>
     <!-- END title:veil -->
-    <div class="flex items-center flex-wrap mt-6 gap-3">
-      <!-- BEGIN date:veil -->
-      <p><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
-      <!-- END date:veil -->
-      <!-- BEGIN category:loop -->
-      <p><a href="{url}" class="inline-block px-3 py-2 leading-none rounded-full bg-slate-100 font-medium uppercase">{name}</a></p>
-      <!-- END category:loop -->
+    <div class="md:flex items-center flex-wrap gap-4 mt-4 text-gray-500 text-sm">
+      <!-- BEGIN pdate:veil -->
+      <p>公開日：<time datetime="{pdate#Y}-{pdate#m}-{pdate#d}">{pdate#Y}年{pdate#n}月{pdate#j}日({date#l}[weekEN2JP])</time><!-- BEGIN new --><span class="ml-2 px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs">NEW</span><!-- END new --></p>
+      <!-- END pdate:veil -->
+      <!-- BEGIN udate:veil -->
+      <p class="mt-1.5 md:mt-0 md:pl-4 md:border-l border-gray-200">更新日：<time datetime="{udate#Y}-{udate#m}-{udate#d}">{udate#Y}年{udate#n}月{udate#j}日({date#l}[weekEN2JP])</time></p>
+      <!-- END udate:veil -->
     </div>
+    <!-- BEGIN_IF [%{CID}/nem] -->
+    <p class="mt-4"><a href="{url}" class="text-indigo-600 font-bold">%{CATEGORY_NAME}</a></p>
+    <!-- END_IF -->
     <!-- BEGIN tag:veil -->
     <ul class="flex flex-wrap gap-3 mt-4 text-gray-900">
       <!-- BEGIN tag:loop -->
@@ -32,27 +43,32 @@ <h1 class="font-bold text-3xl sm:text-4xl lg:text-5xl entry-title"><a href="{tit
 
   <div class="mt-10">
     <!-- BEGIN unit:veil -->
-    <div class="acms-entry entry-column"
-      x-data="oldEntryAlert('{udate#}')">
-      <div x-show="isOldEntry" class="relative w-full rounded-lg border border-transparent bg-blue-50 mb-8 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600">
-        <svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
-        <h4 class="mb-1 font-medium leading-none tracking-tight">この記事は公開日より<span x-text="elapsedYears"></span>年以上経過しています</h4>
-          <div class="text-sm opacity-80">情報が古くなっている可能性がありますのでご注意ください。</div>
-      </div>
-
+    <div class="acms-entry entry-column">
       <div class="acms-grid prose max-w-none custom-entry-body js-outline"
         data-target=".js-outline-yield"
         data-link="true"
         data-listType="ol"
-        data-listClassName="custom-outline"
-        data-itemClassName="mt-2 custom-outline-item"
-        data-linkClassName="js-scroll hover:opacity-70"
+        data-listClassName="list-none"
+        data-itemClassName="mt-2"
+        data-linkClassName="js-scroll no-underline hover:opacity-70"
         data-anchorName="heading-$1"
         data-levelLimit="2"
         data-exceptClass="js-except">
-        <!-- BEGIN_SetRendered id="entry-outline" -->
-        <div class="js-outline-yield"></div>
-        <!-- END_SetRendered -->
+        <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>
@@ -67,18 +83,16 @@ <h4 class="mb-1 font-medium leading-none tracking-tight">この記事は公開
 
     @include("/admin/entry/action.html")
 
-    <!-- BEGIN udate:veil -->
-    <p class="mt-8"><time datetime="{udate#Y}-{udate#m}-{udate#d}">{udate#Y}年 {udate#n}月 {udate#j}日</time> 更新</p>
-    <!-- END udate:veil -->
-
     <!-- BEGIN_IF [{{sns_share}}/eq/true] -->
+    <div class="mt-10">
     @include("/include/parts/sns-share.html")
+    </div>
     <!-- END_IF -->
   </div>
   <!-- END entry:loop -->
 
   <!-- BEGIN pager:veil -->
-  <div class="mt-20">
+  <div class="mt-10">
   @include("/include/parts/serial-navi.html")
   </div>
   <!-- END pager:veil -->

diff --git a/src/develop/include/entry/summary-side.html → src/develop/include/entry/summary-tiny.html b/src/develop/include/entry/summary-side.html → src/develop/include/entry/summary-tiny.html
@@ -1,9 +1,9 @@
 <!-- BEGIN_MODULE Entry_Summary id="{{module_id}}" -->
 <div>
   @include("/admin/module/setting.html")
-  <ul class="md:grid md:grid-cols-2 md:gap-4 lg:block">
+  <ul class="{{wrapper_class|default('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4')}}">
     <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->
-    <li class="mb-4">
+    <li>
       <a href="{url}" class="flex items-start gap-2 hover:opacity-70">
         <div class="w-1/3 aspect-square overflow-hidden rounded">
           <!-- BEGIN_IF [{path}/nem] -->

diff --git a/src/develop/include/entry/tag-relational-card.html b/src/develop/include/entry/tag-relational-card.html
@@ -1,15 +1,17 @@
 <!-- BEGIN_MODULE Entry_TagRelational id="{{module_id}}" -->
+<h2 class="text-lg font-bold">関連記事</h2>
+<p class="mt-3 mb-8"><span>この記事のハッシュタグ</span><!-- BEGIN_MODULE Tag_Cloud ctx="eid/%{EID}" --><span class="flex my-0.5 md:my-0 md:inline md:ml-3"><!-- BEGIN tag:loop --><span class="mr-3"><a href="{path}" class="text-gray-500 underline hover:no-underline">#{name}</a></span><!-- END tag:loop --></span><!-- END_MODULE Tag_Cloud --><span>から関連する記事を表示しています。</span></p>
 <div>
   @include("/admin/module/setting.html")
 
-  <div class="max-w-7xl mx-auto py-8 sm:py-16">
-    <h2 class="text-4xl font-extrabold text-gray-900 text-center sm:text-5xl lg:text-6xl first-letter:uppercase">Recommendation</h2>
-  </div>
+  <!-- BEGIN notFound -->
+  <p>関連記事はありません</p>
+  <!-- END notFound -->
 
-  <div class="grid grid-cols-12 pb-10 sm:gap-x-8 gap-y-16">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
     <!-- BEGIN unit:loop -->
     <!-- BEGIN entry:loop -->
-    <div class="flex flex-col items-start col-span-12 space-y-3 sm:col-span-6 xl:col-span-3">
+    <div class="">
       <a href="{url}" class="block w-full hover:opacity-70">
         <!-- BEGIN_IF [{path}/nem] -->
         <img
@@ -24,17 +26,24 @@ <h2 class="text-4xl font-extrabold text-gray-900 text-center sm:text-5xl lg:text
           class="object-cover w-full mb-4 overflow-hidden rounded-lg shadow-sm aspect-video"
         >
         <!-- END_IF -->
-        <!-- BEGIN category:veil -->
-        <p class="inline-block px-3 py-2 leading-none rounded-full text-xs font-medium uppercase bg-slate-100">{categoryName}</p>
-        <!-- END category:veil -->
-        <h2 class="mt-3 text-lg font-bold">{title}</h2>
-        <p class="mt-2 text-sm text-gray-500">{summary}</p>
+        <h2 class="mt-3 text-gray-900 text-lg font-bold line-clamp-2">{title}</h2>
+        <p class="mt-2 text-sm line-clamp-2">{summary}</p>
         <div class="flex items-center mt-2 text-xs">
-          <p class="text-gray-900 text-xs"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
+          <p class="text-gray-500"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
           <!-- BEGIN new -->
-          <p class="ml-3 text-indigo-600 font-bold">NEW</p>
+          <p class="ml-2 px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs">NEW</p>
           <!-- END new -->
         </div>
+        <!-- BEGIN category:veil -->
+        <p class="mt-2 text-gray-500 font-bold text-xs">{categoryName}</p>
+        <!-- END category:veil -->
+        <!-- BEGIN tag:veil -->
+        <ul class="flex flex-wrap gap-3 mt-2 text-sm text-gray-500">
+          <!-- BEGIN tag:loop -->
+          <li>#{name}</li>
+          <!-- END tag:loop -->
+        </ul>
+        <!-- END tag:veil -->
       </a>
     </div>
     <!-- END entry:loop -->

diff --git a/src/develop/include/parts/serial-navi.html b/src/develop/include/parts/serial-navi.html
@@ -1,42 +1,25 @@
 <!-- BEGIN serialNavi:veil -->
-<nav aria-label="ページ送り" class="md:py-6 md:border-y md:border-gray-200 md:border-solid">
-  <ul class="grid md:grid-cols-3 gap-4 md:gap-2">
-    <li>
+<nav aria-label="ページ送り">
+  <ul class="md:flex items-center gap-10">
+    <li class="flex-1 basis-[210px]">
       <!-- BEGIN prevLink -->
-      <a href="{url}" class="text-gray-900 hover:opacity-70">
-        <span class="flex items-center gap-2">
-          <span class="p-1 rounded-2xl bg-slate-400 text-white">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
-            </svg>
-          </span>
-          <span class="text-lg font-bold">前のページ</span>
-        </span>
-        <span class="block mt-2">{name}</span>
+      <a href="{url}" class="block px-4 py-2 border border-gray-200 rounded-md hover:opacity-70">
+        <span class="block text-gray-900 text-sm font-bold">前のページへ</span>
+        <span class="block mt-1 text-gray-500 text-xs line-clamp-2">{name}</span>
       </a>
       <!-- END prevLink -->
     </li>
-    <li class="hidden md:block self-center font-bold text-center">
-      <a href="{upperUrl}" class="text-gray-900 hover:opacity-70">一覧へ</a>
+    <li class="flex-none my-2 md:my-0 font-bold text-center">
+      <a href="{upperUrl}" class="inline-block py-2 text-gray-900 hover:opacity-70">一覧へ</a>
     </li>
-    <li class="text-right">
+    <li class="flex-1 basis-[210px] text-right">
       <!-- BEGIN nextLink -->
-      <a href="{url}" class="text-gray-900 hover:opacity-70">
-        <span class="flex justify-end items-center gap-2">
-          <span class="text-lg font-bold">次のページ</span>
-          <span class="p-1 rounded-2xl bg-slate-400 text-white">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-            </svg>
-          </span>
-        </span>
-        <span class="block mt-2">{name}</span>
+      <a href="{url}" class="block px-4 py-2 border border-gray-200 rounded-md hover:opacity-70">
+        <span class="block text-gray-900 text-sm font-bold">次のページへ</span>
+        <span class="block mt-1 text-gray-500 text-xs line-clamp-2">{name}</span>
       </a>
       <!-- END nextLink -->
     </li>
   </ul>
-  <p class="md:hidden mt-4 font-bold text-center underline hover:no-underline">
-    <a href="{upperUrl}" class="text-gray-900">一覧へ</a>
-  </p>
 </nav>
 <!-- END serialNavi:veil -->