@rspress-theme-anatole/plugin-container-syntax 0.0.4 → 0.1.31

package/container.css

@@ -129,28 +129,6 @@
   color: var(--rp-container-tip-text);
 }
 
-
-
-
-.rspress-doc .rspress-directive.tabs {
-  border-color: var(--rp-container-tip-border);
-  background-color: var(--rp-container-tip-bg);
-}
-
-.rspress-doc .rspress-directive.tabs .rspress-directive-title {
-  color: var(--rp-container-tip-text);
-}
-
-.rspress-doc .rspress-directive.tabs code {
-  color: var(--rp-container-tip-text);
-  background-color: var(--rp-container-tip-code-bg);
-}
-
-.rspress-doc .rspress-directive.tabs a {
-  color: var(--rp-container-tip-text);
-}
-
-
 .rspress-doc .rspress-directive.info {
   border-color: var(--rp-container-info-border);
   background-color: var(--rp-container-info-bg);
@@ -225,4 +203,105 @@
 
 .rspress-doc .rspress-directive.details a {
   color: var(--rp-container-details-link);
+}
+
+
+
+
+
+
+.rspress-doc .rspress-directive.tabs {
+  border-color: var(--rp-container-tip-border);
+  background-color: var(--rp-container-tip-bg);
+  padding: 0;
+  overflow: hidden;
+}
+
+.rspress-doc .rspress-directive.tabs .rspress-directive-title {
+  color: var(--rp-container-tip-text);
+  display: none;
+  /* Hide the default title for tabs */
+}
+
+.rspress-doc .rspress-directive.tabs .rspress-directive-content {
+  padding: 0;
+}
+
+/* Tabs navigation styling */
+.rspress-doc .tabs-nav {
+  display: flex;
+  border-bottom: 1px solid var(--rp-container-tip-border);
+  background-color: rgba(7, 156, 112, 0.03);
+  padding: 0;
+  margin: 0;
+}
+
+.rspress-doc .tabs-nav-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rp-container-tip-text);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.rspress-doc .tabs-nav-item.active {
+  border-bottom: 2px solid var(--rp-container-tip-text);
+  background-color: rgba(7, 156, 112, 0.08);
+}
+
+/* Tab content styling */
+.rspress-doc .tabs-content {
+  padding: 16px 24px;
+}
+
+.rspress-doc .tabs-panel {
+  display: none;
+}
+
+.rspress-doc .tabs-panel.active {
+  display: block;
+}
+
+.rspress-doc .tabs-nav-item:hover {
+  background-color: rgba(7, 156, 112, 0.06);
+  cursor: pointer;
+}
+
+
+
+/* ...existing styles... */
+
+.rspress-directive.tabs {
+  margin: 1rem 0;
+}
+
+.tabs-nav {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 1rem;
+}
+
+.tabs-nav-item {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+.tabs-nav-item.active {
+  background-color: #fff;
+  border-color: #ddd;
+  border-bottom-color: #fff;
+}
+
+.tabs-panel {
+  display: none;
+}
+
+.tabs-panel.active {
+  display: block;
 }

package/dist/index.js

@@ -2,7 +2,14 @@ import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
 import * as __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__ from "node:url";
 import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__ from "@rspress-theme-anatole/shared";
 const DIRECTIVE_TYPES = [
-    'tabs',
+    'tip',
+    'note',
+    'warning',
+    'caution',
+    'danger',
+    'info',
+    'details',
+    'tabs'
 ];
 const REGEX_BEGIN = /^\s*:::\s*(\w+)\s*(.*)?/;
 const REGEX_END = /\s*:::$/;
@@ -14,10 +21,125 @@ const parseTitle = (rawTitle = '', isMDX = false) => {
     const matched = rawTitle?.match(isMDX ? TITLE_REGEX_IN_MDX : TITLE_REGEX_IN_MD);
     return trimTailingQuote(matched?.[1] || rawTitle);
 };
+
 const createContainer = (type, title, children) => {
     const isDetails = 'details' === type;
+    const isTabs = 'tabs' === type;
     const rootHName = isDetails ? 'details' : 'div';
     const titleHName = isDetails ? 'summary' : 'div';
+
+    // Handle tabs differently
+    if (isTabs) {
+        // Identify tab sections by finding paragraphs starting with ==
+        const tabSections = [];
+        let currentTabContent = null;
+        let currentTabTitle = '';
+
+        // Process children to find tab sections
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+
+            if (child.type === 'paragraph' &&
+                child.children &&
+                child.children[0] &&
+                child.children[0].type === 'text' &&
+                child.children[0].value.trim().startsWith('==')) {
+
+                // If we already have a tab section, push it
+                if (currentTabContent) {
+                    tabSections.push({
+                        title: currentTabTitle,
+                        content: currentTabContent
+                    });
+                }
+
+                // Start a new tab section
+                currentTabTitle = child.children[0].value.trim().substring(2).trim();
+                currentTabContent = [];
+                continue;
+            }
+
+            // Add content to the current tab section
+            if (currentTabContent !== null) {
+                currentTabContent.push(child);
+            }
+        }
+
+        // Add the last tab section if it exists
+        if (currentTabContent && currentTabContent.length) {
+            tabSections.push({
+                title: currentTabTitle,
+                content: currentTabContent
+            });
+        }
+
+        // Create tab navigation
+        const tabNavItems = tabSections.map((section, index) => ({
+            type: 'paragraph',
+            data: {
+                hName: 'div',
+                hProperties: {
+                    class: `tabs-nav-item${index === 0 ? ' active' : ''}`,
+                    'data-tab-index': index
+                }
+            },
+            children: [
+                {
+                    type: 'text',
+                    value: section.title
+                }
+            ]
+        }));
+
+        // Create tab content panels
+        const tabContentPanels = tabSections.map((section, index) => ({
+            type: 'paragraph',
+            data: {
+                hName: 'div',
+                hProperties: {
+                    class: `tabs-panel${index === 0 ? ' active' : ''}`,
+                    id: `tab-${index}`
+                }
+            },
+            children: section.content
+        }));
+
+        // Create the tabs container
+        return {
+            type: 'containerDirective',
+            data: {
+                hName: rootHName,
+                hProperties: {
+                    class: `rspress-directive ${type}`
+                }
+            },
+            children: [
+                // Navigation tabs
+                {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            class: 'tabs-nav'
+                        }
+                    },
+                    children: tabNavItems
+                },
+                // Tab content container
+                {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            class: 'tabs-content'
+                        }
+                    },
+                    children: tabContentPanels
+                },
+            ]
+        };
+    }
+
     return {
         type: 'containerDirective',
         data: {
@@ -55,6 +177,31 @@ const createContainer = (type, title, children) => {
         ]
     };
 };
+
+export function initializeTabs() {
+    document.addEventListener('DOMContentLoaded', () => {
+        const tabContainers = document.querySelectorAll('.rspress-directive.tabs');
+        
+        tabContainers.forEach(container => {
+            const navItems = container.querySelectorAll('.tabs-nav-item');
+            const panels = container.querySelectorAll('.tabs-panel');
+            
+            navItems.forEach((navItem, index) => {
+                navItem.addEventListener('click', () => {
+                    // Remove active class from all nav items and panels
+                    navItems.forEach(item => item.classList.remove('active'));
+                    panels.forEach(panel => panel.classList.remove('active'));
+                    
+                    // Add active class to clicked nav item and corresponding panel
+                    navItem.classList.add('active');
+                    panels[index].classList.add('active');
+                });
+            });
+        });
+    });
+}
+
+
 function transformer(tree) {
     let i = 0;
     try {
@@ -190,9 +337,15 @@ function transformer(tree) {
         throw e;
     }
 }
+
 const remarkPluginContainer = () => transformer;
 const src_dirname = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__.fileURLToPath)(import.meta.url)));
 function pluginContainerSyntax() {
+    // Initialize tabs when the plugin loads
+    if (typeof window !== 'undefined') {
+        initializeTabs();
+    }
+
     return {
         name: '@rspress-theme-anatole/plugin-container-syntax',
         markdown: {
@@ -200,7 +353,9 @@ function pluginContainerSyntax() {
                 remarkPluginContainer
             ]
         },
-        globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(src_dirname, '../container.css')
+        globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(src_dirname, '../container.css'),
+
     };
 }
+
 export { pluginContainerSyntax };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress-theme-anatole/plugin-container-syntax",
-  "version": "0.0.4",
+  "version": "0.1.31",
   "license": "MIT",
   "sideEffects": [
     "*.css",
@@ -17,7 +17,7 @@
     "container.css"
   ],
   "dependencies": {
-    "@rspress-theme-anatole/shared": "0.1.19"
+    "@rspress-theme-anatole/shared": "0.1.30"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.49.2",