fixing youtube videos in markdown

app/lib/getPage.ts

@@ -6,6 +6,12 @@ import remarkHtml from 'remark-html';
 import remarkYouTubeEmbed from './youTubePlugin';
 import gfm from 'remark-gfm'; // Import the plugin for tables
 
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
+
 //global files used in both methods
 const files = fs.readdirSync(path.join(process.cwd(), '/content'));
 
@@ -24,7 +30,33 @@ export async function getTitles(){
     return allData.map(post => post.title);
 }
 
-export async function getPageContent(slug:string){
+
+export async function getPageContent(slug: string) {
+    const which = files.filter(content => content === slug + '.md');
+    const fileContents = fs.readFileSync(`${process.cwd()}/content/${which}`, 'utf8');
+    const matterResult = matter(fileContents);
+
+    const processedContent = await remark()
+      .use(remarkParse)
+      .use(remarkGfm)
+      .use(remarkYouTubeEmbed)     
+      .use(remarkRehype, { allowDangerousHtml: true }) // Convert markdown to rehype
+      .use(rehypeRaw) // Allow raw HTML to pass through
+      .use(rehypeStringify)
+      .process(matterResult.content);
+
+    const contentHtml = processedContent.toString();
+    return {
+      contentHtml
+    };
+  }
+
+
+
+
+
+
+export async function getPageContentOld(slug:string){
     //console.log("slug page content trying to match on ",slug+'.md')
     const which = files.filter(content => content === slug+'.md' )
     //console.log('content for this page \n',which);
@@ -35,8 +67,8 @@ export async function getPageContent(slug:string){
     // Use remark to convert markdown into HTML string
     const processedContent = await remark()
     .use(gfm)
-    .use(remarkYouTubeEmbed)     
     .use(remarkHtml)
+    .use(remarkYouTubeEmbed)     
     .process(matterResult.content);
         //console.log(processedContent.value);
     const contentHtml = processedContent.value;

app/lib/youTubePlugin.js

@@ -9,7 +9,7 @@ function remarkYouTubeEmbed() {
         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>`,
+          value: `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" ></iframe>`,
         };
         //console.log("youtubeRegex match", videoId);
       }

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

@@ -55,11 +55,26 @@ 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
+### Burj Al Arab Pool
 
-{{< youtube dQw4w9WgXcQ >}}
+{{< youtube r5EEa1IGn88 >}}
 
-abc
+## AURA Skypool
+
+{{< youtube s1CgfooqEQ4 >}}
+
+## Cloud 22 at Atlantis
+
+{{< youtube J5-IAhNms4Q >}}
+
+## Address Beach resort
+
+{{< youtube 6fkXsiZpBDU >}}
+{{< youtube tbkNGzcEbu8 >}}
+
+## Privilege at SLS Dubai
+
+{{< youtube WJgvZsYJLpw >}}
 
 ## **1. Panoramic Infinity Pools**
 

package.json

@@ -14,9 +14,12 @@
     "next": "^14.2.17",
     "react": "^18",
     "react-dom": "^18",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1",
+    "remark-rehype": "^11.1.1",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {