⭐(rss) support article image url

Author: shidenggui

backend/assets/blogs-original.csv

@@ -12,7 +12,7 @@ ShrekShao, http://shrekshao.github.io, http://shrekshao.github.io/feed.xml, 编
 Python 工匠, https://www.zlovezl.cn, https://www.zlovezl.cn/feeds/latest/, 编程
 小明明S À DOMICILE, https://www.dongwm.com, https://www.dongwm.com/atom.xml, 编程
 但行好事，莫问前程, https://windard.com, https://windard.com/feed.xml, 编程
-罗磊的独立博客, https://luolei.org, http://luolei.org/feed/, 编程; 旅行
+罗磊的独立博客, https://luolei.org, https://luolei.org/feed/, 编程; 旅行
 阁子, https://newdee.cf, https://newdee.cf/atom.xml, 编程; 算法; 生活
 RidiQulous, https://ridiqulous.com, https://ridiqulous.com/feed, 图像处理; 乐高
 代码家, https://daimajia.com, https://daimajia.com/feed, 编程; 投资

backend/src/commands/test-rss-with-save.command.ts

@@ -0,0 +1,28 @@
+import { Command, Positional } from 'nestjs-command';
+import { Injectable } from '@nestjs/common';
+import { RssParser } from '../domains/infrastructure/rss-parser';
+import { ArticleRepository } from '../domains/hub/respositories/article';
+
+@Injectable()
+export class TestRssWithSaveCommand {
+  constructor(
+    private readonly articleRepository: ArticleRepository,
+  ) {
+  }
+
+  @Command({command: 'test-rss-with-save <rss>'})
+  async run(
+    @Positional({
+      name: 'rss',
+      describe: 'rss address of blog',
+      type: 'string',
+    }) rss
+  ) {
+    const output = await new RssParser().fetch(rss);
+    console.log(JSON.stringify(output, null, 2))
+    await Promise.all(
+      output.articles.map(async o => await this.articleRepository.createOrUpdate(o))
+    )
+    return
+  }
+}

backend/src/domains/hub/dtos/create-article-dto.ts

@@ -13,6 +13,7 @@ export class CreateArticleDto extends BaseDto {
     public tags: string[],
     public summary: string,
     public content: string,
+    public imgUrl: string | null,
     public date: Date,
   ) {
     super()

backend/src/domains/hub/models/article.ts

@@ -10,6 +10,7 @@ export class Article {
     public tags: string[],
     public summary: string,
     public content: string,
+    public imgUrl: string | null,
     public date: Date,
     public views: number = 0,
     public createdAt: Date = new Date(),

backend/src/domains/hub/services/rss-crawl-service.ts

@@ -49,14 +49,7 @@ export class RssCrawlService {
 
     await Promise.all(
       rssParseOutput.articles
-        .map(async o => {
-            // try {
-              await this.articleRepository.createOrUpdate(o)
-            // } catch (e) {
-            //   console.log(`Try to create or update ${o.repr()} failed`, e)
-            // }
-          }
-        )
+        .map(async o => await this.articleRepository.createOrUpdate(o))
     )
     this.logger.log(`Crawl ${feed} success`)
   }

backend/src/domains/infrastructure/rss-parser.ts

@@ -41,6 +41,7 @@ export class RssParser {
         this.parseCategory(o),
         this.parseSummary(o),
         o.content?.trim() || o['content:encoded']?.trim() || '',
+        this.parseImgUrl(o),
         this.fixDate(new Date(o.pubDate))
         )
       )
@@ -56,9 +57,16 @@ export class RssParser {
     }
   }
 
+  private parseImgUrl(article: Parser.Item): string | null {
+    const imgUrlRegex = /<img[^>]*? src="(.*?)" [^>]*?>/
+    let imgUrl = article.content?.match(imgUrlRegex)?.[1]
+    if (!imgUrl) imgUrl = article['content:encoded']?.match(imgUrlRegex)?.[1]
+    return imgUrl || null
+  }
+
   private parseCategory(article: Parser.Item): string[] {
     let categories = article.categories?.filter(t => typeof t === 'string') || []
-    if (!categories.length ) {
+    if (!categories.length) {
       // for https://beyondstars.xyz/posts/index.xml
       if (typeof article.category === 'string') categories = [article.category]
       // for <category term='tag'/>

backend/src/hub/hub.module.ts

@@ -14,6 +14,7 @@ import { GenerateTypingsByGraphqlCommand } from '../commands/generate-typings-by
 import { CrawlArticlesRegularlyService } from '../crons/crawl-articles-regularly';
 import { AddBlogFromIssueCommand } from '../commands/add-blog-from-issue';
 import { TestRssCommand } from '../commands/test-rss.command';
+import { TestRssWithSaveCommand } from '../commands/test-rss-with-save.command';
 
 const HubTypeOrmModule = TypeOrmModule.forFeature([BlogTable, ArticleTable]);
 
@@ -32,6 +33,7 @@ const HubTypeOrmModule = TypeOrmModule.forFeature([BlogTable, ArticleTable]);
     CrawlArticlesRegularlyService,
     AddBlogFromIssueCommand,
     TestRssCommand,
+    TestRssWithSaveCommand,
   ],
   exports: [
     HubTypeOrmModule,

backend/src/migrations/1584491838844-add_img_url_on_article_table.ts

@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class addImgUrlOnArticleTable1584491838844 implements MigrationInterface {
+    name = 'addImgUrlOnArticleTable1584491838844'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query("ALTER TABLE `article_table` ADD `imgUrl` varchar(2048) NULL", undefined);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query("ALTER TABLE `article_table` DROP COLUMN `imgUrl`", undefined);
+    }
+
+}

backend/src/tables/article.ts

@@ -32,6 +32,9 @@ export class ArticleTable {
   @Column('longtext')
   public content: string;
 
+  @Column({length: 2048, nullable: true})
+  public imgUrl: string;
+
   @Column()
   public date: Date;
 
@@ -54,6 +57,7 @@ export class ArticleTable {
       this.tags.split(','),
       this.summary,
       this.content,
+      this.imgUrl,
       this.date,
       this.views,
       this.createdAt,

frontend/components/article-twitter-card.tsx

@@ -6,11 +6,9 @@ export default function ArticleTwitterCard({article}: { article: Article }) {
   let card = TwitterCardType.SUMMARY;
   let image = DEFAULT_TWITTER_CARD_IMAGE;
 
-  // Find md image urls
-  const imageRegex: string[] | null = article.content.match(/!\[.*?]\((.*?)\)/);
-  if (imageRegex) {
+  if (article.imgUrl) {
     card = TwitterCardType.SUMMARY_LARGE_IMAGE;
-    image = imageRegex[1];
+    image = article.imgUrl;
   }
   return (
     <TwitterCard card={card} title={article.title} description={article.summary} image={image}/>

frontend/graphql/queries.ts

@@ -56,6 +56,7 @@ export const RETRIEVE_ARTICLE_BY_SLUG = gql`
             ...ArticleMetadata
             url
             summary(length: 99999)
+            imgUrl
             polishedSummary @client
             content
         }

frontend/pages/articles/[slug].tsx

@@ -1,6 +1,6 @@
 import Layout from '../../components/layout';
 import { withApollo } from '../../libs/with-apollo';
-import { IArticleOfClient, IBlogOfClient, RETRIEVE_ARTICLE_BY_SLUG } from '../../graphql/queries';
+import { IArticleOfClient, RETRIEVE_ARTICLE_BY_SLUG } from '../../graphql/queries';
 import Head from 'next/head';
 import ArticleTwitterCard from '../../components/article-twitter-card';
 import { TimeUtils } from '../../domains/infrastructure/time-utils';
@@ -55,9 +55,14 @@ const Page = ({article}: { article: IArticleOfClient }) => {
             </div>
           </header>
 
-
-          <article className="text-gray-700 leading-relaxed text-justify">
-            {article.polishedSummary}……
+          <article>
+            {article.imgUrl && <img
+              className="mb-2 mx-auto"
+              src={article.imgUrl}
+              alt={`${article.title}的配图`}/>}
+            <div className="text-gray-700 leading-relaxed text-justify">
+              {article.polishedSummary}……
+            </div>
           </article>
         </div>
 

graphql/defines.graphql

@@ -30,6 +30,7 @@ type Article {
     tags: [String!]!
     summary(length: Int! = 200): String!
     content: String!
+    imgUrl: String
     date: DateTime!
     views: Int!
     createdAt: DateTime!

graphql/graphql.ts

@@ -20,6 +20,7 @@ export interface Article {
     tags: string[];
     summary: string;
     content: string;
+    imgUrl?: string;
     date: DateTime;
     views: number;
     createdAt: DateTime;