feat(articles): add back reading time on landing page

apps/romainlanz.com/app/admin/articles/controllers/store_article_controller.ts

@@ -51,6 +51,7 @@ export default class StoreArticleController {
 			summary,
 			contentHtml: markdownHtml.toString(),
 			contentMarkdown: markdownContent,
+			readingTime: Math.ceil((markdownContent.split(' ').length || 0) / 238),
 			slug: string.slug(title).toLocaleLowerCase(),
 			categoryId,
 		});

apps/romainlanz.com/app/admin/articles/controllers/update_article_controller.ts

@@ -54,6 +54,7 @@ export default class UpdateArticleController {
 			summary,
 			contentHtml: markdownHtml.toString(),
 			contentMarkdown: markdownContent,
+			readingTime: Math.ceil((markdownContent.split(' ').length || 0) / 238),
 			categoryId,
 		});
 

apps/romainlanz.com/app/articles/domain/article.ts

@@ -10,6 +10,7 @@ interface Properties {
 	summary: string | null;
 	slug: string;
 	content: string | null;
+	readingTime: number;
 	category?: Category;
 }
 
@@ -18,10 +19,6 @@ export class Article extends Entity<Properties> {
 		return this.props.publishedAt ? this.props.publishedAt < now : false;
 	}
 
-	get readingTime() {
-		return Math.ceil((this.props.content?.split(' ').length || 0) / 238);
-	}
-
 	static create(properties: Properties) {
 		return new this(properties);
 	}

apps/romainlanz.com/app/articles/repositories/article_repository.ts

@@ -6,14 +6,14 @@ import { Category } from '#taxonomies/domain/category';
 import { CategoryIdentifier } from '#taxonomies/domain/category_identifier';
 import { DateTime } from 'luxon';
 import type { IllustrationName } from '@rlanz/design-system/illustration-name';
-import type { ResultOf } from '#types/common';
 
 interface StoreArticleDTO {
 	title: string;
 	summary: string;
 	slug: string;
 	contentHtml: string;
 	contentMarkdown: string;
+	readingTime: number;
 	categoryId: string;
 }
 
@@ -23,21 +23,17 @@ interface UpdateArticleDTO {
 	title: string;
 	contentHtml: string;
 	contentMarkdown: string;
+	readingTime: number;
 	categoryId: string;
 }
 
-export type ArticleListQueryResult = ResultOf<ArticleRepository, 'all'>;
-export type ArticlePaginatedQueryResult = ResultOf<ArticleRepository, 'paginated'>;
-export type ArticleQueryResult = ResultOf<ArticleRepository, 'findBySlug'>;
-export type ArticleByIdQueryResult = ResultOf<ArticleRepository, 'findById'>;
-
 export class ArticleRepository {
 	#scopeCategory: Category | null = null;
 
 	async all() {
 		const articleRecords = await db
 			.selectFrom('articles')
-			.select(['id', 'title', 'slug', 'published_at'])
+			.select(['id', 'title', 'slug', 'published_at', 'reading_time'])
 			.orderBy('published_at desc')
 			.execute();
 
@@ -47,6 +43,7 @@ export class ArticleRepository {
 				publishedAt: article.published_at ? DateTime.fromJSDate(article.published_at) : null,
 				title: article.title,
 				slug: article.slug,
+				readingTime: article.reading_time,
 				summary: null,
 				content: null,
 			});
@@ -73,7 +70,7 @@ export class ArticleRepository {
 	async paginated(page: number, perPage: number) {
 		const articleRecords = await db
 			.selectFrom('articles')
-			.select(['id', 'title', 'summary', 'slug', 'published_at'])
+			.select(['id', 'title', 'summary', 'slug', 'published_at', 'reading_time'])
 			.orderBy('published_at', 'desc')
 			.where('published_at', 'is not', null)
 			.where('published_at', '<=', new Date())
@@ -93,6 +90,7 @@ export class ArticleRepository {
 				title: article.title,
 				slug: article.slug,
 				summary: article.summary,
+				readingTime: article.reading_time,
 				content: null,
 			});
 		});
@@ -101,7 +99,7 @@ export class ArticleRepository {
 	async findLastFourPublished() {
 		const articleRecords = await db
 			.selectFrom('articles')
-			.select(['id', 'title', 'summary', 'slug', 'published_at'])
+			.select(['id', 'title', 'summary', 'slug', 'published_at', 'reading_time'])
 			.orderBy('published_at', 'desc')
 			.where('published_at', 'is not', null)
 			.where('published_at', '<=', new Date())
@@ -115,6 +113,7 @@ export class ArticleRepository {
 				title: article.title,
 				slug: article.slug,
 				summary: article.summary,
+				readingTime: article.reading_time,
 				content: null,
 			});
 		});
@@ -131,6 +130,7 @@ export class ArticleRepository {
 				summary: payload.summary,
 				content_html: payload.contentHtml,
 				content_markdown: payload.contentMarkdown,
+				reading_time: payload.readingTime,
 				category_id: payload.categoryId,
 			})
 			.execute();
@@ -144,6 +144,7 @@ export class ArticleRepository {
 				summary: payload.summary,
 				content_html: payload.contentHtml,
 				content_markdown: payload.contentMarkdown,
+				reading_time: payload.readingTime,
 				category_id: payload.categoryId,
 			})
 			.where('id', '=', payload.id)
@@ -165,6 +166,7 @@ export class ArticleRepository {
 				'articles.summary',
 				'articles.content_html',
 				'articles.published_at',
+				'articles.reading_time',
 				'categories.id as category_id',
 				'categories.name as category_name',
 				'categories.slug as category_slug',
@@ -184,6 +186,7 @@ export class ArticleRepository {
 			content: articleRecord.content_html,
 			summary: articleRecord.summary,
 			publishedAt: DateTime.fromJSDate(articleRecord.published_at!),
+			readingTime: articleRecord.reading_time,
 			category: Category.create({
 				id: CategoryIdentifier.fromString(articleRecord.category_id!),
 				name: articleRecord.category_name!,

apps/romainlanz.com/app/pages/view_models/landing_view_model.ts

@@ -18,7 +18,7 @@ export class LandingViewModel {
 				slug: article.props.slug,
 				publishedAtHuman: article.props.publishedAt!.toFormat('DD'),
 				publishedAt: article.props.publishedAt!.set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toISO(),
-				readingTime: article.readingTime,
+				readingTime: article.props.readingTime,
 			})),
 		};
 	}

apps/romainlanz.com/database/migrations/1734383672554_add_reading_time_to_articles_table.ts

@@ -0,0 +1,12 @@
+import type { Kysely } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+	await db.schema
+		.alterTable('articles')
+		.addColumn('reading_time', 'integer', (col) => col.notNull().defaultTo(0))
+		.execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+	await db.schema.alterTable('articles').dropColumn('reading_time').execute();
+}

apps/romainlanz.com/inertia/pages/landing.vue

@@ -43,6 +43,7 @@
 					:date="vm.articles[0].publishedAtHuman"
 					:datetime="vm.articles[0].publishedAt"
 					:excerpt="vm.articles[0].summary"
+					:reading-time="vm.articles[0].readingTime"
 				/>
 
 				<ArticleCard
@@ -53,6 +54,7 @@
 					:date="vm.articles[2].publishedAtHuman"
 					:datetime="vm.articles[2].publishedAt"
 					:excerpt="vm.articles[2].summary"
+					:reading-time="vm.articles[2].readingTime"
 				/>
 			</div>
 			<div class="flex flex-col gap-6 lg:w-1/2">
@@ -64,6 +66,7 @@
 					:date="vm.articles[1].publishedAtHuman"
 					:datetime="vm.articles[1].publishedAt"
 					:excerpt="vm.articles[1].summary"
+					:reading-time="vm.articles[1].readingTime"
 				/>
 
 				<ArticleCard
@@ -74,6 +77,7 @@
 					:date="vm.articles[3].publishedAtHuman"
 					:datetime="vm.articles[3].publishedAt"
 					:excerpt="vm.articles[3].summary"
+					:reading-time="vm.articles[3].readingTime"
 				/>
 			</div>
 		</div>

apps/romainlanz.com/types/db.ts

@@ -18,6 +18,7 @@ export interface Articles {
   created_at: Timestamp;
   id: string;
   published_at: Timestamp | null;
+  reading_time: Generated<number>;
   slug: string;
   status: Generated<number>;
   summary: string;

packages/design-system/src/molecules/article_card/article_card.vue

@@ -10,6 +10,7 @@
 		date: string;
 		datetime: string;
 		excerpt: string;
+		readingTime: number;
 		tags?: Array<{ name: string; color: TagProps['color'] }>;
 	}>();
 
@@ -39,6 +40,8 @@
 				<Tag v-if="tags" v-for="tag in tags" :color="tag.color">
 					{{ tag.name }}
 				</Tag>
+
+				<span class="text-xs uppercase">{{ readingTime }}mn de lecture</span>
 			</div>
 		</article>
 	</Link>