# Project 32

| Topic | Clicks |
|  --- | --- |
| Find the getting started guide. | 1 |
| Document API described with OpenAPI.  | 5  |
| Set up your navbar, footer, and sidebar. | 1 |
| Change your logo.  | 10  |
| Change the color of a heading. | 3 |
| Revert changes. | 3 |
| Add admonition. | 2 |
| Single source content from another repo.  | 10  |
| Version content. | 2 |
| Find the changelog. | 1 |
| Localize the content. | 3 |
| Protect the content behind a login. | 2 |
| Make advanced role based access where different team members can access different content. | 2 |
| Add a multi-product switcher.  | 10  |
| Use a CICD to single-source conent. | 3 |
| Add cards or tiles in Markdown pages. | 3 |
| Adjust SEO tags.  | 10  |
| Adjust table styles  | 6  |


## What made you smile?

- GSG was easy to find.
- Finding "Document API described with OpenAPI." - no issues.


## What did you find confusing?

- Getting started guides could be broken into separate topics to better reveal their contents, for example, the logo.
- Navigation and Configure navigatoin can be confusing since they are on the same level - one is a description of navigation elements, the other is a how-to guide.
For example, the procedure content could be a child of the concept page in the sidebar.
![Screenshot 2025-02-03 at 09.31.51.png](/assets/screenshot-2025-02-03-at-09.31.51.d977fe428cefa896f152fd303c6ea87292f7d11e555dcaba397702691f4d0d0f.8bed52ad.png)
- Changing logo topic was hard to find. Could do with a how-to topic describing adding/costimizing the logo.
The topic should link to the config reference.
- Customizing headers is not explicitly shown and may be hard to do for users that have never worked with CSS before.
Users could benefit from a series of how-tos for some common customization tasks.
- Reverting changes was harder to find.
We propose that subheadings appear in the sidebar.


### Embedded docs issues

- When embedded docs pane is narrowed dow to fit only the sidebar, at random, clicking on the text of an embedded docs sidebar link either opens the link or expands/collapses the group.
- In embedded docs the sidebar is never visible - any navigation requires opening it
- Navigation in embedded docs can be irritating - forward/back buttons are accessible only after the user opens the sidebar (hamburger menu) or scrolling to the bottom of the page.
- ~50% of the time, clicking **Realm** in the embedded docs sidebar, does nothing.
![Screenshot 2025-02-03 at 09.31.51.png](/assets/screenshot-2025-02-03-at-09.31.51.d977fe428cefa896f152fd303c6ea87292f7d11e555dcaba397702691f4d0d0f.8bed52ad.png)
- At random, the scroll bar does not appear in the embedded docs and it is impossible to scroll down the embedded docs page using the mouse or the keyboard.
![Screenshot 2025-02-03 at 09.53.21.png](/assets/screenshot-2025-02-03-at-09.53.21.b0dc4291b0a077dfdf1a0835cdf0219fd5d570e45e14becfd6065c6f1b85a309.8bed52ad.png)


script

(function() {
    function initHighlightRows() {
        // Find all tables with our specific class
        const tables = document.querySelectorAll('.results');
        
        tables.forEach(table => {
            // First, clean up any existing data attributes
            table.querySelectorAll('[data-high-value]').forEach(el => {
                el.removeAttribute('data-high-value');
            });

            // Find all rows in the tbody
            const rows = table.querySelectorAll('tbody tr');
            
            rows.forEach(row => {
                // Get the last cell in each row
                const lastCell = row.querySelector('td:last-child');
                if (lastCell) {
                    // Convert cell content to number and check if >= 4
                    const value = parseInt(lastCell.textContent.trim());
                    if (!isNaN(value) && value >= 4) {
                        row.setAttribute('data-high-value', 'true');
                    }
                }
            });
        });
    }

    // Run when DOM is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initHighlightRows);
    } else {
        initHighlightRows();
    }

    // Debounce function to prevent too many rapid calls
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Debounced version of initHighlightRows
    const debouncedInit = debounce(initHighlightRows, 100);

    // Observer with debounced callback
    const observer = new MutationObserver(debouncedInit);

    // Start observing the document for changes
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();