feat: add reading time and word count

Signed-off-by: Aaqa Ishtyaq <[email protected]>
aaqaishtyaq · Mar 7, 2024 · 5429d5e · 5429d5e
1 parent 000c5cf
commit 5429d5e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/sass/theme.scss b/sass/theme.scss
@@ -199,7 +199,18 @@ p > code {
 
 .date {
     color: var(--fg4);
-    font-size: 14px;
+    font-size: 0.8750em;
+}
+
+.reading-time {
+    color: var(--fg4);
+    font-size: 0.8750em;
+}
+
+.page-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .border {

diff --git a/templates/page.html b/templates/page.html
@@ -5,9 +5,16 @@
     <div itemprop="headline">
         <h1>{{ page.title }}</h1>
         <div class="border"></div>
-        <time datetime="{{ page.date | date(format="%Y-%m-%d") }}" class="date" itemprop="datePublished">
-            {{ page.date | date(format="%d %b %Y") }}
-        </time>
+        <div class="page-meta">
+            <time datetime="{{ page.date | date(format=" %Y-%m-%d") }}" class="date" itemprop="datePublished">
+                {{ page.date | date(format="%d %b %Y") }}
+            </time>
+            <div class="reading-time">
+                {% set word_count = page.content | split(pat=" ") | length %}
+                {% set reading_time = (word_count / 250) | round %}
+                <div>{{ word_count }} words, {{ reading_time }} minutes to read</div>
+            </div>
+        </div>
     </div>
     <div itemprop="articleBody">
         {{ page.content | safe }}