From 3a0ee14aaff9de4c6c1416b2c093285236c03989 Mon Sep 17 00:00:00 2001
From: Monty <hey@montylion.dev>
Date: Thu, 30 Sep 2021 21:12:50 +0200
Subject: [PATCH] feat(blog): Add easy to use YouTube iframe with aspect-ratio
 fallback

[yt-iframe](videoID)
---
 blogposts/_test.md  |  6 +++---
 src/routers/blog.js | 24 +++++++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/blogposts/_test.md b/blogposts/_test.md
index 0f97cb8..21ffc03 100644
--- a/blogposts/_test.md
+++ b/blogposts/_test.md
@@ -126,9 +126,9 @@ console.log(trueOrFalseJSON);
 
 <cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
 
-<div class="aspectratio-fallback">
-  <iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+[yt-iframe](djV11Xbc914)
+
+```[yt-iframe](djV11Xbc914)```
 
 ![test](https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg)
 
diff --git a/src/routers/blog.js b/src/routers/blog.js
index 2d72efc..409b8de 100644
--- a/src/routers/blog.js
+++ b/src/routers/blog.js
@@ -17,10 +17,14 @@ const postList = () => {
 		.filter(filename => filename.endsWith('.md')) // Ignores other files/folders
 		.map((filename) => {
 			const slug = filename.replace('.md', '');
-			const rawPost = fs.readFileSync(path.join('blogposts', `${filename}`), 'utf-8');
+			const rawPost = fs.readFileSync(
+				path.join('blogposts', `${filename}`),
+				'utf-8'
+			);
 			const { data: postInfo } = matter(rawPost);
 			return {
-				slug, postInfo
+				slug,
+				postInfo,
 			};
 		});
 
@@ -63,7 +67,7 @@ router.get('/feed.xml', async (request, response) => {
 	});
 });
 
-router.get('/:slug', async (request, response) => {
+router.get('/:slug', async (request, response, next) => {
 
 	const reqLocale = request.locale;
 	const locale = util.getLocale(reqLocale.region, reqLocale.language);
@@ -79,12 +83,18 @@ router.get('/:slug', async (request, response) => {
 		rawPost = fs.readFileSync(path.join('blogposts', `${postName}.md`), 'utf-8');
 	} catch(err) {
 		logger.error(err);
-		response.sendStatus(404);
-		logger.warn(`HTTP 404 at /blog/${postName}`);
+		next();
 		return;
 	}
 	// Convert the post info into JSON and separate it and the content
-	const { data: postInfo, content } = matter(rawPost);
+	// eslint-disable-next-line prefer-const
+	let { data: postInfo, content } = matter(rawPost);
+
+	// Replace [yt-iframe](videoID) with the full <iframe />
+	content = content
+		.replaceAll(/(?<!`)\[yt-iframe]\(/g, '<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/')
+		.replaceAll(/(?<=<iframe src="https:\/\/www\.youtube-nocookie\.com\/embed\/.{11})\)/g, '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>');
+
 	// Convert the content into HTML
 	const htmlPost = marked(content);
 
@@ -93,7 +103,7 @@ router.get('/:slug', async (request, response) => {
 		locale,
 		localeString,
 		postInfo,
-		htmlPost		
+		htmlPost,
 	});
 });