@terrymooreii/sia 2.1.1 → 2.1.3

package/defaults/styles/main.css

@@ -818,6 +818,46 @@ img {
   box-shadow: var(--shadow-md);
 }
 
+/* YouTube Embed Styles */
+.prose .youtube-embed {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  margin: 1.5em 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.prose .youtube-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Giphy Embed Styles */
+.prose .giphy-embed {
+  position: relative;
+  padding-bottom: 100%; /* Giphy embeds are typically square */
+  height: 0;
+  overflow: hidden;
+  margin: 1.5em 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.prose .giphy-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .prose a {
   text-decoration: underline;
   text-decoration-color: var(--color-border);

package/defaults/styles/minimal.css

@@ -796,6 +796,44 @@ img {
   border-radius: var(--radius-md);
 }
 
+/* YouTube Embed Styles */
+.prose .youtube-embed {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  margin: 1.25em 0;
+  border-radius: var(--radius-md);
+}
+
+.prose .youtube-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Giphy Embed Styles */
+.prose .giphy-embed {
+  position: relative;
+  padding-bottom: 100%; /* Giphy embeds are typically square */
+  height: 0;
+  overflow: hidden;
+  margin: 1.25em 0;
+  border-radius: var(--radius-md);
+}
+
+.prose .giphy-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .prose a {
   text-decoration: underline;
   text-decoration-color: var(--color-border);

package/lib/content.js

@@ -120,6 +120,133 @@ marked.setOptions({
   breaks: false
 });
 
+/**
+ * Extract YouTube video ID from various URL formats
+ * Supports:
+ * - https://www.youtube.com/watch?v=VIDEO_ID
+ * - https://youtu.be/VIDEO_ID
+ * - https://www.youtube.com/embed/VIDEO_ID
+ * - https://youtube.com/watch?v=VIDEO_ID
+ * - VIDEO_ID (if it's just an 11-character alphanumeric string)
+ */
+function extractYouTubeId(url) {
+  if (!url) return null;
+  
+  // If it's just a video ID (11 characters, alphanumeric)
+  if (/^[a-zA-Z0-9_-]{11}$/.test(url)) {
+    return url;
+  }
+  
+  // Match various YouTube URL patterns
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+    /youtube\.com\/.*[?&]v=([a-zA-Z0-9_-]{11})/
+  ];
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Convert YouTube URLs in HTML to responsive embeds
+ */
+function embedYouTubeVideos(html) {
+  if (!html) return html;
+  
+  // Pattern to match YouTube links in HTML
+  // Matches: <a href="...youtube...">...</a>
+  const linkPattern = /<a\s+[^>]*href=["']([^"']*youtube[^"']*)["'][^>]*>([^<]*)<\/a>/gi;
+  
+  return html.replace(linkPattern, (match, url, linkText) => {
+    const videoId = extractYouTubeId(url);
+    if (videoId) {
+      // Return responsive YouTube embed
+      return `<div class="youtube-embed"><iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
+    }
+    return match; // Return original if not a valid YouTube URL
+  });
+}
+
+/**
+ * Extract Giphy GIF ID from various URL formats
+ * Supports:
+ * - https://giphy.com/gifs/ID
+ * - https://gph.is/g/ID
+ * - https://giphy.com/embed/ID
+ * - https://media.giphy.com/media/ID/giphy.gif (extracts ID)
+ */
+function extractGiphyId(url) {
+  if (!url) return null;
+  
+  // Match Giphy URL patterns
+  const patterns = [
+    /giphy\.com\/gifs\/([a-zA-Z0-9]+)/,
+    /giphy\.com\/embed\/([a-zA-Z0-9]+)/,
+    /gph\.is\/g\/([a-zA-Z0-9]+)/,
+    /media\.giphy\.com\/media\/([a-zA-Z0-9]+)\//
+  ];
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Convert Giphy URLs in HTML to responsive embeds
+ */
+function embedGiphyGifs(html) {
+  if (!html) return html;
+  
+  // Pattern to match Giphy links in HTML
+  const linkPattern = /<a\s+[^>]*href=["']([^"']*giphy[^"']*)["'][^>]*>([^<]*)<\/a>/gi;
+  
+  return html.replace(linkPattern, (match, url, linkText) => {
+    const gifId = extractGiphyId(url);
+    if (gifId) {
+      // Return responsive Giphy embed
+      return `<div class="giphy-embed"><iframe src="https://giphy.com/embed/${gifId}" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>`;
+    }
+    return match;
+  });
+}
+
+// Override the link renderer to handle YouTube and Giphy URLs
+marked.use({
+  renderer: {
+    link(token) {
+      const videoId = extractYouTubeId(token.href);
+      
+      if (videoId) {
+        // Return responsive YouTube embed instead of a link
+        return `<div class="youtube-embed"><iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
+      }
+      
+      const gifId = extractGiphyId(token.href);
+      
+      if (gifId) {
+        // Return responsive Giphy embed instead of a link
+        return `<div class="giphy-embed"><iframe src="https://giphy.com/embed/${gifId}" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>`;
+      }
+      
+      // Use default link rendering for non-YouTube/Giphy links
+      const text = token.text || token.href;
+      const title = token.title ? ` title="${token.title}"` : '';
+      return `<a href="${token.href}"${title}>${text}</a>`;
+    }
+  }
+});
+
 /**
  * Generate a URL-friendly slug from a string
  */
@@ -172,7 +299,11 @@ export function parseContent(filePath) {
   const { data: frontMatter, content: markdown } = matter(content);
   
   // Parse markdown to HTML
-  const html = marked.parse(markdown);
+  let html = marked.parse(markdown);
+  
+  // Convert any remaining YouTube/Giphy links to embeds (handles autolinked URLs)
+  html = embedYouTubeVideos(html);
+  html = embedGiphyGifs(html);
   
   // Get slug from front matter or filename
   const slug = frontMatter.slug || getSlugFromFilename(filePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrymooreii/sia",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "A simple, powerful static site generator with markdown, front matter, and Nunjucks templates",
   "main": "lib/index.js",
   "bin": {

package/readme.md

@@ -258,6 +258,55 @@ Plain URLs are automatically converted to clickable links:
 Visit https://example.com for more info.
 ```
 
+### Media Embeds
+
+Sia automatically converts YouTube and Giphy URLs into responsive embeds.
+
+#### YouTube Videos
+
+YouTube videos can be embedded using any of these methods:
+
+**As a markdown link:**
+```markdown
+[Watch this video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+```
+
+**As a plain URL (auto-linked):**
+```markdown
+https://www.youtube.com/watch?v=dQw4w9WgXcQ
+```
+
+**Using short URL format:**
+```markdown
+https://youtu.be/dQw4w9WgXcQ
+```
+
+All of these formats are automatically converted to responsive YouTube embeds.
+
+#### Giphy GIFs
+
+Giphy GIFs can be embedded in two ways:
+
+**As a direct image link (standard markdown):**
+```markdown
+![Alt text](https://media.giphy.com/media/ID/giphy.gif)
+```
+
+**As a Giphy share URL (auto-embedded):**
+```markdown
+[Check this out](https://giphy.com/gifs/ID)
+```
+
+Or just paste the URL:
+```markdown
+https://giphy.com/gifs/ID
+```
+
+Giphy share URLs are automatically converted to responsive embeds. Supported formats include:
+- `https://giphy.com/gifs/ID`
+- `https://gph.is/g/ID`
+- `https://giphy.com/embed/ID`
+
 ### GitHub Flavored Markdown
 
 Full GFM support including: