404.rst

-:orphan:
-
-.. _not-found:
-
-Document not found
-##################
-
-.. todo::
-
-   We need a 404 document to help people handle broken links (report, find, etc.).

CONTRIBUTING.md

@@ -14,21 +14,21 @@ where to start then you can checkout our contribution documents to help you with
 
 ### Code of Conduct
 
-This project and everyone participating in it is governed by the [BeagleBoard.org Code of Conduct](https://docs.beagleboard.org/latest/intro/contribution/index.html#code-of-conduct). By participating, you are expected to uphold this code. Please report unacceptable behavior to [coc@bbb.io](mailto:coc@bbb.io) or contact one of the administrators on https://forum.beagleboard.org.
+This project and everyone participating in it is governed by the [BeagleBoard.org Code of Conduct](https://docs.beagleboard.org/latest/intro/contribution/code-of-conduct.html). By participating, you are expected to uphold this code. Please report unacceptable behavior to [coc@bbb.io](mailto:coc@bbb.io) or contact one of the administrators on https://forum.beagleboard.org.
 
 ### Style and usage guidelines
 
-If you are new to Sphinx, RST, or git then you can checkout out our [Style and usage guidelines](https://docs.beagleboard.org/latest/intro/contribution/index.html#style-and-usage-guidelines).
+If you are new to Sphinx, RST, or git then you can checkout out our [How can I contribute? guide](https://docs.beagleboard.org/latest/intro/contribution/how.html).
 
 See more at https://docs.beagleboard.org/latest/intro/contribution/.
 
 ### Forking the Project
 
-You can [fork](https://docs.gitlab.com/ee/user/project/repository/forking_workflow.html) this project repository to create and submit changes to the documentation. BeagleBoard documentation is generated using [**Sphinx** ](https://www.sphinx-doc.org/en/master/) documentation tool. Sphinx uses the [**reStructuredText**](https://docutils.sourceforge.io/rst.html) (.rst) markup language by default. Some files are also written in [**Markdown**](https://docs.gitlab.com/ee/user/markdown.html) (.md) format. GitLab can render previews for both RST and MD files. So if you do not want to use any external tools to edit the documentation, you can do that within your browser and use the `Preview` button in GitLab to view how the changes will actually look like. 
+You can [fork](https://openbeagle.org/help/user/project/repository/forking_workflow.md) this project repository to create and submit changes to the documentation. BeagleBoard documentation is generated using [**Sphinx** ](https://www.sphinx-doc.org/en/master/) documentation tool. Sphinx uses the [**reStructuredText**](https://docutils.sourceforge.io/rst.html) (.rst) markup language by default. Some files are also written in [**Markdown**](https://docs.gitlab.com/ee/user/markdown.html) (.md) format. GitLab can render previews for both RST and MD files. So if you do not want to use any external tools to edit the documentation, you can do that within your browser and use the `Preview` button in GitLab to view how the changes will actually look like. 
 
 #### Using A Browser
 
-Using a browser is the easiest way to contribute to this project, if you are a beginner, or if your suggestions for changes are small. Though, some Git version control knowledge is preferrable. You can learn more about [Git and GitLab from here](https://docs.gitlab.com/ee/topics/git/).
+Using a browser is the easiest way to contribute to this project, if you are a beginner, or if your suggestions for changes are small. Though, some Git version control knowledge is preferrable. You can learn more about [Git and GitLab from here](https://openbeagle.org/help/topics/git/index.md).
 
 You can create a fork of this repository to your GitLab account using the `Forks` button found on the main page of the project. This will create a stand-alone copy of the repository for you to work with. 
 
@@ -65,4 +65,8 @@ VS Code is not limited to running from a folder as a workspace, or as a native a
 
 ## FAQ
 
-* [Frequently Asked Questions category on the BeagleBoard.org Forum](https://forum.beagleboard.org/c/faq/19)
+* [Frequently Asked Questions category on the BeagleBoard.org Forum](https://forum.beagleboard.org/c/faq)
+
+## Feedback
+
+* [Site Feedback category on the BeagleBoard.org Forum](https://forum.beagleboard.org/c/site-feedback)

_static/css/custom.css

-.wy-side-nav-search > a img.logo {
+.wy-side-nav-search>a img.logo {
     width: 340px;
     height: 66px;
 }
 
-.rst-content div.figure, .rst-content figure {
+.rst-content div.figure,
+.rst-content figure {
     text-align: center;
 }
 
@@ -36,7 +37,7 @@
     background-color: #25282b;
 }
 
-.wy-nav-top{
+.wy-nav-top {
     background-color: #25282b;
     background-color: #25282b;
 }
@@ -74,6 +75,68 @@ span.strike {
     overflow: auto;
 }
 
+/* Site horizontal spacing */
 .bd-main .bd-content .bd-article-container {
-    max-width: 100%;  /* default is 60em */
-}
\ No newline at end of file
+    max-width: 120em;
+    /* default is 60em */
+}
+
+.bd-page-width {
+    max-width: 120rem;
+    /* default is 88rem */
+}
+
+/* Figure headerlink */
+
+figure a.headerlink {
+    position: static;
+}
+
+/* Primary sidebar toggle button */
+#pst-primary-sidebar.collapsed {
+    overflow: hidden;
+    padding: 0;
+    width: 0; /* Collapse the sidebar */
+    transition: none;
+}
+
+#pst-secondary-sidebar.collapsed {
+    overflow: hidden;
+    padding: 0;
+    width: 0; /* Collapse the sidebar */
+    transition: none;
+}
+
+#pst-secondary-sidebar {
+    padding-left: 0px;
+}
+
+/* Toggle button styles */
+.sidebar-toggle-btn {
+    margin-top: 44px; /* Space between sidebar and button */
+    padding: 7px; /* Set padding for the button, horizontally more */
+    background-color: #F16321; /* Button background color */
+    color: white; /* Text color */
+    border: none; /* Remove border */
+    cursor: pointer; /* Pointer cursor on hover */
+    display: block; /* Ensure the button is block-level */
+    font-size: 20px; /* Adjust font size */
+    font-weight: bold; /* Bold text */
+    height: 40px; /* Set a fixed height for the button */
+    width: auto; /* Width based on content */
+    line-height: 20px; /* Vertically center the text */
+}
+
+#toggle-primary-sidebar.sidebar-toggle-btn{
+    border-radius: 0 5px 5px 0; /* Rounded corners */
+}
+
+#toggle-secondary-sidebar.sidebar-toggle-btn{
+    border-radius: 5px 0 0 5px; /* Rounded corners */
+}
+
+/* Optional: Adding a hover effect */
+.sidebar-toggle-btn:hover {
+    background-color: #C7480D; /* Slightly darker blue on hover */
+}
+

_templates/404.html

+{% extends "pydata_sphinx_theme/layout.html" %}
+
+{% block extrahead %}
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        // The redirect_folders dictionary is passed from html_context
+        const redirectFolders = JSON.parse('{{ redirect_folders | tojson | safe }}');
+
+        // Get the current URL
+        let currentUrl = window.location.href;
+
+        // Flag to check if valid redirect is found
+        let redirectFound = false;
+
+        // Iterate over the redirect_folders key-value pairs
+        for (const [key, value] of Object.entries(redirectFolders)) {
+            if (currentUrl.includes("/" + key)) {
+
+                // Determine the replacement value
+                let replacement = value === "" ? "" : "/" + value;
+
+                // Create a new URL by replacing "/key" with the replacement value
+                let newUrl = currentUrl.replace("/" + key, replacement);
+
+                // Make an HTTP request to check if the new URL exists
+                fetch(newUrl, { method: "HEAD" })
+                    .then(response => {
+                        if (response.ok) {
+                            // Valid redirect is found
+                            redirectFound = true;
+
+                            // Update the heading with the correct information
+                            const headingElement = document.getElementById('pageHeading');
+                            if (headingElement) {
+                                headingElement.textContent = "Page Moved!";
+                            }
+
+                            // Update the message with the correct link
+                            const redirectMessageElement = document.getElementById('redirectMessage');
+                            if (redirectMessageElement) {
+                                redirectMessageElement.innerHTML = `We found the correct page you are looking for <a href="${newUrl}" id="correctPageLink">here</a>.`;
+                            }
+
+                            document.getElementById('redirectInfo').style.display = "block";
+
+                            // If the response is OK, show the modal and initiate the countdown
+                            const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'), {
+                                backdrop: 'static',  // Prevents closing the modal by clicking outside
+                                keyboard: false      // Disables closing the modal with the keyboard
+                            });
+                            redirectModal.show();
+
+                            let countdownValue = 5;
+                            const countdownElement = document.getElementById('countdownNumber');
+                            if (countdownElement) {
+                                countdownElement.textContent = countdownValue;
+                            }
+
+                            // Variable to track if countdown should continue
+                            let countdownActive = true;
+
+                            // Countdown from 5 to 1
+                            const countdownInterval = setInterval(() => {
+                                if (!countdownActive) {
+                                    clearInterval(countdownInterval);
+                                    return;
+                                }
+                                countdownValue--;
+                                if (countdownElement) {
+                                    countdownElement.textContent = countdownValue;
+                                }
+
+                                // When countdown reaches 1, redirect
+                                if (countdownValue <= 1) {
+                                    clearInterval(countdownInterval);
+                                    window.location.href = newUrl;
+                                }
+                            }, 1000);
+
+                            // Event listener for "Redirect Now" button
+                            document.getElementById('redirectNow').addEventListener('click', () => {
+                                window.location.href = newUrl;
+                            });
+
+                            // Event listener for "Cancel" button
+                            document.getElementById('cancelRedirect').addEventListener('click', () => {
+                                countdownActive = false;
+                                clearInterval(countdownInterval);
+                            });
+
+                            // Event listener for "Close" button in the modal header
+                            document.getElementById('closeRedirect').addEventListener('click', () => {
+                                countdownActive = false;
+                                clearInterval(countdownInterval);
+                            });
+                        } else {
+                            // If the response is not OK, proceed to check other redirects
+                            console.log(`No valid page found at ${newUrl}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Error checking the URL:", error);
+                    });
+                break;
+            }
+        }
+
+
+        if (!redirectFound) {
+            // In case the link test doesn't include redirectFolders
+            const headingElement = document.getElementById('pageHeading');
+            if (headingElement) {
+                headingElement.textContent = "Page Not Found (404)";
+            }
+            document.getElementById('redirectInfo').style.display = "block";
+        }
+    });
+</script>
+
+{{ super() }}
+{% endblock %}
+
+{% block docs_body %}
+
+<div class="document">
+    <h1 id="pageHeading">Page Loading....</h1> <!-- Default heading -->
+    <div id="redirectInfo" style="display: none;">
+        <p id="redirectMessage">Oops! The page you're looking for does not exist.</p>
+        <p>You can return to the <a href="{{ pathto(master_doc) }}">home page</a>.</p>
+        <p>If you believe this is a broken link, please <a data-bs-toggle="modal" data-bs-target="#feedbackModal"
+                href="#" onclick="getFeedbackButtonhref(this)">let us know</a>.</p>
+    </div>
+</div>
+
+<!-- Redirect Modal -->
+<div class="modal fade" id="redirectModal" aria-labelledby="redirectModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title m-0 text-dark" id="redirectModalLabel">Page Moved - Redirecting</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+                    id="closeRedirect"></button>
+            </div>
+            <div class="modal-body text-center">
+                <p>We have found the page you are looking for, redirecting in....</p>
+                <div class="countdown display-1 fw-bold" id="countdownNumber">5</div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
+                    id="cancelRedirect">Cancel</button>
+                <button type="button" class="btn btn-primary" id="redirectNow">Redirect Now</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+{{ super() }}
+{% endblock %}
\ No newline at end of file

_templates/feedback.html

 <a role="button" data-bs-toggle="modal" data-bs-target="#feedbackModal" href="#" onclick="getFeedbackButtonhref(this)">
-    <i class="fa-solid fa-arrows-rotate"></i> Provide Feedback
+    <i class="fa-regular fa-message"></i> Provide Feedback
 </a>
 
 <div class="modal fade" id="feedbackModal" aria-labelledby="feedbackModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-        <div class="modal-header">
-            <h5 class="modal-title m-0 text-dark" id="feedbackModalLabel">Feedback</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div> 
-        <div class="modal-body text-center">
-            <div class="btn-group mb-3" role="group" aria-label="Basic radio toggle button group" id="feedbackType" onChange="feedbackHandler()">
-            <input type="radio" class="btn-check" name="feedbackType" id="btnradio1" autocomplete="off" value="Issue">
-            <label class="btn btn-outline-dark shadow-none" for="btnradio1"><i class="fa-solid fa-triangle-exclamation"></i> Issue</label>
-
-            <input type="radio" class="btn-check" name="feedbackType" id="btnradio2" autocomplete="off" value="Feedback" checked>
-            <label class="btn btn-outline-dark shadow-none" for="btnradio2"><i class="fa-solid fa-arrows-rotate"></i> Feedback</label>
-
-            <input type="radio" class="btn-check" name="feedbackType" id="btnradio3" autocomplete="off" value="Idea">
-            <label class="btn btn-outline-dark shadow-none" for="btnradio3"><i class="fa-solid fa-lightbulb"></i> Idea</label>
+            <div class="modal-header">
+                <h5 class="modal-title m-0 text-dark" id="feedbackModalLabel">Feedback</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="mb-3">
-            <input type="title" class="form-control bg-light text-dark" id="feedbackModalTitle" placeholder="Title" onChange="feedbackHandler()">
+            <div class="modal-body text-center">
+                <div class="btn-group mb-3" role="group" aria-label="Basic radio toggle button group" id="feedbackType"
+                    onChange="feedbackHandler()">
+                    <input type="radio" class="btn-check" name="feedbackType" id="btnradio1" autocomplete="off"
+                        value="Issue">
+                    <label class="btn btn-outline-dark shadow-none" for="btnradio1"><i
+                            class="fa-solid fa-triangle-exclamation"></i> Issue</label>
+
+                    <input type="radio" class="btn-check" name="feedbackType" id="btnradio2" autocomplete="off"
+                        value="Feedback" checked>
+                    <label class="btn btn-outline-dark shadow-none" for="btnradio2"><i
+                            class="fa-regular fa-message"></i> Feedback</label>
+
+                    <input type="radio" class="btn-check" name="feedbackType" id="btnradio3" autocomplete="off"
+                        value="Idea">
+                    <label class="btn btn-outline-dark shadow-none" for="btnradio3"><i
+                            class="fa-solid fa-lightbulb"></i> Idea</label>
+                </div>
+                <div class="mb-3">
+                    <input type="title" class="form-control bg-light text-dark" id="feedbackModalTitle"
+                        placeholder="Title" onChange="feedbackHandler()">
+                </div>
+                <div class="mb-3">
+                    <textarea class="form-control bg-light text-dark" id="feedbackModalDescription" minlength="13"
+                        rows="3" placeholder="Description" onChange="feedbackHandler()"></textarea>
+                </div>
             </div>
-            <div class="mb-3">
-            <textarea class="form-control bg-light text-dark" id="feedbackModalDescription" minlength="13" rows="3" placeholder="Description" onChange="feedbackHandler()"></textarea>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="feedbackClear()">Clear
+                    & Close</button>
+                <span id="generateLinkButtonTooltip" data-bs-placement="bottom" data-bs-toggle="tooltip">
+                    <a href="javascript:void(0);" id="feedbacklink" type="button"
+                        class="btn btn-primary disabled text-light">
+                        <i class="fa-solid fa-up-right-from-square"></i> Generate OpenBeagle Issue
+                    </a>
+                </span>
             </div>
         </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="feedbackClear()">Clear & Close</button>
-            <span id="generateLinkButtonTooltip" data-bs-placement="bottom" data-bs-toggle="tooltip">
-                <a href="javascript:void(0);" id="feedbacklink" type="button" class="btn btn-primary disabled text-light">
-                    <i class="fa-solid fa-up-right-from-square"></i> Generate OpenBeagle Issue 
-                </a>
-            </span>
-        </div>
-        </div>
     </div>
 </div>
 
@@ -52,20 +63,20 @@
     var title = document.getElementById("feedbackModalTitle")
     var description = document.getElementById("feedbackModalDescription")
     var generatedFromLink = ""
-    
 
-    title.placeholder = "Title (minimum "+titleMinLength+" characters)"
-    description.placeholder = "Description (minimum "+descriptionMinLength+" characters)"
+
+    title.placeholder = "Title (minimum " + titleMinLength + " characters)"
+    description.placeholder = "Description (minimum " + descriptionMinLength + " characters)"
 
     function feedbackHandler() {
         var type = document.querySelector('input[name="feedbackType"]:checked').value
-        
+
         if (!gitlab_project.match(/^[a-zA-Z]+:\/\//)) {
             gitlab_project = 'https://' + gitlab_project;
         }
 
-        if(title.value.length >= titleMinLength && description.value.length >= descriptionMinLength) {
-            link.target="_blank"
+        if (title.value.length >= titleMinLength && description.value.length >= descriptionMinLength) {
+            link.target = "_blank"
             link.classList.remove("disabled");
             generateLinkButtonTooltip.title = "You must be logged in to OpenBeagle.org to generate an Issue!"
             link.href = gitlab_project + "/-/issues/new?issue[title]=" + type + ": " + title.value + "&issue[description]=" + description.value + "%0A%0AGenerated from: " + generatedFromLink.replace('#', '%23')
@@ -74,7 +85,7 @@
             generateLinkButtonTooltip.title = "Add proper title and description to activate the link!"
         }
     }
-    
+
     function feedbackClear() {
         title.value = ""
         description.value = ""
@@ -82,13 +93,63 @@
         link.classList.add("disabled");
     }
 
-    var headerlinks = document.getElementsByClassName("headerlink")
-    for(let i=0; i<headerlinks.length; i++){     
-        headerlinks[i].innerHTML = '<i class="fa-solid fa-arrows-rotate"></i>'
-        headerlinks[i].title = "Provide Feedback"
-        headerlinks[i].setAttribute("data-bs-toggle","modal")
-        headerlinks[i].setAttribute("data-bs-target","#feedbackModal")
-        headerlinks[i].setAttribute("onclick","getFeedbackButtonhref(this)")
+    document.addEventListener('DOMContentLoaded', function () {
+        const headerlinks = document.getElementsByClassName("headerlink");
+
+        for (let i = 0; i < headerlinks.length; i++) {
+            if (headerlinks[i].classList.contains('headerlink-feedback')) {
+                continue;
+            }
+
+            headerlinks[i].innerHTML = `<i class="fa-solid fa-link"></i>`;
+            headerlinks[i].addEventListener('click', function (event) {
+                event.preventDefault();
+                const link = this.href;
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(link).then(() => {
+                        console.log("Link copied to clipboard:", link);
+                        this.innerHTML = `<i class="fa-regular fa-square-check"></i>`;
+                        setTimeout(() => {
+                            this.innerHTML = `<i class="fa-solid fa-link"></i>`;
+                        }, 1000);
+                    }).catch(err => {
+                        console.error("Failed to copy:", err);
+                    });
+                } else {
+                    fallbackCopyText(link, this);
+                }
+            });
+
+            const feedbackLink = headerlinks[i].cloneNode(true);
+
+            feedbackLink.classList.add('headerlink-feedback');
+            feedbackLink.innerHTML = '<i class="fa-regular fa-message"></i>';
+            feedbackLink.title = "Provide Feedback";
+            feedbackLink.setAttribute("data-bs-toggle", "modal");
+            feedbackLink.setAttribute("data-bs-target", "#feedbackModal");
+            feedbackLink.setAttribute("onclick", "getFeedbackButtonhref(this)");
+
+            if (headerlinks[i].parentNode) {
+                headerlinks[i].parentNode.insertBefore(feedbackLink, headerlinks[i].nextSibling || null);
+            }
+        }
+    });
+
+    function fallbackCopyText(text, element) {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            document.execCommand("copy");
+            element.innerHTML = `<i class="fa-regular fa-square-check"></i>`;
+            setTimeout(() => {
+                element.innerHTML = `<i class="fa-solid fa-link"></i>`;
+            }, 1000);
+        } catch (err) {
+            console.error("Fallback: Failed to copy:", err);
+        }
+        document.body.removeChild(textarea);
     }
 
     function getFeedbackButtonhref(clickedFeedbackLink) {

_templates/layout.html

@@ -4,36 +4,7 @@
 
     <!-- Top version and announcement message -->
     <script>
-
-    // Function to check for the next div and clear it or create it if not available
-    function getBannerDiv() {
-        // Get the first element with the class 'search-button__wrapper'
-        const sbw = document.getElementsByClassName('search-button__wrapper');
         
-        // Ensure the collection is not empty to avoid errors
-        if (sbw.length > 0) {
-            const sbwElement = sbw[0];
-            const nextElement = sbwElement.nextElementSibling;
-            
-            // Check if the next element exists and has the class 'pst-async-banner-revealer'
-            if (nextElement && nextElement.classList.contains('pst-async-banner-revealer')) {
-                // Clear the content of the next element
-                nextElement.innerHTML = '';
-            } else {
-                // Create a new div with the required class and style if it doesn't exist
-                const newDiv = document.createElement('div');
-                newDiv.className = 'pst-async-banner-revealer';
-                newDiv.style.height = 'auto';
-                sbwElement.insertAdjacentElement('afterend', newDiv);
-                return newDiv; // Return the newly created div
-            }
-            return nextElement; // Return the existing element
-        } else {
-            console.error("No elements with the class 'search-button__wrapper' found.");
-            return null;
-        }
-    }
-    
     // Function to generate version and announcement banner HTML
     function getBannerHTML() {
         return `
@@ -65,8 +36,8 @@
     }
     
     // Get the target element where the banners will be added
-    const bannerDiv = getBannerDiv();
-    
+    const bannerDiv = document.getElementsByClassName('pst-async-banner-revealer')[0];
+
     // Add version banner and announcement banner if bannerDiv is valid
     if (bannerDiv) {
         bannerDiv.innerHTML = getBannerHTML();
@@ -77,3 +48,119 @@
     {{ super() }}
 
 {% endblock docs_navbar %}
+
+{% block docs_main %}
+<script>
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Add primary sidebar toggle button
+    const primarySidebar = document.getElementById('pst-primary-sidebar');
+    if (primarySidebar) {
+        addSidebarToggleButton(
+            primarySidebar,
+            'primary',
+            'sidebar-toggle-btn',
+            '<i class="fa-solid fa-caret-left"></i>',
+            '<i class="fa-solid fa-caret-right"></i>',
+            'after'
+        );
+    }
+
+    // Add secondary sidebar toggle button
+    const secondarySidebar = document.getElementById('pst-secondary-sidebar');
+    if (secondarySidebar) {
+        addSidebarToggleButton(
+            secondarySidebar,
+            'secondary',
+            'sidebar-toggle-btn',
+            '<i class="fa-solid fa-caret-right"></i>',
+            '<i class="fa-solid fa-caret-left"></i>',
+            'before'
+        );
+    }
+
+    /**
+     * Adds a toggle button for a sidebar with visibility and state management.
+     * @param {HTMLElement} sidebar - The sidebar element to toggle.
+     * @param {string} key - A unique key for localStorage and button id.
+     * @param {string} buttonClass - CSS class for the toggle button.
+     * @param {string} collapseHTML - HTML for the button when the sidebar is collapsed.
+     * @param {string} expandHTML - HTML for the button when the sidebar is expanded.
+     * @param {string} position - Position to insert the button ('before' or 'after').
+     */
+    function addSidebarToggleButton(sidebar, key, buttonClass, collapseHTML, expandHTML, position) {
+        const toggleButton = document.createElement('button');
+        toggleButton.id = `toggle-${key}-sidebar`;
+        toggleButton.innerHTML = sidebar.classList.contains('collapsed') ? expandHTML : collapseHTML;
+        toggleButton.className = buttonClass;
+
+        // Insert the toggle button
+        if (position === 'before') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar);
+        } else if (position === 'after') {
+            sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+        }
+
+        // Restore collapsed state from localStorage
+        const collapsedState = localStorage.getItem(`${key}SidebarCollapsed`) === 'true';
+        if (collapsedState) {
+            sidebar.classList.add('collapsed');
+            toggleButton.innerHTML = expandHTML;
+        }
+
+        // Handle toggle button click
+        toggleButton.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+
+            // Update button content and save state
+            if (sidebar.classList.contains('collapsed')) {
+                toggleButton.innerHTML = expandHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'true');
+            } else {
+                toggleButton.innerHTML = collapseHTML;
+                localStorage.setItem(`${key}SidebarCollapsed`, 'false');
+            }
+        });
+
+        // Check visibility of the toggle button
+        function checkToggleVisibility() {
+            const existingToggleButton = document.querySelector(
+                `.pst-navbar-icon.sidebar-toggle.${key}-toggle`
+            );
+            if (existingToggleButton && existingToggleButton.offsetParent !== null) {
+                toggleButton.style.display = 'none'; // Hide custom toggle button
+            } else {
+                toggleButton.style.display = 'block'; // Show custom toggle button
+            }
+        }
+
+        // Update button visibility if the sidebar is removed
+        function updateButtonVisibility() {
+            if (window.getComputedStyle(sidebar).display === 'none') {
+                toggleButton.remove(); // Remove button if sidebar is hidden
+            } else if (!document.querySelector(`#toggle-${key}-sidebar`)) {
+                // Re-add the button if missing
+                if (position === 'before') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar);
+                } else if (position === 'after') {
+                    sidebar.parentNode.insertBefore(toggleButton, sidebar.nextSibling);
+                }
+            }
+        }
+
+        // Initial visibility check
+        checkToggleVisibility();
+        updateButtonVisibility();
+
+        // Monitor window resize for dynamic button visibility updates
+        window.addEventListener('resize', () => {
+            checkToggleVisibility();
+            updateButtonVisibility();
+        });
+    }
+});
+
+</script>
+{{ super() }}
+
+{% endblock docs_main %}
\ No newline at end of file

_templates/mission.html

-<div class="card bg-light mt-4 text-center">
+<div class="card mb-3">
     <div class="card-header bg-primary text-light fw-bold">
         Why are we doing this?
     </div>
     <div class="card-body">
-    <p class="card-text text-dark">
-        We believe in making computers open again to democratize technology and empower individuals and organizations to explore, experiment, and create without the constraints of proprietary systems.
-    </p>
+        <p class="card-text text-dark">
+            We believe in making computers open again to democratize technology and empower individuals and organizations to explore, experiment, and create without the constraints of proprietary systems.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
+<div class="card mb-3">
     <div class="card-header bg-warning text-dark fw-bold">
         What are we doing?
     </div>
     <div class="card-body">
-    <p class="card-text text-dark">
-        We design versatile and affordable single-board computers to provide developers, hobbyists, and educators with a platform for prototyping, experimentation, and production of embedded systems. Our comprehensive documentation, tutorials, and vibrant online community support users in their projects and foster knowledge sharing.
-    </p>
+        <p class="card-text text-dark">
+            We design versatile and affordable single-board computers to provide developers, hobbyists, and educators with a platform for prototyping, experimentation, and production of embedded systems. Our comprehensive documentation, tutorials, and vibrant online community support users in their projects and foster knowledge sharing.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
+<div class="card mb-3">
     <div class="card-header bg-success text-light fw-bold">
         How are we doing it?
     </div>
     <div class="card-body">
-    <p class="card-text text-dark">
-        Through open-source hardware designs, diverse software support, and active community engagement, we enable users to customize, innovate, and collaborate effortlessly in embedded computing.
-    </p>
+        <p class="card-text text-dark">
+            Through open-source hardware designs, diverse software support, and active community engagement, we enable users to customize, innovate, and collaborate effortlessly in embedded computing.
+        </p>
     </div>
 </div>
 
-<div class="card bg-light mt-4 text-center">
+<div class="card mb-3">
     <div class="card-header bg-dark text-light fw-bold">
         Support us <i class="fa-solid fa-hand-holding-dollar"></i>
     </div>
     <div class="card-body">
-    <p class="card-text text-dark">
-        The BeagleBoard.org Foundation is a Michigan, USA-based 501(c)(3) non-profit corporation existing to provide education in and collaboration around the design and use of open-source software and hardware in embedded computing.
-    </p>
+        <p class="card-text text-dark">
+            The BeagleBoard.org Foundation is a Michigan, USA-based 501(c)(3) non-profit corporation existing to provide education in and collaboration around the design and use of open-source software and hardware in embedded computing.
+        </p>
     </div>
     <div class="card-footer d-grid gap-2">
-        <!-- <a href="https://paypal.me/beagleboard" class="btn btn-primary text-light"><i class="fa-brands fa-paypal"></i> Support via Paypal</a> -->
         <a href="https://patreon.com/beagleboard" class="btn btn-danger text-light"><i class="fa-brands fa-patreon"></i> Become a Patreon</a>
         <a href="https://github.com/sponsors/beagleboard" class="btn btn-dark text-light"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
     </div>

_templates/oshw.html

 {% for board, path, oshw_id in oshw_details %}
-  {% if path+'/' in pagename %}
-    <div class="card bg-light mt-4 text-center">
-      <div class="card-header">
+{% if path+'/' in pagename %}
+<div class="card bg-light mt-4 text-center">
+    <div class="card-header">
         {{board}}
-      </div>
-      <div class="card-body">
+    </div>
+    <div class="card-body">
         <p class="card-text text-dark">
             <a href="https://certification.oshwa.org/{{ oshw_id|lower }}.html" target="_blank">
-              {% if docs_url %}
-                <img src="{{docs_url}}/_static/images/oshw/{{board}}_{{oshw_id}}.svg" alt="{{board}} OSHW mark"/>
-              {% else %}
-                <img src="../../../../_static/images/oshw/{{board}}_{{oshw_id}}.svg" alt="{{board}} OSHW mark"/>
-              {% endif %}
+                {% if docs_url %}
+                <img src="{{docs_url}}/_static/images/oshw/{{board}}_{{oshw_id}}.svg" alt="{{board}} OSHW mark" />
+                {% else %}
+                <img src="../../../../_static/images/oshw/{{board}}_{{oshw_id}}.svg" alt="{{board}} OSHW mark" />
+                {% endif %}
             </a>
         </p>
-      </div>
     </div>
-  {% endif %}
+</div>
+{% endif %}
 {% endfor%}
\ No newline at end of file

_templates/versions.html

-{# Add rst-badge after rst-versions for small badge style. #}
-  <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
-      <span class="fa fa-book"> BeagleBoard Project</span>
-      v: {{ pages_slug }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
-      <dl>
-        <dt>{{ _('Document Release Versions') }}</dt>
-        {% for version_slug in versions %}
-          <dd><a href="{{pages_url}}/{{version_slug}}">{{ version_slug }}</a></dd>
-        {% endfor %}
-      </dl>
-      <dl>
-        <dt>{{ _('Downloads') }}</dt>
-        <dd><a href="{{docs_url}}/beagleboard-docs.pdf">PDF</a></dd>
-      </dl>
-      <dl>
-        <dt>{{ _('BeagleBoard.org Links') }}</dt>
-          <dd>
-            <a href="https://git.beagleboard.org/docs/docs.beagleboard.io/">Docs Source</a>
-          </dd>
-      </dl>
-    </div>
-  </div>

accessories/cables.rst

@@ -167,7 +167,7 @@ JTAG debug Cables
 TagConnect (JTAG)
 ==================
 
-Boards like :ref:`beagleconnect_freedom_home`, :ref:`beaglev-ahead-home`, :ref:`beaglev-fire-home`, and :ref:`beagleplay-home` use the TagConnect 
+Boards like :ref:`beagleconnect-freedom-home`, :ref:`beaglev-ahead-home`, :ref:`beaglev-fire-home`, and :ref:`beagleplay-home` use the TagConnect 
 interface which allows you to perform firmware updates and JTAG hardware debugging. To use the interface, the the parts below from 
 `tag-connect <https://www.tag-connect.com>`_  are required.
 

accessories/peripherals.rst

@@ -44,7 +44,7 @@ USB HUBS
 - `Inland 4 Port <http://www.microcenter.com/product/360458/4-Port_USB_20_Hub>`_
 - `Manhattan 10-port HUB <http://www.microcenter.com/product/393316/10-Port_USB_20_Hi-Speed_Desktop_Hub>`_
 - `4-Port USB Cable HUB <http://www.microcenter.com/product/354122/4-Port_USB_20_Cable_Hub>`_
-- `D-LINK DUB-H7 <http://www.dlink.com/us/en/home-solutions/connect/usb/dub-h7-7-port-usb-2-0-hub>`_
+- `D-Link 7-Port USB 2.0 Hub DUB-H7 <https://www.dlink.com/en/products/dub-h7-7-port-usb-2-0-hub>`_
 - `Trust HU-5770 7-Port Powered Hub <http://www.amazon.co.uk/TRUST-UK-HU-5770-PORT-POWERED/dp/B000HG5Q42>`_
 
 .. tip::

boards/beagleconnect/freedom/demos-and-tutorials/using-zephyr.rst

@@ -19,13 +19,10 @@ environment. Please adjust as you see fit.
 Required
 ========
 
-* BeaglePlay with provided antennas
-
-* BeagleConnect Freedom with provided USB cable
-
-* 2x 5V/3A USB power adapters
-
-* USB Type-C cable for use with BeaglePlay
+* `BeaglePlay with provided antennas <beagleplay-quick-start>`_
+* `BeagleConnect Freedom with provided USB cable <beagleconnect-freedom-quick-start>`_
+* `2x 5V/3A USB power adapters <accessories-power-supplies>`_
+* `USB Type-C cable for use with BeaglePlay <accessories-cables>`_
 
 Recommended
 ============
@@ -33,25 +30,89 @@ Recommended
 * Ethernet cable and Internet connection
 
 Install the SDK on BeaglePlay
-*****************************
+===============================
 
-See :ref:`beagleplay-zephyr-development-setup`.
-
-.. todo:: note the tested version of software for BeaglePlay
-   
-.. todo:: describe how to know it is working
+You can use BeaglePlay as the primary development board for setting up the Zephyr environment for BeagleConnect Freedom. 
+To setup Zephyr on BeaglePlay, see :ref:`beagleplay-zephyr-development-setup`.
 
-Change default board
-====================
+The instructions linked above setup the environment for targeting BeaglePlay's on CC1352. We need to change it to target 
+BeagleConnect Freedom. You can directly go on to Step 5 under :ref:`zephyr_for_bcf`.
 
-The instructions linked above setup the environment for targeting BeaglePlay's on CC1352. We need to change
-it to target BeagleConnec Freedom.
-
-    .. code-block:: bash
+.. todo:: note the tested version of software for BeaglePlay
 
-        echo "export BOARD=beagleconnect_freedom" >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+.. _zephyr_for_bcf:
+
+Zephyr setup for BeagleConnect Freedom
+========================================
+
+To setup Zephyr on your machine for running modules on BeagleConnect Freedom, follow the given instructions :
+
+1. First, install the Zephyr SDK bundle:
+    
+    .. code-block:: shell-session
+
+        cd ~
+        wget https://github.com/zephyrproject-rtos/sdk-ng/releases/download/v0.15.1/zephyr-sdk-0.16.8_linux-aarch64_minimal.tar.gz
+        wget -O - https://github.com/zephyrproject-rtos/sdk-ng/releases/download/v0.16.8/sha256.sum | shasum --check --ignore-missing
+
+.. tip::
+    Find the all releases on `Zephyr SDK Tags <https://github.com/zephyrproject-rtos/sdk-ng/tags>`_ page, change to the version of the sdk according to your requirement.
+    Also, you may replace ``aarach64``  with the host system you are currently working with.
+
+1. Extract the Zephyr SDK bundle:
+    
+    .. code-block:: shell-session
+        
+        tar xf zephyr-sdk-0.16.8_linux-aarch64_minimal.tar.gz
+
+.. important::
+    
+    It is recommended to extract the Zephyr SDK bundle at one of the following locations:
+
+    .. code-block:: shell-session
+            
+        - $HOME
+        - $HOME/.local
+        - $HOME/.local/opt
+        - $HOME/bin
+        - /opt
+        - /usr/local
+        
+    The Zephyr SDK bundle archive contains the ``zephyr-sdk-0.16.8`` directory and, when extracted under ``$HOME`` directory, 
+    the resulting installation path will be ``<$HOME/zephyr-sdk-<version>``.
+
+3. Run the Zephyr SDK bundle setup script:
+
+    .. code-block:: shell-session
+        
+        cd zephyr-sdk-0.16.8
+        ./setup.sh
+
+4. Further, go on to setup the BeagleConnect Freedom (BCF)'s SDK.
+    
+    .. code-block:: shell-session
+        
+        west init -m https://github.com/zephyrproject-rtos/zephyr --mr sdk zephyr-beagle-cc1352-sdk
+        cd $HOME/zephyr-beagle-cc1352-sdk
+        python3 -m venv zephyr-beagle-cc1352-env
+
+5. Export the required variables as given below:
+
+    .. code-block:: shell-session
+
+        echo "export ZEPHYR_TOOLCHAIN_VARIANT=zephyr" >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+        echo "export ZEPHYR_SDK_INSTALL_DIR=$HOME/zephyr-sdk-0.16.8" >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+        echo "export ZEPHYR_BASE=$HOME/zephyr-beagle-cc1352-sdk/zephyr" >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+        echo 'export PATH=$HOME/zephyr-beagle-cc1352-sdk/zephyr/scripts:$PATH' >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+        echo "export BOARD=beagleplay" >> $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
         source $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+        west update
+        west zephyr-export
+        pip3 install -r zephyr/scripts/requirements-base.txt
 
+.. note::
+    
+    You might need to change the version of the Zephyr-SDK based on the SDK setup done in Step 1.
 
 Try demo applications
 *********************
@@ -61,17 +122,31 @@ Now you can build various Zephyr applications
 Build and flash Blinky
 ======================
 
-Make sure your BeagleConnect Freedom is connected to your BeaglePlay via the USB cable provided.
+.. note::
+    Before building any example, ensure to run this command:
+        
+    .. code-block:: shell-session
+            
+        source $HOME/zephyr-beagle-cc1352-sdk/zephyr-beagle-cc1352-env/bin/activate
+
+    
+Run the build and flash commands. Make sure to connect the BeagleConnect Freedom to your computer before flashing.
 
-    .. code-block:: bash
+    .. code-block:: shell-session
 
         cd $ZEPHYR_BASE
         west build zephyr/samples/basic/blinky
         west flash
 
+
+Zephyr Documentation
+=====================
+
+You can refer to `Zephyr Getting Started <https://docs.zephyrproject.org/latest/develop/getting_started/index.html>`_ for further development!
+
+
 Debug applications over the serial terminal
 ===========================================
 
-.. note::
-
-   #TODO#
+.. todo::
+    Add documentation to debug BCF zephyr application over serial terminal.

boards/beagleconnect/freedom/index.rst

-.. _beagleconnect_freedom_home:
+.. _beagleconnect-freedom-home:
 
 BeagleConnect Freedom
 #####################

boards/beagleconnect/index.rst

 .. _beagleconnect-home:
 
-BeagleConnect
+BeagleConnect™
 ###############
 
 .. important::
 
    Currently under development
 
-BeagleConnect™ is a revolutionary technology virtually eliminating low-level 
-software development for `IoT <https://en.wikipedia.org/wiki/Internet_of_things>`_ 
-and `IIoT <https://en.wikipedia.org/wiki/Industrial_internet_of_things>`_ 
-applications, such as building automation, factory automation, home automation,
-and scientific data acquisition. While numerous IoT and IIoT solutions 
-available today provide massive software libraries for microcontrollers 
-supporting a limited body of `sensors <https://en.wikipedia.org/wiki/Sensor>`_,
-`actuators <https://en.wikipedia.org/wiki/Actuator>`_ and `indicators <https://en.wikipedia.org/wiki/Indicator_(distance_amplifying_instrument)>`_ 
-as well as libraries for communicating over various networks, BeagleConnect 
-simply eliminates the need for these libraries by shifting the burden into the 
-most massive and collaborative software project of all time, the `Linux kernel <https://en.wikipedia.org/wiki/Linux_kernel>`_.
-
-These are the tools used to automate things in 
-`scientific data collection <https://en.wikipedia.org/wiki/Data_collection_system>`_, 
-`data science <https://en.wikipedia.org/wiki/Data_science>`_, 
-`mechatronics <https://en.wikipedia.org/wiki/Mechatronics>`_, 
-and `IoT <https://en.wikipedia.org/wiki/Internet_of_things>`_.
-
-BeagleConnect™ technology solves:
-
-* The need to write software to add a large set of diverse devices to your system,
-* The need to maintain the software with security updates,
-* The need to rapidly prototype using off-the-shelf software and hardware without wiring,
-* The need to connect to devices using long-range, low-power wireless, and
-* The need to produce high-volume custom hardware cost-optimized for your requirements.
-
-See:
-
-* :ref:`beagleconnect-overview`
-* :ref:`beagleconnect-story`
-
-BeagleConnect Experience
-*************************
-
-BeagleConnect™ provides a scalable experience for interacting with the physical world.
-
-.. note:: 
-   The term BeagleConnect™ refers to a technology comprising of a family of 
-   boards, a collection of Linux kernel drivers, microcontroller firmware, a 
-   communication protocol, and system-level integration to automation software 
-   tools. More specific terms will be applied in the architecture details. The 
-   term is also used here to represent the experience introduced to users through 
-   the initial BeagleConnect™ Freedom product consisting of a board and case which
-   ships programmed and ready to be used. 
-
-For scientists, we are integrating `Jupyter Notebook <https://jupyter.org/>`_ 
-with the data streams from any of hundreds of sensor options, including 
-`vibration <https://www.mikroe.com/click/sensors/force>`_, 
-`gas detection <https://www.mikroe.com/click/sensors/gas>`_, 
-`biometrics <https://www.mikroe.com/click/sensors/biometrics>`_ and 
-`more <https://www.mikroe.com/click/sensors>`_. These data streams can be 
-stored in simple `data files <https://en.wikipedia.org/wiki/Comma-separated_values>` 
-or processed and visualized.
-
-.. todo::
-
-   provide images demonstrating Jupyter Notebook visualization
-
-For embedded systems developers, data is easily extracted using the standard IIO
-interface provided by the Linux kernel running on the gateway using any of 
-hundreds of programming languages and environments, without writing a line of 
-microcontroller firmware. The Linux environment provides opportunities for 
-high-level remote management using tools like Balena with applications deployed
-in Docker containers.
-
-.. todo:: provide image illustrating remote management
-
-The hardware and software are fully open source, providing for scalability and a lack of vendor lock-in.
-
-For DevOps…
-
-For home automaters, integration into WebThings…
-
-.. todo::
-
-   think a bit more about this section with some feedback from Cathy.
+BeagleConnect™ is a family of boards that provides mikroBUS connections to Linux machines over :ref:`beagleconnect-technology` as Zephyr-supported MCU-based boards.
 
 .. image:: freedom/images/BeagleConnect-Boards-Angled.*
    :width: 598
    :align: center
    :alt: BeagleConnect Freedom
 
+BeagleConnect™ boards
+**********************
 
-BeagleConnect boards
-********************
-
-* :ref:`beagleconnect_freedom_home`
+* :ref:`beagleconnect-freedom-home`
 

boards/beagleplay/05-demos.rst

@@ -65,6 +65,18 @@ Demos and tutorials
             
             beginner
 
+    .. card::
+        :link: beagleplay-nodered
+        :link-type: ref
+
+        **Using NodeRed**
+        ^^^
+        Learn how to use NodeRed with BeaglePlay for rapid and easy prototyping.
+        +++
+        .. admonition:: Complexity level
+
+            beginner
+
     .. card:: 
         :link: beagleplay-rtc
         :link-type: ref
@@ -166,6 +178,7 @@ Demos and tutorials
     demos-and-tutorials/using-grove
     demos-and-tutorials/using-mikrobus
     demos-and-tutorials/using-qwiic
+    demos-and-tutorials/using-nodered
     demos-and-tutorials/using-rtc
     demos-and-tutorials/using-oldi
     demos-and-tutorials/using-csi

boards/beagleplay/demos-and-tutorials/beagleplay-kernel-development.rst

@@ -151,8 +151,6 @@ on `debugging with JTAG in CCS <https://www.ti.com/video/3874392631001?keyMatch=
 References
 **********
 
-- To understand more about booting code on BeaglePlay, see :ref:`beagleplay-understanding-boot`.
-
 - For more details on the Linux kernel build system, see `The kernel build system <https://www.kernel.org/doc/html/latest/kbuild/index.html>`_ on kernel.org.
 
 - For additional guidance, see the `official TI-SDK documentation for AM62X <https://software-dl.ti.com/processor-sdk-linux/esd/AM62X/latest/exports/docs/linux/Foundational_Components_Kernel_Users_Guide.html>`_