feat: add animate provider

Author: KazariEX

packages/get-bonus/src/animate/index.ts

@@ -1,5 +1,6 @@
-import type { Detail, SearchResult, SearchOptions } from '../types';
+import type { Detail, SearchResult, SearchOptions, DetailItem } from '../types';
 
+import { JSDOM } from 'jsdom';
 import { Provider } from '../scraper';
 
 export class Animate extends Provider {
@@ -8,10 +9,50 @@ export class Animate extends Provider {
   }
 
   async search(text: string, options?: SearchOptions): Promise<SearchResult[]> {
-    return [];
+    const html: string = await $fetch('https://www.melonbooks.co.jp/search/search.php', {
+      query: {
+        name: text,
+        'additional[]': 'pr'
+      }
+    });
+
+    const dom = new JSDOM(html);
+    const doc = dom.window.document;
+
+    const resultItems = doc.querySelectorAll('.item-list li[class^=product]');
+    return [...resultItems].reduce((res: SearchResult[], item) => {
+      const a = item.querySelector('.item-image > a') as HTMLAnchorElement;
+      res.push({
+        provider: this.id,
+        title: a.title,
+        url: 'https://www.melonbooks.co.jp' + a.href
+      });
+      return res;
+    }, []);
   }
 
   async detail(url: string): Promise<Detail | undefined> {
-    return undefined;
+    const html: string = await $fetch(url);
+    const dom = new JSDOM(html);
+    const doc = dom.window.document;
+
+    const title = doc.querySelector('.page-header')?.textContent || '';
+    const privItems = doc.querySelectorAll('.priv-item');
+    const items = [...privItems].reduce((res: DetailItem[], item) => {
+      const img = item.querySelector('.priv_img') as HTMLImageElement;
+      const info = item.querySelector('.priv-item_info');
+      res.push({
+        image: img.src,
+        description: info?.textContent?.trim?.() || ''
+      });
+      return res;
+    }, []);
+
+    return {
+      provider: this.id,
+      title,
+      url,
+      items
+    };
   }
 }

pages/index.vue

@@ -23,11 +23,11 @@ const search = async () => {
     </div>
     <ul class="grid gap-4 mt-6">
       <li v-for="{ title, url, items } in results" class="p-4 b-1 rounded-4">
-        <nuxt-link class="font-bold hover:color-blue" :to="url" target="_blank">{{ title }}</nuxt-link>
+        <nuxt-link class="font-bold text-5 hover:color-blue" :to="url" target="_blank">{{ title }}</nuxt-link>
         <ul>
-          <li v-for="{ image, description } in items" class="flex gap-2 mt-2">
+          <li v-for="{ image, description } in items" class="flex gap-4 mt-4">
             <img class="max-w-36" :src="image"/>
-            <p>{{ description }}</p>
+            <p class="text-3.5 result-description">{{ description }}</p>
           </li>
         </ul>
       </li>
@@ -39,4 +39,8 @@ const search = async () => {
 .main {
   @apply: mx-auto w-5xl lt-lg:w-3xl lt-md:w-[95vw] lt-md:px-3;
 }
+
+.result-description {
+  white-space: pre-line;
+}
 </style>