Add reading time estimate

lib/generate/posts.ts

@@ -23,6 +23,8 @@ export default async function posts(): Promise<Page[]> {
 		}
 
 		if (page.metadata.source && page.metadata.source!.endsWith(".md")) {
+			(<PostMetadata>page.metadata).readingTime = util.getReadingTime(page.text);
+
 			page.text = markdown.render(page.text);
 		}
 

lib/generate/tutorials.ts

@@ -23,6 +23,8 @@ async function generateTutorials(group: string): Promise<Page[]> {
 		}
 
 		if (page.metadata.source && page.metadata.source!.endsWith(".md")) {
+			(<PostMetadata>page.metadata).readingTime = util.getReadingTime(page.text);
+
 			page.text = markdown.render(page.text);
 		}
 

lib/metadata.ts

@@ -17,6 +17,7 @@ export interface PostMetadata extends Metadata {
 	slug: string;
 	category: string;
 	date: string | Date;
+	readingTime?: number;
 	excerpt?: string;
 	uuid: string;
 }

lib/util.ts

@@ -12,6 +12,12 @@ export async function write(filePath: string, data: any) {
 	await fs.writeFile(dest, data);
 }
 
+export function getReadingTime(text: string): number {
+	const avgWPM = 225;
+	const words = text.split(/\s+/).length;
+	return Math.max(1, Math.round(words / avgWPM))
+}
+
 export function highlight(source: string, language?: string): string {
 	const res = language ? hljs.highlight(language, source) : hljs.highlightAuto(source);
 	const highlighted = res.value;

site/css/main.scss

@@ -58,7 +58,6 @@ article {
 			color: var(--secondary-ui-text-color);
 			font-family: $monospace;
 			font-size: 14px;
-			text-decoration: none !important;
 		}
 		a { text-decoration: none; }
 	}
@@ -122,6 +121,9 @@ article {
 		font-size: 14px;
 		font-weight: lighter;
 		color: var(--secondary-ui-text-color);
+
+		a { text-decoration: underline; }
+		a::before, a::after { content: ""; }
 	}
 
 	.article-content {

site/includes/article-meta.html.ejs

@@ -1,4 +1,5 @@
 <p class="article-meta">
+	<meta itemprop="author" value="Shadowfacts">
 	on
 	<span>
 		<% const formatted = formatDate(metadata.date, "MMM Do, YYYY") %>
@@ -11,6 +12,8 @@
 		in
 		<span itemprop="articleSection"><a href="/tutorials/<%= metadata.series %>" rel="category"><%= metadata.seriesName %></a></span>
 	<% } %>
-	by
+	<% if (metadata.readingTime) { %>
-	<span itemprop="author">Shadowfacts</span>
+		•
+		<%= metadata.readingTime %> min read
+	<% } %>
 </p>