feat: update

libs/getSiteConfig.ts

@@ -25,7 +25,7 @@ export default function getSiteConfig(siteHost?: string) {
     title,
     description,
     keywords:
-      "Novel updates, Free books online, Light Novel, Read light novel, Light novel translations, Free Novels Online",
+      "Novel updates, Free books online, Light Novel, Read light novel, Light novel translations, Free Novels Online, Web Novels, Webnovels",
     touchIcon: `https://${host}/apple-touch-icon.png`,
     jsonLd: [
       {

pages/novel/[slug]/index.tsx

@@ -280,20 +280,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
         </TabPanelUnstyled>
         <TabPanelUnstyled value={1}>
           <h3 className="sub-title">{detail.name} Chapters</h3>
-          {/* {isServer ? (
-            <ol className={styles["chapter-list"]}>
-              {chapters.chapters.map((item) => (
-                <li key={item.id}>
-                  <Link href={`/novel/${item.uri}`} title={item.name}>
-                    <i>1</i>
-                    <strong>{item.name}</strong>
-                    <small>1yr</small>
-                  </Link>
-                </li>
-              ))}
-            </ol>
-          ) : ( */}
-          <TabsUnstyled defaultValue={0} className="container bg-paper py-3">
+          <TabsUnstyled defaultValue={0}>
             <TabsListUnstyled className="tabs">
               {chapterLists.map((chapter, idx) => (
                 <TabUnstyled value={idx} className="tab" key={chapter.title}>
@@ -301,7 +288,6 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                 </TabUnstyled>
               ))}
             </TabsListUnstyled>
-
             {chapterLists.map((chapter, idx) => (
               <TabPanelUnstyled
                 value={idx}
@@ -309,10 +295,10 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                 key={chapter.title}
                 className={styles["chapter-list"]}
               >
-                {chapter.list.map((item) => (
+                {chapter.list.map((item, i) => (
                   <li key={item.id}>
                     <Link href={`/novel/${item.uri}`} title={item.name}>
-                      <i>1</i>
+                      <i>{idx * 100 + i + 1}</i>
                       <strong>{item.name}</strong>
                       <small>1yr</small>
                     </Link>
@@ -321,7 +307,6 @@ const Novel: NextPage<NovelPageProps> = (props) => {
               </TabPanelUnstyled>
             ))}
           </TabsUnstyled>
-          {/* )} */}
         </TabPanelUnstyled>
       </TabsUnstyled>
     </main>

pages/novels/[genre].tsx

@@ -11,7 +11,6 @@ import NovelItem from "components/NovelItem";
 
 import styles from "styles/genre.module.scss";
 import useStore from "libs/hooks/useStore";
-import Head from "next/head";
 import { SeoHead, SeoHeadConfig } from "components/SeoHead";
 
 const Genre = () => {
@@ -23,17 +22,18 @@ const Genre = () => {
   const store = useContext(Context);
   const currentName = useMemo(() => {
     const item = store.genre.find((item) => item.uri === query.genre);
-    return item ? item.name : "";
+    return item ? item.name : "All";
   }, [query.genre, store.genre]);
 
   const seoConfig: SeoHeadConfig = useMemo(() => {
+    // const genreName =
     return {
       title: `${currentName} Novels - ${siteConfig.siteName}`,
-      description: ``,
+      description: `Explore ${currentName} Web Novels on NovelDit. Online Reading ${currentName} Web Novels for Free!`,
       keywords: `${[
-        `${currentName || "All"} stories`,
-        `${currentName || "All"} novels`,
-        `read ${currentName || "All"} novels`,
+        `${currentName} stories`,
+        `${currentName} novels`,
+        `read ${currentName} novels`,
         siteConfig.keywords,
         siteConfig.siteName,
       ].join(", ")}`,
@@ -54,7 +54,7 @@ const Genre = () => {
             {
               "@type": "ListItem",
               position: 2,
-              name: "Novels",
+              name: "All Novels",
               item: `https://${siteConfig.host}/novels`,
             },
             ...(query.genre

styles/error.module.scss

@@ -21,10 +21,12 @@
   .main {
     @apply w-full h-full flex flex-col justify-center items-center bg-gradient-to-r from-black/40 to-black/50;
     h1 {
-      @apply text-9xl font-black mb-5 font-sans;
+      @apply text-7xl font-black mb-2 font-sans;
+      @apply lg:text-9xl mb-5;
     }
     h2 {
-      @apply text-5xl font-black my-5;
+      @apply text-2xl font-black mb-5;
+      @apply lg:text-5xl lg:my-5;
     }
     .btn {
       @apply mt-5;

styles/globals.scss

@@ -384,8 +384,10 @@
 }
 .tabs {
   @apply border-b border-slate-200 space-x-6 flex whitespace-nowrap dark:border-slate-200/5;
+  @apply overflow-x-auto snap-x scrollbar:h-px scrollbar:w-px scrollbar-track:bg-slate-100 scrollbar-thumb:bg-slate-300;
+  @apply dark:scrollbar-track:bg-slate-800  dark:scrollbar-thumb:bg-slate-700;
   .tab {
-    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 -mb-px text-slate-900 border-transparent hover:border-slate-300 dark:text-slate-200 dark:hover:border-slate-700;
+    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 text-slate-900 border-transparent hover:border-slate-300 dark:text-slate-200 dark:hover:border-slate-700  snap-start;
     &.active,
     &.Mui-selected {
       @apply text-sky-500 border-current;

tailwind.config.js

@@ -81,197 +81,197 @@ module.exports = {
       16: "16",
     },
     extend: {
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            maxWidth: "none",
-            color: theme("colors.slate.700"),
-            hr: {
-              borderColor: theme("colors.slate.100"),
-              marginTop: "3em",
-              marginBottom: "3em",
-            },
-            "h1, h2, h3": {
-              letterSpacing: "-0.025em",
-            },
-            h2: {
-              marginBottom: `${16 / 24}em`,
-            },
-            h3: {
-              marginTop: "2.4em",
-              lineHeight: "1.4",
-            },
-            h4: {
-              marginTop: "2em",
-              fontSize: "1.125em",
-            },
-            "h2 small, h3 small, h4 small": {
-              fontFamily: theme("fontFamily.mono").join(", "),
-              color: theme("colors.slate.500"),
-              fontWeight: 500,
-            },
-            "h2 small": {
-              fontSize: theme("fontSize.lg")[0],
-              ...theme("fontSize.lg")[1],
-            },
-            "h3 small": {
-              fontSize: theme("fontSize.base")[0],
-              ...theme("fontSize.base")[1],
-            },
-            "h4 small": {
-              fontSize: theme("fontSize.sm")[0],
-              ...theme("fontSize.sm")[1],
-            },
-            "h2, h3, h4": {
-              "scroll-margin-top": "var(--scroll-mt)",
-            },
-            ul: {
-              listStyleType: "none",
-              paddingLeft: 0,
-            },
-            "ul > li": {
-              position: "relative",
-              paddingLeft: "1.75em",
-            },
-            "ul > li::before": {
-              content: '""',
-              width: "0.75em",
-              height: "0.125em",
-              position: "absolute",
-              top: "calc(0.875em - 0.0625em)",
-              left: 0,
-              borderRadius: "999px",
-              backgroundColor: theme("colors.slate.300"),
-            },
-            a: {
-              fontWeight: theme("fontWeight.semibold"),
-              textDecoration: "none",
-              borderBottom: `1px solid ${theme("colors.sky.300")}`,
-            },
-            "a:hover": {
-              borderBottomWidth: "2px",
-            },
-            "a code": {
-              color: "inherit",
-              fontWeight: "inherit",
-            },
-            strong: {
-              color: theme("colors.slate.900"),
-              fontWeight: theme("fontWeight.semibold"),
-            },
-            "a strong": {
-              color: "inherit",
-              fontWeight: "inherit",
-            },
-            kbd: {
-              background: theme("colors.slate.100"),
-              borderWidth: "1px",
-              borderColor: theme("colors.slate.200"),
-              padding: "0.125em 0.25em",
-              color: theme("colors.slate.700"),
-              fontWeight: 500,
-              fontSize: "0.875em",
-              fontVariantLigatures: "none",
-              borderRadius: "4px",
-              margin: "0 1px",
-            },
-            code: {
-              fontWeight: theme("fontWeight.medium"),
-              fontVariantLigatures: "none",
-            },
-            pre: {
-              color: theme("colors.slate.50"),
-              borderRadius: theme("borderRadius.xl"),
-              padding: theme("padding.5"),
-              boxShadow: theme("boxShadow.md"),
-              display: "flex",
-              marginTop: `${20 / 14}em`,
-              marginBottom: `${32 / 14}em`,
-            },
-            "p + pre": {
-              marginTop: `${-4 / 14}em`,
-            },
-            "pre + pre": {
-              marginTop: `${-16 / 14}em`,
-            },
-            "pre code": {
-              flex: "none",
-              minWidth: "100%",
-            },
-            table: {
-              fontSize: theme("fontSize.sm")[0],
-              lineHeight: theme("fontSize.sm")[1].lineHeight,
-            },
-            thead: {
-              color: theme("colors.slate.700"),
-              borderBottomColor: theme("colors.slate.200"),
-            },
-            "thead th": {
-              paddingTop: 0,
-              fontWeight: theme("fontWeight.semibold"),
-            },
-            "tbody tr": {
-              borderBottomColor: theme("colors.slate.100"),
-            },
-            "tbody tr:last-child": {
-              borderBottomWidth: "1px",
-            },
-            "tbody code": {
-              fontSize: theme("fontSize.xs")[0],
-            },
-            "figure figcaption": {
-              textAlign: "center",
-              fontStyle: "italic",
-            },
-            "figure > figcaption": {
-              marginTop: `${12 / 14}em`,
-            },
-          },
-        },
-        dark: {
-          css: {
-            color: theme("colors.slate.400"),
-            "h2, h3, h4, thead th": {
-              color: theme("colors.slate.200"),
-            },
-            "h2 small, h3 small, h4 small": {
-              color: theme("colors.slate.400"),
-            },
-            kbd: {
-              background: theme("colors.slate.700"),
-              borderColor: theme("colors.slate.600"),
-              color: theme("colors.slate.200"),
-            },
-            code: {
-              color: theme("colors.slate.200"),
-            },
-            hr: {
-              borderColor: theme("colors.slate.200"),
-              opacity: "0.05",
-            },
-            pre: {
-              boxShadow: "inset 0 0 0 1px rgb(255 255 255 / 0.1)",
-            },
-            a: {
-              color: theme("colors.white"),
-              borderBottomColor: theme("colors.sky.400"),
-            },
-            strong: {
-              color: theme("colors.slate.200"),
-            },
-            thead: {
-              color: theme("colors.slate.300"),
-              borderBottomColor: "rgb(148 163 184 / 0.2)",
-            },
-            "tbody tr": {
-              borderBottomColor: "rgb(148 163 184 / 0.1)",
-            },
-            blockQuote: {
-              color: theme("colors.white"),
-            },
-          },
-        },
-      }),
+      // typography: (theme) => ({
+      //   DEFAULT: {
+      //     css: {
+      //       maxWidth: "none",
+      //       color: theme("colors.slate.700"),
+      //       hr: {
+      //         borderColor: theme("colors.slate.100"),
+      //         marginTop: "3em",
+      //         marginBottom: "3em",
+      //       },
+      //       "h1, h2, h3": {
+      //         letterSpacing: "-0.025em",
+      //       },
+      //       h2: {
+      //         marginBottom: `${16 / 24}em`,
+      //       },
+      //       h3: {
+      //         marginTop: "2.4em",
+      //         lineHeight: "1.4",
+      //       },
+      //       h4: {
+      //         marginTop: "2em",
+      //         fontSize: "1.125em",
+      //       },
+      //       "h2 small, h3 small, h4 small": {
+      //         fontFamily: theme("fontFamily.mono").join(", "),
+      //         color: theme("colors.slate.500"),
+      //         fontWeight: 500,
+      //       },
+      //       "h2 small": {
+      //         fontSize: theme("fontSize.lg")[0],
+      //         ...theme("fontSize.lg")[1],
+      //       },
+      //       "h3 small": {
+      //         fontSize: theme("fontSize.base")[0],
+      //         ...theme("fontSize.base")[1],
+      //       },
+      //       "h4 small": {
+      //         fontSize: theme("fontSize.sm")[0],
+      //         ...theme("fontSize.sm")[1],
+      //       },
+      //       "h2, h3, h4": {
+      //         "scroll-margin-top": "var(--scroll-mt)",
+      //       },
+      //       ul: {
+      //         listStyleType: "none",
+      //         paddingLeft: 0,
+      //       },
+      //       "ul > li": {
+      //         position: "relative",
+      //         paddingLeft: "1.75em",
+      //       },
+      //       "ul > li::before": {
+      //         content: '""',
+      //         width: "0.75em",
+      //         height: "0.125em",
+      //         position: "absolute",
+      //         top: "calc(0.875em - 0.0625em)",
+      //         left: 0,
+      //         borderRadius: "999px",
+      //         backgroundColor: theme("colors.slate.300"),
+      //       },
+      //       a: {
+      //         fontWeight: theme("fontWeight.semibold"),
+      //         textDecoration: "none",
+      //         borderBottom: `1px solid ${theme("colors.sky.300")}`,
+      //       },
+      //       "a:hover": {
+      //         borderBottomWidth: "2px",
+      //       },
+      //       "a code": {
+      //         color: "inherit",
+      //         fontWeight: "inherit",
+      //       },
+      //       strong: {
+      //         color: theme("colors.slate.900"),
+      //         fontWeight: theme("fontWeight.semibold"),
+      //       },
+      //       "a strong": {
+      //         color: "inherit",
+      //         fontWeight: "inherit",
+      //       },
+      //       kbd: {
+      //         background: theme("colors.slate.100"),
+      //         borderWidth: "1px",
+      //         borderColor: theme("colors.slate.200"),
+      //         padding: "0.125em 0.25em",
+      //         color: theme("colors.slate.700"),
+      //         fontWeight: 500,
+      //         fontSize: "0.875em",
+      //         fontVariantLigatures: "none",
+      //         borderRadius: "4px",
+      //         margin: "0 1px",
+      //       },
+      //       code: {
+      //         fontWeight: theme("fontWeight.medium"),
+      //         fontVariantLigatures: "none",
+      //       },
+      //       pre: {
+      //         color: theme("colors.slate.50"),
+      //         borderRadius: theme("borderRadius.xl"),
+      //         padding: theme("padding.5"),
+      //         boxShadow: theme("boxShadow.md"),
+      //         display: "flex",
+      //         marginTop: `${20 / 14}em`,
+      //         marginBottom: `${32 / 14}em`,
+      //       },
+      //       "p + pre": {
+      //         marginTop: `${-4 / 14}em`,
+      //       },
+      //       "pre + pre": {
+      //         marginTop: `${-16 / 14}em`,
+      //       },
+      //       "pre code": {
+      //         flex: "none",
+      //         minWidth: "100%",
+      //       },
+      //       table: {
+      //         fontSize: theme("fontSize.sm")[0],
+      //         lineHeight: theme("fontSize.sm")[1].lineHeight,
+      //       },
+      //       thead: {
+      //         color: theme("colors.slate.700"),
+      //         borderBottomColor: theme("colors.slate.200"),
+      //       },
+      //       "thead th": {
+      //         paddingTop: 0,
+      //         fontWeight: theme("fontWeight.semibold"),
+      //       },
+      //       "tbody tr": {
+      //         borderBottomColor: theme("colors.slate.100"),
+      //       },
+      //       "tbody tr:last-child": {
+      //         borderBottomWidth: "1px",
+      //       },
+      //       "tbody code": {
+      //         fontSize: theme("fontSize.xs")[0],
+      //       },
+      //       "figure figcaption": {
+      //         textAlign: "center",
+      //         fontStyle: "italic",
+      //       },
+      //       "figure > figcaption": {
+      //         marginTop: `${12 / 14}em`,
+      //       },
+      //     },
+      //   },
+      //   dark: {
+      //     css: {
+      //       color: theme("colors.slate.400"),
+      //       "h2, h3, h4, thead th": {
+      //         color: theme("colors.slate.200"),
+      //       },
+      //       "h2 small, h3 small, h4 small": {
+      //         color: theme("colors.slate.400"),
+      //       },
+      //       kbd: {
+      //         background: theme("colors.slate.700"),
+      //         borderColor: theme("colors.slate.600"),
+      //         color: theme("colors.slate.200"),
+      //       },
+      //       code: {
+      //         color: theme("colors.slate.200"),
+      //       },
+      //       hr: {
+      //         borderColor: theme("colors.slate.200"),
+      //         opacity: "0.05",
+      //       },
+      //       pre: {
+      //         boxShadow: "inset 0 0 0 1px rgb(255 255 255 / 0.1)",
+      //       },
+      //       a: {
+      //         color: theme("colors.white"),
+      //         borderBottomColor: theme("colors.sky.400"),
+      //       },
+      //       strong: {
+      //         color: theme("colors.slate.200"),
+      //       },
+      //       thead: {
+      //         color: theme("colors.slate.300"),
+      //         borderBottomColor: "rgb(148 163 184 / 0.2)",
+      //       },
+      //       "tbody tr": {
+      //         borderBottomColor: "rgb(148 163 184 / 0.1)",
+      //       },
+      //       blockQuote: {
+      //         color: theme("colors.white"),
+      //       },
+      //     },
+      //   },
+      // }),
       fontFamily: {
         sans: [
           "Nunito Sans",