Add time to read (#74)

* Update header styles and include reading time in writing header * Update left border width in _content.scss
afnizarnur · May 5, 2024 · 30252cd · 30252cd
1 parent 7eaaa7b
commit 30252cd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/src/assets/styles/components/_content.scss b/src/assets/styles/components/_content.scss
@@ -61,7 +61,7 @@
 			margin: 0;
 			font-weight: 500;
 			font-style: italic;
-			border-left: 4px solid var(--text-primary);
+			border-left: 3px solid var(--text-primary);
 			padding-left: 1em;
 			margin: 2.75rem -1.5rem;
 

diff --git a/src/assets/styles/components/writing/_header.scss b/src/assets/styles/components/writing/_header.scss
@@ -2,7 +2,6 @@
 	&--content {
 		margin: 144px 0px 0px 0px;
 		padding-bottom: 64px;
-
 		border-bottom: 1px solid var(--border-default);
 
 		@include mq-down(lg) {
@@ -14,8 +13,15 @@
 			padding-bottom: 44px;
 		}
 
+		.info {
+			display: flex;
+			gap: 8px;
+			color: var(--text-secondary);
+			margin-top: 24px;
+		}
+
 		h1 {
-			margin: 24px 0px;
+			margin: 0px 0px 24px 0px;
 		}
 	}
 }
diff --git a/src/includes/writing/header.njk b/src/includes/writing/header.njk
@@ -6,15 +6,24 @@
 >
     <div class="writing-detail--content">
         <div class="title">
-            <p>
-                {{ page.date | dateToFormat('DDD') }}
-            </p>
 
             <h1>{{title}}</h1>
 
             <p class="subtitle">
                 {{ description }}
             </p>
+
+            <div class="info">
+                <p>
+                    {{ page.date | dateToFormat('DDD') }}
+                </p>
+                <div>
+                    <span aria-hidden="true">·</span>
+                </div>
+                <div>
+                    <span aria-hidden="true">{{ content | readingTime }}</span>
+                </div>
+            </div>
         </div>
     </div>
 </r-cell>
diff --git a/utils/filters.js b/utils/filters.js
@@ -59,5 +59,13 @@ module.exports = {
 		return collection.filter(
 			(item) => item.data.tags && item.data.tags.includes(tag)
 		)
+	},
+
+	readingTime: function (content) {
+		const WPM = 200
+
+		const wordCount = content.split(/\s+/).length
+		const readingTime = Math.ceil(wordCount / WPM)
+		return `${readingTime} min${readingTime !== 1 ? "s" : ""} read`
 	}
 }