@rspress-theme-anatole/theme-default 0.7.22-alpha4 → 0.7.23

package/dist/bundle.js

@@ -339,48 +339,97 @@ function normalizeRoleList(value) {
     const list = Array.isArray(value) ? value : String(value).split(',');
     return list.map((role) => String(role).trim().toLowerCase()).filter(Boolean);
 }
+// Cache for user roles fetched from userContext endpoint
+let _cachedUserRoles = null;
+let _userRolesFetchPromise = null;
+
 function getUserRoles() {
-    if (typeof getUserFromStorage !== 'function') return [];
-    const user = getUserFromStorage();
-    const roles = user?.roles ?? user?.role ?? user?.groups ?? user?.group ?? [];
-    return normalizeRoleList(roles);
+    // Return cached roles if available
+    if (_cachedUserRoles !== null) return _cachedUserRoles;
+    return [];
 }
-function hasRoleAccess(item, userRoles) {
-    const requiredRoles = normalizeRoleList(item?.roles);
-    if (!requiredRoles.length) return true;
-    if (!userRoles.length) return false;
-    return requiredRoles.some((role) => userRoles.includes(role));
+
+async function fetchUserRoles(userContextUrl) {
+    if (!userContextUrl) return [];
+    if (_cachedUserRoles !== null) return _cachedUserRoles;
+    if (_userRolesFetchPromise) return _userRolesFetchPromise;
+    
+    _userRolesFetchPromise = (async () => {
+        try {
+            const response = await fetch(userContextUrl, { credentials: 'include' });
+            if (!response.ok) {
+                console.warn('Failed to fetch user context:', response.status);
+                _cachedUserRoles = [];
+                return [];
+            }
+            const data = await response.json();
+            const roles = data?.permissions?.roles || [];
+            _cachedUserRoles = normalizeRoleList(roles);
+            // Dispatch event to trigger sidebar re-render
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new Event('UserRolesReady'));
+            }
+            return _cachedUserRoles;
+        } catch (e) {
+            console.warn('Error fetching user context:', e);
+            _cachedUserRoles = [];
+            return [];
+        } finally {
+            _userRolesFetchPromise = null;
+        }
+    })();
+    
+    return _userRolesFetchPromise;
 }
-function filterSidebarItems(items, userRoles) {
+function isItemLocked(item, userRoles) {
+    const requiredRoles = normalizeRoleList(item?.roles);
+    // No roles required = public content (not locked)
+    if (!requiredRoles.length) return false;
+    // Has roles required but user has matching role = unlocked
+    if (userRoles.length && requiredRoles.some((role) => userRoles.includes(role))) return false;
+    // Has roles required but user doesn't have matching role = locked
+    return true;
+}
+function markLockedSidebarItems(items, userRoles) {
     if (!Array.isArray(items)) return items;
     return items.map((item) => {
         if (!item) return null;
         let nextItem = item;
+        const locked = isItemLocked(item, userRoles);
+        if (locked) {
+            nextItem = { ...nextItem, locked: true };
+        }
         if ('items' in item && Array.isArray(item.items)) {
-            const filteredItems = filterSidebarItems(item.items, userRoles);
-            if (filteredItems.length !== item.items.length) {
-                nextItem = {
-                    ...item,
-                    items: filteredItems
-                };
-            }
-            if (!nextItem.link && filteredItems.length === 0 && !('dividerType' in nextItem) && !('sectionHeaderText' in nextItem)) {
-                return null;
-            }
+            const markedItems = markLockedSidebarItems(item.items, userRoles);
+            nextItem = { ...nextItem, items: markedItems };
         }
-        return hasRoleAccess(nextItem, userRoles) ? nextItem : null;
+        return nextItem;
     }).filter(Boolean);
 }
 function useSidebarData() {
     const { sidebar } = useLocaleSiteData();
+    const { siteData } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.usePageData)();
     const { pathname: rawPathname } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.useLocation)();
     const pathname = decodeURIComponent(rawPathname);
     const [roleVersion, setRoleVersion] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    
+    // Fetch user roles from userContext endpoint
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
+        const userContextUrl = siteData?.auth?.endpoints?.userContext;
+        if (userContextUrl) {
+            fetchUserRoles(userContextUrl);
+        }
+    }, [siteData?.auth?.endpoints?.userContext]);
+    
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
         if ('undefined' == typeof window) return;
         const handler = () => setRoleVersion((v) => v + 1);
         window.addEventListener('MetaRolesReady', handler);
-        return () => window.removeEventListener('MetaRolesReady', handler);
+        window.addEventListener('UserRolesReady', handler);
+        return () => {
+            window.removeEventListener('MetaRolesReady', handler);
+            window.removeEventListener('UserRolesReady', handler);
+        };
     }, []);
     const sidebarData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(() => {
         const data = getSidebarDataGroup(sidebar, pathname);
@@ -417,8 +466,7 @@ function useSidebarData() {
             }
         } catch (e) {
         }
-        console.log('[sidebar] data:', dataWithRoles);
-        return filterSidebarItems(dataWithRoles, userRoles);
+        return markLockedSidebarItems(dataWithRoles, userRoles);
     }, [
         sidebar,
         pathname,
@@ -426,11 +474,83 @@ function useSidebarData() {
     ]);
     return sidebarData;
 }
+
+// Get first accessible (not locked) page from sidebar items
+function getFirstAccessiblePage(items) {
+    if (!Array.isArray(items)) return null;
+    
+    for (const item of items) {
+        if (!item) continue;
+        if ('dividerType' in item) continue;
+        
+        // If item is locked, skip it
+        if (item.locked === true) continue;
+        
+        // If item has a link and is not locked, return it
+        if ('link' in item && item.link) {
+            return { text: item.text, link: item.link };
+        }
+        
+        // If item has children, search recursively
+        if ('items' in item && Array.isArray(item.items)) {
+            const found = getFirstAccessiblePage(item.items);
+            if (found) return found;
+        }
+    }
+    
+    return null;
+}
+
+// Hook to redirect to first accessible page if current page is locked
+function useRedirectToAccessiblePage() {
+    const { pathname } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.useLocation)();
+    const navigate = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.useNavigate)();
+    const items = useSidebarData();
+    
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
+        if (!items || items.length === 0) return;
+        
+        // Find current page in sidebar
+        const findCurrentPage = (items, targetPath) => {
+            for (const item of items) {
+                if (!item) continue;
+                if ('dividerType' in item) continue;
+                
+                if ('link' in item && item.link) {
+                    const itemPath = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.withBase)(item.link);
+                    if ((0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.isEqualPath)(itemPath, targetPath)) {
+                        return item;
+                    }
+                }
+                
+                if ('items' in item && Array.isArray(item.items)) {
+                    const found = findCurrentPage(item.items, targetPath);
+                    if (found) return found;
+                }
+            }
+            return null;
+        };
+        
+        const currentPage = findCurrentPage(items, pathname);
+        
+        // If current page is locked, redirect to first accessible page
+        if (currentPage && currentPage.locked === true) {
+            const firstAccessible = getFirstAccessiblePage(items);
+            if (firstAccessible && firstAccessible.link) {
+                navigate((0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.withBase)(firstAccessible.link), { replace: true });
+            }
+        }
+    }, [items, pathname, navigate]);
+}
+
 function usePrevNextPage() {
     const { pathname } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.useLocation)();
     const items = useSidebarData();
     const flattenTitles = [];
     const walk = (sidebarItem) => {
+        // Skip locked items
+        if (sidebarItem.locked === true) return;
+        
         if ('items' in sidebarItem) {
             if (sidebarItem.link) flattenTitles.push({
                 text: sidebarItem.text,
@@ -635,9 +755,29 @@ function SidebarGroup(props) {
     const initialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)('collapsed' in item && item.collapsed);
     const active = item.link && activeMatcher(item.link);
     const { collapsed, collapsible = true } = item;
+    const isLocked = item.locked === true;
+    
+    // Lock icon SVG for groups
+    const GroupLockIcon = () => (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { marginLeft: '6px', opacity: 0.6, flexShrink: 0 },
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+        ]
+    });
+    
     const collapsibleIcon = (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         style: {
-            cursor: 'pointer',
+            cursor: isLocked ? 'not-allowed' : 'pointer',
             transition: 'transform 0.2s ease-out',
             transform: collapsed ? 'rotate(0deg)' : 'rotate(90deg)'
         },
@@ -675,6 +815,7 @@ function SidebarGroup(props) {
     }, []);
     const toggleCollapse = (e) => {
         e.stopPropagation();
+        if (isLocked) return; // Prevent collapse toggle for locked items
         setSidebarData((sidebarData) => {
             const newSidebarData = [
                 ...sidebarData
@@ -692,23 +833,29 @@ function SidebarGroup(props) {
         className: "rspress-sidebar-section mt-0.5 block",
         "data-context": item.context,
         style: {
-            marginLeft: 0 === depth ? 0 : '18px'
+            marginLeft: 0 === depth ? 0 : '18px',
+            opacity: isLocked ? 0.6 : 1
         },
         children: [
             (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: `rspress-sidebar-collapse flex items-center ${active ? Sidebar_index_module.menuItemActive : Sidebar_index_module.menuItem}`,
                 "data-context": item.context,
-                onMouseEnter: () => item.link && preloadLink(item.link),
+                onMouseEnter: () => !isLocked && item.link && preloadLink(item.link),
                 onClick: (e) => {
+                    if (isLocked) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return;
+                    }
                     if (item.link) navigate((0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.withBase)((0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.normalizeHrefInRuntime)(item.link)));
                     collapsible && toggleCollapse(e);
                 },
                 style: {
                     // borderRadius: 0 === depth ? '0 var(--rp-radius) var(--rp-radius) 0' : void 0,
-                    cursor: collapsible || item.link ? 'pointer' : 'normal'
+                    cursor: isLocked ? 'not-allowed' : (collapsible || item.link ? 'pointer' : 'normal')
                 },
                 children: [
-                    collapsible && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    collapsible && !isLocked && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                         className: `${Sidebar_index_module.collapseContainer} p-2 rounded-xl`,
                         style: {
                             paddingRight: 0
@@ -717,7 +864,7 @@ function SidebarGroup(props) {
                         children: collapsibleIcon
                     }),
                     (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("h2", {
-                        className: "py-2 px-2 text-sm font-medium flex",
+                        className: "py-2 px-2 text-sm font-medium flex items-center",
                         style: {
                             ...highlightTitleStyle
                         },
@@ -733,12 +880,13 @@ function SidebarGroup(props) {
                                     letterSpacing: '-1%'
                                 },
                                 children: renderInlineMarkdown(item.text)
-                            })
+                            }),
+                            isLocked && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(GroupLockIcon, {})
                         ]
                     })
                 ]
             }),
-            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            !isLocked && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 ref: containerRef,
                 className: "transition-all duration-300 ease-in-out",
                 style: {
@@ -774,6 +922,7 @@ function SidebarItem(props) {
     const { item, depth = 0, activeMatcher, id, setSidebarData } = props;
     const active = 'link' in item && item.link && activeMatcher(item.link);
     const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const isLocked = item.locked === true;
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
         if (active) ref.current?.scrollIntoView({
             block: 'center'
@@ -787,6 +936,65 @@ function SidebarItem(props) {
         collapsed: item.collapsed,
         setSidebarData: setSidebarData
     }, `${item.text}-${id}`);
+    
+    // Lock icon SVG
+    const LockIcon = () => (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { marginLeft: '6px', opacity: 0.6, flexShrink: 0 },
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+        ]
+    });
+    
+    if (isLocked) {
+        // Locked item - show lock icon and prevent navigation
+        return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: Sidebar_index_module.menuLink,
+            onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            style: { cursor: 'not-allowed' },
+            children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                ref: ref,
+                className: `${Sidebar_index_module.menuItem} mt-0.5 py-2 px-3 font-medium flex items-center justify-between`,
+                style: {
+                    fontSize: 0 === depth ? '14px' : '13px',
+                    marginLeft: 0 === depth ? 0 : '18px',
+                    opacity: 0.6,
+                    ...0 === depth ? highlightTitleStyle : {}
+                },
+                children: [
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
+                        className: "flex items-center",
+                        children: [
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__theme_75e53063__.Tag, {
+                                tag: item.tag
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                style: {
+                                    fontSize: 0 === depth ? '14px' : '13px',
+                                    fontWeight: 400
+                                },
+                                children: renderInlineMarkdown(item.text)
+                            })
+                        ]
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(LockIcon, {})
+                ]
+            })
+        });
+    }
+    
     return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__theme_75e53063__.Link, {
         href: (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.normalizeHrefInRuntime)(item.link),
         className: Sidebar_index_module.menuLink,
@@ -1741,6 +1949,7 @@ const Layout = (props) => {
     const { pageType, lang: currentLang, title: articleTitle, frontmatter = {} } = page;
     const localesData = useLocaleSiteData();
     useRedirect4FirstVisit();
+    useRedirectToAccessiblePage();
     let title = frontmatter.title ?? articleTitle;
     const mainTitle = siteData.title || localesData.title || '';
     title = title &&
@@ -4663,11 +4872,6 @@ 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(';');
@@ -4687,9 +4891,6 @@ function getCookie(name) {
     }
     return null;
 }
-function deleteCookie(name) {
-    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/`;
-}
 // Decode Base64 string (supports Unicode)
 function decodeBase64(base64String) {
     try {
@@ -4718,6 +4919,87 @@ function decodeBase64(base64String) {
         return null;
     }
 }
+// Generate initials from username (e.g., "Jake Thai" -> "JT")
+function getInitialsFromName(name) {
+    if (!name) return '?';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].charAt(0).toUpperCase();
+    }
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+
+// Generate a consistent color based on the username
+function getAvatarColor(name) {
+    // Microsoft Fluent UI persona colors
+    const colors = [
+        '#0078D4', // Microsoft Blue
+        '#107C10', // Green
+        '#5C2D91', // Purple
+        '#B4009E', // Magenta
+        '#D83B01', // Orange
+        '#E74856', // Red
+        '#00B7C3', // Teal
+        '#0099BC', // Cyan
+        '#7A7574', // Gray
+        '#69797E', // Dark Gray
+        '#498205', // Lime Green
+        '#847545', // Gold
+        '#C239B3', // Pink
+        '#038387', // Dark Teal
+        '#8764B8', // Light Purple
+        '#CA5010', // Burnt Orange
+    ];
+    // Generate a hash from the name for consistent color
+    let hash = 0;
+    const str = name || 'User';
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+}
+
+// Generate avatar as base64 PNG image
+function generateAvatarBase64(username, size = 64) {
+    if (typeof document === 'undefined') return null;
+    
+    const initials = getInitialsFromName(username);
+    const bgColor = getAvatarColor(username);
+    
+    // Use higher resolution for crisp rendering
+    const scale = 2;
+    const actualSize = size * scale;
+    
+    // Create canvas
+    const canvas = document.createElement('canvas');
+    canvas.width = actualSize;
+    canvas.height = actualSize;
+    const ctx = canvas.getContext('2d');
+    
+    // Enable anti-aliasing
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+    
+    // Draw circle background
+    ctx.beginPath();
+    ctx.arc(actualSize / 2, actualSize / 2, actualSize / 2, 0, Math.PI * 2);
+    ctx.fillStyle = bgColor;
+    ctx.fill();
+    
+    // Draw initials text
+    ctx.fillStyle = '#FFFFFF';
+    
+    const fontSize = actualSize * 0.42;
+    ctx.font = `400 ${fontSize}px "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    
+    // Slight vertical adjustment for better visual centering
+    ctx.fillText(initials, actualSize / 2, actualSize / 2 + (fontSize * 0.04));
+    
+    // Return as base64
+    return canvas.toDataURL('image/png');
+}
 // Parse KBGateway-User-Context cookie (Base64 encoded)
 function parseKBGatewayUserContext(cookieValue) {
     if (!cookieValue) return null;
@@ -4743,8 +5025,7 @@ function parseKBGatewayUserContext(cookieValue) {
         return {
             username: username,
             email: parsed.email || null,
-            roles: parsed.roles || parsed.role || parsed.groups || parsed.group || null,
-            avatar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAAXNSR0IArs4c6QAAAsJJREFUSEullU1IFHEYxp9ndpc+KHLzAyyDIIjO+TEzqWDtbFYXK/Bi0Cm61Ck6iEFsFEhFtyKiY2SBh0AIyZ1VQ2P/q3hMKIgOkUJahgRG6+4bo7kfzs7OSnPb+b/v8/s/78csscVHLP0T7dShUmkSNa5BoCMTvMexyZmNGG6FIRE9CnIElE7GUyMbuXLSPIKsvAegFeh9pa0anN9bg0SNHxCEQSwhrqoJiDgalpH1uOwAbXWhYohEmpvBwFReTEzaKSXRliaINu1VEdqKlUPWb1sYL7SVJifMFmiS+m+IWGYPIM9dQtQuomr/AJa+rHpAhmirroqciNtFTtMph0T04yBHi0H8iXBDDQcHM74QscxeQPo9p1DYx0Sy/98AvATQCOABbfW44hEWy3BKESgz6hnaKlhuFco6Ecu4A+CG7y4J7jKhej2b73UgjY0hhEMrPi420jOYW97J2dk/pfQ8nUjUvAWRm74ucoXnbcaTJeNLQny22JtrqwAB1/aXhkTMh6BcqdhF3s0jxpNXN+e5INLdHSixXI65Z9DQj2PJj3jXehTI9EFwznWR8IGgsxuF790Qy3gN4ExB0AraTu1iLOYqg7S27saOzHcAofx2YphxVZhf/BWWGDRMru1FHh6SPRxOLXtOYYdxEEF8LjgXtKkgY/neFDkRS58G2JRLELxiQp33641YxgcAhwvyZphQOZ0cRE631yKd/lYkGEjv45uZeX+I3gZwoiguFKrj8MSC8y4PsYwxAB1FgZKtYWLKqXnZRzrb65FJz20KektbremtQSTSUg1qiy4lTZo4ksr9V3v2JWpcguCp63x1ey3HxxfXIZaRBGC4gsgFxpN1vk4sw/mc5Ccsn6BoK5NytqMKv34veQoRXYyrIU8XEf0yyCee+duCeymWPgewvuxts+zhaPLF5hixzOuA3Pfp2PxfA8n5ENhQazEAAAAASUVORK5CYII="
+            avatar: generateAvatarBase64(username)
         };
     } catch (e) {
         console.warn('Failed to parse KBGateway-User-Context:', e);
@@ -4761,8 +5042,7 @@ function parseKBGatewayUserContext(cookieValue) {
             return {
                 username: username,
                 email: parsed.email || null,
-                roles: parsed.roles || parsed.role || parsed.groups || parsed.group || null,
-                avatar: parsed.Avatar || parsed.avatar || null
+                avatar: generateAvatarBase64(username)
             };
         } catch (e2) {
             console.warn('Failed to parse as JSON:', e2);
@@ -4772,54 +5052,12 @@ function parseKBGatewayUserContext(cookieValue) {
 }
 // LocalStorage key for user data
 const USER_STORAGE_KEY = 'kb_user_data';
-// Get user data from localStorage
-function getUserFromStorage() {
-    if (typeof localStorage === 'undefined') return null;
-    
-    try {
-        const storedData = localStorage.getItem(USER_STORAGE_KEY);
-        if (storedData) {
-            return JSON.parse(storedData);
-        }
-    } catch (e) {
-        console.warn('Failed to get user from localStorage:', e);
-        localStorage.removeItem(USER_STORAGE_KEY);
-    }
-    return null;
-}
-// Save user data to localStorage
-function saveUserToStorage(userData) {
-    if (typeof localStorage === 'undefined') return;
-    
-    try {
-        if (userData) {
-            localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(userData));
-        } else {
-            localStorage.removeItem(USER_STORAGE_KEY);
-        }
-    } catch (e) {
-        console.warn('Failed to save user to localStorage:', e);
-    }
-}
-// Remove user data from localStorage
-function removeUserFromStorage() {
-    if (typeof localStorage === 'undefined') return;
-    localStorage.removeItem(USER_STORAGE_KEY);
-}
-// Sync cookie to localStorage and return user data
-function syncCookieToStorage(cookieName) {
-    const cookieValue = getCookie(cookieName);
-    const userData = parseKBGatewayUserContext(cookieValue);
-    
-    if (userData) {
-        saveUserToStorage(userData);
-    } else {
-        removeUserFromStorage();
-    }
-    
-    return userData;
-}
+
 // User Authentication Component
+// Cache user data globally to prevent flicker between page navigations
+let cachedUserData = null;
+let isClientInitialized = false;
+
 function UserAuth() {
     const { siteData } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.usePageData)();
     const dropdownRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
@@ -4827,52 +5065,54 @@ function UserAuth() {
     const authEnabled = siteData?.auth?.enabled !== false;
     const showSignInButton = siteData?.auth?.showSignInButton !== false;
 
-    // Get sign in URL from site config
+    // Get sign in /sign out URL from site config
     const signInUrl = siteData?.auth?.endpoints?.signIn;
+    const signOutUrl = siteData?.auth?.endpoints?.signOut;
 
     // Cookie name for KBGateway
     const KB_COOKIE_NAME = 'KBGateway-User-Context';
 
-    const [user, setUser] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(() => {
+    // Helper function to get user from cookie directly
+    const getUserFromCookie = () => {
         if (typeof document === 'undefined') return null;
-        
-        // 1. First try to get from localStorage (instant, no flicker)
-        const storedUser = getUserFromStorage();
-        if (storedUser) {
-            return storedUser;
+        const cookieValue = getCookie(KB_COOKIE_NAME);
+        return parseKBGatewayUserContext(cookieValue);
+    };
+
+    // Initialize from cache first, then cookie - prevents flicker on navigation
+    const [user, setUser] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(() => {
+        // Use cached data first for instant render
+        if (cachedUserData) return cachedUserData;
+        // Fall back to cookie (only works on client)
+        if (typeof document !== 'undefined') {
+            const cookieUser = getUserFromCookie();
+            if (cookieUser) {
+                cachedUserData = cookieUser;
+                isClientInitialized = true;
+            }
+            return cookieUser;
         }
-        
-        // 2. If not in localStorage, check cookie and sync
-        return syncCookieToStorage(KB_COOKIE_NAME);
+        return null;
     });
 
+    // Track if component has mounted (for SSR hydration)
+    const [isMounted, setIsMounted] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(isClientInitialized);
+
     const [showDropdown, setShowDropdown] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     
-    // Sync cookie to localStorage on mount and periodically check for changes
+    // Check cookie on mount and update cache
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
-        // Sync cookie to localStorage on mount
-        const userData = syncCookieToStorage(KB_COOKIE_NAME);
+        const userData = getUserFromCookie();
         if (userData) {
+            cachedUserData = userData;
             setUser(userData);
+        } else if (isClientInitialized) {
+            // Cookie was removed (signed out) - only clear if we were initialized
+            cachedUserData = null;
+            setUser(null);
         }
-        
-        // Listen for storage events to sync across tabs
-        const handleStorageChange = (e) => {
-            if (e.key === USER_STORAGE_KEY) {
-                if (e.newValue) {
-                    try {
-                        setUser(JSON.parse(e.newValue));
-                    } catch (err) {
-                        setUser(null);
-                    }
-                } else {
-                    setUser(null);
-                }
-            }
-        };
-        
-        window.addEventListener('storage', handleStorageChange);
-        return () => window.removeEventListener('storage', handleStorageChange);
+        isClientInitialized = true;
+        setIsMounted(true);
     }, []);
     
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(() => {
@@ -4887,96 +5127,43 @@ function UserAuth() {
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
     
-    const handleSignIn = async () => {
+    const handleSignIn = () => {
         if (!signInUrl) {
             console.warn('Sign in URL not configured');
             return;
         }
         
-        try {
-            // Center the popup window
-            const width = 600;
-            const height = 600;
-            const left = window.top.outerWidth / 2 + window.top.screenX - width / 2;
-            const top = window.top.outerHeight / 2 + window.top.screenY - height / 2;
-
-            // Open sign in URL in new window/tab
-            const authWindow = window.open(signInUrl, '_blank', `width=${width},height=${height},left=${left},top=${top}`);
-            
-            // 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,
-                        email: event.data.email,
-                        avatar: event.data.avatar
-                    };
-                    
-                    // Save to localStorage
-                    saveUserToStorage(userData);
-                    setUser(userData);
-                    authWindow.close();
-                    
-                    // Remove event listener
-                    window.removeEventListener('message', handleMessage);
-                }
-            };
-            
-            window.addEventListener('message', handleMessage);
-            
-            // Poll for KBGateway-User-Context cookie
-            const pollInterval = setInterval(() => {
-                // Sync cookie to localStorage and get user data
-                const userData = syncCookieToStorage(KB_COOKIE_NAME);
-                
-                if (userData) {
-                    setUser(userData);
-                    clearInterval(pollInterval);
-                    window.removeEventListener('message', handleMessage);
-                    
-                    // Close popup if still open
-                    if (authWindow && !authWindow.closed) {
-                        authWindow.close();
-                    }
-                }
-                
-                // Also check if popup was closed manually
-                if (authWindow && authWindow.closed) {
-                    clearInterval(pollInterval);
-                    window.removeEventListener('message', handleMessage);
-                    
-                    // Final sync cookie to localStorage
-                    const finalUserData = syncCookieToStorage(KB_COOKIE_NAME);
-                    if (finalUserData) {
-                        setUser(finalUserData);
-                    }
-                }
-            }, 500); // Check every 500ms
-            
-            // Timeout after 5 minutes
-            setTimeout(() => {
-                clearInterval(pollInterval);
-                window.removeEventListener('message', handleMessage);
-            }, 300000);
-            
-            
-        } catch (error) {
-            console.error('Sign in error:', error);
-        }
+        // Redirect directly to sign in URL
+        window.location.href = signInUrl;
     };
     
     const handleSignOut = () => {
-        deleteCookie(KB_COOKIE_NAME);
-        removeUserFromStorage();
-        setUser(null);
-        setShowDropdown(false);
+        if (!signOutUrl) {
+            console.warn('Sign out URL not configured');
+            return;
+        }
+        fetch(signOutUrl)
+            .then(() => {
+                cachedUserData = null; // Clear cache on sign out
+                setUser(null);
+                setShowDropdown(false);
+            })
+            .catch((error) => {
+                console.error('Error signing out:', error);
+            });
     };
 
     if (!authEnabled) {
         return null;
     }
+
+    // Don't render anything until client is mounted to prevent hydration mismatch
+    if (!isMounted) {
+        // Return a placeholder with same dimensions to prevent layout shift
+        return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            style: { width: '28px', height: '28px' }
+        });
+    }
     
     if (!user) {
         if (!showSignInButton) {
@@ -4993,7 +5180,7 @@ function UserAuth() {
         });
     }
 
-    const userAvatar = user.avatar ?? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAAXNSR0IArs4c6QAAAsJJREFUSEullU1IFHEYxp9ndpc+KHLzAyyDIIjO+TEzqWDtbFYXK/Bi0Cm61Ck6iEFsFEhFtyKiY2SBh0AIyZ1VQ2P/q3hMKIgOkUJahgRG6+4bo7kfzs7OSnPb+b/v8/s/78csscVHLP0T7dShUmkSNa5BoCMTvMexyZmNGG6FIRE9CnIElE7GUyMbuXLSPIKsvAegFeh9pa0anN9bg0SNHxCEQSwhrqoJiDgalpH1uOwAbXWhYohEmpvBwFReTEzaKSXRliaINu1VEdqKlUPWb1sYL7SVJifMFmiS+m+IWGYPIM9dQtQuomr/AJa+rHpAhmirroqciNtFTtMph0T04yBHi0H8iXBDDQcHM74QscxeQPo9p1DYx0Sy/98AvATQCOABbfW44hEWy3BKESgz6hnaKlhuFco6Ecu4A+CG7y4J7jKhej2b73UgjY0hhEMrPi420jOYW97J2dk/pfQ8nUjUvAWRm74ucoXnbcaTJeNLQny22JtrqwAB1/aXhkTMh6BcqdhF3s0jxpNXN+e5INLdHSixXI65Z9DQj2PJj3jXehTI9EFwznWR8IGgsxuF790Qy3gN4ExB0AraTu1iLOYqg7S27saOzHcAofx2YphxVZhf/BWWGDRMru1FHh6SPRxOLXtOYYdxEEF8LjgXtKkgY/neFDkRS58G2JRLELxiQp33641YxgcAhwvyZphQOZ0cRE631yKd/lYkGEjv45uZeX+I3gZwoiguFKrj8MSC8y4PsYwxAB1FgZKtYWLKqXnZRzrb65FJz20KektbremtQSTSUg1qiy4lTZo4ksr9V3v2JWpcguCp63x1ey3HxxfXIZaRBGC4gsgFxpN1vk4sw/mc5Ccsn6BoK5NytqMKv34veQoRXYyrIU8XEf0yyCee+duCeymWPgewvuxts+zhaPLF5hixzOuA3Pfp2PxfA8n5ENhQazEAAAAASUVORK5CYII=";
+    const userAvatar = user.avatar;
     
     return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: "relative",

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@rspress-theme-anatole/theme-default",
-  "author": "Anatole Tong",
-  "version": "0.7.22-alpha4",
-  "license": "MIT",
-  "sideEffects": [
-    "*.css",
-    "*.less",
-    "*.sass",
-    "*.scss",
-    "**/virtual-global-styles.js",
-    "virtual-global-styles",
-    "./src/styles/index.ts",
-    "./dist/index.js"
-  ],
-  "type": "module",
-  "imports": {
-    "#theme/*": "./src/*"
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/bundle.d.ts",
-  "dependencies": {
-    "@mdx-js/react": "2.3.0",
-    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.22-alpha4",
-    "@rspress-theme-anatole/shared": "0.7.22-alpha4",
-    "@rspress/runtime": "1.43.8",
-    "body-scroll-lock": "4.0.0-beta.0",
-    "copy-to-clipboard": "^3.3.3",
-    "flexsearch": "0.7.43",
-    "github-slugger": "^2.0.0",
-    "html2pdf.js": "^0.10.3",
-    "htmr": "^1.0.2",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^1.3.0",
-    "react-router-dom": "6.29.0",
-    "react-syntax-highlighter": "^15.6.1"
-  },
-  "devDependencies": {
-    "@microsoft/api-extractor": "^7.49.2",
-    "@modern-js/tsconfig": "2.64.0",
-    "@rsbuild/plugin-react": "~1.1.0",
-    "@rsbuild/plugin-sass": "~1.2.0",
-    "@rsbuild/plugin-svgr": "^1.0.6",
-    "@rslib/core": "0.5.2",
-    "@types/body-scroll-lock": "^3.1.2",
-    "@types/hast": "^2.3.10",
-    "@types/jest": "~29.5.14",
-    "@types/lodash-es": "^4.17.12",
-    "@types/mdast": "^3.0.15",
-    "@types/nprogress": "^0.2.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "gray-matter": "4.0.3",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.5.3"
-  },
-  "keywords": [
-    "rspress",
-    "theme",
-    "rspress-theme"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@rspress-theme-anatole/theme-default",
+  "author": "Anatole Tong",
+  "version": "0.7.23",
+  "license": "MIT",
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.sass",
+    "*.scss",
+    "**/virtual-global-styles.js",
+    "virtual-global-styles",
+    "./src/styles/index.ts",
+    "./dist/index.js"
+  ],
+  "type": "module",
+  "imports": {
+    "#theme/*": "./src/*"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/bundle.d.ts",
+  "dependencies": {
+    "@mdx-js/react": "2.3.0",
+    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.23",
+    "@rspress-theme-anatole/shared": "0.7.23",
+    "@rspress/runtime": "1.43.8",
+    "body-scroll-lock": "4.0.0-beta.0",
+    "copy-to-clipboard": "^3.3.3",
+    "flexsearch": "0.7.43",
+    "github-slugger": "^2.0.0",
+    "html2pdf.js": "^0.10.3",
+    "htmr": "^1.0.2",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^1.3.0",
+    "react-router-dom": "6.29.0",
+    "react-syntax-highlighter": "^15.6.1"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.49.2",
+    "@modern-js/tsconfig": "2.64.0",
+    "@rsbuild/plugin-react": "~1.1.0",
+    "@rsbuild/plugin-sass": "~1.2.0",
+    "@rsbuild/plugin-svgr": "^1.0.6",
+    "@rslib/core": "0.5.2",
+    "@types/body-scroll-lock": "^3.1.2",
+    "@types/hast": "^2.3.10",
+    "@types/jest": "~29.5.14",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mdast": "^3.0.15",
+    "@types/nprogress": "^0.2.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "gray-matter": "4.0.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.5.3"
+  },
+  "keywords": [
+    "rspress",
+    "theme",
+    "rspress-theme"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}