feat(frontend): Dark Mode

* Fixed "Download More" button

* Revert "Fixed "Download More" button"

This reverts commit 620ad6afff.

* Reworked page reset

* fix(frontend): Download more button

---------

Co-authored-by: TheOnlyWayUp <hi@towu.dev>

README.md

@@ -9,11 +9,12 @@ Stars ⭐ are appreciated. Thanks!
 
 ## Features
 - ⚡ Lightweight Frontend and Minimal Javascript.
+- 🪙 Supports Authentication (Download paid stories from your account!)
 - 🌐 API Support (Visit the `/docs` path on your instance for more.)
-- 🐇 Fast Generation, Basic Ratelimit Handling.
+- 🐇 Fast Generation, Ratelimit Handling.
 - 🐳 Docker Support
 - 🏷️ Generated EPUB File includes Metadata. (Dublin Core Spec)
-- 📖 Plays well with E-Readers. (Kindle Support if KOReader present)
+- 📖 Plays well with E-Readers. (Kindle Support if KOReader present, ReMarkable, KOBO, ...)
 - 💻 Easily Hackable. Extend with ease.
 
 
@@ -31,5 +32,5 @@ My thanks to [aerkalov/ebooklib](https://github.com/aerkalov/ebooklib) for a fas
 ---
 
 <div align="center">
-    <p>TheOnlyWayUp © 2023</p>
+    <p>TheOnlyWayUp © 2024</p>
 </div>

src/api/src/create_book.py

@@ -174,7 +174,7 @@ async def add_chapters(
 ):
     chapters = []
 
-    for part in data["parts"]:
+    for cidx, part in enumerate(data["parts"]):
         content = await fetch_part_content(part["id"], cookies=cookies)
         title = part["title"]
         clean_title = slugify(title)
@@ -182,7 +182,7 @@ async def add_chapters(
         # Thanks https://eu17.proxysite.com/process.php?d=5VyWYcoQl%2BVF0BYOuOavtvjOloFUZz2BJ%2Fepiusk6Nz7PV%2B9i8rs7cFviGftrBNll%2B0a3qO7UiDkTt4qwCa0fDES&b=1
         chapter = epub.EpubHtml(
             title=title,
-            file_name=f"{clean_title}.xhtml",
+            file_name=f"{cidx}.xhtml",  # Used to be clean_title.xhtml, but that broke Arabic support as slugify turns arabic strings into '', leading to multiple files with the same name, breaking those chapters.
             lang=data["language"]["name"],
         )
 
@@ -200,11 +200,11 @@ async def add_chapters(
                         img = epub.EpubImage(
                             media_type="image/jpeg",
                             content=await response.read(),
-                            file_name=f"static/{clean_title}/{idx}.jpeg",
+                            file_name=f"static/{cidx}/{idx}.jpeg",
                         )
                         book.add_item(img)
                         content = content.replace(
-                            str(image), f'<img src="static/{clean_title}/{idx}.jpeg"/>'
+                            str(image), f'<img src="static/{cidx}/{idx}.jpeg"/>'
                         )
 
         chapter.set_content(f"<h1>{title}</h1>" + content)

src/api/src/main.py

@@ -34,10 +34,11 @@ async def download_book(
     if username and not password or password and not username:
         return HTMLResponse(
             status_code=422,
-            content='Include both the username _and_ password, or neither. Support is available on the <a href="https://discord.gg/P9RHC4KCwd" target="_blank">Discord</a>',
+            content='Include both the username <u>and</u> password, or neither. Support is available on the <a href="https://discord.gg/P9RHC4KCwd" target="_blank">Discord</a>',
         )
 
     if username and password:
+        # username and password are URL-Encoded by the frontend. FastAPI automatically decodes them.
         try:
             cookies = await wp_get_cookies(username=username, password=password)
         except ValueError:

src/frontend/src/routes/+page.svelte

@@ -6,10 +6,12 @@
     username: "",
     password: "",
   };
-
   let after_download_page = false;
   let url = "";
 
+  let raw_story_id = "";
+  let is_part_id = false;
+
   let button_disabled = false;
   $: button_disabled =
     !story_id ||
@@ -19,14 +21,42 @@
     `/download/${story_id}?om=1` +
     (download_images ? "&download_images=true" : "") +
     (is_paid_story
-      ? `&username=${credentials.username}&password=${credentials.password}`
+      ? `&username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}`
       : "");
+
+  $: {
+    is_part_id = false;
+    if (raw_story_id.includes("wattpad.com")) {
+      // Originally, I was going to call the Wattpad API (wattpad.com/api/v3/stories/${story_id}), but Wattpad kept blocking those requests. I suspect it has something to do with the Origin header, I wasn't able to remove it.
+      // In the future, if this is considered, it would be cool if we could derive the Story ID from a pasted Part URL. Refer to @AaronBenDaniel's https://github.com/AaronBenDaniel/WattpadDownloader/blob/49b29b245188149f2d24c0b1c59e4c7f90f289a9/src/api/src/create_book.py#L156 (https://www.wattpad.com/api/v3/story_parts/{part_id}?fields=url).
+
+      if (raw_story_id.includes("/story/")) {
+        // https://wattpad.com/story/237369078-wattpad-books-presents
+        story_id = raw_story_id.split("/story/")[1].split("-")[0].split("?")[0]; // removes tracking fields
+        raw_story_id = story_id;
+      } else if (raw_story_id.includes("/stories/")) {
+        // https://www.wattpad.com/api/v3/stories/237369078?fields=...
+        story_id = raw_story_id.split("/stories/")[1].split("?")[0]; // removes params
+        raw_story_id = story_id;
+      } else {
+        // https://www.wattpad.com/939051741-wattpad-books-presents-part-name
+        is_part_id = true;
+        raw_story_id = "";
+        story_id = "";
+      }
+    } else {
+      story_id = parseInt(raw_story_id) || ""; // parseInt returns NaN for undefined values.
+      raw_story_id = story_id;
+    }
+  }
 </script>
 
+<slot></slot>
+
 <div>
   <div class="hero min-h-screen">
     <div
-      class="hero-content flex-col lg:flex-row-reverse bg-base-100/50 p-16 rounded shadow-sm"
+      class="hero-content flex-col lg:flex-row-reverse light:bg-base-100/50 dark:bg-[hsl(39,20%,5%)]/30 p-16 rounded shadow-sm"
     >
       {#if !after_download_page}
         <div class="text-center lg:text-left lg:p-10">
@@ -35,31 +65,51 @@
           >
             Wattpad Downloader
           </h1>
-          <p class="pt-6 text-lg">
+          <p class="pt-4 text-xl dark:text-white">
             Download your favourite books with a single click!
           </p>
-          <ul class="pt-4 list list-inside text-xl">
-            <li>06/24 - 🎉 Image Downloading!</li>
+          <ul
+            class="pt-6 list list-inside text-xl dark:text-[hsl(133,13%,85%)] text-left"
+          >
+            <!-- TODO: 'max-lg: hidden' to hide on screen sizes smaller than lg. I'll do this when I figure out how to make this show up _below_ the card on smaller screen sizes. -->
+            <li>08 '24 - 🌙 Dark Mode</li>
+            <li>07 '24 - 🔡 RTL Language support! (Arabic, etc.)</li>
+            <li>06 '24 - 🔑 Authenticated Downloads!</li>
+            <li>06 '24 - 🖼️ Image Downloading!</li>
           </ul>
         </div>
-        <div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
+        <div
+          class="card shrink-0 w-full max-w-sm shadow-2xl light:bg-base-100 dark:bg-[hsl(133,15%,9%)] dark:shadow-[0px_0px_150px_-100px_hsl(39,100%,50%)]"
+        >
           <form class="card-body">
             <div class="form-control">
               <input
-                type="number"
+                type="text"
                 placeholder="Story ID"
-                class="input input-bordered"
-                bind:value={story_id}
+                class="input input-bordered dark:text-white"
+                class:input-warning={is_part_id}
+                bind:value={raw_story_id}
                 required
                 name="story_id"
               />
               <label class="label" for="story_id">
+                {#if is_part_id}
+                  <p class="text-red-500">
+                    Refer to (<button
+                      class="link font-semibold"
+                      onclick="StoryIDTutorialModal.showModal()"
+                      data-umami-event="Part StoryIDTutorialModal Open"
+                      >How to get a Story ID</button
+                    >).
+                  </p>
+                {:else}
                   <button
                     class="label-text link font-semibold"
                     onclick="StoryIDTutorialModal.showModal()"
                     data-umami-event="StoryIDTutorialModal Open"
                     >How to get a Story ID</button
                   >
+                {/if}
               </label>
               <label class="cursor-pointer label">
                 <span class="label-text"
@@ -72,11 +122,12 @@
                 />
               </label>
               {#if is_paid_story}
+                <div class="grid grid-rows-2 gap-y-1">
                   <label class="input input-bordered flex items-center gap-2">
-                  Username
+                    <span class="label-text">Username</span>
                     <input
                       type="text"
-                    class="grow"
+                      class="grow dark:text-white in_input p-1 rounded"
                       name="username"
                       placeholder="foxtail.chicken"
                       bind:value={credentials.username}
@@ -84,23 +135,25 @@
                     />
                   </label>
                   <label class="input input-bordered flex items-center gap-2">
-                  Password
+                    <span class="label-text">Password</span>
                     <input
                       type="password"
-                    class="grow"
+                      class="grow dark:text-white in_input p-1 rounded"
                       placeholder="supersecretpassword"
                       name="password"
                       bind:value={credentials.password}
                       required
                     />
                   </label>
+                </div>
               {/if}
             </div>
 
             <div class="form-control mt-6">
               <a
-                class="btn btn-primary rounded-l-none"
+                class="btn light:btn-primary dark:btn-accent"
                 class:btn-disabled={button_disabled}
+                class:disabled={button_disabled}
                 data-umami-event="Download"
                 href={url}
                 on:click={() => (after_download_page = true)}>Download</a
@@ -121,7 +174,7 @@
 
           <button
             data-feedback-fish
-            class="link pb-4"
+            class="link pb-4 label-text"
             data-umami-event="Feedback">Feedback</button
           >
         </div>
@@ -151,7 +204,13 @@
               >, where we release features early and discuss updates.
             </p>
           </div>
-          <a href="/" class="btn btn-outline btn-lg mt-10">Download More</a>
+          <button
+            on:click={() => {
+              after_download_page = false;
+              raw_story_id = "";
+            }}
+            class="btn btn-outline btn-lg mt-10">Download More</button
+          >
         </div>
       {/if}
     </div>
@@ -161,26 +220,29 @@
 <!-- Open the modal using ID.showModal() method -->
 
 <dialog id="StoryIDTutorialModal" class="modal">
-  <div class="modal-box">
+  <div class="modal-box dark:bg-[hsl(133,15%,9%)] dark:text-white/80">
     <form method="dialog">
       <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
         >✕</button
       >
     </form>
-    <h3 class="font-bold text-lg">Downloading a Story</h3>
-    <ol class="list list-disc list-inside py-4 space-y-2">
+    <h3 class="font-bold text-lg">Retrieving a Story ID</h3>
+    <ol class="list list-disc list-inside py-4 space-y-4">
       <li>
-        Open the Story URL (For example, <span
-          class="font-mono bg-slate-100 p-1"
+        Open the Story URL, this page includes the story description and tags.
+        (For example, <span
+          class="font-mono bg-slate-100 dark:bg-[hsl(133,40%,90%)]/90 text-black p-[5px] rounded"
           >wattpad.com/story/237369078-wattpad-books-presents</span
-        >)
+        >).
       </li>
       <li>
-        Copy the numbers after the <span class="font-mono bg-slate-100 p-1"
+        Copy the numbers after the <span
+          class="font-mono bg-slate-100 dark:bg-[hsl(133,40%,90%)]/90 text-black p-[5px] rounded"
           >/</span
         >
         (In the example, that'd be,
-        <span class="font-mono bg-slate-100 p-1"
+        <span
+          class="font-mono bg-slate-100 dark:bg-[hsl(133,40%,90%)]/90 text-black p-[5px] rounded"
           >wattpad.com/story/<span class="bg-amber-200 p-1">237369078</span
           >-wattpad-books-presents</span
         >)