rsshub 1.0.0-master.fb6d4f3 → 1.0.0-master.fb7e42c

package/lib/routes/youtube/api/google.ts

@@ -10,6 +10,8 @@ import NotFoundError from '@/errors/types/not-found';
 import { Data } from '@/types';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration.js';
+import { getSrtAttachmentBatch } from './subtitles';
+
 dayjs.extend(duration);
 
 let count = 0;
@@ -105,8 +107,9 @@ export const getDataByUsername = async ({ username, embed, filterShorts }: { use
     if (!playlistItems) {
         throw new NotFoundError("This channel doesn't have any content.");
     }
-    const videoIds = playlistItems.data.items.map((item) => item.snippet.resourceId.videoId).join(',');
-    const videoDetails = await utils.getVideos(videoIds, 'contentDetails', cache);
+    const videoIds = playlistItems.data.items.map((item) => item.snippet.resourceId.videoId);
+    const videoDetails = await utils.getVideos(videoIds.join(','), 'contentDetails', cache);
+    const subtitlesMap = await getSrtAttachmentBatch(videoIds);
 
     return {
         title: `${userHandleData?.channelName || username} - YouTube`,
@@ -120,6 +123,8 @@ export const getDataByUsername = async ({ username, embed, filterShorts }: { use
                 const videoId = snippet.resourceId.videoId;
                 const img = utils.getThumbnail(snippet.thumbnails);
                 const detail = videoDetails?.data.items.find((d) => d.id === videoId);
+                const srtAttachments = subtitlesMap[videoId] || [];
+
                 return {
                     title: snippet.title,
                     description: utils.renderDescription(embed, videoId, img, utils.formatDescription(snippet.description)),
@@ -133,6 +138,7 @@ export const getDataByUsername = async ({ username, embed, filterShorts }: { use
                             mime_type: 'text/html',
                             duration_in_seconds: detail?.contentDetails.duration ? dayjs.duration(detail.contentDetails.duration).asSeconds() : undefined,
                         },
+                        ...srtAttachments,
                     ],
                 };
             }),
@@ -147,8 +153,9 @@ export const getDataByChannelId = async ({ channelId, embed, filterShorts }: { c
     const playlistId = filterShorts ? utils.getPlaylistWithShortsFilter(channelId) : originalPlaylistId;
 
     const data = (await utils.getPlaylistItems(playlistId, 'snippet', cache)).data.items;
-    const videoIds = data.map((item) => item.snippet.resourceId.videoId).join(',');
-    const videoDetails = await utils.getVideos(videoIds, 'contentDetails', cache);
+    const videoIds = data.map((item) => item.snippet.resourceId.videoId);
+    const videoDetails = await utils.getVideos(videoIds.join(','), 'contentDetails', cache);
+    const subtitlesMap = await getSrtAttachmentBatch(videoIds);
 
     return {
         title: `${data[0].snippet.channelTitle} - YouTube`,
@@ -161,6 +168,8 @@ export const getDataByChannelId = async ({ channelId, embed, filterShorts }: { c
                 const videoId = snippet.resourceId.videoId;
                 const img = utils.getThumbnail(snippet.thumbnails);
                 const detail = videoDetails?.data.items.find((d) => d.id === videoId);
+                const srtAttachments = subtitlesMap[videoId] || [];
+
                 return {
                     title: snippet.title,
                     description: utils.renderDescription(embed, videoId, img, utils.formatDescription(snippet.description)),
@@ -174,6 +183,7 @@ export const getDataByChannelId = async ({ channelId, embed, filterShorts }: { c
                             mime_type: 'text/html',
                             duration_in_seconds: detail?.contentDetails.duration ? dayjs.duration(detail.contentDetails.duration).asSeconds() : undefined,
                         },
+                        ...srtAttachments,
                     ],
                 };
             }),
@@ -184,8 +194,9 @@ export const getDataByPlaylistId = async ({ playlistId, embed }: { playlistId: s
     const playlistTitle = (await utils.getPlaylist(playlistId, 'snippet', cache)).data.items[0].snippet.title;
 
     const data = (await utils.getPlaylistItems(playlistId, 'snippet', cache)).data.items.filter((d) => d.snippet.title !== 'Private video' && d.snippet.title !== 'Deleted video');
-    const videoIds = data.map((item) => item.snippet.resourceId.videoId).join(',');
-    const videoDetails = await utils.getVideos(videoIds, 'contentDetails', cache);
+    const videoIds = data.map((item) => item.snippet.resourceId.videoId);
+    const videoDetails = await utils.getVideos(videoIds.join(','), 'contentDetails', cache);
+    const subtitlesMap = await getSrtAttachmentBatch(videoIds);
 
     return {
         title: `${playlistTitle} by ${data[0].snippet.channelTitle} - YouTube`,
@@ -196,6 +207,8 @@ export const getDataByPlaylistId = async ({ playlistId, embed }: { playlistId: s
             const videoId = snippet.resourceId.videoId;
             const img = utils.getThumbnail(snippet.thumbnails);
             const detail = videoDetails?.data.items.find((d) => d.id === videoId);
+            const srtAttachments = subtitlesMap[videoId] || [];
+
             return {
                 title: snippet.title,
                 description: utils.renderDescription(embed, videoId, img, utils.formatDescription(snippet.description)),
@@ -209,6 +222,7 @@ export const getDataByPlaylistId = async ({ playlistId, embed }: { playlistId: s
                         mime_type: 'text/html',
                         duration_in_seconds: detail?.contentDetails.duration ? dayjs.duration(detail.contentDetails.duration).asSeconds() : undefined,
                     },
+                    ...srtAttachments,
                 ],
             };
         }),

package/lib/routes/youtube/api/subtitles.ts

@@ -0,0 +1,86 @@
+import { getSubtitles } from 'youtube-caption-extractor';
+import pMap from 'p-map';
+import cache from '@/utils/cache';
+
+function pad(n: number, width: number = 2) {
+    return String(n).padStart(width, '0');
+}
+
+function toSrtTime(seconds: number): string {
+    const totalMs = Math.floor(seconds * 1000);
+    const hours = Math.floor(totalMs / 3_600_000);
+    const minutes = Math.floor((totalMs % 3_600_000) / 60000);
+    const secs = Math.floor((totalMs % 60000) / 1000);
+    const millis = totalMs % 1000;
+    return `${pad(hours)}:${pad(minutes)}:${pad(secs)},${pad(millis, 3)}`;
+}
+
+export type Subtitle = {
+    start: string;
+    dur: string;
+    text: string;
+};
+
+function convertToSrt(segments: Subtitle[]): string {
+    return segments
+        .map((seg, index) => {
+            const start = Number.parseFloat(seg.start);
+            const end = start + Number.parseFloat(seg.dur);
+            return `${index + 1}
+${toSrtTime(start)} --> ${toSrtTime(end)}
+${seg.text}
+`;
+        })
+        .join('\n');
+}
+
+export const getSubtitlesByVideoId = (videoId: string) =>
+    cache.tryGet(`youtube:getSubtitlesByVideoId:${videoId}`, async () => {
+        try {
+            const subtitles = await getSubtitles({ videoID: videoId });
+            const srt = convertToSrt(subtitles);
+            return srt;
+        } catch {
+            // Return empty string if subtitles are not available
+            return '';
+        }
+    });
+
+const createSubtitleDataUrl = (srt: string): string => `data:text/plain;charset=utf-8,${encodeURIComponent(srt)}`;
+
+function createSrtAttachmentFromSrt(srt: string): Array<{ url: string; mime_type: string; title: string }> {
+    if (!srt || srt.trim() === '') {
+        return [];
+    }
+
+    const dataUrl = createSubtitleDataUrl(srt);
+    return [
+        {
+            url: dataUrl,
+            mime_type: 'text/srt',
+            title: 'Subtitles',
+        },
+    ];
+}
+
+export const getSrtAttachment = async (videoId: string): Promise<Array<{ url: string; mime_type: string; title: string }>> => {
+    try {
+        const srt = await getSubtitlesByVideoId(videoId);
+        return createSrtAttachmentFromSrt(srt);
+    } catch {
+        return [];
+    }
+};
+
+export const getSrtAttachmentBatch = async (videoIds: string[]) => {
+    const results = await pMap(
+        videoIds,
+        async (videoId) => {
+            const srt = await getSubtitlesByVideoId(videoId);
+            return { videoId, srt: createSrtAttachmentFromSrt(srt) };
+        },
+        { concurrency: 5 }
+    );
+
+    return Object.fromEntries(results.map(({ videoId, srt }) => [videoId, srt]));
+};

package/lib/routes/youtube/api/youtubei.ts

@@ -1,44 +1,12 @@
-import { getSubtitles } from 'youtube-caption-extractor';
+import { Data } from '@/types';
 import cache from '@/utils/cache';
+import { parseRelativeDate } from '@/utils/parse-date';
 import { Innertube } from 'youtubei.js';
 import utils, { getVideoUrl } from '../utils';
-import { Data } from '@/types';
-import { parseRelativeDate } from '@/utils/parse-date';
+import { getSrtAttachmentBatch } from './subtitles';
 
 const innertubePromise = Innertube.create();
 
-function pad(n: number, width: number = 2) {
-    return String(n).padStart(width, '0');
-}
-
-function toSrtTime(seconds: number): string {
-    const totalMs = Math.floor(seconds * 1000);
-    const hours = Math.floor(totalMs / 3_600_000);
-    const minutes = Math.floor((totalMs % 3_600_000) / 60000);
-    const secs = Math.floor((totalMs % 60000) / 1000);
-    const millis = totalMs % 1000;
-    return `${pad(hours)}:${pad(minutes)}:${pad(secs)},${pad(millis, 3)}`;
-}
-
-type Subtitle = {
-    start: string;
-    dur: string;
-    text: string;
-};
-
-function convertToSrt(segments: Subtitle[]): string {
-    return segments
-        .map((seg, index) => {
-            const start = Number.parseFloat(seg.start);
-            const end = start + Number.parseFloat(seg.dur);
-            return `${index + 1}
-${toSrtTime(start)} --> ${toSrtTime(end)}
-${seg.text}
-`;
-        })
-        .join('\n');
-}
-
 export const getChannelIdByUsername = (username: string) =>
     cache.tryGet(`youtube:getChannelIdByUsername:${username}`, async () => {
         const innertube = await innertubePromise;
@@ -51,17 +19,11 @@ export const getDataByUsername = async ({ username, embed, filterShorts }: { use
     return getDataByChannelId({ channelId, embed, filterShorts });
 };
 
-const getSubtitlesByVideoId = (videoId: string) =>
-    cache.tryGet(`youtube:getSubtitlesByVideoId:${videoId}`, async () => {
-        const subtitles = await getSubtitles({ videoID: videoId });
-        const srt = convertToSrt(subtitles);
-        return srt;
-    });
-
 export const getDataByChannelId = async ({ channelId, embed }: { channelId: string; embed: boolean; filterShorts: boolean }): Promise<Data> => {
     const innertube = await innertubePromise;
     const channel = await innertube.getChannel(channelId);
     const videos = await channel.getVideos();
+    const videoSubtitles = await getSrtAttachmentBatch(videos.videos.filter((video) => 'video_id' in video).map((video) => video.video_id));
 
     return {
         title: `${channel.metadata.title || channelId} - YouTube`,
@@ -72,10 +34,8 @@ export const getDataByChannelId = async ({ channelId, embed }: { channelId: stri
         item: await Promise.all(
             videos.videos
                 .filter((video) => 'video_id' in video)
-                .map(async (video) => {
-                    const srt = await getSubtitlesByVideoId(video.video_id);
-                    const dataUrl = `data:text/plain;charset=utf-8,${encodeURIComponent(srt)}`;
-
+                .map((video) => {
+                    const srtAttachments = videoSubtitles[video.video_id] || [];
                     const img = 'best_thumbnail' in video ? video.best_thumbnail?.url : 'thumbnails' in video ? video.thumbnails?.[0]?.url : undefined;
 
                     return {
@@ -91,11 +51,7 @@ export const getDataByChannelId = async ({ channelId, embed }: { channelId: stri
                                 mime_type: 'text/html',
                                 duration_in_seconds: video.duration && 'seconds' in video.duration ? video.duration.seconds : undefined,
                             },
-                            {
-                                url: dataUrl,
-                                mime_type: 'text/srt',
-                                title: 'Subtitles',
-                            },
+                            ...srtAttachments,
                         ],
                     };
                 })

package/lib/routes/youtube/channel.ts

@@ -21,7 +21,7 @@ export const route: Route = {
     name: 'Channel with id',
     maintainers: ['DIYgod', 'pseudoyu'],
     handler,
-    description: `:::tip Parameter
+    description: `::: tip Parameter
 | Name       | Description                                                                         | Default |
 | ---------- | ----------------------------------------------------------------------------------- | ------- |
 | embed      | Whether to embed the video, fill in any value to disable embedding                  | embed   |

package/lib/routes/youtube/community.ts

@@ -1,6 +1,6 @@
 import { Route } from '@/types';
 
-import got from '@/utils/got';
+import ofetch from '@/utils/ofetch';
 import { load } from 'cheerio';
 import { parseRelativeDate } from '@/utils/parse-date';
 import { art } from '@/utils/render';
@@ -12,7 +12,7 @@ export const route: Route = {
     categories: ['social-media'],
     example: '/youtube/community/@JFlaMusic',
     parameters: { handle: 'YouTube handles or channel id' },
-    name: 'Community',
+    name: 'Community Posts',
     maintainers: ['TonyRL'],
     handler,
 };
@@ -25,7 +25,7 @@ async function handler(ctx) {
         urlPath = `channel/${handle}`;
     }
 
-    const { data: response } = await got(`https://www.youtube.com/${urlPath}/community`);
+    const response = await ofetch(`https://www.youtube.com/${urlPath}/posts`);
     const $ = load(response);
     const ytInitialData = JSON.parse(
         $('script')
@@ -62,7 +62,7 @@ async function handler(ctx) {
         });
 
     return {
-        title: `${username} - Community - YouTube`,
+        title: `${username} - Community Posts- YouTube`,
         link: channelMetadata.channelUrl,
         description: channelMetadata.description,
         item: items,

package/lib/routes/youtube/user.ts

@@ -12,7 +12,7 @@ export const route: Route = {
         username: 'YouTuber handle with @',
         routeParams: 'Extra parameters, see the table below',
     },
-    description: `:::tip Parameter
+    description: `::: tip Parameter
 | Name       | Description                                                                         | Default |
 | ---------- | ----------------------------------------------------------------------------------- | ------- |
 | embed      | Whether to embed the video, fill in any value to disable embedding                  | embed   |

package/lib/routes/yuanliao/index.ts

@@ -139,7 +139,7 @@ export const route: Route = {
             ],
         },
     },
-    description: `:::tip
+    description: `::: tip
 订阅 [问题反馈](https://yuanliao.info/t/bug-report)，其源网址为 \`https://yuanliao.info/t/bug-report\`，请参考该 URL 指定部分构成参数，此时路由为 [\`/yuanliao/bug-report\`](https://rsshub.app/yuanliao/bug-report)。
 :::
 

package/lib/routes/zaimanhua/comic.ts

@@ -19,6 +19,7 @@ export const route: Route = {
         supportBT: false,
         supportPodcast: false,
         supportScihub: false,
+        nsfw: true,
     },
     radar: [
         {

package/lib/routes/zaimanhua/update.ts

@@ -18,6 +18,7 @@ export const route: Route = {
         supportBT: false,
         supportPodcast: false,
         supportScihub: false,
+        nsfw: true,
     },
     radar: [
         {

package/lib/routes/zaker/utils.ts

@@ -84,7 +84,7 @@ export const getSafeLineCookieWithData = async (link): Promise<{ cookie: string;
         query: {
             once_id: onceId,
             v: '1.0.0',
-            hints: hints.sort(() => Math.random() - 0.5).join(','),
+            hints: hints.toSorted(() => Math.random() - 0.5).join(','),
         },
     });
 

package/lib/routes/zaobao/interactive.ts

@@ -1,6 +1,7 @@
 import { Route } from '@/types';
-import { parseList } from './util';
-const baseUrl = 'https://www.zaobao.com';
+import { logo } from './util';
+import ofetch from '@/utils/ofetch';
+import { parseDate } from '@/utils/parse-date';
 
 export const route: Route = {
     path: '/interactive-graphics',
@@ -11,15 +12,25 @@ export const route: Route = {
     handler,
 };
 
-async function handler(ctx) {
+async function handler() {
+    const baseUrl = 'https://www.zaobao.com.sg'; // SG Only
     const sectionLink = '/interactive-graphics';
 
-    const { resultList } = await parseList(ctx, sectionLink);
+    const response = await ofetch(`${baseUrl}/_plat/api/v2/page-content/interactive-graphics`);
+
+    const items = response.response.articles.map((i) => ({
+        title: i.title,
+        description: i.summary,
+        link: new URL(i.href, baseUrl).href,
+        pubDate: parseDate(i.timestamp, 'X'),
+        image: i.thumbnail,
+    }));
 
     return {
-        title: '《联合早报》互动新闻',
+        title: response.seoMetaInfo.seoTitle,
         link: baseUrl + sectionLink,
-        description: '新加坡、中国、亚洲和国际的即时、评论、商业、体育、生活、科技与多媒体新闻，尽在联合早报。',
-        item: resultList,
+        description: response.seoMetaInfo.seoDescription,
+        image: logo,
+        item: items,
     };
 }

package/lib/routes/zaobao/other.ts

@@ -1,5 +1,5 @@
 import { Route } from '@/types';
-import { parseList } from './util';
+import { logo, parseList } from './util';
 const baseUrl = 'https://www.zaobao.com';
 
 export const route: Route = {
@@ -18,12 +18,13 @@ async function handler(ctx) {
     const section = ctx.req.param('section') ?? 'china';
     const sectionLink = `/${type}/${section}`;
 
-    const { title, resultList } = await parseList(ctx, sectionLink);
+    const { title, resultList } = await parseList(sectionLink);
 
     return {
         title: `《联合早报》${title}`,
         link: baseUrl + sectionLink,
         description: '新加坡、中国、亚洲和国际的即时、评论、商业、体育、生活、科技与多媒体新闻，尽在联合早报。',
+        image: logo,
         item: resultList,
     };
 }

package/lib/routes/zaobao/realtime.ts

@@ -1,5 +1,5 @@
 import { Route } from '@/types';
-import { parseList } from './util';
+import { logo, parseList } from './util';
 const baseUrl = 'https://www.zaobao.com';
 
 export const route: Route = {
@@ -48,12 +48,13 @@ async function handler(ctx) {
             break;
     }
 
-    const { resultList } = await parseList(ctx, sectionLink);
+    const { resultList } = await parseList(sectionLink);
 
     return {
         title: `《联合早报》-${name}-即时`,
         link: baseUrl + sectionLink,
         description: '新加坡、中国、亚洲和国际的即时、评论、商业、体育、生活、科技与多媒体新闻，尽在联合早报。',
+        image: logo,
         item: resultList,
     };
 }

package/lib/routes/zaobao/util.tsx

@@ -0,0 +1,185 @@
+import cache from '@/utils/cache';
+import ofetch from '@/utils/ofetch';
+import { load } from 'cheerio';
+import { parseDate } from '@/utils/parse-date';
+import { renderToString } from 'hono/jsx/dom/server';
+import { base32 } from 'rfc4648';
+import Zaobao from './zaobao';
+
+const baseUrl = 'https://www.zaobao.com';
+export const logo = 'https://www.zaobao.com.sg/favicon.ico';
+
+/**
+ * 通用解析页面类似 https://www.zaobao.com/realtime/china 的网站
+ *
+ * @param {string} sectionUrl 形如 /realtime/china 的字符串
+ * @returns 新闻标题以及新闻列表
+ */
+export const parseList = async (
+    sectionUrl: string
+): Promise<{
+    title: string;
+    resultList: {
+        title: string;
+        description: string;
+        pubDate: Date;
+        link: string;
+        category: string[];
+    }[];
+}> => {
+    const pageResponse = await ofetch.raw(baseUrl + sectionUrl);
+    const $ = load(pageResponse._data);
+    let data = $('.card-listing .card .content-header a');
+    if (data.length === 0) {
+        // for HK version
+        data = $('[data-testid="article-list"] article div div a.article-link');
+    }
+    const origin = new URL(pageResponse.url).origin;
+
+    const title = $('meta[property="og:title"]').attr('content');
+
+    const resultList = await Promise.all(
+        data.toArray().map((item) => {
+            const $item = $(item);
+            const link = baseUrl + $item.attr('href');
+
+            return cache.tryGet(link, async () => {
+                const response = await ofetch.raw(origin + $item.attr('href'));
+                let $1 = load(response._data);
+
+                let title, pubDate, category, images;
+                const jsonText = $1('head script[type="application/ld+json"]')
+                    .text()
+                    .replaceAll(/[\u0000-\u001F\u007F-\u009F]/g, '');
+                const ldJson = JSON.parse(jsonText);
+
+                const isSingapore = response.url.startsWith('https://www.zaobao.com.sg/');
+                if (isSingapore) {
+                    const hydrationData = JSON.parse(
+                        JSON.parse(
+                            `"${
+                                $1('script:contains("__staticRouterHydrationData")')
+                                    .text()
+                                    .match(/__staticRouterHydrationData = JSON.parse\("(.*)"\);/)?.[1]
+                            }"`
+                        )
+                    );
+                    const article = hydrationData.loaderData['0-0'].context.payload.article;
+                    title = article.headline;
+                    pubDate = parseDate(article.create_time, 'X');
+                    category = article.tags.map((t) => t.name);
+                    $1 = load(article.body_cn, null, false);
+                    images = article.images;
+                } else {
+                    title = ldJson.headline;
+                    pubDate = parseDate(ldJson.datePublished);
+                    category = ldJson.keywords.split(',');
+                }
+
+                // $1('.overlay-microtransaction').remove();
+                // $1('#video-freemium-player').remove();
+                $1('.bff-google-ad, .bff-recommend-article').remove(); // SG
+                $1('button.cursor-pointer').remove(); // SG
+                $1('.bff-inline-image-expand-icon').remove(); // SG
+                $1('img[alt="expend icon"]').remove(); // HK
+
+                let articleBodyNode;
+                if (isSingapore) {
+                    articleBodyNode = $1;
+                } else {
+                    // for HK version
+                    $1('astro-island, .further-reading, .read-on-app-cover').remove();
+                    articleBodyNode = $1('.article-body');
+                }
+
+                const articleBody = articleBodyNode.html();
+                const imageDataArray = processImageData(isSingapore, images, $1);
+
+                // use JSX as template
+                const dom = <Zaobao imageDataArray={imageDataArray} articleBody={articleBody}></Zaobao>;
+                const description = renderToString(dom);
+
+                return {
+                    title,
+                    description,
+                    pubDate,
+                    link,
+                    category,
+                };
+            });
+        })
+    );
+    return {
+        title,
+        resultList,
+    };
+};
+
+export const orderContent = (parent) => {
+    for (const [i, e] of parent
+        .children()
+        .toArray()
+        .toSorted((a, b) => {
+            const index = Buffer.from(base32.parse('GM======')).toString(); // substring(3)
+            a = Buffer.from(
+                base32.parse(
+                    parent
+                        .find((element) => a(element))
+                        .data('s')
+                        .slice(index)
+                )
+            ).toString();
+            b = Buffer.from(
+                base32.parse(
+                    parent
+                        .find((element) => b(element))
+                        .data('s')
+                        .slice(index)
+                )
+            ).toString();
+            return a - b;
+        })
+        .entries()) {
+        parent.find((element) => e(element)).attr('s', i);
+        parent.append(e);
+    }
+};
+
+export interface ImageData {
+    type: string;
+    html: string;
+    src?: string;
+    title?: string;
+}
+
+const processImageData = (isSg, images, $1) => {
+    if (isSg && images) {
+        return images.map((img) => ({
+            type: 'data',
+            html: '',
+            src: img.url
+                .replaceAll(/\/\/.*\.com\/s3fs-public/g, '//static.zaobao.com/s3fs-public')
+                .replaceAll('s3/files', 's3fs-public')
+                .split('?')[0],
+            title: img.caption,
+        })) as ImageData[];
+    }
+
+    const hkImg = $1('[data-testid="article-banner"] img');
+    if (hkImg.length) {
+        return [
+            {
+                type: 'data',
+                html: hkImg.prop('outerHTML'),
+                src: hkImg
+                    .attr('src')
+                    .replaceAll(/\/\/.*\.com\/s3fs-public/g, '//static.zaobao.com/s3fs-public')
+                    .replaceAll('s3/files', 's3fs-public')
+                    .split('?')[0],
+                title: hkImg.attr('title'),
+            },
+        ] as ImageData[];
+    }
+
+    return [];
+};

package/lib/routes/zaobao/zaobao.tsx

@@ -0,0 +1,23 @@
+import { ImageData } from './util';
+
+function zaobao({ imageDataArray, articleBody }) {
+    return (
+        <>
+            {imageDataArray.map((imageData: ImageData) =>
+                imageData.type === 'normalHTML' ? (
+                    <div dangerouslySetInnerHTML={{ __html: imageData.html }} />
+                ) : (
+                    imageData.type === 'data' && (
+                        <figure>
+                            <img src={imageData.src} />
+                            <figcaption>{imageData.title}</figcaption>
+                        </figure>
+                    )
+                )
+            )}
+            {articleBody && <div dangerouslySetInnerHTML={{ __html: articleBody }} />}
+        </>
+    );
+}
+
+export default zaobao;