add readtime shortcode to blogs (#267)

HaxeFlixel · Apr 21, 2024 · b6e9218 · b6e9218
1 parent 0e7004f
commit b6e9218
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 83 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -44,6 +44,13 @@ module.exports = function(eleventyConfig) {
       return isActive ? "active" : "";
     });
 
+    // shortcode to calculate readtime
+    eleventyConfig.addShortcode("readtime", function(content) {
+      let words = content.split(" ").length;
+      let minutes = Math.ceil(words / 265);
+      return minutes;
+    });
+
     eleventyConfig.addShortcode("image", async function(src, alt, width, height, classes = "") {
       let resizedImage = await resizeImage(src, width, height, "cover");
 
@@ -52,8 +59,6 @@ module.exports = function(eleventyConfig) {
         outputDir: "out/img"
       });
 
-
-
       let imageAttributes = {
         alt,
         width: width,

diff --git a/content/_layouts/blog-layout.liquid b/content/_layouts/blog-layout.liquid
@@ -47,45 +47,5 @@ layout: default.liquid
 			async
 			src="https://platform.twitter.com/widgets.js"
 			charset="utf-8"></script>
-
-		{% comment %}
-			<a
-			      class="twitter-timeline"
-			      href="https://twitter.com/HaxeFlixel"
-			      data-widget-id="491877121183080448"
-			      data-height="850"
-				  data-tweet-limit="10">
-			      <div class="card">
-			        <div class="card-body ">
-					  <h5 class="card-title fw-semibold">
-						<span class="col-6">Loading tweets from @HaxeFlixel</span>
-			          <span class="spinner-border" role="status"></span>
-			          <p class="card-text placeholder-glow">
-			            <span class="placeholder col-7"></span>
-			            <span class="placeholder col-4"></span>
-			            <span class="placeholder col-4"></span>
-			            <span class="placeholder col-6"></span>
-			            <span class="placeholder col-8"></span>
-			          </p>
-
-			        </div>
-
-			      </div>
-
-			    </a>
-			    <script async>
-			      			!(function (d, s, id) {
-			      				var js,
-			      					fjs = d.getElementsByTagName(s)[0],
-			      					p = /^http:/.test(d.location) ? 'http' : 'https';
-			      				if (!d.getElementById(id)) {
-			      					js = d.createElement(s);
-			      					js.id = id;
-			      					js.src = p + '://platform.twitter.com/widgets.js';
-			      					fjs.parentNode.insertBefore(js, fjs);
-			      				}
-			      			})(document, 'script', 'twitter-wjs');
-			</script>
-		{% endcomment %}
 	</div>
 </div>
diff --git a/content/_layouts/blog-post.liquid b/content/_layouts/blog-post.liquid
@@ -14,7 +14,7 @@ layout: default.liquid
 				<i class="bi-link-45deg" aria-hidden="true"></i
 			></a>
 		</h1>
-		<p class="post-date mx-auto text-center">{{ postDate }}</p>
+		<p class="post-date mx-auto text-center">{% readtime content %} min read | {{ postDate }}</p>
 	</div>
 
 	{{ content }}

diff --git a/content/_layouts/partials/hf-splash-line.liquid b/content/_layouts/partials/hf-splash-line.liquid
@@ -1,35 +1,32 @@
 <div id="footer-splash" class="row py-1 align-items-stretch">
-    <div id="foot-yellow" class="col text-bg-flixel-yellow"></div>
-    <div id="foot-red" class="col text-bg-flixel-red "></div>
-    <div id="foot-green" class="col text-bg-flixel-green "></div>
-    <div id="foot-blue" class="col text-bg-flixel-dark-blue "></div>
-    <div id="foot-light-blue" class="col text-bg-flixel-light-blue"></div>
+	<div id="foot-yellow" class="col text-bg-flixel-yellow"></div>
+	<div id="foot-red" class="col text-bg-flixel-red "></div>
+	<div id="foot-green" class="col text-bg-flixel-green "></div>
+	<div id="foot-blue" class="col text-bg-flixel-dark-blue "></div>
+	<div id="foot-light-blue" class="col text-bg-flixel-light-blue"></div>
 </div>
 
 <script defer>
-        var audio = new Audio('/sounds/flixel.ogg');
-        document.getElementById('footer-splash').addEventListener('click', function () {
+	var audio = new Audio('/sounds/flixel.ogg');
+	document.getElementById('footer-splash').addEventListener('click', function () {
+		if (audio.paused) {
+			let times = [0.041, 0.184, 0.334, 0.495, 0.636];
+			let footCol = ['foot-green', 'foot-yellow', 'foot-light-blue', 'foot-red', 'foot-blue'];
 
-            if (audio.paused) {
-                let times = [0.041, 0.184, 0.334, 0.495, 0.636];
-                let footCol = ["foot-green", "foot-yellow", "foot-light-blue", "foot-red", "foot-blue"];
+			for (let i = 0; i < times.length; i++) {
+				document.getElementById(footCol[i]).style.opacity = 0;
+			}
 
-                for (let i = 0; i < times.length; i++) {
-                    document.getElementById(footCol[i]).style.opacity = 0;
-                }
-
-                setTimeout(function () {
-                    // code to be executed
-                    audio.play();
-                    for (let i = 0; i < times.length; i++) {
-                        setTimeout(function () {
-                            // code to be executed
-                            document.getElementById(footCol[i]).style.opacity = 1;
-                        }, times[i] * 1000);
-                    }
-                }, 1000);
-
-
-            }
-        });
-    </script>
+			setTimeout(function () {
+				// code to be executed
+				audio.play();
+				for (let i = 0; i < times.length; i++) {
+					setTimeout(function () {
+						// code to be executed
+						document.getElementById(footCol[i]).style.opacity = 1;
+					}, times[i] * 1000);
+				}
+			}, 1000);
+		}
+	});
+</script>
diff --git a/content/blog.liquid b/content/blog.liquid
@@ -5,17 +5,24 @@ layout: blog-layout
 <div class="container">
 	<div class="row">
 		{%- for blog in collections.blogpost reversed -%}
-			<a href="{{blog.url}}" property="dc:title">
-				<h3>{{ blog.data.title }}</h3>
-			</a>
-			<div class="post-date post-date-preview">{{ blog.data.postDate }}</div>
-			<p>
-				{{ blog.content | strip_html | truncate: 150 -}}
-				<a href="{{blog.url}}"> read more</a>
-			</p>
-			{% comment %} <p><%- blog.contentPreview %> <a href="<%= blog.url %>"> read more</a></p> {% endcomment %}
+			<div class="card">
+				<div class="card-body">
+					<h3 class="card-title">{{ blog.data.title }}</h3>
 
-			<hr>
+					<div class="card-subtitle text-body-secondary float-end">
+						<div class="post-date-preview">
+							{% readtime blog.content %} min read | {{ blog.data.postDate }}
+						</div>
+					</div>
+					<p class="mb-0 card-text">
+						{{ blog.content | strip_html | truncate: 250 -}}
+						<a href="{{blog.url}}" class="stretched-link"> read more</a>
+					</p>
+					{% comment %} <p><%- blog.contentPreview %> <a href="<%= blog.url %>"> read more</a></p> {% endcomment %}
+				</div>
+			</div>
+
+			<hr class="my-3">
 		{%- endfor -%}
 	</div>
 </div>
diff --git a/content/demos/FlxBitmapText.md b/content/demos/FlxBitmapText.md
@@ -12,4 +12,3 @@ Demo showcasing loading `flixel.text.FlxBitmapText` and `flixel.graphics.frames.
 - `HELLO WORLD!...` is using `FlxBitmapFont.fromAngelCode()` and loading a `.fnt` file
 - `ROBOCOP RULES!!!` is using `FlxBitmapFont.fromMonospace()`
 - `You can even define and use Unicode Combining Diacritical Marks!` is using `FlxBitmapFont.fromAngelCode()` and loading a `.xml` file.
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,4 +12,3 @@ Demo showcasing loading `flixel.text.FlxBitmapText` and `flixel.graphics.frames.
		- `HELLO WORLD!...` is using `FlxBitmapFont.fromAngelCode()` and loading a `.fnt` file
		- `ROBOCOP RULES!!!` is using `FlxBitmapFont.fromMonospace()`
		- `You can even define and use Unicode Combining Diacritical Marks!` is using `FlxBitmapFont.fromAngelCode()` and loading a `.xml` file.