Add Resources and make Donate a button (#97)

* Fix link in ReadMe.

* Add Resources to nav-bar, move Donate to button.

* Navbar Adjustments (#100)

* Inject donate into navbar
DocFX dynamically generates the navbar on the client side through the docfx.js code, it's not something that is statically rendered when the page is built.  In order for the Donate button to be placed to the left of the theme switch button like on the main monogame side, the Donate button needs to be injected after the page loads and then after the navbar is dynamically generated.

* Fix navbar container width so it matches main website

---------

Co-authored-by: Christopher Whitley <103014489+AristurtleDev@users.noreply.github.com>
Co-authored-by: Simon (Darkside) Jackson <darkside@zenithmoon.com>

Author: 3 people

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/