feat: adds vice.com route DIYgod#15694 (DIYgod#15698)

* feat: adds vice.com route DIYgod#15694 * Clean up ctx parameters Co-authored-by: Tony <[email protected]> * remove obsolete feature config Co-authored-by: Tony <[email protected]> * Updates route to combat future conflicts. removes content Parameter Co-authored-by: Tony <[email protected]> * removes unnecessary language parameter fallback Co-authored-by: Tony <[email protected]> * replaces html parsing with json data parsing Co-authored-by: Tony <[email protected]> - amazing code thanks for your contribution (never had someone comment on my code before, hope I've implemented your suggestions the right way) * Updates the article content, to pull by default Co-authored-by: Tony <[email protected]>. I've had to update it a little as there were a few errors * Updates example & radar * consolidates similar role cases Co-authored-by: Tony <[email protected]> * Renames namespace name Co-authored-by: Tony <[email protected]> * Removes article rendering Whilst _some_ main articles do benefit from inner article rendering, it was inserting irrelevant content (ads for similar content). The articles that do benefit are essentally just listicles. ---------
benniks · May 26, 2024 · d33b416 · d33b416
1 parent 256f28e
commit d33b416
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 0 deletions.
diff --git a/lib/routes/vice/namespace.ts b/lib/routes/vice/namespace.ts
@@ -0,0 +1,6 @@
+import type { Namespace } from '@/types';
+
+export const namespace: Namespace = {
+    name: 'VICE',
+    url: 'vice.com',
+};
diff --git a/lib/routes/vice/templates/article.art b/lib/routes/vice/templates/article.art
@@ -0,0 +1,19 @@
+{{ if image }}
+<figure>
+  <img src="{{ image.url }}" alt="{{ image.alt }}">
+  <figcaption>{{ image.caption || image.credit || image.alt }}</figcaption>
+</figure>
+{{ /if }}
+
+{{ if body }}
+<p>{{@ body.html }}</p>
+{{ /if }}
+
+{{ if heading2 }}
+<hr/>
+<h2>{{@ heading2.html }}</h2>
+{{ /if }}
+
+{{ if oembed }}
+{{@ oembed.html }}
+{{ /if }}
diff --git a/lib/routes/vice/topic.ts b/lib/routes/vice/topic.ts
@@ -0,0 +1,107 @@
+import { Route } from '@/types';
+import ofetch from '@/utils/ofetch';
+import { load } from 'cheerio';
+import { parseDate } from '@/utils/parse-date';
+import cache from '@/utils/cache';
+import path from 'path';
+import { getCurrentPath } from '@/utils/helpers';
+import { art } from '@/utils/render';
+
+const __dirname = getCurrentPath(import.meta.url);
+const render = (data) => art(path.join(__dirname, 'templates', 'article.art'), data);
+
+export const route: Route = {
+    path: '/topic/:topic/:language?',
+    categories: ['traditional-media'],
+    example: '/vice/topic/politics/en',
+    parameters: {
+        topic: 'Can be found in the URL',
+        content: 'Set to true to retrieve the full article (images are blurry), anything else will pull the short text',
+        language: 'defaults to `en`, use the website to discover other codes',
+    },
+    radar: [
+        {
+            source: ['www.vice.com/:language/topic/:topic'],
+            target: '/topic/:topic/:language',
+        },
+    ],
+    name: 'Topic',
+    maintainers: ['K33k0'],
+    handler,
+    url: 'vice.com/',
+};
+
+async function handler(ctx) {
+    const { language = 'en', topic } = ctx.req.param();
+    const response = await ofetch(`https://www.vice.com/${language}/topic/${topic}`);
+    const $ = load(response);
+    const nextData = JSON.parse($('script#__NEXT_DATA__').text());
+
+    const list = nextData.props.pageProps.listPageData.articles.map((item) => ({
+        title: item.title,
+        link: `https://vice.com${item.url}`,
+        pubDate: parseDate(item.publish_date, 'x'),
+        author: item.contributions.map((c) => c.contributor.full_name).join(', '),
+        description: item.dek,
+        category: [...new Set([item.primary_topic.name, ...item.topics.map((t) => t.name)])],
+    }));
+
+    const items = await Promise.all(
+        list.map((item) =>
+            cache.tryGet(item.link, async () => {
+                const response = await ofetch(item.link);
+                const $ = load(response);
+                const articleNextData = JSON.parse($('script#__NEXT_DATA__').text()).props.pageProps.data.articles[0];
+                const bodyComponent = JSON.parse(articleNextData.body_components_json);
+
+                item.description =
+                    render({
+                        image: {
+                            url: articleNextData.thumbnail_url,
+                            alt: articleNextData.caption,
+                            caption: articleNextData.caption,
+                            credit: articleNextData.credit,
+                        },
+                    }) +
+                    bodyComponent
+                        .map((component) => {
+                            switch (component.role) {
+                                case 'body':
+                                    return render({ body: { html: component.html } });
+                                case 'heading2':
+                                    return render({ heading2: { html: component.html } });
+                                case 'article':
+                                case 'divider':
+                                    return '';
+                                case 'image':
+                                    return render({
+                                        image: {
+                                            url: component.URL,
+                                            alt: component.alt,
+                                            caption: component.caption,
+                                        },
+                                    });
+                                case 'oembed':
+                                case 'tweet':
+                                case 'youtube':
+                                    return render({ oembed: { html: component.oembed.html } });
+                                default:
+                                    throw new Error(`Unhandled component: ${component.role} from ${item.link}`);
+                            }
+                        })
+                        .join('');
+
+                return item;
+            })
+        )
+    );
+
+    return {
+        // channel title
+        title: `VICE | ${topic} articles`,
+        // channel link
+        link: `https://vice.com/${language}/topic/${topic}`,
+        // each feed item
+        item: items,
+    };
+}