fix: [Novel Updates]: Images and CSS (#1186)

* novel-updates: add Daoist Quest

* novel-updates: fix

* novel-updates: remove lazy-loaded images and add new css

* novel-updates: text-align in unordered lists

* novel-updates: enhance css

* novel-updates: remove clip-path

* novel-updates: update bg color

* novel-updates: update

* novel-updates: revert version

public/static/src/en/novelupdates/customCSS.css

@@ -1,3 +1,59 @@
+/**
+ * Novel Updates -> Daoist Quest
+ * https://www.novelupdates.com/group/daoist-quest/
+ * Necessary to display chapterContent correctly
+ */
+.litrpg-box {
+    color: #fff;
+    font-weight: 400;
+    text-align: center;
+    margin: 15px auto;
+    max-width: fit-content;
+}
+.litrpg-frame {
+    border: solid #00219b;
+    box-shadow: 0 0 10px 1px #00219b;
+    border-radius: 5px;
+    background-color: #000000;
+}
+.litrpg-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.125em;
+    padding: .875rem 0;
+    margin: 0 .875rem;
+    overflow: auto;
+}
+.litrpg-body ul {
+    text-align: left;
+}
+
+/**
+ * Novel Updates -> FictionRead
+ * https://www.novelupdates.com/group/fictionread/
+ * Necessary to display chapterContent correctly
+ */
+.letter-style {
+    min-width: 230px;
+    max-width: fit-content;
+    margin: 15px auto;
+    box-shadow: 0 0 10px 1px #5e636e;
+    border-radius: 5px;
+    font-family: 'Oswald', sans-serif;
+    background-color: #000000;
+    padding: 10px 30px 10px 30px;
+}
+.system {
+    background: linear-gradient(33deg, #334455 0%, #223344 100%);
+    border: 1px solid #aabbcc;
+    color: #fff;
+    font-family: Rajdhani,serif;
+    font-weight: 500;
+    margin: 0 auto;
+    padding: 1rem;
+    width: fit-content;
+}
+
 /**
  * Novel Updates -> Genesis Translations
  * https://www.novelupdates.com/group/genesis-translations/
@@ -12,7 +68,7 @@
     border: solid #e0cc00;
     box-shadow: 0 0 10px 1px #e0cc00;
     border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
+    font-family: 'Oswald', sans-serif;
     background-color: #000000;
 }
 .game-prompt-gold-info-title {
@@ -36,7 +92,7 @@
     border: solid #00219b;
     box-shadow: 0 0 10px 1px #00219b;
     border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
+    font-family: 'Oswald', sans-serif;
     background-color: #000000;
 }
 .game-prompt-info-title {
@@ -59,7 +115,7 @@
     border: solid #00219b;
     box-shadow: 0 0 10px 1px #00219b;
     border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
+    font-family: 'Oswald', sans-serif;
     background-color: #000000;
 }
 .game-prompt-info-small-content {
@@ -75,7 +131,7 @@
     border: solid #c2c2c2;
     box-shadow: 0 0 10px 1px #737373;
     border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
+    font-family: 'Oswald', sans-serif;
     background-color: #000000;
 }
 .game-prompt-silver-info-content {
@@ -92,7 +148,7 @@
     border: solid #750b00e3;
     box-shadow: 0 0 20px 3px #750b0070;
     border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
+    font-family: 'Oswald', sans-serif;
     background-color: #000000;
 }
 .game-prompt-warning-title {
@@ -141,8 +197,8 @@
     --colors-novel-system-box-shadow: 9 23 134;
     background: linear-gradient(180deg,rgb(var(--colors-novel-system-box-bg-1)) 35%,rgb(var(--colors-novel-system-box-bg-2)) 214%);
     border: 1px solid rgb(var(--colors-novel-system-box-border));
-    color: #fffffd;
+    color: #fff;
-    /*font-family: Rajdhani,serif;*/
+    font-family: Rajdhani,serif;
     font-weight: 500;
     margin: 0 auto;
     padding: 1rem;
@@ -152,29 +208,3 @@
 .text-center {
     text-align: center !important;
 }
-
-/**
- * Novel Updates -> FictionRead
- * https://www.novelupdates.com/group/fictionread/
- * Necessary to display chapterContent correctly
- */
-.letter-style {
-    min-width: 230px;
-    max-width: fit-content;
-    margin: 15px auto;
-    box-shadow: 0 0 10px 1px #5e636e;
-    border-radius: 5px;
-    /*font-family: 'Oswald', sans-serif;*/
-    background-color: #000000;
-    padding: 10px 30px 10px 30px;
-}
-.system {
-    background: linear-gradient(33deg, #334455 0%, #223344 100%);
-    border: 1px solid #aabbcc;
-    color: #fffffd;
-    /*font-family: Rajdhani,serif;*/
-    font-weight: 500;
-    margin: 0 auto;
-    padding: 1rem;
-    width: fit-content;
-}

src/plugins/english/novelfire.ts

@@ -167,7 +167,7 @@ class NovelFire implements Plugin.PluginBase {
       '.box-notification',
       /^nf/, // Regular expression to match tags starting with 'nf'
     ];
-    bloatElements.map(tag => {
+    bloatElements.forEach(tag => {
       if (tag instanceof RegExp) {
         loadedCheerio('*')
           .filter((_, el) =>

src/plugins/english/novelupdates.ts

@@ -6,7 +6,7 @@ import { Plugin } from '@typings/plugin';
 class NovelUpdates implements Plugin.PluginBase {
   id = 'novelupdates';
   name = 'Novel Updates';
-  version = '0.7.6';
+  version = '0.7.7';
   icon = 'src/en/novelupdates/icon.png';
   customCSS = 'src/en/novelupdates/customCSS.css';
   site = 'https://www.novelupdates.com/';
@@ -196,7 +196,7 @@ class NovelUpdates implements Plugin.PluginBase {
     domain: string[],
     url: string,
   ) {
-    let bloatClasses = [];
+    let bloatElements = [];
     let chapterTitle = '';
     let chapterContent = '';
     let chapterText = '';
@@ -225,13 +225,13 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'fictionread':
-        bloatClasses = [
+        bloatElements = [
           '.content > style',
           '.highlight-ad-container',
           '.meaning',
           '.word',
         ];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('.title-image span').first().text() ||
           'Title not found';
@@ -276,6 +276,23 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'hiraethtranslation':
+        const bloatAttributes = [
+          'data-lazy-srcset',
+          'data-lazy-src',
+          'data-lazy-sizes',
+          'data-ll-status',
+        ];
+        // Iterate over each selector for images that may have these attributes
+        ['img.entered', 'img.lazyloaded'].forEach(selector => {
+          loadedCheerio(selector).each(function () {
+            // Loop through the attributes and remove them from the image
+            bloatAttributes.forEach(attr => {
+              loadedCheerio(this).removeAttr(attr); // Remove specified attribute
+            });
+            // Optionally, remove the class if you want
+            loadedCheerio(this).removeClass('entered lazyloaded'); // Remove class if needed
+          });
+        });
         chapterTitle =
           loadedCheerio('li.active').first().text() || 'Title not found';
         chapterContent = loadedCheerio('.text-left').html()!;
@@ -318,7 +335,7 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'isotls': // mii translates
-        bloatClasses = [
+        bloatElements = [
           'footer',
           'header',
           'nav',
@@ -326,7 +343,7 @@ class NovelUpdates implements Plugin.PluginBase {
           '.ezoic-adpicker-ad',
           '.ezoic-videopicker-video',
         ];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('head title').first().text() || 'Title not found';
         chapterContent = loadedCheerio('main article').html()!;
@@ -345,8 +362,8 @@ class NovelUpdates implements Plugin.PluginBase {
         }
         break;
       case 'mirilu':
-        bloatClasses = ['#jp-post-flair'];
+        bloatElements = ['#jp-post-flair'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         const titleElement_mirilu = loadedCheerio(
           '.entry-content p strong',
         ).first();
@@ -356,16 +373,16 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'novelplex':
-        bloatClasses = ['.passingthrough_adreminder'];
+        bloatElements = ['.passingthrough_adreminder'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('.halChap--jud').first().text() || 'Title not found';
         chapterContent = loadedCheerio('.halChap--kontenInner ').html()!;
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'novelworldtranslations':
-        bloatClasses = ['.separator img'];
+        bloatElements = ['.separator img'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         loadedCheerio('.entry-content a')
           .filter((_, el) => {
             return (
@@ -409,12 +426,12 @@ class NovelUpdates implements Plugin.PluginBase {
           return loadedCheerio(this).css('display') === 'block';
         });
         const loadedCheerioSnow = parseHTML(displayedDiv_snow.html()!);
-        bloatClasses = [
+        bloatElements = [
           '.responsivevoice-button',
           '.zoomdesc-cont p img',
           '.zoomdesc-cont p noscript',
         ];
-        bloatClasses.map(tag => loadedCheerioSnow(tag).remove());
+        bloatElements.forEach(tag => loadedCheerioSnow(tag).remove());
         chapterContent = loadedCheerioSnow('.zoomdesc-cont').html()!;
         const titleElement_snow = loadedCheerioSnow('.scroller h2').first();
         if (titleElement_snow.length) {
@@ -429,8 +446,8 @@ class NovelUpdates implements Plugin.PluginBase {
         }
         break;
       case 'readingpia':
-        bloatClasses = ['.ezoic-ad', '.ezoic-adpicker-ad', '.ez-video-wrap'];
+        bloatElements = ['.ezoic-ad', '.ezoic-adpicker-ad', '.ez-video-wrap'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterText = loadedCheerio('.chapter-body').html() || 'Text not found';
         break;
       case 'redoxtranslation':
@@ -465,20 +482,20 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'sacredtexttranslations':
-        bloatClasses = [
+        bloatElements = [
           '.entry-content blockquote',
           '.entry-content div',
           '.reaction-buttons',
         ];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('.entry-title').first().text() || 'Title not found';
         chapterContent = loadedCheerio('.entry-content').html()!;
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'scribblehub':
-        bloatClasses = ['.wi_authornotes'];
+        bloatElements = ['.wi_authornotes'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('.chapter-title').first().text() || 'Title not found';
         chapterContent = loadedCheerio('.chp_raw').html()!;
@@ -513,13 +530,13 @@ class NovelUpdates implements Plugin.PluginBase {
           const body_syringe = await result_syringe.text();
           loadedCheerio = parseHTML(body_syringe);
         }
-        bloatClasses = [
+        bloatElements = [
           '.has-inline-color',
           '.wp-block-buttons',
           '.wpcnt',
           '#jp-post-flair',
         ];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterContent = loadedCheerio('.entry-content').html()!;
         const titleElement_syringe = loadedCheerio('.entry-content h3').first();
         if (titleElement_syringe.length) {
@@ -532,14 +549,14 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
         break;
       case 'tinytranslation':
-        bloatClasses = [
+        bloatElements = [
           '.content noscript',
           '.google_translate_element',
           '.navigate',
           '.post-views',
           'br',
         ];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('.title-content').first().text() || 'Title not found';
         loadedCheerio('.title-content').first().remove();
@@ -577,8 +594,8 @@ class NovelUpdates implements Plugin.PluginBase {
         }
         break;
       case 'wuxiaworld':
-        bloatClasses = ['.MuiLink-root'];
+        bloatElements = ['.MuiLink-root'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterTitle =
           loadedCheerio('h4 span').first().text() || 'Title not found';
         chapterContent = loadedCheerio('.chapter-content').html()!;
@@ -591,8 +608,8 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = await fetchApi(json_yoru).then(r => r.text());
         break;
       case 'zetrotranslation':
-        bloatClasses = ['hr', 'p:contains("\u00a0")'];
+        bloatElements = ['hr', 'p:contains("\u00a0")'];
-        bloatClasses.map(tag => loadedCheerio(tag).remove());
+        bloatElements.forEach(tag => loadedCheerio(tag).remove());
         chapterContent = loadedCheerio('.text-left').html()!;
         const titleElement_zetro = loadedCheerio('.text-left h2').first();
         if (titleElement_zetro.length) {
@@ -611,7 +628,7 @@ class NovelUpdates implements Plugin.PluginBase {
   }
 
   async parseChapter(chapterPath: string): Promise<string> {
-    let bloatClasses = [];
+    let bloatElements = [];
     let chapterTitle = '';
     let chapterContent = '';
     let chapterText = '';
@@ -740,13 +757,13 @@ class NovelUpdates implements Plugin.PluginBase {
     if (!isWordPress && !isBlogspot) {
       chapterText = await this.getChapterBody(loadedCheerio, domain, url);
     } else if (isBlogspot) {
-      bloatClasses = [
+      bloatElements = [
         '.button-container',
         '.ChapterNav',
         '.ch-bottom',
         '.separator',
       ];
-      bloatClasses.map(tag => loadedCheerio(tag).remove());
+      bloatElements.forEach(tag => loadedCheerio(tag).remove());
       chapterTitle =
         loadedCheerio('.entry-title').first().text() ||
         loadedCheerio('.post-title').first().text() ||
@@ -759,7 +776,7 @@ class NovelUpdates implements Plugin.PluginBase {
         chapterText = `<h2>${chapterTitle}</h2><hr><br>${chapterContent}`;
       }
     } else if (isWordPress) {
-      bloatClasses = [
+      bloatElements = [
         '.ad',
         '.author-avatar',
         '.chapter-warning',
@@ -782,7 +799,7 @@ class NovelUpdates implements Plugin.PluginBase {
         '#jp-post-flair',
         '#textbox',
       ];
-      bloatClasses.map(tag => loadedCheerio(tag).remove());
+      bloatElements.forEach(tag => loadedCheerio(tag).remove());
       chapterTitle =
         loadedCheerio('.entry-title').first().text() ||
         loadedCheerio('.entry-title-main').first().text() ||

src/plugins/english/webnovel.ts

@@ -204,7 +204,7 @@ class Webnovel implements Plugin.PluginBase {
     const loadedCheerio = parseHTML(body);
 
     const bloatElements = ['.para-comment'];
-    bloatElements.map(tag => loadedCheerio(tag).remove());
+    bloatElements.forEach(tag => loadedCheerio(tag).remove());
 
     return (
       loadedCheerio('.cha-tit').html()! + loadedCheerio('.cha-words').html()!