@rspress-theme-anatole/theme-default 0.1.19 → 0.1.21

package/components/tabs.tsx

@@ -0,0 +1,235 @@
+import React, { useState, Children, isValidElement } from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+interface TabItem {
+    label: string;
+    content: string;
+}
+
+interface TabsProps {
+    children: React.ReactNode;
+}
+
+export const Tabs: React.FC<TabsProps> = ({ children }) => {
+    // console.log(children);
+    const outputItems: TabItem[] = [];
+
+    const convertToHTML = (node: any): string => {
+        // console.log(node);
+        if (node === null || node === undefined) return '';
+
+        if (typeof node === 'string' || typeof node === 'number') {
+            return String(node);
+        }
+
+        if (Array.isArray(node)) {
+            return node.map(item => {
+                return convertToHTML(item);
+            }
+            ).join('');
+        }
+
+        if (isValidElement(node)) {
+            const element = node as React.ReactElement;
+            const props = element.props as Record<string, any>;
+
+            if (element.type === React.Fragment) {
+                return convertToHTML(props.children);
+            }
+
+            if (typeof element.type === 'string') {
+                // Build attributes string
+                const attributes = Object.entries(props)
+                    .filter(([key]) => key !== 'children' && key !== 'className')
+                    .map(([key, value]) => `${key}="${value}"`)
+                    .concat(props.className ? [`class="${props.className}"`] : [])
+                    .join(' ');
+
+                const attributeString = attributes ? ` ${attributes}` : '';
+
+                // Convert children to HTML
+                const childrenContent = props.children ? convertToHTML(props.children) : '';
+
+                // Handle void elements
+                const voidElements = ['img', 'br', 'hr', 'input', 'meta', 'link'];
+                if (voidElements.includes(element.type)) {
+                    return `<${element.type}${attributeString}>`;
+                }
+
+                // Handle regular elements
+                return `<${element.type}${attributeString}>${childrenContent}</${element.type}>`;
+            }
+
+            try {
+                return ReactDOMServer.renderToStaticMarkup(element);
+            } catch (error) {
+                // return convertToHTML(props.children);
+                if (element) {
+                    const modifiedElement = {
+                        ...element,
+                        props: {
+                            ...(typeof element.props === 'object' && element.props !== null ? element.props : {}),
+                            children: DealWithUrl(props.children)
+                        }
+                    };
+
+                    // console.log(modifiedElement);
+                    if (modifiedElement) {
+                        try {
+                            return ReactDOMServer.renderToStaticMarkup(modifiedElement);
+                        }
+                        catch {
+                            return convertToHTML(props.children);
+                        }
+                    }
+                }
+            }
+        }
+
+        // Handle objects with props (like context providers)
+        if (node && typeof node === 'object' && 'props' in node) {
+            return convertToHTML((node as any).props.children);
+        }
+
+        return '';
+    };
+
+    function DealWithUrl(para: any): any {
+        if (Array.isArray(para)) {
+            return para.map((child: any) => {
+                if (child && child.type) {
+                    // console.log(child.props);
+                    if ("href" in child.props) {
+                        return child.props.children;
+                    }
+                    else if (child.props && child.props.children) {
+                        return {
+                            ...child,
+                            props: {
+                                ...child.props,
+                                children: DealWithUrl(child.props.children)
+                            }
+                        };
+                    }
+                }
+                return child;
+            });
+        } else {
+            return para;
+        }
+    }
+
+    // function convertUrlsToLinks(content: string) {
+    //     const urlPattern = /(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g;
+    //     return content.replace(urlPattern, function (url) {
+    //         return `<a href="${encodeURI(url)}" target="_blank">${url}</a>`;
+    //     });
+    // }
+
+    const parseTabs = (inputItems: React.ReactNode): TabItem[] => {
+        Children.forEach(inputItems, (inputItem) => {
+            if (isValidElement<{ children: React.ReactNode }>(inputItem)) {
+                if (typeof inputItem.props.children === 'string') {
+                    const text: string = inputItem.props.children;
+                    if (text.startsWith('== ')) {
+                        if (text.includes('\r\n')) {
+                            let match = text.split('\r\n', 2);
+                            var tabItem: TabItem = {
+                                label: match[0].split('==').filter(Boolean)[0],
+                                content: text.substring(match[0].length).trim()
+                            };
+                        }
+                        else {
+                            var tabItem: TabItem = {
+                                label: text.split('==').filter(Boolean)[0],
+                                content: ''
+                            };
+                        }
+
+                        outputItems.push(tabItem);
+                    }
+                    else {
+                        const lastTab = outputItems[outputItems.length - 1];
+                        if (lastTab) {
+                            const htmlContent = convertToHTML(inputItem);
+                            lastTab.content += htmlContent;
+                        }
+                    }
+                }
+                else {
+                    const lastTab = outputItems[outputItems.length - 1];
+                    if (lastTab) {
+                        const htmlContent = convertToHTML(inputItem);
+                        lastTab.content += htmlContent;
+                    }
+                }
+            }
+        });
+        return outputItems;
+    };
+
+    const tabs = parseTabs(children);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.label);
+
+    if (!tabs.length) return null;
+
+    return (
+        <div className="tabs-container">
+            <div className="tabs-header">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.label}
+                        className={`tab-button ${activeTab === tab.label ? 'active' : ''}`}
+                        onClick={() => setActiveTab(tab.label)}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+            <div className="tabs-content"
+                dangerouslySetInnerHTML={{ __html: tabs.find((tab) => tab.label === activeTab)?.content ?? '' }}>
+            </div>
+
+            <style>{`
+                .tabs-container {
+                    margin: 1rem 0;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.375rem;
+                }
+                .tabs-header {
+                    display: flex;
+                    border-bottom: 1px solid #e5e7eb;
+                    background-color: #f9fafb;
+                    border-top-left-radius: 0.375rem;
+                    border-top-right-radius: 0.375rem;
+                }
+                .tab-button {
+                    padding: 0.75rem 1.25rem;
+                    border: none;
+                    background: none;
+                    cursor: pointer;
+                    font-size: 0.875rem;
+                    color: #4b5563;
+                    border-right: 1px solid #e5e7eb;
+                }
+                .tab-button:hover {
+                    background-color: #f3f4f6;
+                }
+                .tab-button.active {
+                    color: #1e40af;
+                    background-color: #fff;
+                    border-bottom: 2px solid #1e40af;
+                    margin-bottom: -1px;
+                }
+                .tabs-content {
+                    padding: 1rem;
+                    background-color: #fff;
+                    border-bottom-left-radius: 0.375rem;
+                    border-bottom-right-radius: 0.375rem;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default Tabs;

package/config.ts

@@ -1,7 +1,21 @@
+import * as path from 'node:path';
 import type { UserConfig } from '@rspress-theme-anatole/shared';
+import directives from '@rspress-theme-anatole/rspress-plugin-directives';
 
 export function defineConfig(config: UserConfig): UserConfig {
-  return config;
+  return {
+    ...config,
+    plugins: [
+      directives({
+        directive: 'tabs',
+        transformer: {
+          type: 'globalComponent',
+          getComponentName: (meta) => 'Tabs',
+          componentPath: path.join(__dirname, './components/tabs.tsx'),
+        },
+      }),
+    ],
+  }
 }
 
 export type { UserConfig };

package/dist/bundle.js

@@ -2938,7 +2938,6 @@ function HomepageTopSearch({ frontmatter, routePath }) {
         ],
         style: {
             height: "400px",
-            backgroundColor: "green",
             backgroundImage: `url(${(0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.normalizeImagePath)(imageSrc.light)})`,
             backgroundSize: "cover",
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspress-theme-anatole/theme-default",
   "author": "Anatole Tong",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "MIT",
   "sideEffects": [
     "*.css",