@terrymooreii/sia 2.1.0 → 2.1.2

package/_config.yml

@@ -32,3 +32,4 @@ pagination:
 
 server:
   port: 3000
+  showDrafts: false  # Set to true to show draft posts in dev server

package/defaults/layouts/post.njk

@@ -3,7 +3,10 @@
 {% block content %}
 <article class="post">
   <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
+    <h1 class="post-title">
+      {{ page.title }}
+      {% if page.draft %}<span class="draft-badge">Draft</span>{% endif %}
+    </h1>
     
     <div class="post-meta">
       <time datetime="{{ page.date | date('iso') }}">{{ page.date | date('long') }}</time>

package/defaults/pages/blog.njk

@@ -11,6 +11,7 @@
   <article class="post-card">
     <h2 class="post-card-title">
       <a href="{{ post.url }}">{{ post.title }}</a>
+      {% if post.draft %}<span class="draft-badge">Draft</span>{% endif %}
     </h2>
     <div class="post-card-meta">
       <time datetime="{{ post.date | date('iso') }}">{{ post.date | date('long') }}</time>

package/defaults/pages/index.njk

@@ -17,6 +17,7 @@
     <article class="post-card">
       <h3 class="post-card-title">
         <a href="{{ post.url }}">{{ post.title }}</a>
+        {% if post.draft %}<span class="draft-badge">Draft</span>{% endif %}
       </h3>
       <div class="post-card-meta">
         <time datetime="{{ post.date | date('iso') }}">{{ post.date | date('short') }}</time>

package/defaults/pages/tag.njk

@@ -11,6 +11,7 @@
   <article class="post-card">
     <h2 class="post-card-title">
       <a href="{{ post.url }}">{{ post.title or post.excerpt }}</a>
+      {% if post.draft %}<span class="draft-badge">Draft</span>{% endif %}
     </h2>
     <div class="post-card-meta">
       <time datetime="{{ post.date | date('iso') }}">{{ post.date | date('long') }}</time>

package/defaults/styles/main.css

@@ -341,6 +341,10 @@ img {
   font-weight: 600;
   margin: 0 0 var(--spacing-sm);
   line-height: 1.3;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
 .post-card-title a {
@@ -396,6 +400,10 @@ img {
   letter-spacing: -0.02em;
   margin: 0 0 var(--spacing-md);
   line-height: 1.2;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
 .post-meta {
@@ -566,12 +574,29 @@ img {
   font-size: 0.9375rem;
 }
 
-.tags-page {
-  /* Tags page layout */
+/* ===== Draft Badge ===== */
+.draft-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125em 0.4em;
+  background: #f59e0b;
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+[data-theme="dark"] .draft-badge {
+  background: #fbbf24;
+  color: #1a202c;
 }
 
-.tags-detail {
-  /* Tag detail sections */
+.prose .draft-badge {
+  font-size: 0.6rem;
 }
 
 .tag-section {
@@ -793,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);
@@ -828,6 +893,240 @@ img {
   font-weight: 600;
 }
 
+/* ===== Alert Boxes ===== */
+.prose .markdown-alert {
+  margin: 1.5em 0;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-left: 4px solid;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-alt);
+}
+
+.prose .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0 0 var(--spacing-sm) 0;
+  font-weight: 600;
+  font-style: normal;
+}
+
+.prose .markdown-alert-title svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+/* Make SVG icons lighter in dark mode */
+[data-theme="dark"] .prose .markdown-alert-title svg {
+  fill: currentColor;
+}
+
+.prose .markdown-alert p:last-child {
+  margin-bottom: 0;
+}
+
+/* Note Alert */
+.prose .markdown-alert-note {
+  border-left-color: #0969da;
+  background: rgba(9, 105, 218, 0.1);
+}
+
+.prose .markdown-alert-note .markdown-alert-title {
+  color: #0969da;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note {
+  background: rgba(9, 105, 218, 0.15);
+  border-left-color: #58a6ff;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note .markdown-alert-title {
+  color: #58a6ff;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note .markdown-alert-title svg {
+  fill: #58a6ff;
+}
+
+/* Tip Alert */
+.prose .markdown-alert-tip {
+  border-left-color: #1a7f37;
+  background: rgba(26, 127, 55, 0.1);
+}
+
+.prose .markdown-alert-tip .markdown-alert-title {
+  color: #1a7f37;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip {
+  background: rgba(26, 127, 55, 0.15);
+  border-left-color: #3fb950;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip .markdown-alert-title {
+  color: #3fb950;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip .markdown-alert-title svg {
+  fill: #3fb950;
+}
+
+/* Important Alert */
+.prose .markdown-alert-important {
+  border-left-color: #8250df;
+  background: rgba(130, 80, 223, 0.1);
+}
+
+.prose .markdown-alert-important .markdown-alert-title {
+  color: #8250df;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important {
+  background: rgba(130, 80, 223, 0.15);
+  border-left-color: #a371f7;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important .markdown-alert-title {
+  color: #a371f7;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important .markdown-alert-title svg {
+  fill: #a371f7;
+}
+
+/* Warning Alert */
+.prose .markdown-alert-warning {
+  border-left-color: #9a6700;
+  background: rgba(154, 103, 0, 0.1);
+}
+
+.prose .markdown-alert-warning .markdown-alert-title {
+  color: #9a6700;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning {
+  background: rgba(154, 103, 0, 0.15);
+  border-left-color: #d29922;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning .markdown-alert-title {
+  color: #d29922;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning .markdown-alert-title svg {
+  fill: #d29922;
+}
+
+/* Caution Alert */
+.prose .markdown-alert-caution {
+  border-left-color: #cf222e;
+  background: rgba(207, 34, 46, 0.1);
+}
+
+.prose .markdown-alert-caution .markdown-alert-title {
+  color: #cf222e;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution {
+  background: rgba(207, 34, 46, 0.15);
+  border-left-color: #f85149;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution .markdown-alert-title {
+  color: #f85149;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution .markdown-alert-title svg {
+  fill: #f85149;
+}
+
+/* ===== Task Lists (Checkboxes) ===== */
+.prose ul.contains-task-list,
+.prose ol.contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.prose .task-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  margin-bottom: 0.5em;
+}
+
+.prose .task-list-item input[type="checkbox"] {
+  margin-top: 0.25em;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  accent-color: var(--color-primary);
+}
+
+.prose .task-list-item input[type="checkbox"]:checked {
+  accent-color: var(--color-primary);
+}
+
+/* ===== Strikethrough ===== */
+.prose del,
+.prose s {
+  text-decoration: line-through;
+  text-decoration-color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+/* ===== Footnotes ===== */
+.prose section[data-footnotes],
+.prose .footnotes {
+  margin-top: 2em;
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-border);
+}
+
+.prose section[data-footnotes] h2,
+.prose .footnotes h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-muted);
+}
+
+.prose section[data-footnotes] ol,
+.prose .footnotes ol {
+  padding-left: 1.5em;
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+}
+
+.prose section[data-footnotes] li,
+.prose .footnotes li {
+  margin-bottom: var(--spacing-sm);
+}
+
+.prose .footnote-ref {
+  font-size: 0.875em;
+  vertical-align: super;
+  text-decoration: none;
+  color: var(--color-primary);
+  margin-left: 0.2em;
+}
+
+.prose .footnote-ref:hover {
+  text-decoration: underline;
+}
+
+.prose .footnote-backref {
+  text-decoration: none;
+  color: var(--color-primary);
+  margin-left: var(--spacing-xs);
+}
+
+.prose .footnote-backref:hover {
+  text-decoration: underline;
+}
+
 /* ===== Empty State ===== */
 .empty-message {
   text-align: center;

package/defaults/styles/minimal.css

@@ -325,6 +325,10 @@ img {
   font-weight: 600;
   margin: 0 0 var(--spacing-xs);
   line-height: 1.4;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
 .post-card-title a {
@@ -378,6 +382,10 @@ img {
   letter-spacing: -0.02em;
   margin: 0 0 var(--spacing-md);
   line-height: 1.3;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 
 .post-meta {
@@ -547,12 +555,29 @@ img {
   font-size: 0.875rem;
 }
 
-.tags-page {
-  /* Tags page layout */
+/* ===== Draft Badge ===== */
+.draft-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125em 0.4em;
+  background: #f59e0b;
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  flex-shrink: 0;
 }
 
-.tags-detail {
-  /* Tag detail sections */
+[data-theme="dark"] .draft-badge {
+  background: #fbbf24;
+  color: #0a0a0a;
+}
+
+.prose .draft-badge {
+  font-size: 0.6rem;
 }
 
 .tag-section {
@@ -771,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);
@@ -806,6 +869,240 @@ img {
   font-weight: 600;
 }
 
+/* ===== Alert Boxes ===== */
+.prose .markdown-alert {
+  margin: 1.25em 0;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-left: 3px solid;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-alt);
+}
+
+.prose .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0 0 var(--spacing-sm) 0;
+  font-weight: 600;
+  font-style: normal;
+}
+
+.prose .markdown-alert-title svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+/* Make SVG icons lighter in dark mode */
+[data-theme="dark"] .prose .markdown-alert-title svg {
+  fill: currentColor;
+}
+
+.prose .markdown-alert p:last-child {
+  margin-bottom: 0;
+}
+
+/* Note Alert */
+.prose .markdown-alert-note {
+  border-left-color: #0969da;
+  background: rgba(9, 105, 218, 0.08);
+}
+
+.prose .markdown-alert-note .markdown-alert-title {
+  color: #0969da;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note {
+  background: rgba(9, 105, 218, 0.12);
+  border-left-color: #58a6ff;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note .markdown-alert-title {
+  color: #58a6ff;
+}
+
+[data-theme="dark"] .prose .markdown-alert-note .markdown-alert-title svg {
+  fill: #58a6ff;
+}
+
+/* Tip Alert */
+.prose .markdown-alert-tip {
+  border-left-color: #1a7f37;
+  background: rgba(26, 127, 55, 0.08);
+}
+
+.prose .markdown-alert-tip .markdown-alert-title {
+  color: #1a7f37;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip {
+  background: rgba(26, 127, 55, 0.12);
+  border-left-color: #3fb950;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip .markdown-alert-title {
+  color: #3fb950;
+}
+
+[data-theme="dark"] .prose .markdown-alert-tip .markdown-alert-title svg {
+  fill: #3fb950;
+}
+
+/* Important Alert */
+.prose .markdown-alert-important {
+  border-left-color: #8250df;
+  background: rgba(130, 80, 223, 0.08);
+}
+
+.prose .markdown-alert-important .markdown-alert-title {
+  color: #8250df;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important {
+  background: rgba(130, 80, 223, 0.12);
+  border-left-color: #a371f7;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important .markdown-alert-title {
+  color: #a371f7;
+}
+
+[data-theme="dark"] .prose .markdown-alert-important .markdown-alert-title svg {
+  fill: #a371f7;
+}
+
+/* Warning Alert */
+.prose .markdown-alert-warning {
+  border-left-color: #9a6700;
+  background: rgba(154, 103, 0, 0.08);
+}
+
+.prose .markdown-alert-warning .markdown-alert-title {
+  color: #9a6700;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning {
+  background: rgba(154, 103, 0, 0.12);
+  border-left-color: #d29922;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning .markdown-alert-title {
+  color: #d29922;
+}
+
+[data-theme="dark"] .prose .markdown-alert-warning .markdown-alert-title svg {
+  fill: #d29922;
+}
+
+/* Caution Alert */
+.prose .markdown-alert-caution {
+  border-left-color: #cf222e;
+  background: rgba(207, 34, 46, 0.08);
+}
+
+.prose .markdown-alert-caution .markdown-alert-title {
+  color: #cf222e;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution {
+  background: rgba(207, 34, 46, 0.12);
+  border-left-color: #f85149;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution .markdown-alert-title {
+  color: #f85149;
+}
+
+[data-theme="dark"] .prose .markdown-alert-caution .markdown-alert-title svg {
+  fill: #f85149;
+}
+
+/* ===== Task Lists (Checkboxes) ===== */
+.prose ul.contains-task-list,
+.prose ol.contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.prose .task-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  margin-bottom: 0.35em;
+}
+
+.prose .task-list-item input[type="checkbox"] {
+  margin-top: 0.2em;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  accent-color: var(--color-primary);
+}
+
+.prose .task-list-item input[type="checkbox"]:checked {
+  accent-color: var(--color-primary);
+}
+
+/* ===== Strikethrough ===== */
+.prose del,
+.prose s {
+  text-decoration: line-through;
+  text-decoration-color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+/* ===== Footnotes ===== */
+.prose section[data-footnotes],
+.prose .footnotes {
+  margin-top: 2em;
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-border);
+}
+
+.prose section[data-footnotes] h2,
+.prose .footnotes h2 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-muted);
+}
+
+.prose section[data-footnotes] ol,
+.prose .footnotes ol {
+  padding-left: 1.5em;
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+.prose section[data-footnotes] li,
+.prose .footnotes li {
+  margin-bottom: var(--spacing-sm);
+}
+
+.prose .footnote-ref {
+  font-size: 0.85em;
+  vertical-align: super;
+  text-decoration: none;
+  color: var(--color-primary);
+  margin-left: 0.2em;
+}
+
+.prose .footnote-ref:hover {
+  text-decoration: underline;
+}
+
+.prose .footnote-backref {
+  text-decoration: none;
+  color: var(--color-primary);
+  margin-left: var(--spacing-xs);
+}
+
+.prose .footnote-backref:hover {
+  text-decoration: underline;
+}
+
 /* ===== Empty State ===== */
 .empty-message {
   text-align: center;

package/lib/build.js

@@ -201,6 +201,15 @@ export async function build(options = {}) {
   // Load configuration
   const config = loadConfig(options.rootDir || process.cwd());
   
+  // Only show drafts in dev mode if explicitly enabled in config
+  // For production builds, always disable showDrafts
+  if (!options.devMode) {
+    if (config.server) {
+      config.server.showDrafts = false;
+    }
+  }
+  // If devMode is true, use the config value (which defaults to false)
+  
   // Clean output directory if requested
   if (options.clean !== false) {
     cleanOutput(config);

package/lib/config.js

@@ -40,7 +40,8 @@ const defaultConfig = {
     size: 10
   },
   server: {
-    port: 3000
+    port: 3000,
+    showDrafts: false  // Show draft posts when using dev server
   }
 };
 

package/lib/content.js

@@ -120,6 +120,130 @@ 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 URLs
+const renderer = marked.getRenderer();
+const originalLink = renderer.link.bind(renderer);
+
+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
+  return originalLink(token);
+};
+
 /**
  * Generate a URL-friendly slug from a string
  */
@@ -172,7 +296,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);
@@ -283,7 +411,15 @@ export function loadCollection(config, collectionName) {
         return null;
       }
     })
-    .filter(item => item !== null && !item.draft);
+    .filter(item => {
+      if (item === null) return false;
+      // Include drafts if showDrafts is enabled in server config
+      if (item.draft && config.server?.showDrafts) {
+        return true;
+      }
+      // Otherwise, exclude drafts
+      return !item.draft;
+    });
   
   // Sort items
   const sortBy = collectionConfig.sortBy || 'date';

package/lib/server.js

@@ -188,7 +188,7 @@ function setupWatcher(config, wss) {
       console.log('🔄 Rebuilding...\n');
       
       try {
-        await build({ clean: false, rootDir: config.rootDir });
+        await build({ clean: false, rootDir: config.rootDir, devMode: true });
         notifyReload(wss);
       } catch (err) {
         console.error('❌ Rebuild failed:', err.message);
@@ -213,8 +213,8 @@ export async function startServer(options = {}) {
   
   console.log('\n⚡ Sia - Development Server\n');
   
-  // Initial build
-  await build({ clean: true, rootDir: config.rootDir });
+  // Initial build with devMode enabled to show drafts if configured
+  await build({ clean: true, rootDir: config.rootDir, devMode: true });
   
   // Create servers
   const httpServer = createHttpServer(config, wsPort);

package/package.json

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

package/readme.md

@@ -131,8 +131,18 @@ pagination:
 
 server:
   port: 3000
+  showDrafts: false  # Set to true to show draft posts in dev server
 ```
 
+### Server Configuration
+
+| Option | Description | Default |
+|-------|-------------|---------|
+| `port` | Port number for development server | `3000` |
+| `showDrafts` | Show draft posts when using `sia dev` | `false` |
+
+When `showDrafts` is set to `true`, draft posts (posts with `draft: true` in front matter) will be included in the development server build. This is useful for previewing draft content locally. Drafts are always excluded from production builds.
+
 ## Front Matter
 
 Each markdown file can have YAML front matter:
@@ -158,7 +168,7 @@ excerpt: "Custom excerpt text"
 | `tags` | Array of tags |
 | `layout` | Template to use |
 | `permalink` | Custom URL |
-| `draft` | If true, excluded from build |
+| `draft` | If true, excluded from build (unless `server.showDrafts` is enabled) |
 | `excerpt` | Custom excerpt |
 
 ## Markdown Features
@@ -248,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: