udpate

components/common/Footer/index.tsx

@@ -1,18 +1,27 @@
 import Link from "next/link";
+import useStore from "libs/hooks/useStore";
 
 export default function Footer() {
+  const {
+    siteConfig: { siteName, host },
+  } = useStore();
+
   return (
     <footer className="footer">
       <div className="container">
-        <Link href="/" className="logo" title="NovelDit">
-          <img src="/logo.svg" alt="NovelDit" />
+        <Link href="/" className="logo" title={siteName}>
+          <img src="/logo.svg" alt={siteName} />
           <span>NovelDit</span>
         </Link>
-        <p className="copyright">© 2022 NovelDit Inc. All rights reserved.</p>
+        <p className="copyright">
+          Copyright ©{" "}
+          <Link href={`https://${host}`} title={siteName}>
+            {siteName}
+          </Link>{" "}
+          {new Date().getFullYear()}. All rights reserved.
+        </p>
         <div className="links">
-          <a href="/privacy-policy">Privacy policy</a>
-          <div className="divider"></div>
-          <a href="/changelog">Changelog</a>
+          <Link href="/privacy-policy">Privacy policy</Link>
         </div>
       </div>
     </footer>

pages/novel/[slug]/[chapter].tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import Link from "next/link";
-import Head from "next/head";
 import { useRouter } from "next/router";
 import { GetServerSideProps } from "next";
 import { ReactElement, useEffect, useMemo, useState } from "react";
@@ -14,11 +13,11 @@ import Error from "pages/_error";
 import Toc from "components/novel/Toc";
 import Toolbar from "components/novel/Toolbar";
 import Settings from "components/novel/Settings";
+import { SeoHead, SeoHeadConfig } from "components/SeoHead";
 
 import type { NextPageWithLayout } from "pages/_app";
 
 import styles from "styles/chapter.module.scss";
-import { SeoHead, SeoHeadConfig } from "components/SeoHead";
 
 const Chapter: NextPageWithLayout<NovelPageProps> = (props) => {
   const { statusCode } = props;

pages/novel/[slug]/index.tsx

@@ -14,9 +14,9 @@ import useGet from "libs/hooks/useGet";
 import errorProps from "libs/errorProps";
 import useStore from "libs/hooks/useStore";
 import NovelCover from "components/NovelCover";
+import { SeoHead, SeoHeadConfig } from "components/SeoHead";
 
 import styles from "styles/novel-info.module.scss";
-import { SeoHead, SeoHeadConfig } from "components/SeoHead";
 
 interface NovelPageProps {
   detail?: Detail;
@@ -211,10 +211,10 @@ const Novel: NextPage<NovelPageProps> = (props) => {
             <div className={styles["nove-info-body"]}>
               <h1>
                 {detail.name}
-                <small>Completed</small>
+                {/* <small>{detail.status}</small> */}
               </h1>
               <h2>
-                {detail.genres && detail.genres.length > 0 ? (
+                {/* {detail.genres && detail.genres.length > 0 ? (
                   <Link
                     title={detail.genres[0].name}
                     href={`/novels/${detail.genres[0].uri}`}
@@ -225,7 +225,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                     </svg>
                     <span>{detail.genres[0].name}</span>
                   </Link>
-                ) : null}
+                ) : null} */}
                 <strong>
                   <svg>
                     <title>Chapters: </title>
@@ -233,6 +233,20 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                   </svg>
                   <span>{chapters.chapters.length} Chapters</span>
                 </strong>
+                <strong>
+                  <svg>
+                    <title>Author: </title>
+                    <use xlinkHref="/icons.svg#person"></use>
+                  </svg>
+                  <span>{detail.author}</span>
+                </strong>
+                <strong>
+                  <svg>
+                    <title>Status: </title>
+                    <use xlinkHref="/icons.svg#update"></use>
+                  </svg>
+                  <span>{detail.status}</span>
+                </strong>
                 {/* <strong>
                   <svg>
                     <use xlinkHref="/icons.svg#eye"></use>
@@ -245,7 +259,8 @@ const Novel: NextPage<NovelPageProps> = (props) => {
                   href={`/novel/${chapters.chapters[0].uri}`}
                   className={styles["button"]}
                 >
-                  Start Reading
+                  <strong>Start Reading</strong>
+                  <span>{chapters.chapters[0].name}</span>
                 </Link>
               </div>
             </div>
@@ -262,7 +277,7 @@ const Novel: NextPage<NovelPageProps> = (props) => {
           </TabUnstyled>
         </TabsListUnstyled>
         <TabPanelUnstyled value={0}>
-          <h2 className="sub-title">Tags</h2>
+          <h2 className="sub-title">Genres</h2>
           <div className="tags">
             {detail.genres.map((item) => (
               <Link

pages/privacy-policy.tsx

@@ -0,0 +1,498 @@
+import Link from "next/link";
+
+import useStore from "libs/hooks/useStore";
+import styles from "styles/chapter.module.scss";
+
+const PrivacyPolicy = () => {
+  const {
+    siteConfig: { siteName, host },
+  } = useStore();
+
+  const url = `https://${host}`;
+
+  return (
+    <main className={styles["chapter-main"]}>
+      <div className={styles["chapter-page"]}>
+        <h1>Privacy Policy</h1>
+        <p>Last updated: November 14, 2022</p>
+        <p>
+          This Privacy Policy describes Our policies and procedures on the
+          collection, use and disclosure of Your information when You use the
+          Service and tells You about Your privacy rights and how the law
+          protects You.
+        </p>
+        <p>
+          We use Your Personal data to provide and improve the Service. By using
+          the Service, You agree to the collection and use of information in
+          accordance with this Privacy Policy.
+        </p>
+        <h1>Interpretation and Definitions</h1>
+        <h2>Interpretation</h2>
+        <p>
+          The words of which the initial letter is capitalized have meanings
+          defined under the following conditions. The following definitions
+          shall have the same meaning regardless of whether they appear in
+          singular or in plural.
+        </p>
+        <h2>Definitions</h2>
+        <p>For the purposes of this Privacy Policy:</p>
+        <ul>
+          <li>
+            <p>
+              <strong>Account</strong> means a unique account created for You to
+              access our Service or parts of our Service.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Company</strong> (referred to as either &quot;the
+              Company&quot;, &quot;We&quot;, &quot;Us&quot; or &quot;Our&quot;
+              in this Agreement) refers to {siteName}.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Cookies</strong> are small files that are placed on Your
+              computer, mobile device or any other device by a website,
+              containing the details of Your browsing history on that website
+              among its many uses.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Device</strong> means any device that can access the
+              Service such as a computer, a cellphone or a digital tablet.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Personal Data</strong> is any information that relates to
+              an identified or identifiable individual.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Service</strong> refers to the Website.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Service Provider</strong> means any natural or legal
+              person who processes the data on behalf of the Company. It refers
+              to third-party companies or individuals employed by the Company to
+              facilitate the Service, to provide the Service on behalf of the
+              Company, to perform services related to the Service or to assist
+              the Company in analyzing how the Service is used.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Usage Data</strong> refers to data collected
+              automatically, either generated by the use of the Service or from
+              the Service infrastructure itself (for example, the duration of a
+              page visit).
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Website</strong> refers to {siteName}, accessible from{" "}
+              <Link href={url} target="_blank">
+                {url}
+              </Link>
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>You</strong> means the individual accessing or using the
+              Service, or the company, or other legal entity on behalf of which
+              such individual is accessing or using the Service, as applicable.
+            </p>
+          </li>
+        </ul>
+        <h1>Collecting and Using Your Personal Data</h1>
+        <h2>Types of Data Collected</h2>
+        <h3>Personal Data</h3>
+        <p>
+          While using Our Service, We may ask You to provide Us with certain
+          personally identifiable information that can be used to contact or
+          identify You. Personally identifiable information may include, but is
+          not limited to:
+        </p>
+        <ul>
+          <li>Usage Data</li>
+        </ul>
+        <h3>Usage Data</h3>
+        <p>Usage Data is collected automatically when using the Service.</p>
+        <p>
+          Usage Data may include information such as Your Device&apos;s Internet
+          Protocol address (e.g. IP address), browser type, browser version, the
+          pages of our Service that You visit, the time and date of Your visit,
+          the time spent on those pages, unique device identifiers and other
+          diagnostic data.
+        </p>
+        <p>
+          When You access the Service by or through a mobile device, We may
+          collect certain information automatically, including, but not limited
+          to, the type of mobile device You use, Your mobile device unique ID,
+          the IP address of Your mobile device, Your mobile operating system,
+          the type of mobile Internet browser You use, unique device identifiers
+          and other diagnostic data.
+        </p>
+        <p>
+          We may also collect information that Your browser sends whenever You
+          visit our Service or when You access the Service by or through a
+          mobile device.
+        </p>
+        <h3>Tracking Technologies and Cookies</h3>
+        <p>
+          We use Cookies and similar tracking technologies to track the activity
+          on Our Service and store certain information. Tracking technologies
+          used are beacons, tags, and scripts to collect and track information
+          and to improve and analyze Our Service. The technologies We use may
+          include:
+        </p>
+        <ul>
+          <li>
+            <strong>Cookies or Browser Cookies.</strong> A cookie is a small
+            file placed on Your Device. You can instruct Your browser to refuse
+            all Cookies or to indicate when a Cookie is being sent. However, if
+            You do not accept Cookies, You may not be able to use some parts of
+            our Service. Unless you have adjusted Your browser setting so that
+            it will refuse Cookies, our Service may use Cookies.
+          </li>
+          <li>
+            <strong>Web Beacons.</strong> Certain sections of our Service and
+            our emails may contain small electronic files known as web beacons
+            (also referred to as clear gifs, pixel tags, and single-pixel gifs)
+            that permit the Company, for example, to count users who have
+            visited those pages or opened an email and for other related website
+            statistics (for example, recording the popularity of a certain
+            section and verifying system and server integrity).
+          </li>
+        </ul>
+        <p>
+          Cookies can be &quot;Persistent&quot; or &quot;Session&quot; Cookies.
+          Persistent Cookies remain on Your personal computer or mobile device
+          when You go offline, while Session Cookies are deleted as soon as You
+          close Your web browser. Learn more about cookies on the{" "}
+          <Link
+            href="https://www.freeprivacypolicy.com/blog/sample-privacy-policy-template/#Use_Of_Cookies_And_Tracking"
+            target="_blank"
+          >
+            Free Privacy Policy website
+          </Link>{" "}
+          article.
+        </p>
+        <p>
+          We use both Session and Persistent Cookies for the purposes set out
+          below:
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Necessary / Essential Cookies</strong>
+            </p>
+            <p>Type: Session Cookies</p>
+            <p>Administered by: Us</p>
+            <p>
+              Purpose: These Cookies are essential to provide You with services
+              available through the Website and to enable You to use some of its
+              features. They help to authenticate users and prevent fraudulent
+              use of user accounts. Without these Cookies, the services that You
+              have asked for cannot be provided, and We only use these Cookies
+              to provide You with those services.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Cookies Policy / Notice Acceptance Cookies</strong>
+            </p>
+            <p>Type: Persistent Cookies</p>
+            <p>Administered by: Us</p>
+            <p>
+              Purpose: These Cookies identify if users have accepted the use of
+              cookies on the Website.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Functionality Cookies</strong>
+            </p>
+            <p>Type: Persistent Cookies</p>
+            <p>Administered by: Us</p>
+            <p>
+              Purpose: These Cookies allow us to remember choices You make when
+              You use the Website, such as remembering your login details or
+              language preference. The purpose of these Cookies is to provide
+              You with a more personal experience and to avoid You having to
+              re-enter your preferences every time You use the Website.
+            </p>
+          </li>
+        </ul>
+        <p>
+          For more information about the cookies we use and your choices
+          regarding cookies, please visit our Cookies Policy or the Cookies
+          section of our Privacy Policy.
+        </p>
+        <h2>Use of Your Personal Data</h2>
+        <p>The Company may use Personal Data for the following purposes:</p>
+        <ul>
+          <li>
+            <p>
+              <strong>To provide and maintain our Service</strong>, including to
+              monitor the usage of our Service.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>To manage Your Account:</strong> to manage Your
+              registration as a user of the Service. The Personal Data You
+              provide can give You access to different functionalities of the
+              Service that are available to You as a registered user.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>For the performance of a contract:</strong> the
+              development, compliance and undertaking of the purchase contract
+              for the products, items or services You have purchased or of any
+              other contract with Us through the Service.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>To contact You:</strong> To contact You by email,
+              telephone calls, SMS, or other equivalent forms of electronic
+              communication, such as a mobile application&apos;s push
+              notifications regarding updates or informative communications
+              related to the functionalities, products or contracted services,
+              including the security updates, when necessary or reasonable for
+              their implementation.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>To provide You</strong> with news, special offers and
+              general information about other goods, services and events which
+              we offer that are similar to those that you have already purchased
+              or enquired about unless You have opted not to receive such
+              information.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>To manage Your requests:</strong> To attend and manage
+              Your requests to Us.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>For business transfers:</strong> We may use Your
+              information to evaluate or conduct a merger, divestiture,
+              restructuring, reorganization, dissolution, or other sale or
+              transfer of some or all of Our assets, whether as a going concern
+              or as part of bankruptcy, liquidation, or similar proceeding, in
+              which Personal Data held by Us about our Service users is among
+              the assets transferred.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>For other purposes</strong>: We may use Your information
+              for other purposes, such as data analysis, identifying usage
+              trends, determining the effectiveness of our promotional campaigns
+              and to evaluate and improve our Service, products, services,
+              marketing and your experience.
+            </p>
+          </li>
+        </ul>
+        <p>
+          We may share Your personal information in the following situations:
+        </p>
+        <ul>
+          <li>
+            <strong>With Service Providers:</strong> We may share Your personal
+            information with Service Providers to monitor and analyze the use of
+            our Service, to contact You.
+          </li>
+          <li>
+            <strong>For business transfers:</strong> We may share or transfer
+            Your personal information in connection with, or during negotiations
+            of, any merger, sale of Company assets, financing, or acquisition of
+            all or a portion of Our business to another company.
+          </li>
+          <li>
+            <strong>With Affiliates:</strong> We may share Your information with
+            Our affiliates, in which case we will require those affiliates to
+            honor this Privacy Policy. Affiliates include Our parent company and
+            any other subsidiaries, joint venture partners or other companies
+            that We control or that are under common control with Us.
+          </li>
+          <li>
+            <strong>With business partners:</strong> We may share Your
+            information with Our business partners to offer You certain
+            products, services or promotions.
+          </li>
+          <li>
+            <strong>With other users:</strong> when You share personal
+            information or otherwise interact in the public areas with other
+            users, such information may be viewed by all users and may be
+            publicly distributed outside.
+          </li>
+          <li>
+            <strong>With Your consent</strong>: We may disclose Your personal
+            information for any other purpose with Your consent.
+          </li>
+        </ul>
+        <h2>Retention of Your Personal Data</h2>
+        <p>
+          The Company will retain Your Personal Data only for as long as is
+          necessary for the purposes set out in this Privacy Policy. We will
+          retain and use Your Personal Data to the extent necessary to comply
+          with our legal obligations (for example, if we are required to retain
+          your data to comply with applicable laws), resolve disputes, and
+          enforce our legal agreements and policies.
+        </p>
+        <p>
+          The Company will also retain Usage Data for internal analysis
+          purposes. Usage Data is generally retained for a shorter period of
+          time, except when this data is used to strengthen the security or to
+          improve the functionality of Our Service, or We are legally obligated
+          to retain this data for longer time periods.
+        </p>
+        <h2>Transfer of Your Personal Data</h2>
+        <p>
+          Your information, including Personal Data, is processed at the
+          Company&apos;s operating offices and in any other places where the
+          parties involved in the processing are located. It means that this
+          information may be transferred to — and maintained on — computers
+          located outside of Your state, province, country or other governmental
+          jurisdiction where the data protection laws may differ than those from
+          Your jurisdiction.
+        </p>
+        <p>
+          Your consent to this Privacy Policy followed by Your submission of
+          such information represents Your agreement to that transfer.
+        </p>
+        <p>
+          The Company will take all steps reasonably necessary to ensure that
+          Your data is treated securely and in accordance with this Privacy
+          Policy and no transfer of Your Personal Data will take place to an
+          organization or a country unless there are adequate controls in place
+          including the security of Your data and other personal information.
+        </p>
+        <h2>Delete Your Personal Data</h2>
+        <p>
+          You have the right to delete or request that We assist in deleting the
+          Personal Data that We have collected about You.
+        </p>
+        <p>
+          Our Service may give You the ability to delete certain information
+          about You from within the Service.
+        </p>
+        <p>
+          You may update, amend, or delete Your information at any time by
+          signing in to Your Account, if you have one, and visiting the account
+          settings section that allows you to manage Your personal information.
+          You may also contact Us to request access to, correct, or delete any
+          personal information that You have provided to Us.
+        </p>
+        <p>
+          Please note, however, that We may need to retain certain information
+          when we have a legal obligation or lawful basis to do so.
+        </p>
+        <h2>Disclosure of Your Personal Data</h2>
+        <h3>Business Transactions</h3>
+        <p>
+          If the Company is involved in a merger, acquisition or asset sale,
+          Your Personal Data may be transferred. We will provide notice before
+          Your Personal Data is transferred and becomes subject to a different
+          Privacy Policy.
+        </p>
+        <h3>Law enforcement</h3>
+        <p>
+          Under certain circumstances, the Company may be required to disclose
+          Your Personal Data if required to do so by law or in response to valid
+          requests by public authorities (e.g. a court or a government agency).
+        </p>
+        <h3>Other legal requirements</h3>
+        <p>
+          The Company may disclose Your Personal Data in the good faith belief
+          that such action is necessary to:
+        </p>
+        <ul>
+          <li>Comply with a legal obligation</li>
+          <li>Protect and defend the rights or property of the Company</li>
+          <li>
+            Prevent or investigate possible wrongdoing in connection with the
+            Service
+          </li>
+          <li>
+            Protect the personal safety of Users of the Service or the public
+          </li>
+          <li>Protect against legal liability</li>
+        </ul>
+        <h2>Security of Your Personal Data</h2>
+        <p>
+          The security of Your Personal Data is important to Us, but remember
+          that no method of transmission over the Internet, or method of
+          electronic storage is 100% secure. While We strive to use commercially
+          acceptable means to protect Your Personal Data, We cannot guarantee
+          its absolute security.
+        </p>
+        <h1>Children&apos;s Privacy</h1>
+        <p>
+          Our Service does not address anyone under the age of 13. We do not
+          knowingly collect personally identifiable information from anyone
+          under the age of 13. If You are a parent or guardian and You are aware
+          that Your child has provided Us with Personal Data, please contact Us.
+          If We become aware that We have collected Personal Data from anyone
+          under the age of 13 without verification of parental consent, We take
+          steps to remove that information from Our servers.
+        </p>
+        <p>
+          If We need to rely on consent as a legal basis for processing Your
+          information and Your country requires consent from a parent, We may
+          require Your parent&apos;s consent before We collect and use that
+          information.
+        </p>
+        <h1>Links to Other Websites</h1>
+        <p>
+          Our Service may contain links to other websites that are not operated
+          by Us. If You click on a third party link, You will be directed to
+          that third party&apos;s site. We strongly advise You to review the
+          Privacy Policy of every site You visit.
+        </p>
+        <p>
+          We have no control over and assume no responsibility for the content,
+          privacy policies or practices of any third party sites or services.
+        </p>
+        <h1>Changes to this Privacy Policy</h1>
+        <p>
+          We may update Our Privacy Policy from time to time. We will notify You
+          of any changes by posting the new Privacy Policy on this page.
+        </p>
+        <p>
+          We will let You know via email and/or a prominent notice on Our
+          Service, prior to the change becoming effective and update the
+          &quot;Last updated&quot; date at the top of this Privacy Policy.
+        </p>
+        <p>
+          You are advised to review this Privacy Policy periodically for any
+          changes. Changes to this Privacy Policy are effective when they are
+          posted on this page.
+        </p>
+        {/* <h1>Contact Us</h1>
+        <p>
+          If you have any questions about this Privacy Policy, You can contact
+          us:
+        </p>
+        <ul>
+          <li>By email: ly.liyang521@gmail.com</li>
+        </ul> */}
+      </div>
+    </main>
+  );
+};
+
+export default PrivacyPolicy;

public/icons.svg

@@ -57,7 +57,13 @@
         <path d="M450.132791 39.305973c-15.722389-55.028362-94.334336-55.028362-110.056725 0L2.044697 943.343357c-7.861195 31.444779 7.861195 62.889557 31.444779 78.611946 31.444779 7.861195 62.889557-7.861195 78.611946-31.444779L222.158147 707.507518l353.753759 0 102.19553 275.141812c7.861195 31.444779 47.167168 47.167168 78.611946 31.444779 31.444779-7.861195 47.167168-47.167168 31.444779-78.611946L450.132791 39.305973zM261.46412 589.589598 395.104429 227.974645l133.640309 361.614953L261.46412 589.589598z"></path>
         <path d="M1196.946282 589.589598l-117.91792 0L1079.028362 471.671678c0-31.444779-23.583584-62.889557-62.889557-62.889557S961.110443 440.2269 961.110443 471.671678l0 117.91792-117.91792 0c-31.444779 0-62.889557 23.583584-62.889557 62.889557S811.747745 707.507518 851.053718 707.507518l117.91792 0 0 117.91792c0 31.444779 23.583584 62.889557 62.889557 62.889557s62.889557-23.583584 62.889557-62.889557L1094.750752 707.507518l117.91792 0C1236.252255 707.507518 1259.835839 683.923934 1259.835839 644.617961S1236.252255 589.589598 1196.946282 589.589598z"></path>
     </symbol>
-    <symbol id="close" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+    <symbol id="close" viewBox="0 0 24 24">
         <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
     </symbol>
+    <symbol id="update" viewBox="0 0 24 24">
+        <path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"></path>
+    </symbol>
+    <symbol id="person" viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
+    </symbol>
 </svg>

styles/chapter.module.scss

@@ -1,8 +1,8 @@
 .chapter-page {
   @apply w-full flex-1 py-5 px-5 bg-white;
-  @apply lg:w-0 lg:max-w-3xl lg:px-10 lg:border-x lg:border-x-gray-200;
+  @apply lg:w-0 lg:max-w-3xl lg:px-10 lg:border lg:border-gray-200;
   :global(.dark) & {
-    @apply bg-gray-800 border-x-gray-700;
+    @apply bg-gray-800 border-gray-700;
   }
 }
 .chapter-header {
@@ -17,21 +17,30 @@
   :global(.dark) & {
     @apply bg-gray-900;
   }
-}
-.novel {
-  @apply w-full;
   header {
     @apply mb-5;
   }
   h1 {
-    @apply text-3xl font-bold;
+    @apply text-3xl font-bold my-5;
   }
   h2 {
-    @apply text-2xl font-bold;
+    @apply text-2xl font-bold my-5;
+  }
+  h3 {
+    @apply text-xl font-bold my-5;
   }
   p {
     @apply my-[1em] leading-[1.5];
   }
+  ul {
+    @apply list-outside list-disc pl-8;
+    li{
+      @apply my-[1em];
+    }
+  }
+  .novel {
+    @apply w-full;
+  }
 }
 .toolbar {
   color-scheme: dark;
@@ -57,7 +66,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 pb-2 items-center justify-between border-b border-b-slate-700;
+    @apply flex text-base mb-2 pb-2 items-center justify-between border-b border-b-gray-700;
     .btn-close {
       @apply w-6 h-6;
       .icon-close {
@@ -96,13 +105,13 @@
         //   }
         // }
         // i {
-        //   @apply w-11 mr-1 flex-shrink-0 not-italic text-slate-400;
+        //   @apply w-11 mr-1 flex-shrink-0 not-italic text-gray-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 text-gray-400 ml-2;
         // }
         // &.current {
         //   a strong {

styles/globals.scss

@@ -3,63 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  // *,
-  // ::before,
-  // ::after {
-  //   color-scheme: light;
-
-  //   --color-bg-default: #f3f4f6;
-  //   --color-bg-default-alpha: rgba(243, 244, 246, 0.5);
-  //   --color-paper: #fff;
-  //   --color-paper-alpha: rgba(255, 255, 255, 0.5);
-
-  //   // primary
-  //   --color-primary: #1976d2;
-  //   // secondary
-  //   --color-secondary: #9c27b0;
-  //   // error
-  //   --color-error: #d32f2f;
-  //   // warning
-  //   --color-warning: #ed6c02;
-  //   // info
-  //   --color-info: #0288d1;
-  //   // success
-  //   --color-success: #2e7d32;
-  //   --color-gray-light: #808080;
-  //   --color-gray-dark: #29292e;
-  // }
-  // .dark *,
-  // .dark ::before,
-  // .dark ::after {
-  //   color-scheme: dark;
-
-  //   --color-bg-default: #0a1929; // #18181b;
-  //   --color-paper: rgb(39, 39, 42);
-  //   --color-paper-alpha: rgba(39, 39, 42, 0.5);
-
-  //   // primary
-  //   --color-primary: #90caf9;
-  //   // secondary
-  //   --color-secondary: #ce93d8;
-  //   // error
-  //   --color-error: #f44336;
-  //   // warning
-  //   --color-warning: #ffa726;
-  //   // info
-  //   --color-info: #29b6f6;
-  //   // success
-  //   --color-success: #66bb6a;
-
-  //   --color-gray-light: #ffffff;
-  //   --color-gray-dark: #e0e0e0;
-  // }
-
-  // * {
-  //   /* @apply selection:bg-hb; */
-  //   /* @apply transition selection:bg-hb;
-  //     transition-timing-function: line; */
-  // }
-
   .dark {
     color-scheme: dark;
   }
@@ -74,13 +17,9 @@
   }
 
   body {
-    // @apply bg-default text-gray-dark font-sans relative;
-    @apply font-sans min-h-full antialiased text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900;
+    @apply font-sans min-h-full antialiased text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;
   }
 
-  a {
-    // @apply text-gray-dark;
-  }
   svg {
     @apply fill-current;
   }
@@ -126,7 +65,7 @@
 }
 .header {
   // @apply sticky border-b py-2 shadow bg-paper-alpha backdrop-blur z-40 top-0;
-  @apply py-3 sticky top-0 z-40 w-full backdrop-blur flex-none  border-b border-slate-900/10 dark:border-slate-50/[0.06] bg-white/60  dark:bg-slate-900/75;
+  @apply py-3 sticky top-0 z-40 w-full backdrop-blur flex-none  border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/60  dark:bg-gray-900/75;
 
   .container {
     @apply flex justify-between items-center overflow-visible;
@@ -141,7 +80,7 @@
     }
   }
   .menu {
-    @apply hidden absolute left-0 top-full w-full py-5 bg-white dark:bg-slate-800; // bg-paper;
+    @apply hidden absolute left-0 top-full w-full py-5 bg-white dark:bg-gray-800; // bg-paper;
     @apply md:flex md:relative md:items-center md:p-0 md:bg-transparent md:dark:bg-transparent;
     nav {
       @apply flex-1;
@@ -153,15 +92,15 @@
       }
     }
     .menu-item {
-      @apply flex py-2 px-5 items-center text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200 hover:text-sky-500 dark:hover:text-sky-400; // text-gray-dark md:text-gray-light md:hover:text-primary;
+      @apply flex py-2 px-5 items-center text-sm leading-6 font-semibold text-gray-700 dark:text-gray-200 hover:text-sky-500 dark:hover:text-sky-400; // text-gray-dark md:text-gray-light md:hover:text-primary;
       svg {
         @apply mr-1 fill-current;
       }
     }
     .sub-menu {
       @apply hidden;
-      @apply absolute shadow-lg rounded-xl top-full bg-slate-100; // bg-default;
-      @apply text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:shadow dark:shadow-white/10 dark:highlight-white/10;
+      @apply absolute shadow-lg rounded-xl top-full bg-gray-100; // bg-default;
+      @apply text-gray-900 dark:bg-gray-800 dark:text-gray-400 dark:shadow dark:shadow-white/10 dark:highlight-white/10;
       &::before {
         content: "";
         // position: absolute;
@@ -172,7 +111,7 @@
         // border-right: 6px dashed transparent;
         // height: 0;
         // width: 0;
-        @apply w-0 h-0 absolute bottom-full left-[25px] border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[7px] border-b-slate-100 dark:border-b-slate-700;
+        @apply w-0 h-0 absolute bottom-full left-[25px] border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[7px] border-b-gray-100 dark:border-b-gray-700;
       }
       ul {
         @apply py-2 block rounded-l-lg whitespace-nowrap;
@@ -187,14 +126,14 @@
         }
       }
       .sub-menu-list {
-        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] rounded-r-lg py-2 px-4 bg-white dark:bg-slate-900 dark:highlight-white/10;
+        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] rounded-r-lg py-2 px-4 bg-white dark:bg-gray-900 dark:highlight-white/10;
         p {
           @apply flex flex-wrap;
           strong {
-            @apply block w-full py-1 px-4 text-slate-800 dark:text-slate-200;
+            @apply block w-full py-1 px-4 text-gray-800 dark:text-gray-200;
           }
           a {
-            @apply w-1/3 block py-1 px-4 rounded hover:bg-slate-100 dark:hover:bg-slate-800;
+            @apply w-1/3 block py-1 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-800;
           }
         }
       }
@@ -204,7 +143,7 @@
           @apply block py-3 px-4;
         }
         &:hover {
-          @apply bg-white dark:hover:bg-slate-900;
+          @apply bg-white dark:hover:bg-gray-900;
           .sub-menu-list {
             @apply block;
           }
@@ -291,7 +230,7 @@
   }
 }
 .novel-title {
-  @apply mt-5 mb-2 flex justify-between text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200;
+  @apply mt-5 mb-2 flex justify-between text-2xl sm:text-3xl font-extrabold text-gray-900 tracking-tight dark:text-gray-200;
 }
 .novel-list {
   @apply flex flex-wrap -mx-1.5 md:-mx-2 lg:-mx-4;
@@ -307,7 +246,7 @@
   }
 }
 .novel-item-title {
-  @apply line-clamp-2 text-xs font-bold leading-none my-1 lg:text-sm text-slate-700 dark:text-white;
+  @apply line-clamp-2 text-xs font-bold leading-none my-1 lg:text-sm text-gray-700 dark:text-white;
 }
 .novel-item-desc {
   @apply text-xs leading-none whitespace-nowrap text-ellipsis block overflow-hidden w-full;
@@ -383,11 +322,11 @@
   }
 }
 .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;
+  @apply border-b border-gray-200 space-x-6 flex whitespace-nowrap dark:border-gray-200/5;
+  @apply overflow-x-auto snap-x scrollbar:h-px scrollbar:w-px scrollbar-track:bg-gray-100 scrollbar-thumb:bg-gray-300;
+  @apply dark:scrollbar-track:bg-gray-800  dark:scrollbar-thumb:bg-gray-700;
   .tab {
-    @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;
+    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 text-gray-900 border-transparent hover:border-gray-300 dark:text-gray-200 dark:hover:border-gray-700  snap-start;
     &.active,
     &.Mui-selected {
       @apply text-sky-500 border-current;
@@ -432,9 +371,9 @@
 }
 
 .footer {
-  @apply mx-auto mt-10 w-full px-4 sm:px-6 lg:px-8 text-center;
+  @apply mt-10 border-t border-gray-900/5 dark:border-gray-100/5; // mx-auto w-full px-4 sm:px-6 lg:px-8 text-center;
   .container {
-    @apply border-t border-slate-900/5 py-10;
+    @apply py-10 flex items-center whitespace-nowrap gap-5 flex-wrap justify-center;
   }
 
   .logo {
@@ -446,13 +385,16 @@
       @apply hidden text-2xl font-bold md:block text-black dark:text-white;
     }
   }
+
   .copyright {
-    @apply mt-5 text-center text-sm leading-6 text-slate-500;
+    @apply text-center text-sm leading-6 text-gray-500;
   }
+
   .links {
-    @apply mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700;
+    @apply flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-400;
   }
+
   .divider {
-    @apply h-4 w-px bg-slate-500/20;
+    @apply h-4 w-px bg-gray-500/20;
   }
 }

styles/novel-info.module.scss

@@ -41,7 +41,13 @@
       @apply flex;
     }
     .button {
-      @apply block text-white px-4 py-2 rounded-md uppercase lg:text-lg select-none bg-gradient-to-r from-blue-600 to-blue-800 transition-all;
+      @apply block text-white text-center px-4 py-3 rounded-md  lg:text-lg select-none bg-gradient-to-r from-blue-600 to-blue-800 transition-all;
+      strong {
+        @apply block uppercase;
+      }
+      span {
+        @apply block text-xs leading-3 opacity-70;
+      }
       :global(.dark) & {
         @apply from-blue-600 to-blue-900;
       }
@@ -58,15 +64,15 @@
   @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;
+    @apply border-b text-sm lg:text-base border-b-gray-100;
     // counter-increment: chapter;
     :global(.dark) & {
-      @apply border-b-slate-700;
+      @apply border-b-gray-700;
     }
     a {
-      @apply flex w-full h-full py-2 hover:bg-slate-50;
+      @apply flex w-full h-full py-2 hover:bg-gray-50;
       :global(.dark) & {
-        @apply hover:bg-slate-800;
+        @apply hover:bg-gray-800;
       }
       &:hover {
         strong {
@@ -76,14 +82,14 @@
     }
 
     i {
-      @apply w-10 mr-1 flex-shrink-0 not-italic text-slate-400 ;
+      @apply w-10 mr-1 flex-shrink-0 not-italic text-gray-400;
     }
 
     strong {
       @apply block font-normal flex-1;
     }
     time {
-      @apply text-slate-400 ml-2;
+      @apply text-gray-400 ml-2;
     }
   }
 }

tailwind.config.js

@@ -1,40 +1,6 @@
 /** @type {import('tailwindcss').Config} */
-// const lineClamp = require("@tailwindcss/line-clamp");
 
-// module.exports = {
-//   content: [
-//     "./pages/**/*.{js,ts,jsx,tsx}",
-//     "./src/**/*.{js,ts,jsx,tsx}",
-//     "./components/**/*.{js,ts,jsx,tsx}",
-//   ],
-//   darkMode: "class",
-//   theme: {
-//     extend: {
-//       colors: {
-//         default: "var(--color-bg-default)",
-//         "default-alpha": "var(--color-bg-default-alpha)",
-//         paper: "var(--color-paper)",
-//         "paper-alpha": "var(--color-paper-alpha)",
-//         primary: "var(--color-primary)",
-//         secondary: "var(--color-secondary)",
-//         error: "var(--color-error)",
-//         warning: "var(--color-warning)",
-//         info: "var(--color-info)",
-//         success: "var(--color-success)",
-//         "gray-light": "var(--color-gray-light)",
-//         "gray-dark": "var(--color-gray-dark)",
-//       },
-//       fontFamily: {
-//         sans: [
-//           "Nunito Sans,SF Pro Text,SF Pro Icons,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif",
-//         ],
-//       },
-//     },
-//   },
-//   plugins: [lineClamp],
-// };
 const defaultTheme = require("tailwindcss/defaultTheme");
-// const svgToDataUri = require("mini-svg-data-uri");
 const {
   default: flattenColorPalette,
 } = require("tailwindcss/lib/util/flattenColorPalette");
@@ -81,197 +47,6 @@ 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"),
-      //       },
-      //     },
-      //   },
-      // }),
       fontFamily: {
         sans: [
           "Nunito Sans",
@@ -285,30 +60,6 @@ module.exports = {
         source: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
         "ubuntu-mono": ["Ubuntu Mono", ...defaultTheme.fontFamily.mono],
       },
-      spacing: {
-        18: "4.5rem",
-        full: "100%",
-      },
-      maxWidth: {
-        "8xl": "90rem",
-      },
-      keyframes: {
-        "flash-code": {
-          "0%": { backgroundColor: "rgb(125 211 252 / 0.1)" },
-          "100%": { backgroundColor: "transparent" },
-        },
-      },
-      animation: {
-        "flash-code": "flash-code 1s forwards",
-        "flash-code-slow": "flash-code 2s forwards",
-      },
-      // backgroundImage: (theme) => ({
-      //   squiggle: `url("${svgToDataUri(
-      //     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" width="6" height="3" fill="${theme(
-      //       "colors.yellow.400"
-      //     )}"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></svg>`
-      //   )}")`,
-      // }),
     },
   },
   plugins: [
@@ -332,17 +83,6 @@ module.exports = {
       addVariant("scrollbar-thumb", "&::-webkit-scrollbar-thumb");
     },
     function ({ matchUtilities, theme }) {
-      // matchUtilities(
-      // {
-      //   "bg-grid": (value) => ({
-      //     backgroundImage: `url("${svgToDataUri(
-      //       `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
-      //     )}")`,
-      //   }),
-      // },
-      // { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
-      // );
-
       matchUtilities(
         {
           highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),