@rspress-theme-anatole/theme-default 0.7.15 → 0.7.16

package/dist/bundle.js

@@ -4576,6 +4576,182 @@ function NavVersions() {
         })
     });
 }
+// Utility functions for cookie management
+function setCookie(name, value, days = 7) {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
+    document.cookie = `${name}=${encodeURIComponent(JSON.stringify(value))};expires=${expires.toUTCString()};path=/`;
+}
+
+function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0) {
+            try {
+                return JSON.parse(decodeURIComponent(c.substring(nameEQ.length, c.length)));
+            } catch (e) {
+                return null;
+            }
+        }
+    }
+    return null;
+}
+
+function deleteCookie(name) {
+    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/`;
+}
+
+// User Authentication Component
+function UserAuth() {
+    const { siteData } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.usePageData)();
+    const [user, setUser] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [showDropdown, setShowDropdown] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const dropdownRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    
+    // Get sign in URL from site config
+    const signInUrl = siteData?.themeConfig?.auth?.signInUrl;
+    
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
+        // Check for user cookie on component mount
+        const userData = getCookie('user_auth');
+        if (userData) {
+            setUser(userData);
+        }
+        
+        // Listen for storage events to sync across tabs
+        const handleStorageChange = () => {
+            const userData = getCookie('user_auth');
+            setUser(userData);
+        };
+        
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, []);
+    
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
+        // Close dropdown when clicking outside
+        function handleClickOutside(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowDropdown(false);
+            }
+        }
+        
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    
+    const handleSignIn = async () => {
+        if (!signInUrl) {
+            console.warn('Sign in URL not configured');
+            return;
+        }
+        
+        try {
+            // Open sign in URL in new window/tab
+            const authWindow = window.open(signInUrl, '_blank', 'width=600,height=600');
+            
+            // Listen for messages from auth window
+            const handleMessage = (event) => {
+                if (event.origin !== new URL(signInUrl).origin) return;
+                
+                if (event.data && event.data.type === 'AUTH_SUCCESS') {
+                    const userData = {
+                        username: event.data.username,
+                        avatar: event.data.avatar
+                    };
+                    
+                    setCookie('user_auth', userData);
+                    setUser(userData);
+                    authWindow.close();
+                    
+                    // Remove event listener
+                    window.removeEventListener('message', handleMessage);
+                }
+            };
+            
+            window.addEventListener('message', handleMessage);
+            
+            // Fallback: poll for cookie changes (in case postMessage isn't used)
+            const pollInterval = setInterval(() => {
+                if (authWindow.closed) {
+                    clearInterval(pollInterval);
+                    window.removeEventListener('message', handleMessage);
+                    
+                    // Check if user data was set
+                    const userData = getCookie('user_auth');
+                    if (userData) {
+                        setUser(userData);
+                    }
+                }
+            }, 1000);
+            
+        } catch (error) {
+            console.error('Sign in error:', error);
+        }
+    };
+    
+    const handleSignOut = () => {
+        deleteCookie('user_auth');
+        setUser(null);
+        setShowDropdown(false);
+    };
+    
+    if (!user) {
+        return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+            onClick: handleSignIn,
+            className: "py-2 px-6 text-sm font-medium text-white hover:text-text-2 transition-colors duration-200 border border-gray-300 rounded-md hover:border-gray-400",
+            style: {
+                backgroundColor: 'rgb(239, 72, 61)',
+                color: 'white',
+            },
+            children: "Sign in"
+        });
+    }
+    
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: "relative",
+        ref: dropdownRef,
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                onClick: () => setShowDropdown(!showDropdown),
+                className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-text-1 hover:text-text-2 transition-colors duration-200 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800",
+                children: [
+                    user.avatar && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("img", {
+                        src: user.avatar.startsWith('data:') ? user.avatar : `data:image/png;base64,${user.avatar}`,
+                        alt: "User Avatar",
+                        className: "w-6 h-6 rounded-full object-cover"
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        children: user.username
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+                        className: `w-4 h-4 transition-transform ${showDropdown ? 'rotate-180' : ''}`,
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M19 9l-7 7-7-7"
+                        })
+                    })
+                ]
+            }),
+            showDropdown && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-50",
+                children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                    onClick: handleSignOut,
+                    className: "w-full text-left px-4 py-2 text-sm text-text-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md",
+                    children: "Sign out"
+                })
+            })
+        ]
+    });
+}
 const DEFAULT_NAV_POSITION = 'right';
 function Nav(props) {
     const { beforeNavTitle, afterNavTitle, beforeNav, afterNavMenu, navTitle } = props;
@@ -4669,6 +4845,10 @@ function Nav(props) {
                     }),
                     hasSocialLinks && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SocialLinks, {
                         socialLinks: socialLinks
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: "ml-2",
+                        children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(UserAuth, {})
                     })
                 ]
             })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspress-theme-anatole/theme-default",
   "author": "Anatole Tong",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "license": "MIT",
   "sideEffects": [
     "*.css",
@@ -21,8 +21,8 @@
   "types": "./dist/bundle.d.ts",
   "dependencies": {
     "@mdx-js/react": "2.3.0",
-    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.15",
-    "@rspress-theme-anatole/shared": "0.7.15",
+    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.16",
+    "@rspress-theme-anatole/shared": "0.7.16",
     "@rspress/runtime": "1.43.8",
     "body-scroll-lock": "4.0.0-beta.0",
     "copy-to-clipboard": "^3.3.3",