simplier nav script + mov old doc

docs/assets/js/aki-navigator.js

@@ -0,0 +1,59 @@
+'use strict';
+
+class AkiNavigator {
+    constructor(defaultView, fetchPath = 'content') {
+        this.header = undefined;
+        this.contentOutlet = undefined;
+        this.defaultView = defaultView;
+        this.fetchPath = fetchPath;
+
+        this.onExec();
+    }
+
+    onExec() {
+        this.header = document.querySelector('header');
+        this.contentOutlet = document.querySelector('#router-outlet');
+
+        window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1)));
+
+        if (window.location.hash) {
+            this.displayView(window.location.hash.substr(1));
+        } else if (typeof this.defaultView !== 'undefined') {
+            this.displayView(this.defaultView);
+        }
+    }
+
+    removeChildren(element) {
+        let count = element.childNodes.length;
+
+        while (count--) {
+            element.removeChild(element.lastChild);
+        }
+    }
+
+    async fetchView(view) {
+        const response = await fetch(`${this.fetchPath}/${view}.html`);
+        const text = await response.text();
+
+        this.removeChildren(this.contentOutlet);
+        this.contentOutlet.innerHTML = text;
+    }
+
+    displayView(view) {
+        this.fetchView(view);
+
+        const activeLinks = document.querySelectorAll('a[active]');
+        const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);
+
+        if (activeLinks.length > 0) {
+            activeLinks.forEach(link => link.removeAttribute('active'));
+        }
+
+        newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));
+
+        this.contentOutlet.scrollTop = 0;
+
+        // FIXME: history push is fucked rn.
+        // window.history.pushState(null, `${view}`, `#${view}`);     
+    }
+}

docs/assets/js/akiNavigatorRouter.js

@@ -1,85 +0,0 @@
-/**
- * Contains edits to better suit the docs web app.
- */
-
-'use strict';
-
-class AkiNavigatorRouter {
-    constructor(routes, ...callbacks) {
-        this._header = undefined;
-        this._routerOutlet = undefined;
-        this._routes = routes;
-
-        this._onExec(callbacks);
-    }
-
-    _onExec(callbacks) {
-        this._getReferences();
-
-        window.addEventListener("hashchange", () => this.displayView(window.location.hash.substr(1)));
-
-        if (window.location.hash) {
-            this.displayView(window.location.hash.substr(1));
-        }
-
-        if (callbacks.length > 0) {
-            callbacks.forEach(callback => {
-                if (typeof callback == 'function') {
-                    callback();
-                }
-            });
-        }
-    }
-
-    _getReferences() {
-        this._header = document.querySelector('header');
-        this._routerOutlet = document.querySelector('#router-outlet');
-    }
-
-    _removeChildren(element) {
-        let count = element.childNodes.length;
-
-        while (count--) {
-            element.removeChild(element.lastChild);
-        }
-    }
-
-    async _fetchView(view) {
-        const response = await fetch(`md/${view}`);
-        const text = await response.text();
-
-        this._removeChildren(this._routerOutlet);
-        // this._routerOutlet.innerHTML = text;
-
-        this._routerOutlet.innerHTML = marked(text);
-        Prism.highlightAll();
-    }
-
-    displayView(view) {
-        // Useless here. Only fetch is used.
-        // if (this._mode === 'fetch') {
-        //     this._fetchView(view);
-        // } else {
-        //     this._setView(view);
-        // }
-
-        this._fetchView(view);
-
-        const activeLinks = document.querySelectorAll('a[active]');
-        const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);
-
-        console.log('view:', view);
-        console.log('activeLinks:', activeLinks);
-        console.log('newActiveLinks:', newActiveLinks);
-
-        if (activeLinks.length > 0) {
-            activeLinks.forEach(link => link.removeAttribute('active'));
-        }
-
-        newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));
-
-        this._routerOutlet.scrollTop = 0;
-        // FIXME: history push is fucked rn.
-        // window.history.pushState(null, `${view}`, `#${view}`);     
-    }
-}

docs/index.html

@@ -24,7 +24,6 @@
                 <a href="https://www.sp-tarkov.com">Website</a>
                 <a href="https://mods.sp-tarkov.com">Workshop</a>
                 <a href="https://dev.sp-tarkov.com">Gitea</a>
-                <!--<a href="#">Development</a>-->
             </div>
         </nav>
     </header>
@@ -42,17 +41,37 @@
 
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="./assets/js/prism.js"></script>
-    <script src="./assets/js/akiNavigatorRouter.js"></script>
+    <script src="./assets/js/aki-navigator.js"></script>
     <script>
         const routes = {
             "SPT-AKI": {
-                "FAQ": "faq.md",
-                "Installing a release": "sp-tarkov/install_sp-tarkov.md",
-                "About":"about.md"
+                "Installing a release": "sp-aki/install.md",
+                "About":"spt-aki/about.md",
+                "FAQ": "spt-aki/faq.md",
+                // TODO: work on routes nesting
+                // "foo" : { 
+                //     "item1": "#",
+                //     "item2": "#"
+                // }
             },
-            "Tutorials":{
-                "Create a mod on SP-Tarkov": "tutorials/create_a_mod.md",
-                "How to report a bug": "tutorials/bug-report.md",
+            "Tutorials": {
+                // Generalist tutorials (walkthrough projects)
+                "Modding 101 - <topic 1>": "#",
+                "Modding 101 - <topic 2>": "#",
+                "Modding 101 - <topic 3>": "#"
+            },
+            "Modding": {
+                // Here are guides only related to modifying the server/client.
+                "Editing weapons textures": "#",
+                "Editing player profile": "#",
+            },
+            "DEBUG": {
+                "** Markdown Demo": "demo.md"
+            },
+
+            "Tutorials-old":{
+                "Create a mod on SP-Tarkov": "tutorials/create_a_mod.md", // TODO: Create a "modding 101 series"
+                "How to report a bug": "tutorials/bug-report.md", // TODO: include in FAQ
                 "Editing differents things in my player profile": "tutorials/edit_the_player_profile.md",
                 "Change some traders behaviour": "tutorials/edit_traders_values.md",
                 "How to customize maps values": "tutorials/edit_location_values.md",
@@ -62,16 +81,13 @@
                 "Customize weather presets": "tutorials/create_weather.md",
                 "Add new bundles to the game": "tutorials/add_new_bundles.md"
             },
-            "Modding":{
-                "All items stats resources":"resources/itemsStats_resources.md",
-                "All locations resources":"resources/locations_resources.md",
-                "All player profile resources":"resources/playerProfile_resources.md",
-                "All quest resources":"resources/quests_resources.md",
-                "All other resources":"resources/other_resources.md"
-            },
-            "DEBUG": {
-                "** Markdown Demo": "demo.md",
-            },
+            // "Modding":{
+            //     "All items stats resources":"resources/itemsStats_resources.md",
+            //     "All locations resources":"resources/locations_resources.md",
+            //     "All player profile resources":"resources/playerProfile_resources.md",
+            //     "All quest resources":"resources/quests_resources.md",
+            //     "All other resources":"resources/other_resources.md"
+            // }
         };
 
         /**
@@ -118,6 +134,19 @@
         }
 
         populateNav();
-        const akiNavigatorRouter = new AkiNavigatorRouter(routes);
+
+        // Dirty override
+        class AkiNavigatorDocs extends AkiNavigator {
+            async fetchView(view) {
+                const response = await fetch(`${this.fetchPath}/${view}`);
+                const text = await response.text();
+
+                this.removeChildren(this.contentOutlet);
+                this.contentOutlet.innerHTML = marked(text); // edited
+                Prism.highlightAll(); // edited
+            }
+        }
+
+        const akiNavigator = new AkiNavigatorDocs(undefined, 'md');
     </script>
 </body>

docs/md/.old/index.md

@@ -11,6 +11,7 @@ sidebar_label: Home
 > A complete documentation website for SP-Tarkov.
 
 What will you find here ?
+
 - [A FAQ page](faq.md)
 - [Tutorials](tutorials/index.md)
 - [Modders resources](resources/index.md)

docs/md/.old/resources/itemsStats_resources.md

@@ -4,7 +4,7 @@
 
 ## Color list
 
-```
+```json
 {
     blue,
     yellow,
@@ -22,7 +22,7 @@
 
 ## Stimulator buff list
 
-```
+```json
 {
     HealthRate,
     EnergyRate,
@@ -45,7 +45,8 @@
 ## All nodes ID
 
 ### Barters item
-```
+
+```json
 "57864bb7245977548b3b66c2" //Tools
 "57864c8c245977548867e7f1" //Medical Supplies
 "57864e4c24597754843f8723" //Flammable materials
@@ -56,8 +57,10 @@
 "57864ee62459775490116fc1" //Battery
 "590c745b86f7743cc433c5f2" //Other
 ```
+
 ### Gear
-```
+
+```json
 "57bef4c42459772e8d35a53b" //GearComponents
 "5448e54d4bdc2dcc718b4568" //Armor
 "5448bf274bdc2dfc2f8b456a" //Secured Containers
@@ -70,25 +73,32 @@
 "5a341c4686f77469e155819e" //Facecover
 "5b3f15d486f77432d0509248" //Armband
 ```
+
 ### Weapon Parts & mod
+
 #### Vital Parts
-```
+
+```json
 "55818a304bdc2db5418b457d" //Receiver
 "55818a684bdc2ddd698b456d" //PistolGrip
 "56ea9461d2720b67698b456f" //Gasblock
 "55818a104bdc2db9688b4569" //Handguard
 "555ef6e44bdc2de9068b457e" //Barrel
 ```
+
 #### Gear Mods
-```
+
+```json
 "55818a594bdc2db9688b456a" //Stock
 "55818b224bdc2dde698b456f" //Mounts
 "5448bc234bdc2d3c308b4569" //Magazines
 "55818b014bdc2ddc698b456b" //Launcher
 "55818a6f4bdc2db9688b456b" //Charging Handle
 ```
+
 #### Functional Mods
-```
+
+```json
 "5a74651486f7744e73386dd1" //Auxiliary Parts
 "5448fe7a4bdc2d6f028b456b" //Sights
 "55818b0e4bdc2dde698b456e" //LightLasers
@@ -96,8 +106,10 @@
 "55818af64bdc2d5b648b4570" //Foregrip
 "55818afb4bdc2dde698b456d" //Bipods
 ```
+
 #### Weapons
-```
+
+```json
 "543be6564bdc2df4348b4568" //Throwable
 "5447e1d04bdc2dff2f8b4567" //Melee Weapons
 "5447bed64bdc2d97278b4568" //Machine Guns
@@ -109,30 +121,40 @@
 "5447b5f14bdc2d61278b4567" //AssaultRifles
 "5447b5fc4bdc2d87278b4567" //AssaultCarbines
 ```
+
 #### Ammo
-```
+
+```json
 "543be5cb4bdc2deb348b4568" //Ammobox
 "5485a8684bdc2da71d8b4567" //Rounds
 ```
+
 #### Provisions
-```
+
+```json
 "5448e8d04bdc2ddf718b4569" //Food
 "5448e8d64bdc2dce718b4568" //Drinks
 ```
+
 #### Medical Treatment
-```
+
+```json
 "5448f3a64bdc2d60728b456a" //Injectors
 "5448f3ac4bdc2dce718b4569" //Injury Treatments
 "5448f39d4bdc2d0a728b4568" //Medkit
 "5448f3a14bdc2d27728b4569" //Pills
 ```
+
 #### Keys
-```
+
+```json
 "5c164d2286f774194c5e69fa" //Keycards
 "5c99f98d86f7745c314214b3" //MechanicalKeys
 ```
+
 #### Other
-```
+
+```json
 "5448ecbe4bdc2d60728b4568" //Info items
 "5447e0e74bdc2d3c308b4567" //Special Equipments
 "567849dd4bdc2d150f8b456e" //Maps

www/assets/js/aki-navigator.js

@@ -0,0 +1,59 @@
+'use strict';
+
+class AkiNavigator {
+    constructor(defaultView, fetchPath = 'content') {
+        this.header = undefined;
+        this.contentOutlet = undefined;
+        this.defaultView = defaultView;
+        this.fetchPath = fetchPath;
+
+        this.onExec();
+    }
+
+    onExec() {
+        this.header = document.querySelector('header');
+        this.contentOutlet = document.querySelector('#router-outlet');
+
+        window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1)));
+
+        if (window.location.hash) {
+            this.displayView(window.location.hash.substr(1));
+        } else if (typeof this.defaultView !== 'undefined') {
+            this.displayView(this.defaultView);
+        }
+    }
+
+    removeChildren(element) {
+        let count = element.childNodes.length;
+
+        while (count--) {
+            element.removeChild(element.lastChild);
+        }
+    }
+
+    async fetchView(view) {
+        const response = await fetch(`${this.fetchPath}/${view}.html`);
+        const text = await response.text();
+
+        this.removeChildren(this.contentOutlet);
+        this.contentOutlet.innerHTML = text;
+    }
+
+    displayView(view) {
+        this.fetchView(view);
+
+        const activeLinks = document.querySelectorAll('a[active]');
+        const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);
+
+        if (activeLinks.length > 0) {
+            activeLinks.forEach(link => link.removeAttribute('active'));
+        }
+
+        newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));
+
+        this.contentOutlet.scrollTop = 0;
+
+        // FIXME: history push is fucked rn.
+        // window.history.pushState(null, `${view}`, `#${view}`);
+    }
+}

www/assets/js/akiNavigatorTemplate.js

@@ -1,88 +0,0 @@
-'use strict';
-
-class AkiNavigatorTemplate {
-    constructor(mode) {
-        this._header = undefined;
-        this._templates = undefined;
-        this._routerOutlet = undefined;
-        this._mode = mode;
-
-        this._onExec();
-    }
-
-    _onExec() {
-        console.log('Navigating using mode:', this._mode);
-
-        this._getReferences();
-        this._getTemplates();
-
-        window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1)));
-
-        if (!window.location.hash) {
-            this._mode === 'fetch' ? this.displayView('home') : this.displayView('home');
-        } else {
-            this.displayView(window.location.hash.substr(1));
-        }
-    }
-
-    _getReferences() {
-        this._header = document.querySelector('header');
-        this._routerOutlet = document.querySelector('#router-outlet');
-    }
-
-    _getTemplates() {
-        this._templates = [].slice.call(document.getElementsByTagName('template'));
-    }
-
-    _viewModeAction() {
-        if (this._mode === 'fetch') {
-            this.fetchView(window.location.hash.substr(1))
-        } else {
-            this.setView(window.location.hash.substr(1));
-        }
-    }
-
-    _removeChildren(element) {
-        let count = element.childNodes.length;
-
-        while (count--) {
-            element.removeChild(element.lastChild);
-        }
-    }
-
-    _setView(view) {
-        const template = this._templates.filter(template => template.id === `template-${view}`)[0];
-        this._removeChildren(this._routerOutlet);
-        this._routerOutlet.appendChild(template.content.cloneNode(true));
-    }
-
-    async _fetchView(view) {
-        const response = await fetch(`templates/${view}.html`);
-        const text = await response.text();
-
-        this._removeChildren(this._routerOutlet);
-        this._routerOutlet.innerHTML = text; // innerHTML gets the job done.
-    }
-
-    displayView(view) {
-        if (this._mode === 'fetch') {
-            this._fetchView(view);
-        } else {
-            this._setView(view);
-        }
-
-        const activeLinks = document.querySelectorAll('a[active]');
-        const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`);
-
-        if (activeLinks.length > 0) {
-            activeLinks.forEach(link => {
-                link.removeAttribute('active')
-            });
-        }
-
-        newActiveLinks.forEach(newLink => newLink.setAttribute('active', ''));
-
-        // FIXME: history push is fucked rn.
-        // window.history.pushState(null, `${view}`, `#${view}`);
-    }
-}

www/index.html

@@ -31,8 +31,8 @@
             <div class="dropdown-button">...</div>
             <div class="dropdown-content">
                 <a href="https://docs.sp-tarkov.com">Docs</a>
-                <a href="https://mods.sp-tarkov.com">Workshop</a>
-                <a href="https://dev.sp-tarkov.com">Gitea</a>
+                <a href="https://mods.sp-tarkov.com">Mods</a>
+                <a href="https://dev.sp-tarkov.com">Dev</a>
             </div>
         </nav>
     </header>
@@ -54,6 +54,7 @@
 
     <footer>Project AKI is not affiliated with Battlestate Games Ltd. in any way.</footer>
 
+    <!-- TODO: do something more elegant than this horrible "hack" -->
     <div class="text2" overlay-menu-content closed>
         <a href="#home" active>Home</a>
         <a href="#download">Download</a>
@@ -63,13 +64,10 @@
         <span class="disclaimer text1">SPT-AKI is not affiliated with Battlestate Games Ltd. in any way.</span>
     </div>
 
-    <!-- Templates - START -->
-    <!-- Templates - END -->
-
     <script src="./assets/js/akiSideMenu.js"></script>
-    <script src="./assets/js/akiNavigatorTemplate.js"></script>
+    <script src="./assets/js/aki-navigator.js"></script>
     <script>
-        const akiNavigatorTemplate = new AkiNavigatorTemplate('fetch');
+        const akiNavigator = new AkiNavigator('home');
     </script>
 
 </body>