@jet-w/astro-blog 0.2.2 → 0.2.4

package/src/config/sidebar.ts

@@ -0,0 +1,142 @@
+/**
+ * 侧边栏配置系统
+ *
+ * 支持三种配置类型：
+ * 1. scan - 扫描指定文件夹，自动生成树形结构
+ * 2. manual - 手动配置显示特定内容
+ * 3. mixed - 混合使用以上两种方式
+ */
+
+// 路径匹配配置
+export interface PathMatchConfig {
+  pattern: string;
+  exact?: boolean;
+}
+
+// 侧边栏项目类型
+export interface SidebarItem {
+  title: string;
+  slug?: string;
+  link?: string;
+  icon?: string;
+  badge?: string;
+  badgeType?: 'info' | 'success' | 'warning' | 'error';
+  children?: SidebarItem[];
+  collapsed?: boolean;
+}
+
+// 扫描配置
+export interface ScanConfig {
+  type: 'scan';
+  title: string;
+  icon?: string;
+  scanPath: string;
+  collapsed?: boolean;
+  maxDepth?: number;
+  exclude?: string[];
+  include?: string[];
+  sortBy?: 'name' | 'date' | 'title' | 'custom';
+  sortOrder?: 'asc' | 'desc';
+  showForPaths?: string[];
+  hideForPaths?: string[];
+}
+
+// 手动配置
+export interface ManualConfig {
+  type: 'manual';
+  title: string;
+  icon?: string;
+  collapsed?: boolean;
+  items: SidebarItem[];
+  showForPaths?: string[];
+  hideForPaths?: string[];
+}
+
+// 混合配置
+export interface MixedConfig {
+  type: 'mixed';
+  title: string;
+  icon?: string;
+  collapsed?: boolean;
+  sections: (ScanConfig | ManualConfig)[];
+  showForPaths?: string[];
+  hideForPaths?: string[];
+}
+
+// 分隔符
+export interface DividerConfig {
+  type: 'divider';
+  title?: string;
+  showForPaths?: string[];
+  hideForPaths?: string[];
+}
+
+// 侧边栏组配置
+export type SidebarGroup = ScanConfig | ManualConfig | MixedConfig | DividerConfig;
+
+// 完整侧边栏配置
+export interface SidebarConfig {
+  enabled: boolean;
+  width?: string;
+  position?: 'left' | 'right';
+  showSearch?: boolean;
+  showRecentPosts?: boolean;
+  recentPostsCount?: number;
+  showPopularTags?: boolean;
+  popularTagsCount?: number;
+  showArchives?: boolean;
+  archivesCount?: number;
+  showFriendLinks?: boolean;
+  friendLinks?: Array<{
+    title: string;
+    url: string;
+    icon?: string;
+    description?: string;
+  }>;
+  groups: SidebarGroup[];
+}
+
+/**
+ * 默认侧边栏配置
+ */
+export const sidebarConfig: SidebarConfig = {
+  enabled: true,
+  width: '280px',
+  position: 'right',
+  showSearch: true,
+  showRecentPosts: true,
+  recentPostsCount: 5,
+  showPopularTags: true,
+  popularTagsCount: 8,
+  showArchives: true,
+  archivesCount: 6,
+  showFriendLinks: true,
+  friendLinks: [
+    { title: 'Astro 官网', url: 'https://astro.build' },
+    { title: 'Tailwind CSS', url: 'https://tailwindcss.com' },
+    { title: 'Vue.js', url: 'https://vuejs.org' },
+  ],
+  groups: [
+    {
+      type: 'scan',
+      title: '文档目录',
+      icon: 'folder',
+      scanPath: '',
+      collapsed: false,
+    }
+  ]
+};
+
+/**
+ * Define sidebar configuration
+ */
+export function defineSidebarConfig(config: Partial<SidebarConfig>): SidebarConfig {
+  return {
+    ...sidebarConfig,
+    ...config,
+    groups: config.groups || sidebarConfig.groups
+  };
+}
+
+// 向后兼容
+export const defaultSidebarConfig = sidebarConfig;

package/src/config/site.ts

@@ -0,0 +1,61 @@
+import type { SiteConfig } from '../types';
+
+/**
+ * Default site configuration
+ * Users should override this in their own config
+ */
+export const siteConfig: SiteConfig = {
+  title: 'My Astro Blog',
+  description: '',
+  author: 'Author',
+  email: '',
+  avatar: '/images/avatar.svg',
+  social: {
+    github: '',
+    twitter: '',
+    linkedin: '',
+    email: ''
+  },
+  menu: [
+    {
+      name: '首页',
+      href: '/',
+      icon: 'home'
+    },
+    {
+      name: '博客',
+      href: '/posts',
+      icon: 'posts'
+    },
+    {
+      name: '关于',
+      href: '/about',
+      icon: 'about'
+    }
+  ]
+};
+
+export const defaultSEO = {
+  title: siteConfig.title,
+  description: siteConfig.description,
+  image: '/images/og-image.jpg',
+  type: 'website' as const
+};
+
+/**
+ * Create site config with user overrides
+ */
+export function defineSiteConfig(config: Partial<SiteConfig>): SiteConfig {
+  return {
+    ...siteConfig,
+    ...config,
+    social: {
+      ...siteConfig.social,
+      ...config.social
+    },
+    menu: config.menu || siteConfig.menu
+  };
+}
+
+// 向后兼容的别名
+export const defaultSiteConfig = siteConfig;

package/src/config/social.ts

@@ -0,0 +1,29 @@
+/**
+ * 社交链接配置
+ */
+
+export interface SocialLink {
+  type: string;
+  url: string;
+  label?: string;
+  icon?: string;
+}
+
+export const defaultIcons: Record<string, string> = {
+  github: 'M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z',
+  twitter: 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z',
+  linkedin: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+  email: 'M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+  youtube: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+  discord: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'
+};
+
+export const socialLinks: SocialLink[] = [];
+export const defaultSocialLinks = socialLinks;
+
+/**
+ * Define social links
+ */
+export function defineSocialLinks(links: SocialLink[]): SocialLink[] {
+  return links;
+}

package/src/plugins/remark-containers.mjs

@@ -2,105 +2,223 @@ import { visit } from 'unist-util-visit';
 
 export function remarkContainers() {
   return (tree, file) => {
-    // Pre-process: Handle complete containers in a single paragraph
+    // Pre-process: Handle containers that span across multiple sibling nodes
     // This handles cases like:
-    // ::: tip
-    // Content without blank lines
+    // ::: tip Title
+    // Content text here
+    // - list item 1
+    // - list item 2
     // :::
-    // Where the entire thing is parsed as one paragraph with text "::: tip\nContent\n:::"
-    // Also handles paragraphs with mixed content (text + inline code, etc.)
-    visit(tree, 'paragraph', (node, index, parent) => {
-      if (!node.children || node.children.length === 0) return;
-
-      const firstChild = node.children[0];
-      const lastChild = node.children[node.children.length - 1];
+    // Where the container starts in one paragraph, has sibling nodes (lists, etc),
+    // and the closing ::: may be in a later text node
+    function processMultiNodeContainers(tree) {
+      visit(tree, 'paragraph', (node, index, parent) => {
+        if (!node.children || node.children.length === 0) return;
+        if (!parent || !parent.children) return;
 
-      // First child must be text starting with :::
-      if (firstChild.type !== 'text') return;
-      // Last child must be text ending with :::
-      if (lastChild.type !== 'text') return;
+        const firstChild = node.children[0];
+        if (firstChild.type !== 'text') return;
 
-      const firstText = firstChild.value;
-      const lastText = lastChild.value;
+        const firstText = firstChild.value;
+
+        // Check if first text starts with ::: type [title]
+        // Allow content to follow on subsequent lines within this paragraph
+        const startMatch = firstText.match(/^(:{3,})\s+(tip|note|warning|danger|info|details)([ \t]+[^\n]*)?\n?/);
+        if (!startMatch) return;
+
+        const [fullMatch, openColons, type, titlePart] = startMatch;
+        const colonCount = openColons.length;
+        const customTitle = titlePart ? titlePart.trim() : '';
+        const title = customTitle || getDefaultTitle(type);
+
+        // Now we need to find the closing ::: which could be:
+        // 1. At the end of this same paragraph's text
+        // 2. In a sibling paragraph
+        // 3. Inside a text node in a list item (no blank line before :::)
+
+        const siblings = parent.children;
+        let endIndex = -1;
+        let endNodeInfo = null; // { siblingIndex, childPath, closeMatch }
+
+        // First check if closing is in the same paragraph
+        const lastChild = node.children[node.children.length - 1];
+        if (lastChild.type === 'text') {
+          const closeInSame = lastChild.value.match(/\n(:{3,})\s*$/);
+          if (closeInSame && closeInSame[1].length === colonCount) {
+            // Closing is in the same paragraph - handle as single paragraph container
+            endNodeInfo = { type: 'same-paragraph', closeMatch: closeInSame };
+          }
+        }
 
-      // Check if first text starts with ::: type
-      const startMatch = firstText.match(/^(:{3,})\s+(tip|note|warning|danger|info|details)([ \t]+[^\n]*)?\n?/);
-      if (!startMatch) return;
+        if (!endNodeInfo) {
+          // Search through siblings for the closing :::
+          for (let i = index + 1; i < siblings.length; i++) {
+            const sibling = siblings[i];
 
-      // Check if last text ends with :::
-      const endMatch = lastText.match(/\n(:{3,})\s*$/);
-      if (!endMatch) return;
+            // Check if sibling is a paragraph with just :::
+            if (sibling.type === 'paragraph' &&
+                sibling.children &&
+                sibling.children.length === 1 &&
+                sibling.children[0].type === 'text') {
+              const text = sibling.children[0].value.trim();
+              const closeMatch = text.match(/^(:{3,})$/);
+              if (closeMatch && closeMatch[1].length === colonCount) {
+                endIndex = i;
+                endNodeInfo = { type: 'sibling-paragraph', siblingIndex: i };
+                break;
+              }
+            }
 
-      // Verify the closing colons match the opening
-      const [, openColons, type, titlePart] = startMatch;
-      const [, closeColons] = endMatch;
-      if (openColons.length !== closeColons.length) return;
+            // Check if closing ::: is embedded in a text node (e.g., after a list item)
+            // This happens when there's no blank line before :::
+            if (sibling.type === 'list' && sibling.children) {
+              // Check the last item of the list
+              const lastItem = sibling.children[sibling.children.length - 1];
+              if (lastItem.children) {
+                const lastItemPara = lastItem.children[lastItem.children.length - 1];
+                if (lastItemPara.type === 'paragraph' && lastItemPara.children) {
+                  const lastText = lastItemPara.children[lastItemPara.children.length - 1];
+                  if (lastText.type === 'text') {
+                    const closeMatch = lastText.value.match(/\n(:{3,})\s*$/);
+                    if (closeMatch && closeMatch[1].length === colonCount) {
+                      endIndex = i;
+                      endNodeInfo = {
+                        type: 'in-list',
+                        siblingIndex: i,
+                        lastText: lastText,
+                        closeMatch: closeMatch
+                      };
+                      break;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
 
-      const customTitle = titlePart ? titlePart.trim() : '';
-      const title = customTitle || getDefaultTitle(type);
+        if (!endNodeInfo) return; // No closing found
 
-      // Create HTML wrapper
-      let openingHTML, closingHTML;
-      if (type === 'details') {
-        openingHTML = `<details class="container-details custom-container" data-container-type="details">
+        // Create HTML wrapper
+        let openingHTML, closingHTML;
+        if (type === 'details') {
+          openingHTML = `<details class="container-details custom-container" data-container-type="details">
 <summary class="container-title">${title}</summary>
 <div class="container-content">`;
-        closingHTML = `</div>
+          closingHTML = `</div>
 </details>`;
-      } else {
-        openingHTML = `<div class="container-${type} custom-container" data-container-type="${type}">
+        } else {
+          openingHTML = `<div class="container-${type} custom-container" data-container-type="${type}">
 <div class="container-title">${title}</div>
 <div class="container-content">`;
-        closingHTML = `</div>
+          closingHTML = `</div>
 </div>`;
-      }
+        }
 
-      // Extract content by modifying the first and last text nodes
-      // Remove the ::: opening from first text
-      const newFirstText = firstText.slice(startMatch[0].length);
-      // Remove the ::: closing from last text
-      const newLastText = lastText.slice(0, endMatch.index);
+        const htmlStartNode = { type: 'html', value: openingHTML };
+        const htmlEndNode = { type: 'html', value: closingHTML };
+
+        if (endNodeInfo.type === 'same-paragraph') {
+          // Handle single paragraph container
+          const lastChild = node.children[node.children.length - 1];
+          const newFirstText = firstText.slice(fullMatch.length);
+          const newLastText = lastChild.value.slice(0, endNodeInfo.closeMatch.index);
+
+          const contentChildren = [];
+          for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            if (i === 0) {
+              if (node.children.length === 1) {
+                // Single text node
+                const middleText = newFirstText.slice(0, newFirstText.length - (firstText.length - lastChild.value.length) - endNodeInfo.closeMatch[0].length);
+                if (middleText.trim()) {
+                  contentChildren.push({ ...child, value: middleText.trim() });
+                }
+              } else if (newFirstText.trim()) {
+                contentChildren.push({ ...child, value: newFirstText });
+              }
+            } else if (i === node.children.length - 1) {
+              if (newLastText.trim()) {
+                contentChildren.push({ ...child, value: newLastText });
+              }
+            } else {
+              contentChildren.push({ ...child });
+            }
+          }
 
-      // Build new content children
-      const contentChildren = [];
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        if (i === 0) {
-          // First child - use trimmed text
-          if (node.children.length === 1) {
-            // Single text node - extract middle content
-            const middleText = newFirstText.slice(0, newFirstText.length - (firstText.length - lastText.length) - endMatch[0].length);
-            if (middleText.trim()) {
-              contentChildren.push({ ...child, value: middleText.trim() });
+          if (contentChildren.length === 0) return;
+
+          const contentParagraph = { type: 'paragraph', children: contentChildren };
+          parent.children.splice(index, 1, htmlStartNode, contentParagraph, htmlEndNode);
+          return index + 3;
+
+        } else if (endNodeInfo.type === 'sibling-paragraph') {
+          // Closing is in a sibling paragraph
+          // Extract content from opening paragraph (after the ::: line)
+          const newFirstText = firstText.slice(fullMatch.length);
+          const contentNodes = [];
+
+          // Add remaining content from opening paragraph if any
+          if (newFirstText.trim() || node.children.length > 1) {
+            const newParaChildren = [];
+            if (newFirstText.trim()) {
+              newParaChildren.push({ ...firstChild, value: newFirstText });
+            }
+            for (let i = 1; i < node.children.length; i++) {
+              newParaChildren.push({ ...node.children[i] });
+            }
+            if (newParaChildren.length > 0) {
+              contentNodes.push({ type: 'paragraph', children: newParaChildren });
             }
-          } else if (newFirstText.trim()) {
-            contentChildren.push({ ...child, value: newFirstText });
           }
-        } else if (i === node.children.length - 1) {
-          // Last child - use trimmed text
-          if (newLastText.trim()) {
-            contentChildren.push({ ...child, value: newLastText });
+
+          // Add all siblings between opening and closing
+          for (let i = index + 1; i < endIndex; i++) {
+            contentNodes.push(siblings[i]);
           }
-        } else {
-          // Middle children - keep as-is
-          contentChildren.push({ ...child });
-        }
-      }
 
-      // If no content, skip
-      if (contentChildren.length === 0) return;
+          const replaceCount = endIndex - index + 1;
+          const newNodes = [htmlStartNode, ...contentNodes, htmlEndNode];
+          parent.children.splice(index, replaceCount, ...newNodes);
+          return index + newNodes.length;
 
-      // Replace with HTML nodes and content paragraph
-      const htmlStartNode = { type: 'html', value: openingHTML };
-      const contentParagraph = {
-        type: 'paragraph',
-        children: contentChildren
-      };
-      const htmlEndNode = { type: 'html', value: closingHTML };
+        } else if (endNodeInfo.type === 'in-list') {
+          // Closing ::: is inside the last list item
+          // Remove the closing from the text node
+          endNodeInfo.lastText.value = endNodeInfo.lastText.value.slice(0, endNodeInfo.closeMatch.index);
 
-      parent.children.splice(index, 1, htmlStartNode, contentParagraph, htmlEndNode);
-      return index + 3;
-    });
+          // Extract content from opening paragraph
+          const newFirstText = firstText.slice(fullMatch.length);
+          const contentNodes = [];
+
+          if (newFirstText.trim() || node.children.length > 1) {
+            const newParaChildren = [];
+            if (newFirstText.trim()) {
+              newParaChildren.push({ ...firstChild, value: newFirstText });
+            }
+            for (let i = 1; i < node.children.length; i++) {
+              newParaChildren.push({ ...node.children[i] });
+            }
+            if (newParaChildren.length > 0) {
+              contentNodes.push({ type: 'paragraph', children: newParaChildren });
+            }
+          }
+
+          // Add all siblings including the list (which now has the ::: removed)
+          for (let i = index + 1; i <= endIndex; i++) {
+            contentNodes.push(siblings[i]);
+          }
+
+          const replaceCount = endIndex - index + 1;
+          const newNodes = [htmlStartNode, ...contentNodes, htmlEndNode];
+          parent.children.splice(index, replaceCount, ...newNodes);
+          return index + newNodes.length;
+        }
+      });
+    }
+
+    // Run the multi-node container processor
+    processMultiNodeContainers(tree);
 
     // Pre-process: Extract ::: from text nodes where it appears at the end
     // This handles cases where ::: is on a new line but without a blank line separator
@@ -355,11 +473,35 @@ export function remarkContainers() {
         console.log('DEBUG containerDirective:', type, 'children:', node.children?.length || 0, JSON.stringify(node.children?.map(c => c.type)));
       }
 
-      // Get custom title from directive label (text after ::: type on same line)
+      // Get custom title from directive label
+      // remark-directive v4 may store label in different places:
+      // 1. node.data.directiveLabel (standard location)
+      // 2. node.children[0] as a paragraph with the label text
       let customTitle = '';
+      let contentChildren = node.children || [];
+
+      // Check node.data.directiveLabel first (standard remark-directive behavior)
       if (node.data && node.data.directiveLabel) {
         customTitle = node.data.directiveLabel;
       }
+      // Check if first child is a paragraph that contains just the title text
+      // This happens when label is on same line: ::: warning Title Here
+      else if (contentChildren.length > 0) {
+        const firstChild = contentChildren[0];
+        // If first child is paragraph with single text node, it might be the title
+        if (firstChild.type === 'paragraph' &&
+            firstChild.children &&
+            firstChild.children.length === 1 &&
+            firstChild.children[0].type === 'text') {
+          const text = firstChild.children[0].value.trim();
+          // Check if this looks like a title (single line, no markdown formatting)
+          // and the directive has more children (actual content)
+          if (!text.includes('\n') && contentChildren.length > 1) {
+            customTitle = text;
+            contentChildren = contentChildren.slice(1); // Remove title from content
+          }
+        }
+      }
 
       const title = customTitle || getDefaultTitle(type);
 
@@ -382,7 +524,7 @@ export function remarkContainers() {
       const htmlStartNode = { type: 'html', value: openingHTML };
       const htmlEndNode = { type: 'html', value: closingHTML };
 
-      const newNodes = [htmlStartNode, ...node.children, htmlEndNode];
+      const newNodes = [htmlStartNode, ...contentChildren, htmlEndNode];
       parent.children.splice(index, 1, ...newNodes);
 
       return index + newNodes.length;
@@ -395,10 +537,24 @@ export function remarkContainers() {
         return;
       }
 
+      // Get custom title from directive label
       let customTitle = '';
+      let contentChildren = node.children || [];
+
       if (node.data && node.data.directiveLabel) {
         customTitle = node.data.directiveLabel;
       }
+      // Check if first child is a text node that could be the title
+      else if (contentChildren.length > 0) {
+        const firstChild = contentChildren[0];
+        if (firstChild.type === 'text') {
+          const text = firstChild.value.trim();
+          if (!text.includes('\n') && contentChildren.length > 1) {
+            customTitle = text;
+            contentChildren = contentChildren.slice(1);
+          }
+        }
+      }
 
       const title = customTitle || getDefaultTitle(type);
 
@@ -421,7 +577,7 @@ export function remarkContainers() {
       const htmlStartNode = { type: 'html', value: openingHTML };
       const htmlEndNode = { type: 'html', value: closingHTML };
 
-      const newNodes = [htmlStartNode, ...node.children, htmlEndNode];
+      const newNodes = [htmlStartNode, ...contentChildren, htmlEndNode];
       parent.children.splice(index, 1, ...newNodes);
 
       return index + newNodes.length;