1
<div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
2
    mx-auto gap-4 px-0 md:px-4"

1
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>

1
/* 移动端：垂直堆叠 */
2
grid-rows: [auto_1fr_auto]  /* SideBar 在 row 2 */
3

4
/* 桌面端：水平排列 */
5
lg:grid-rows: [auto]  /* SideBar 和 Main 在同一行 */
6
lg:grid-cols: [17.5rem_auto]  /* 固定左侧宽度 */

1
function updateTOCHeight() {
2
    const tocWrapper = document.getElementById('toc-wrapper');
3
    const tocInnerWrapper = document.getElementById('toc-inner-wrapper');
4
    if (!tocWrapper || !tocInnerWrapper) return;
5

6
    // Only update when TOC is visible, hidden state uses CSS default
7
    if (tocWrapper.classList.contains('hidden')) {
8
        return;
9
    }
10

11
    // Calculate TOC max height: 80% of available height
12
    // Matches CSS calc((100vh - 32px) * 0.8)
13
    const viewportHeight = window.innerHeight;
14
    const availableHeight = viewportHeight - SIDEBAR_SPACING_PX;
15
    const tocMaxHeight = availableHeight * TOC_MAX_HEIGHT_RATIO;
16

17
    // Set maxHeight only, allowing content to shrink when small, scroll when large
18
    tocInnerWrapper.style.maxHeight = `${tocMaxHeight}px`;
19
}

1
function updateTOCVisibility() {
2
    const tocWrapper = document.getElementById('toc-wrapper');
3
    if (!tocWrapper) return;
4

5
    // Check if TOC has content (table-of-contents element or links)
6
    // Since Swup only replaces #toc content, we check the actual content
7
    const tocElement = document.getElementById('toc');
8
    const hasTOCContent = tocElement && (
9
        tocElement.querySelector('table-of-contents') !== null ||
10
        tocElement.querySelectorAll('a[href^="#"]').length > 0
11
    );
12

13
    // Get siteConfig.toc.enable from data attribute (fallback to checking content)
14
    // If data attribute is not available (e.g., during Swup transitions),
15
    // we assume TOC is enabled if content exists
16
    const tocEnabledFromData = tocWrapper.dataset.tocEnabled;
17
    const tocEnabled = tocEnabledFromData !== undefined
18
        ? tocEnabledFromData === 'true'
19
        : hasTOCContent; // If no data attribute, infer from content
20

21
    if (tocEnabled && hasTOCContent) {
22
        // CSS already sets initial max-height, just show the wrapper
23
        // No need to set height in JS, avoiding unnecessary DOM manipulation
24
        tocWrapper.classList.remove('hidden');
25
        // Remove toc-not-ready class when TOC is ready and should be visible
26
        // This ensures TOC shows immediately when ready, not waiting for Layout.astro's timeout
27
        tocWrapper.classList.remove('toc-not-ready');
28
    } else {
29
        tocWrapper.classList.add('hidden');
30
        // Clear inline styles when hidden to let CSS take control
31
        const tocInnerWrapper = document.getElementById('toc-inner-wrapper');
32
        if (tocInnerWrapper && tocInnerWrapper.style.maxHeight) {
33
            // Only clear inline styles that may exist, let CSS rules apply
34
            tocInnerWrapper.style.maxHeight = '';
35
        }
36
    }
37
}

1
/**
2
 * Track if we should scroll to top on next navigation
3
 * Only scroll to top when user clicks a link (forward navigation)
4
 * For browser back/forward navigation, let browser handle scroll restoration
5
 */
6
let shouldScrollToTop = false;
7

8
/**
9
 * Scroll to top of the page after content is replaced
10
 * This avoids showing old content during the scroll animation
11
 */
12
function scrollToTopAfterReplace() {
13
    if (shouldScrollToTop) {
14
        // Use requestAnimationFrame to ensure DOM update is complete
15
        requestAnimationFrame(() => {
16
            window.scrollTo({ top: 0, behavior: 'auto' });
17
        });
18
    }
19
}

1
window.swup.hooks.on('link:click', () => {
2
    // Mark that we should scroll to top on next navigation
3
    shouldScrollToTop = true;
4

5
    // Remove the delay for the first time page load
6
    document.documentElement.style.setProperty('--content-delay', '0ms')
7

8
    // Prevent elements from overlapping the navbar
9
    if (!bannerEnabled) {
10
        return
11
    }
12
    const threshold = window.innerHeight * (BANNER_HEIGHT / 100) - NAVBAR_HEIGHT - STANDARD_PADDING;
13
    const navbar = document.getElementById('navbar-wrapper');
14
    if (!navbar || !document.body.classList.contains('lg:is-home')) {
15
        return
16
    }
17
    if (isScrolledPast(threshold)) {
18
        navbar.classList.add('navbar-hidden');
19
    }
20
})

1
window.swup.hooks.on('content:replace', () => {
2
    initCustomScrollbar();
3
    scrollToTopAfterReplace();
4
})

1
window.swup.hooks.on('page:view', () => {
2
    // Restore normal rendering after new page is visible
3
    restoreRendering();
4

5
    // Reset the scroll flag after navigation completes
6
    // This ensures we don't scroll on subsequent navigations unless a link is clicked
7
    shouldScrollToTop = false;
8

9
    // Sync UI elements based on current scroll position
10
    // Use requestAnimationFrame to ensure DOM updates are complete
11
    requestAnimationFrame(() => {
12
        scrollFunction();
13
    });
14
});

1
btn.addEventListener('click', () => {
2
    // Remove collapsed styles
3
    wrapper.classList.remove('collapsed');
4
    wrapper.classList.remove('overflow-hidden');
5
    btn.classList.add('hidden');
6

7
    /**
8
     * Dispatch custom event to notify other components (e.g., SideBar) that widget has expanded
9
     * Uses custom events for decoupled component communication, easier to port and maintain
10
     * Event detail contains widgetId and widgetElement for listeners to use
11
     */
12
    const expandEvent = new CustomEvent('widget:expand', {
13
        detail: { widgetId: id, widgetElement: this },
14
        bubbles: true
15
    });
16
    this.dispatchEvent(expandEvent);
17

18
    // Scroll after expansion to ensure content is visible
19
    setTimeout(() => {
20
        const widgetRect = this.getBoundingClientRect();
21
        const viewportHeight = window.innerHeight;
22
        const widgetBottom = widgetRect.bottom;
23

24
        // If widget bottom exceeds viewport, scroll to ensure full visibility
25
        if (widgetBottom > viewportHeight) {
26
            const scrollOffset = widgetBottom - viewportHeight + this.SCROLL_PADDING;
27
            window.scrollBy({
28
                top: scrollOffset,
29
                behavior: 'smooth'
30
            });
31
        }
32
    }, this.EXPAND_ANIMATION_DELAY);
33
});

1
/**
2
 * Handle widget expand event
3
 * Removes sidebar-sticky max-height restriction when widget expands
4
 * Uses CSS class instead of direct style manipulation for better maintainability
5
 */
6
function handleWidgetExpand() {
7
    const sidebarSticky = document.getElementById('sidebar-sticky');
8
    if (sidebarSticky) {
9
        sidebarSticky.classList.add('widget-expanded');
10
    }
11
}

1
// Listen for widget expand events (decoupled component communication)
2
document.addEventListener('widget:expand', handleWidgetExpand);

1
<style>
2
    /**
3
     * Widget expanded state styles
4
     * Allows sidebar-sticky to exceed viewport height when widget expands
5
     * Uses !important to ensure it overrides inline styles
6
     */
7
    #sidebar-sticky.widget-expanded {
8
        max-height: none !important;
9
    }
10
</style>