fix(route): add Open Graph image to GitHub trending (#10189)

* fix(route): add Open Graph image to GitHub trending

Adds Open Graph image for each repository to the GitHub trending feed.

* chore(route): address pull request feedback

- Refactors page request call to make it more terse
- Adds art template for trending description
- Updates maintainers for '/trending/:since/:language?/:spoken_language?'

lib/v2/github/maintainer.js

@@ -10,6 +10,6 @@ module.exports = {
     '/starred_repos/:user': ['LanceZhu'],
     '/stars/:user/:repo': ['HenryQW'],
     '/topics/:name/:qs?': ['queensferryme'],
-    '/trending/:since/:language?/:spoken_language?': ['DIYgod'],
+    '/trending/:since/:language?/:spoken_language?': ['DIYgod', 'jameschensmith'],
     '/user/followers/:user': ['HenryQW'],
 };

lib/v2/github/templates/trending-description.art

@@ -0,0 +1,5 @@
+<img src="{{@ cover }}">
+<br>{{@ desc }}
+<br><br>Language: {{@ lang }}
+<br>Stars: {{@ stars }}
+<br>Forks: {{@ forks }}

lib/v2/github/trending.js

@@ -1,5 +1,7 @@
 const got = require('@/utils/got');
+const { art } = require('@/utils/render');
 const cheerio = require('cheerio');
+const path = require('path');
 
 module.exports = async (ctx) => {
     const since = ctx.params.since;
@@ -20,24 +22,38 @@ module.exports = async (ctx) => {
     const $ = cheerio.load(data);
     const list = $('article');
 
+    const items = await Promise.all(
+        list.map((_, item) => {
+            item = $(item);
+            const endpoint = item.find('h1 a').attr('href');
+            const link = `https://github.com${endpoint}`;
+            return ctx.cache.tryGet(`github:trending:${endpoint}`, async () => {
+                const response = await got(link);
+
+                const $ = cheerio.load(response.data);
+                const cover = $('meta[property="og:image"]');
+
+                const single = {
+                    title: item.find('h1').text(),
+                    author: item.find('h1').text().split('/')[0].trim(),
+                    description: art(path.join(__dirname, 'templates/trending-description.art'), {
+                        cover: cover.attr('content'),
+                        desc: item.find('p').text(),
+                        lang: item.find('span[itemprop="programmingLanguage"]').text() || 'Unknown',
+                        stars: item.find('.Link--muted').eq(0).text().trim(),
+                        forks: item.find('.Link--muted').eq(1).text().trim(),
+                    }),
+                    link,
+                };
+
+                return single;
+            });
+        })
+    );
+
     ctx.state.data = {
         title: $('title').text(),
         link: url,
-        item:
-            list &&
-            list
-                .map((_, item) => {
-                    item = $(item);
-                    return {
-                        title: item.find('h1').text(),
-                        author: item.find('h1').text().split('/')[0].trim(),
-                        description: `${item.find('.pr-4').text()}<br>
-                            <br>Language: ${item.find('span[itemprop="programmingLanguage"]').text() ?? 'unknown'}
-                            <br>Star: ${item.find('.Link--muted').eq(0).text().trim()}
-                            <br>Fork: ${item.find('.Link--muted').eq(1).text().trim()}`,
-                        link: `https://github.com${item.find('h1 a').attr('href')}`,
-                    };
-                })
-                .get(),
+        item: items,
     };
 };