adding video embed plugin

README.md

@@ -12,3 +12,4 @@ I use a python script backend to produce the blog posts and imagery. MD is limit
 
 I would like to use MDX instead of just MarkDown for the content. For now Dec 2024 I need to see how Google likes the total SEO approach and if it gags on the AI blog posts which are not the best.
 A proper contact form solution to be implemented.
+Logo and Favicon for better branding.

app/layout.tsx

@@ -137,6 +137,10 @@ export default function RootLayout({
                 © {new Date().getFullYear()} Dubai Pool Services. All
                 rights reserved.
               </p>
+              <p>
+                Web Design and <a href='https://cambs.eu'>SEO</a> by Cambs
+                Digital
+              </p>
             </div>
           </div>
         </footer>

app/lib/getPage.ts

@@ -2,7 +2,8 @@ import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 import { remark } from 'remark';
-import html from 'remark-html';
+import remarkHtml from 'remark-html';
+import remarkYouTubeEmbed from './youTubePlugin';
 import gfm from 'remark-gfm'; // Import the plugin for tables
 
 //global files used in both methods
@@ -33,9 +34,11 @@ export async function getPageContent(slug:string){
     //parse the whole page
     // Use remark to convert markdown into HTML string
     const processedContent = await remark()
-        .use(gfm)    
-        .use(html)       
-        .process(matterResult.content);
+    .use(gfm)
+    .use(remarkYouTubeEmbed)     
+    .use(remarkHtml)
+    .process(matterResult.content);
+        //console.log(processedContent.value);
     const contentHtml = processedContent.value;
   return {
     contentHtml

app/lib/youTubePlugin.js

@@ -0,0 +1,20 @@
+import { visit } from "unist-util-visit";
+
+function remarkYouTubeEmbed() {
+  return (tree) => {
+    visit(tree, "text", (node, index, parent) => {
+      const youtubeRegex = /{{< youtube (\S+) >}}/;
+      const match = youtubeRegex.exec(node.value);
+      if (match) {
+        const videoId = match[1];
+        parent.children[index] = {
+          type: "html",
+          value: `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`,
+        };
+        //console.log("youtubeRegex match", videoId);
+      }
+    });
+  };
+}
+
+export default remarkYouTubeEmbed;

content/top-5-luxury-pools-dubai.md

@@ -55,6 +55,12 @@ Citations:
 [4] https://www.factmagazines.com/uae/dubai/things-to-do-dubai/editors-picks-the-most-instagrammable-swimming-pools-in-dubai
 [5] https://dubainight.com/news/2024-10-30/dive-into-luxury-dubais-best-rooftop-pools
 
+xyz
+
+{{< youtube dQw4w9WgXcQ >}}
+
+abc
+
 ## **1. Panoramic Infinity Pools**
 
 There’s nothing quite like dipping into an infinity pool with panoramic views of Dubai's iconic skyline. From the towering **Burj Khalifa** to the shimmering **Arabian Gulf**, these pools let you relax while enjoying breathtaking scenery.

package.json

@@ -16,7 +16,8 @@
     "react-dom": "^18",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",

tsconfig.json

@@ -33,7 +33,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "app/lib/youTubePlugin.js"  ],
   "exclude": [
     "node_modules"
   ]