fix: code review

- use title from the embedded json by default. fallback title follows the same format
- extract data from the embedded json instead of html elements

Author: johan456789

lib/routes/gq/tw/tw.ts

@@ -12,11 +12,11 @@ import { JSONPath } from 'jsonpath-plus';
 const baseUrl = 'https://www.gq.com.tw';
 
 const categoryTitleMap: Record<string, string> = {
-    life: 'Life',
-    fashion: 'Fashion',
-    entertainment: 'Entertainment',
-    gadget: 'Gadget',
-    bettermen: 'Better Men',
+    life: 'LIFE',
+    fashion: 'FASHION',
+    entertainment: 'ENTERTAINMENT',
+    gadget: 'GADGET',
+    bettermen: 'BETTER MEN',
 };
 
 const subcategoryTitleMaps: Record<string, Record<string, string>> = {
@@ -104,73 +104,72 @@ async function handler(ctx: Context): Promise<Data> {
     }
 
     const listUrl = `${baseUrl}/${category}${subcategory ? '/' + subcategory : ''}`;
-    const items = await parseWebpage(listUrl);
+    const { items, headTitle } = await parseWebpage(listUrl);
     logger.info(`[gq/tw] fetched ${items.length} items from ${listUrl}`);
 
     const categoryTitle = categoryTitleMap[category];
     const subcategoryTitle = subcategory ? subcategoryTitleMaps[category][subcategory] : undefined;
-    const title = subcategory ? `GQ台灣 - ${categoryTitle}/${subcategoryTitle}` : `GQ台灣 - ${categoryTitle}`;
+    const fallbackTitle = subcategory ? `${subcategoryTitle} | GQ Taiwan` : `${categoryTitle} | GQ Taiwan`;
+    const title = headTitle || fallbackTitle;
     return {
         title,
         link: listUrl,
         item: items.slice(0, limit),
     };
 }
+interface PageParseResult {
+    items: DataItem[];
+    headTitle?: string;
+}
 
-async function parseWebpage(url: string): Promise<DataItem[]> {
+async function parseWebpage(url: string): Promise<PageParseResult> {
     const html = await ofetch(url);
     const $ = load(html);
-    const containers = $('div[class^="SummaryCollectionGridItems"]');
-    const wrappers = containers.find('div[class^="SummaryItemWrapper"]');
-
-    const urlMetaMap = buildUrlMetaMap(extractPreloadedStateObject($), baseUrl);
-
-    const items = wrappers
-        .toArray()
-        .map((el) => {
-            const $el = $(el);
-
-            const linkEl = $el.find('div[class^="SummaryItemContent"] a').first();
-            const linkPath = linkEl.attr('href')?.trim();
-            if (!linkPath) {
-                return null;
-            }
-            const link = linkPath.startsWith('http') ? linkPath : new URL(linkPath, baseUrl).toString();
-
-            const imgEl = $el.find('div[class^="SummaryItemAssetContainer"] img').first();
-            const imgSrc = imgEl.attr('src')?.trim() || imgEl.attr('data-src')?.trim() || '';
-
-            const title = $el
-                .find('div[class^="SummaryItemContent"] a > h2')
-                .text()
-                .trim();
-
-            const meta = urlMetaMap.get(link) ?? urlMetaMap.get(decodeURI(link));
-            const pubDateText = meta?.pubDate;
-            const timeEl = $el.find('div[class^="SummaryItemBylineWrapper"] > time');
-            const timeText = timeEl.text().trim();
-            const pubDate = pubDateText ? parseDate(pubDateText) : (timeText ? parseDate(timeText, 'YYYY年M月D日') : undefined);
-
-            const textDescription = meta?.description;
-            const description = Boolean(imgSrc) || Boolean(textDescription)
-                ? art(path.join(__dirname, 'templates/description.art'), { src: imgSrc || undefined, alt: title, text: textDescription })
-                : undefined;
-
-            return {
-                title,
-                link,
-                pubDate,
-                description,
-                image: imgSrc || undefined,
-            } as DataItem;
-        })
-        .filter(Boolean) as DataItem[];
-
-    logger.info(`[gq/tw] parsed ${items.length} items from list page ${url}`);
-
-    return items;
+
+    const stateObj = extractPreloadedStateObject($);
+
+    if (!stateObj || !stateObj.transformed) {
+        throw new Error(`Failed to extract preloaded state object from ${url}`);
+    }
+
+    const headTitle = String(stateObj.transformed['head.title']);
+
+    const nodes = (JSONPath({
+        path: '$.transformed.bundle.containers[*].items[*]',
+        json: stateObj,
+    }) as any[]).filter((node) => node && node.url);
+
+    const items: DataItem[] = nodes.map((node: any) => {
+        const rawUrlPath = String(node.url);
+        const urlPath = rawUrlPath.replaceAll(String.raw`\u002F`, "/");
+        const link = new URL(urlPath, baseUrl).toString();
+
+        const title = String(node.dangerousHed ?? node.hed ?? '').trim();
+        const pubDate = node.pubDate ? parseDate(String(node.pubDate)) : undefined;
+
+        const imgSources = node.image?.sources || undefined;
+        const imgSrc = imgSources?.xxl?.url || imgSources?.lg?.url || imgSources?.sm?.url || undefined;
+        const textDescription = node.dangerousDek ? String(node.dangerousDek) : undefined;
+        const description = (Boolean(imgSrc) || Boolean(textDescription))
+            ? art(path.join(__dirname, 'templates/description.art'), { src: imgSrc, alt: title, text: textDescription })
+            : undefined;
+
+        return {
+            title,
+            link,
+            pubDate,
+            description,
+            image: imgSrc,
+        } as DataItem;
+    });
+
+    logger.info(`[gq/tw] parsed ${items.length} items from JSON state ${url}`);
+    return { items, headTitle };
 }
 
+/**
+ * Extract preloaded state object from HTML
+ */
 function extractPreloadedStateObject($: ReturnType<typeof load>): any | null {
     const stateScriptText = $('script').filter((_, el) => $(el).text().includes('__PRELOADED_STATE__')).text();
     if (!stateScriptText) {
@@ -182,38 +181,10 @@ function extractPreloadedStateObject($: ReturnType<typeof load>): any | null {
     const braceStart = stateScriptText.indexOf('{', assignIndex);
     const braceEnd = stateScriptText.lastIndexOf('}');
     if (braceStart === -1 || braceEnd === -1 || braceEnd <= braceStart) {
+        logger.info('[gq/tw] __PRELOADED_STATE__ json is malformed');
         return null;
     }
 
     const jsonText = stateScriptText.slice(braceStart, braceEnd + 1);
     return JSON.parse(jsonText);
 }
-interface UrlMeta {
-    pubDate?: string;
-    description?: string;
-}
-
-function buildUrlMetaMap(stateObj: any, baseUrl: string): Map<string, UrlMeta> {
-    if (!stateObj) {
-        return new Map<string, UrlMeta>();
-    }
-
-    const items = JSONPath({
-        path: '$.transformed.bundle.containers[*].items[*]',
-        json: stateObj,
-    }) as any[];
-
-    const entries: Array<[string, UrlMeta]> = items
-        .filter((node: any) => node && node.url)
-        .map((node: any) => {
-            const urlPath = String(node.url).replaceAll(String.raw`\u002F`, "/");
-            const absoluteUrl = new URL(urlPath, baseUrl).toString();
-            const meta: UrlMeta = {
-                pubDate: node.pubDate ? String(node.pubDate) : undefined,
-                description: node.dangerousDek ? String(node.dangerousDek) : undefined,
-            };
-            return [absoluteUrl, meta];
-        });
-
-    return new Map<string, UrlMeta>(entries);
-}