feat: markdown iframe

fezcode · fezcode · commit 95a3c652f464 · 2025-11-23T11:52:18.000+03:00
diff --git a/public/logs/dhanush-why-this-kolaveri-di.txt b/public/logs/dhanush-why-this-kolaveri-di.txt
@@ -10,4 +10,6 @@
 
 ## About
 
-The song 'Why This Kolaveri Di' translates roughly to 'Why this murderous rage, girl?' or 'Why this killer rage, girl?'. It tells the story of a man who is drunk and heartbroken after a love failure, questioning his girlfriend about why she left him. The song is often referred to as a 'soup song,' a term for a love failure song. Its lyrics are a distinctive blend of Tamil and English, known as 'Tanglish.' The song achieved immense popularity and became an internet phenomenon due to several factors: its catchy tune and simple music, the 'Tanglish' lyrics which made it accessible and relatable, its theme of unrequited love and heartbreak, and its viral spread through social media platforms. Dhanush's unpolished, 'mistake-filled' vocal delivery was perceived as fitting the song's casual tone and making it easily hummable.
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ja168gMpb3o?si=gdvm1o1JZ8ulP-n8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+The song 'Why This Kolaveri Di' translates roughly to 'Why this murderous rage, girl?' or 'Why this killer rage, girl?'. It tells the story of a man who is drunk and heartbroken after a love failure, questioning his girlfriend about why she left him. The song is often referred to as a 'soup song,' a term for a love failure song. Its lyrics are a distinctive blend of Tamil and English, known as 'Tanglish.' The song achieved immense popularity and became an internet phenomenon due to several factors: its catchy tune and simple music, the 'Tanglish' lyrics which made it accessible and relatable, its theme of unrequited love and heartbreak, and its viral spread through social media platforms. Dhanush's unpolished, 'mistake-filled' vocal delivery was perceived as fitting the song's casual tone and making it easily hummable.
diff --git a/public/logs/frederic-oddloop.txt b/public/logs/frederic-oddloop.txt
@@ -10,6 +10,8 @@
 
 ## About
 
+<iframe width="560" height="315" src="https://www.youtube.com/embed/PCp2iXA1uLE?si=Sr96UeCKy6-dT71t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
 **frederic** is a Japanese rock band that originated in Kobe in 2009. The band's core members are twin brothers Kenji Mihara (vocals, guitar) and Koji Mihara (bass, vocals). The band's name is inspired by Leo Lionni's children's book character, Frederick the mouse, who gathers stories to warm hearts during winter. The band aims to similarly warm people's hearts with their music.
 
 **Name Origin**: The title "Oddloop" is a combination of the Japanese verb "odoru" (踊る), meaning "to dance," and the English phrase "odd loop."
@@ -20,4 +22,4 @@
 
 **Anime Connection**: The song "Oddloop" was featured as the ending theme for the *Yamada-kun and the Seven Witches* OVA in 2014.
 
-**Musical Style**: Frederic is recognized for its upbeat, infectious songs with a disco-funk influence, often incorporating elements of jazz rock, light rock, and punk.
+**Musical Style**: Frederic is recognized for its upbeat, infectious songs with a disco-funk influence, often incorporating elements of jazz rock, light rock, and punk.
diff --git a/public/logs/in-the-aeroplane-over-the-sea.txt b/public/logs/in-the-aeroplane-over-the-sea.txt
@@ -5,3 +5,5 @@
 - **Date:** 2025-10-06
 - **Rating:** 5/5
 - **Link:** [YouTube](https://www.youtube.com/watch?v=0_5qaeIAl5E)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/W6H8WcTPnWM?si=98myJ3oXnylD-0jG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
diff --git a/public/logs/maxs-choice-duty-vs-passion.txt b/public/logs/maxs-choice-duty-vs-passion.txt
@@ -9,6 +9,8 @@
 
 ## About
 
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/spK_F8zsttI?si=pXGtOwmsovcZuLu2&amp;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+
 Kärtsy Hatakka and Kimmo Kajasto are Finnish musicians who composed the soundtracks for the video games Max Payne and Max Payne 2: The Fall of Max Payne.
 Kärtsy Hatakka is the vocalist, bassist, and keyboardist for the Finnish rock band Waltari. Kimmo Kajasto is a composer, sound producer,
 and has worked with many Finnish bands.
diff --git a/public/logs/morcheeba-easier-said-than-done.txt b/public/logs/morcheeba-easier-said-than-done.txt
@@ -10,10 +10,12 @@
 
 ## About
 
+<iframe width="560" height="315" src="https://www.youtube.com/embed/27lPAUdE1ys?si=Qg6NI1aJkwjTSbuh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
 **Morcheeba** is a British electronic band formed in 1995 with members Skye Edwards, Paul Godfrey, and Ross Godfrey. They blend trip-hop, R&B, and pop influences.
 
 **Skye Edwards' Return**: "Blood Like Lemonade" marked the significant return of lead singer Skye Edwards to Morcheeba, who had previously left the band in 2003. Her distinctive vocals are a prominent feature of the track.
 
 **Lyrical Theme**: The song's lyrics delve into the common human experience of knowing what needs to be done, such as letting go or trusting oneself, but finding it challenging to actually execute those actions. The phrase "It's easier said than done" encapsulates this theme of difficulty in translating intention into action.
 
-**Album Success**: The album "Blood Like Lemonade," which includes "Easier Said Than Done," achieved commercial success, earning a silver certification from the Independent Music Companies Association in 2010 for selling over 30,000 copies in Europe. It was later upgraded to gold certification in 2011 for exceeding 75,000 copies sold across Europe.
+**Album Success**: The album "Blood Like Lemonade," which includes "Easier Said Than Done," achieved commercial success, earning a silver certification from the Independent Music Companies Association in 2010 for selling over 30,000 copies in Europe. It was later upgraded to gold certification in 2011 for exceeding 75,000 copies sold across Europe.
diff --git a/public/logs/yoo-se-yoon-dont-skip-the-interlude.txt b/public/logs/yoo-se-yoon-dont-skip-the-interlude.txt
@@ -14,12 +14,15 @@
 
 ## About
 
-![Ayyaaah](images/logs/dont-skip-the-interlude.png)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/esCNvfKV9Rc?si=eYqihTNkFkprbL4F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 Yoo Se Yoon's 'Don't Skip the Interlude' (간주점프는 안돼요) is a unique musical comedy track that blends seemingly
 heartfelt lyrics with an extended, humorous instrumental interlude. The song's title directly instructs listeners
 not to skip this interlude, as it is central to the piece's comedic intent and overall experience.
 
+![Ayyaaah](images/logs/dont-skip-the-interlude.png)
+
+
 The song features lyrics that appear serious and even heartfelt, discussing themes of love, memories,
 and not wanting to waste a single second with a loved one. However, this earnestness is juxtaposed with a
 deliberately long and often comically exaggerated instrumental break. In performances,
diff --git a/src/index.css b/src/index.css
@@ -36,13 +36,28 @@ code {
   border-radius: 0.25rem; /* rounded corners */
 }
 
+.prose iframe {
+  width: 100%; /* Make iframe responsive */
+  max-width: 75%; /* Same as images */
+  height: auto; /* Adjust height automatically */
+  aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  border: 5px solid #4b5563; /* subtle gray border, same as images */
+  border-radius: 0.25rem; /* rounded corners, same as images */
+}
+
 @media (min-width: 768px) {
   /* md breakpoint */
   .prose img {
     /*max-width: 55%;*/
     max-height: 600px;
     /*max-width: 100%; !* 25% width on larger screens *!*/
   }
+  .prose iframe {
+    /*max-width: 55%;*/ /* If we want it smaller on desktop, consistent with images*/
+  }
 }
 
 /* Styling for inline code blocks */
diff --git a/src/pages/AboutPage.js b/src/pages/AboutPage.js
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import { Link } from 'react-router-dom';
 import {
   ArrowLeftIcon,
@@ -134,7 +136,7 @@ const AboutPage = () => {
             </h1>
 
             <div className="prose prose-invert max-w-none leading-snug">
-              <ReactMarkdown components={{ a: LinkRenderer }}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={{ a: LinkRenderer }}>
                 {content}
               </ReactMarkdown>
             </div>
diff --git a/src/pages/LogDetailPage.js b/src/pages/LogDetailPage.js
@@ -7,6 +7,7 @@ import ImageModal from '../components/ImageModal';
 
 import Seo from '../components/Seo';
 import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 
 const LinkRenderer = ({ href, children }) => {
   const isExternal = href.startsWith('http') || href.startsWith('https');
@@ -146,6 +147,7 @@ const LogDetailPage = () => {
             >
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw]}
                 components={{ a: LinkRenderer, img: ImageRenderer }}
               >
                 {log.body}
diff --git a/src/pages/ProjectPage.js b/src/pages/ProjectPage.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useParams, Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import { useProjects } from '../utils/projectParser';
 import { useProjectContent } from '../hooks/useProjectContent'; // Import the new hook
 import ProjectMetadata from '../components/metadata-cards/ProjectMetadata';
@@ -111,7 +113,9 @@ const ProjectPage = () => {
             {/*  />*/}
             {/*)}*/}
             <div className="mt-6 text-lg leading-8 text-gray-300 prose prose-dark">
-              <ReactMarkdown>{fullProject.fullContent}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                {fullProject.fullContent}
+              </ReactMarkdown>
             </div>
           </div>
           <div className="hidden lg:block">

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ import ImageModal from '../components/ImageModal';`
`7`	`7`
`8`	`8`	`import Seo from '../components/Seo';`
`9`	`9`	`import remarkGfm from 'remark-gfm';`
	`10`	`+import rehypeRaw from 'rehype-raw';`
`10`	`11`
`11`	`12`	`const LinkRenderer = ({ href, children }) => {`
`12`	`13`	`const isExternal = href.startsWith('http') \|\| href.startsWith('https');`
`@@ -146,6 +147,7 @@ const LogDetailPage = () => {`
`146`	`147`	`>`
`147`	`148`	`<ReactMarkdown`
`148`	`149`	`remarkPlugins={[remarkGfm]}`
	`150`	`+ rehypePlugins={[rehypeRaw]}`
`149`	`151`	`components={{ a: LinkRenderer, img: ImageRenderer }}`
`150`	`152`	`>`
`151`	`153`	`{log.body}`