update

components/VirtualScroll/scroll.module.scss

@@ -1,5 +1,5 @@
 .wrap {
-  @apply flex items-start overflow-y-auto;
+  @apply flex items-start overflow-y-auto supports-scrollbars:scrollbar:w-2 supports-scrollbars:scrollbar:h-2 supports-scrollbars:scrollbar-track:bg-neutral-700 supports-scrollbars:scrollbar-thumb:bg-neutral-500 supports-scrollbars:scrollbar-thumb:rounded;
 
   .space {
     @apply w-0;

components/novel/Toc/index.tsx

@@ -52,8 +52,9 @@ const Toc = (props: TocProps) => {
               key={item.id}
               onClick={() => onChangeSettings && onChangeSettings("")}
             >
-              <i>{i + 1}</i>
-              <strong>{item.name}</strong>
+              {/* <i>{i + 1}</i> */}
+              {/* <strong>{item.name}</strong> */}
+              {item.name}
             </Link>
           </li>
         );

package.json

@@ -12,6 +12,7 @@
     "@mui/base": "^5.0.0-alpha.103",
     "@next/font": "^13.0.1",
     "clsx": "^1.2.1",
+    "moment": "^2.29.4",
     "next": "13.0.0",
     "next-pwa": "^5.6.0",
     "qs": "^6.11.0",

pages/novel/[slug]/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import Head from "next/head";
+import moment from "moment";
 import { useMemo } from "react";
 import { useRouter } from "next/router";
 import TabUnstyled from "@mui/base/TabUnstyled";
@@ -220,6 +220,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                     href={`/novels/${detail.genres[0].uri}`}
                   >
                     <svg>
+                      <title>Genre: </title>
                       <use xlinkHref="/icons.svg#paper"></use>
                     </svg>
                     <span>{detail.genres[0].name}</span>
@@ -227,6 +228,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                 ) : null}
                 <strong>
                   <svg>
+                    <title>Chapters: </title>
                     <use xlinkHref="/icons.svg#chapter"></use>
                   </svg>
                   <span>{chapters.chapters.length} Chapters</span>
@@ -294,18 +296,27 @@ const Novel: NextPage<NovelPageProps> = (props) => {
               <TabPanelUnstyled
                 value={idx}
                 component="ol"
+                start={idx * 100 + 1}
                 key={chapter.title}
                 className={styles["chapter-list"]}
               >
-                {chapter.list.map((item, i) => (
-                  <li key={item.id}>
-                    <Link href={`/novel/${item.uri}`} title={item.name}>
-                      <i>{idx * 100 + i + 1}</i>
-                      <strong>{item.name}</strong>
-                      <small>1yr</small>
-                    </Link>
-                  </li>
-                ))}
+                {chapter.list.map((item, i) => {
+                  const dateFormNow = moment(item.create_time).fromNow(true);
+                  return (
+                    <li key={item.id}>
+                      <Link href={`/novel/${item.uri}`} title={item.name}>
+                        {/* <i>{idx * 100 + i + 1}</i> */}
+                        <strong>{item.name}</strong>
+                        <time
+                          title={`Create at ${dateFormNow} ago`}
+                          dateTime={item.create_time}
+                        >
+                          {dateFormNow}
+                        </time>
+                      </Link>
+                    </li>
+                  );
+                })}
               </TabPanelUnstyled>
             ))}
           </TabsUnstyled>

styles/chapter.module.scss

@@ -57,7 +57,7 @@
   @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-30 pt-4 pb-24 px-5 shadow-xl shadow-white/10;
   @apply lg:w-96 lg:max-h-[calc(100vh-65px)] lg:sticky lg:top-[65px] lg:pb-4 lg:px-0;
   .toolbar-display-title {
-    @apply flex text-base mb-2 items-center justify-between;
+    @apply flex text-base mb-2 pb-2 items-center justify-between border-b border-b-slate-700;
     .btn-close {
       @apply w-6 h-6;
       .icon-close {
@@ -82,27 +82,33 @@
       // @apply -mr-5 pr-5;
       li {
         a {
-          @apply flex w-full h-full py-1;
-          &:hover {
-            strong {
-              text-decoration: underline;
-            }
-          }
-        }
-        i {
-          @apply w-11 mr-1 flex-shrink-0 not-italic text-slate-400;
-        }
-        strong {
-          @apply block font-normal flex-1 whitespace-nowrap w-0 overflow-hidden text-ellipsis text-gray-100;
-        }
-        small {
-          @apply text-slate-400 ml-2;
+          @apply block overflow-hidden py-1 w-full text-ellipsis hover:underline whitespace-nowrap;
         }
         &.current {
-          a strong {
-            @apply text-blue-300 font-extrabold;
-          }
+          @apply text-blue-300 font-extrabold;
         }
+        // a {
+        //   @apply flex w-full h-full py-1;
+        //   &:hover {
+        //     strong {
+        //       text-decoration: underline;
+        //     }
+        //   }
+        // }
+        // i {
+        //   @apply w-11 mr-1 flex-shrink-0 not-italic text-slate-400;
+        // }
+        // strong {
+        //   @apply block font-normal flex-1 whitespace-nowrap w-0 overflow-hidden text-ellipsis text-gray-100;
+        // }
+        // small {
+        //   @apply text-slate-400 ml-2;
+        // }
+        // &.current {
+        //   a strong {
+        //     @apply text-blue-300 font-extrabold;
+        //   }
+        // }
       }
     }
   }

styles/novel-info.module.scss

@@ -56,17 +56,15 @@
 }
 .chapter-list {
   @apply grid gap-y-4 lg:grid-cols-2 lg:gap-x-10 xl:grid-cols-3;
+  // counter-reset: chapter attr(start);
   li {
     @apply border-b text-sm lg:text-base border-b-slate-100;
+    // counter-increment: chapter;
     :global(.dark) & {
       @apply border-b-slate-700;
     }
-    &,
     a {
-      @apply flex;
-    }
-    a {
-      @apply w-full h-full py-2 hover:bg-slate-50;
+      @apply flex w-full h-full py-2 hover:bg-slate-50;
       :global(.dark) & {
         @apply hover:bg-slate-800;
       }
@@ -76,13 +74,15 @@
         }
       }
     }
+
     i {
-      @apply w-9 mr-1 flex-shrink-0 not-italic text-slate-400;
+      @apply w-10 mr-1 flex-shrink-0 not-italic text-slate-400 ;
     }
+
     strong {
       @apply block font-normal flex-1;
     }
-    small {
+    time {
       @apply text-slate-400 ml-2;
     }
   }

yarn.lock

@@ -3006,6 +3006,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"