Add Resources and make Donate a button

README.md

@@ -13,7 +13,7 @@ With your environment setup properly, the following explains how to build from s
 1. Clone this repository
 
     ```sh
-    git clone https://github.com/MonoGame/monogame.github.io.git
+    git clone https://github.com/MonoGame/docs.monogame.github.io.git
     ```
 
 2. Install DotNet dependencies

templates/monogame/layout/_master.tmpl

@@ -78,6 +78,7 @@
     {{/_enableSearch}}
 
       {{>partials/footer}}
+      <script type="text/javascript" src="/public/injectDonateButton.js" /
   </body>
 {{/redirect_url}}
 </html>

templates/monogame/partials/topnav.tmpl.partial

@@ -6,17 +6,17 @@
             {{_appName}}
             </a>
             <button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false" aria-label="Toggle navigation">
-            <i class="bi bi-three-dots"></i>
+                <i class="bi bi-three-dots"></i>
             </button>
             <div class="collapse navbar-collapse" id="navpanel">
-            <div id="navbar">
-                {{#_enableSearch}}
-                <form class="search" role="search" id="search">
-                <i class="bi bi-search"></i>
-                <input class="form-control" id="search-query" type="search" disabled placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
-                </form>
-                {{/_enableSearch}}
-            </div>
+                <div id="navbar">
+                    {{#_enableSearch}}
+                    <form class="search" role="search" id="search">
+                    <i class="bi bi-search"></i>
+                    <input class="form-control" id="search-query" type="search" disabled placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
+                    </form>
+                    {{/_enableSearch}}
+                </div>
             </div>
         </div>
     </nav>

templates/monogame/public/injectDonateButton.js

@@ -0,0 +1,25 @@
+/**
+ * Donate button Injector
+ * 
+ * This script dynamically adds a "Donate" button to the navigation.
+ * Since the navbar is dynamically generated **after page load**, it uses a MutationObserver to watch 
+ * for the form.icons element to be added to the DOM, injects the donate button as its first child
+ * the disconnects the observer.
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    const observer = new MutationObserver(function(mutations) {
+        const iconsForm = document.querySelector('form.icons');
+        if (iconsForm) {
+            observer.disconnect();
+            const donateDiv = document.createElement('div');
+            donateDiv.innerHTML = '<a class="btn mg-donate-button ms-3" type="button" href="https://monogame.net/donate"><i class="bi bi-heart"></i> Donate</a>';
+            iconsForm.insertAdjacentElement('afterbegin', donateDiv);
+        }
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+});

templates/monogame/public/main.css

@@ -72,6 +72,17 @@ body[data-disable-toc="true" i] .toc-offcanvas {
 color: var(--mg-orange-primary)
 }
 
+/*******************************************************************************
+*** Section: Navbar Fixes
+*** The main monogame website uses bootstrap 5.3.2 while docfx is sitll on
+*** bootstrap 3.4.1.  The following are fixes for the top navbar specifically
+*** so that it looks the same as the main website
+*******************************************************************************/
+nav#autocollapse > div.container-xxl {
+  max-width: 1320px;
+}
+
+
 /*******************************************************************************
 *** Section: MonoGame Utility Classes
 *** Utility classes used throughout the site that provide some MonoGame specific
@@ -182,6 +193,12 @@ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   color: var(--bs-body-color);
 }
 
+.mg-donate-button {
+  --bs-btn-bg: #F1465A;
+  --bs-btn-hover-bg: #F25265;
+  --bs-btn-color: #fff;
+  --bs-btn-hover-color: #fff;
+}
 
 /*******************************************************************************
 *** Some adjustments to give the content some space.

toc.yml

@@ -10,7 +10,7 @@
   href: https://monogame.net/blog/
 - name: Bounties
   href: https://monogame.net/bounties/
+- name: Resources
+  href: https://monogame.net/resources/
 - name: About
-  href: https://monogame.net/about/
-- name: Donate
-  href: https://monogame.net/donate/
+  href: https://monogame.net/about/