Merge pull request #109 from coconut3-dev/main

Added Prev/Next nav to content of the docs

.gitignore

@@ -1,2 +1,5 @@
 .DS_Store
-docs/.DS_Store
+docs/.DS_Store
+.DS_Store
+docs/.DS_Store
+pkt/.DS_Store

custom_theme/base.html

@@ -71,7 +71,12 @@
  {%- set main_content %}
  <div class="row">
  <div id="sidebar-nav" class="sidebar col-md-3">{% include "side-nav.html" %}</div>
- <div id="main" class="{%- if config.theme.fluid_layout -%}col{%- else -%}col-md-7{%- endif -%}" role="main">{% include "content.html" %}</div>
+ <div id="main" class="{%- if config.theme.fluid_layout -%}col{%- else -%}col-md-7{%- endif -%}" role="main">
+ {% include "content.html" %}
+ <div class="md-footer-nav">
+ <!-- Navigation links will be inserted here by custom-nav.js -->
+ </div>
+ </div>
  <div id="sidebar-toc" class="sidebar col-md-2">
  <nav id="toc" data-toggle="toc" class="sticky-top sticky-offset">
  <h4>Table of Contents</h4>
@@ -106,8 +111,48 @@ <h4>Table of Contents</h4>
  <script src="{{ "js/base.js"|url }}" defer></script>
  {%- endblock %}
  {% if 'search' in config['plugins'] %}{%- include "search-modal.html" %}{% endif %}
- {%- include "keyboard-modal.html" %}
-
+ {{ extra_js }}
+ <script>
+ document.addEventListener("DOMContentLoaded", function() {
+ // Get all nav items
+ const navItems = document.querySelectorAll('.md-nav__link');
+
+ // Find the current page
+ let currentPageIndex = -1;
+ navItems.forEach((item, index) => {
+ if (item.classList.contains('active')) {
+ currentPageIndex = index;
+ }
+ });
+
+ // Add previous and next links if current page is found
+ if (currentPageIndex !== -1) {
+ const navContainer = document.querySelector('.md-footer-nav');
+
+ if (navContainer) {
+ // Previous link
+ if (currentPageIndex > 0) {
+ const prevItem = navItems[currentPageIndex - 1];
+ const prevLink = document.createElement('a');
+ prevLink.href = prevItem.href;
+ prevLink.innerHTML = 'Previous <span>'+prevItem.textContent +'</span>';
+ prevLink.className = 'md-footer-nav__link md-footer-nav__link--prev';
+ navContainer.appendChild(prevLink);
+ }
+
+ // Next link
+ if (currentPageIndex < navItems.length - 1) {
+ const nextItem = navItems[currentPageIndex + 1];
+ const nextLink = document.createElement('a');
+ nextLink.href = nextItem.href;
+ nextLink.innerHTML = 'Next <span>'+nextItem.textContent +'</span>';
+ nextLink.className = 'md-footer-nav__link md-footer-nav__link--next';
+ navContainer.appendChild(nextLink);
+ }
+ }
+ }
+ });
+ </script>
  </body>
 </html>
 {% if page and page.is_homepage %}

custom_theme/nav-sub.html

@@ -0,0 +1,15 @@
+{%- if not nav_item.children %}
+<li>
+ <a href="{{ nav_item.url|url }}" class="md-nav__link {% if nav_item.active %} active{% endif %}">{{ nav_item.title }}</a>
+</li>
+{%- else %}
+<li>
+ <span>{{ nav_item.title }}</span>
+ <!--<a href="#" class="">{{ nav_item.title }}</a>-->
+ <ul>
+ {%- for nav_item in nav_item.children %}
+ {% include "nav-sub.html" %}
+ {%- endfor %}
+ </ul>
+</li>
+{%- endif %}

mkdocs.yml

@@ -37,12 +37,11 @@ nav:
  - How to Run a Pktd Full Node: adv_learning/pktd-full-node.md
  - How to Swap PKT and Wrapped PKT: adv_learning/swap-pkt-wrapped-pkt.md
  - Community:
- - Code of Conduct: code_of_conduct.md
+ - Code of Conduct: community/code_of_conduct.md
  - Ethical Communication Guidelines: community/ethica-communication-guidelines.md
  - Classifieds: community/classifieds.md
  - Press & Media Assets: community/press-media-assets.md
 
-
 markdown_extensions:
  - admonition
  - toc:

mkdocs_moonstone/css/extra.css

@@ -324,7 +324,40 @@ footer .col > a:focus {
 #main ol li,
 #main ul li {
  padding-bottom: 5px;
-} 
+}
+.md-footer-nav {
+ display: -moz-flex;
+ display: -ms-flex;
+ display: -o-flex;
+ display: flex;
+ -o-flex-wrap: wrap;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-top: 40px;
+}
+.md-footer-nav > a {
+ padding: .5rem 1rem;
+ border: 1px solid #c0c0c063;
+ border-radius: .3rem;
+ width: 48%;
+ color: #c0c0c063;
+ transition: all .5s ease;
+ font-size: 14px;
+}
+.md-footer-nav > a:hover,
+.md-footer-nav > a:focus {
+ border-color: silver;
+ color:silver;
+ text-decoration: none;
+}
+.md-footer-nav > .md-footer-nav__link--next {
+ text-align: right;
+}
+.md-footer-nav > a span {
+ color:#00b127;
+ display: block;
+ margin-top: 7px;
+}
 @media screen and (max-width:1280px) {
  #main p {
  word-break: break-all;
@@ -334,4 +367,10 @@ footer .col > a:focus {
  #main p {
  word-break: normal;
  }
+ .md-footer-nav > a {
+ width: 100%;
+ }
+ .md-footer-nav > .md-footer-nav__link--next {
+ margin-top: 15px;
+ }
 }

site/404.html

@@ -125,27 +125,27 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul id="learn" class="collapse">
 
 <li>
- <a href="/learn/pkt/" class="">What is PKT?</a>
+ <a href="/learn/pkt/" class="md-nav__link ">What is PKT?</a>
 </li>
 
 <li>
- <a href="/learn/packetcrypt/" class="">What is PacketCrypt?</a>
+ <a href="/learn/packetcrypt/" class="md-nav__link ">What is PacketCrypt?</a>
 </li>
 
 <li>
- <a href="/learn/pkt-cash/" class="">What is PKT Cash?</a>
+ <a href="/learn/pkt-cash/" class="md-nav__link ">What is PKT Cash?</a>
 </li>
 
 <li>
- <a href="/learn/wpkt/" class="">What is WPKT?</a>
+ <a href="/learn/wpkt/" class="md-nav__link ">What is WPKT?</a>
 </li>
 
 <li>
- <a href="/learn/network-steward/" class="">What is the Network Steward?</a>
+ <a href="/learn/network-steward/" class="md-nav__link ">What is the Network Steward?</a>
 </li>
 
 <li>
- <a href="https://pkt.cash/PKT_Network_v1.0_2021.02.01.pdf" class="">Whitepapers</a>
+ <a href="https://pkt.cash/PKT_Network_v1.0_2021.02.01.pdf" class="md-nav__link ">Whitepapers</a>
 </li>
  </ul>
  </li>
@@ -155,27 +155,27 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul id="wallet-setup" class="collapse">
 
 <li>
- <a href="/wallet_setup/pkt-wallet-setup/" class="">How to setup a PKT Wallet</a>
+ <a href="/wallet_setup/pkt-wallet-setup/" class="md-nav__link ">How to setup a PKT Wallet</a>
 </li>
 
 <li>
- <a href="/wallet_setup/install-from-seed/" class="">Installing from Seed</a>
+ <a href="/wallet_setup/install-from-seed/" class="md-nav__link ">Installing from Seed</a>
 </li>
 
 <li>
- <a href="/wallet_setup/install-pkt-electrum/" class="">Installing PKT Electrum (Mac/Windows)</a>
+ <a href="/wallet_setup/install-pkt-electrum/" class="md-nav__link ">Installing PKT Electrum (Mac/Windows)</a>
 </li>
 
 <li>
- <a href="/wallet_setup/pkt-world-wallet/" class="">Installing PKT.World Wallet (Mac/Windows)</a>
+ <a href="/wallet_setup/pkt-world-wallet/" class="md-nav__link ">Installing PKT.World Wallet (Mac/Windows)</a>
 </li>
 
 <li>
- <a href="/wallet_setup/pkt-zulu-wallet/" class="">Installing PKT Zulu Wallet (Mac)</a>
+ <a href="/wallet_setup/pkt-zulu-wallet/" class="md-nav__link ">Installing PKT Zulu Wallet (Mac)</a>
 </li>
 
 <li>
- <a href="/wallet_setup/pkt-cli-wallet/" class="">Installing PKT CLI Wallet (Mac/Windows/Linux)</a>
+ <a href="/wallet_setup/pkt-cli-wallet/" class="md-nav__link ">Installing PKT CLI Wallet (Mac/Windows/Linux)</a>
 </li>
  </ul>
  </li>
@@ -185,15 +185,15 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul id="start-mining" class="collapse">
 
 <li>
- <a href="/start_mining/intro/" class="">Intro to PKT Mining</a>
+ <a href="/start_mining/intro/" class="md-nav__link ">Intro to PKT Mining</a>
 </li>
 
 <li>
- <a href="/start_mining/announcement-mining/" class="">How to Start Announcement Mining</a>
+ <a href="/start_mining/announcement-mining/" class="md-nav__link ">How to Start Announcement Mining</a>
 </li>
 
 <li>
- <a href="/start_mining/pkt-mining-pool/" class="">How to Setup a PKT Mining Pool</a>
+ <a href="/start_mining/pkt-mining-pool/" class="md-nav__link ">How to Setup a PKT Mining Pool</a>
 </li>
  </ul>
  </li>
@@ -203,11 +203,11 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul id="advanced-learning" class="collapse">
 
 <li>
- <a href="/adv_learning/pktd-full-node/" class="">How to Run a Pktd Full Node</a>
+ <a href="/adv_learning/pktd-full-node/" class="md-nav__link ">How to Run a Pktd Full Node</a>
 </li>
 
 <li>
- <a href="/adv_learning/swap-pkt-wrapped-pkt/" class="">How to Swap PKT and Wrapped PKT</a>
+ <a href="/adv_learning/swap-pkt-wrapped-pkt/" class="md-nav__link ">How to Swap PKT and Wrapped PKT</a>
 </li>
  </ul>
  </li>
@@ -217,19 +217,19 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul id="community" class="collapse">
 
 <li>
- <a href="/code_of_conduct/" class="">Code of Conduct</a>
+ <a href="/community/code_of_conduct/" class="md-nav__link ">Code of Conduct</a>
 </li>
 
 <li>
- <a href="/community/ethica-communication-guidelines/" class="">Ethical Communication Guidelines</a>
+ <a href="/community/ethica-communication-guidelines/" class="md-nav__link ">Ethical Communication Guidelines</a>
 </li>
 
 <li>
- <a href="/community/classifieds/" class="">Classifieds</a>
+ <a href="/community/classifieds/" class="md-nav__link ">Classifieds</a>
 </li>
 
 <li>
- <a href="/community/press-media-assets/" class="">Press & Media Assets</a>
+ <a href="/community/press-media-assets/" class="md-nav__link ">Press & Media Assets</a>
 </li>
  </ul>
  </li>
@@ -238,6 +238,7 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
 </nav>
 </div>
  <div id="main" class="col-md-7" role="main">
+
 
 
 
@@ -258,7 +259,11 @@ <h1 id="404-page-not-found" style="text-align: center">404</h1>
  <ul class="contributors" data-bi-name="contributors"></ul>
  </li>
 </ul>
-</div>
+
+ <div class="md-footer-nav">
+ <!-- Navigation links will be inserted here by custom-nav.js -->
+ </div>
+ </div>
  <div id="sidebar-toc" class="sidebar col-md-2">
  <nav id="toc" data-toggle="toc" class="sticky-top sticky-offset">
  <h4>Table of Contents</h4>
@@ -358,46 +363,48 @@ <h4 class="modal-title" data-toc-skip>Search</h4>
  </div>
  </div>
  </div>
-</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="Keyboard Shortcuts Modal" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <p class="h4 modal-title">Keyboard Shortcuts</p>
- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
- </div>
- <div class="modal-body">
- <table class="table">
- <thead>
- <tr>
- <th style="width: 20%;">Keys</th>
- <th>Action</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="help shortcut"><kbd>?</kbd></td>
- <td>Open this help</td>
- </tr>
- <tr>
- <td class="next shortcut"><kbd>n</kbd></td>
- <td>Next page</td>
- </tr>
- <tr>
- <td class="prev shortcut"><kbd>p</kbd></td>
- <td>Previous page</td>
- </tr>
- <tr>
- <td class="search shortcut"><kbd>s</kbd></td>
- <td>Search</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="modal-footer">
- </div>
- </div>
- </div>
 </div>
 
+ <script>
+ document.addEventListener("DOMContentLoaded", function() {
+ // Get all nav items
+ const navItems = document.querySelectorAll('.md-nav__link');
+
+ // Find the current page
+ let currentPageIndex = -1;
+ navItems.forEach((item, index) => {
+ if (item.classList.contains('active')) {
+ currentPageIndex = index;
+ }
+ });
+
+ // Add previous and next links if current page is found
+ if (currentPageIndex !== -1) {
+ const navContainer = document.querySelector('.md-footer-nav');
+
+ if (navContainer) {
+ // Previous link
+ if (currentPageIndex > 0) {
+ const prevItem = navItems[currentPageIndex - 1];
+ const prevLink = document.createElement('a');
+ prevLink.href = prevItem.href;
+ prevLink.innerHTML = 'Previous <span>'+prevItem.textContent +'</span>';
+ prevLink.className = 'md-footer-nav__link md-footer-nav__link--prev';
+ navContainer.appendChild(prevLink);
+ }
+
+ // Next link
+ if (currentPageIndex < navItems.length - 1) {
+ const nextItem = navItems[currentPageIndex + 1];
+ const nextLink = document.createElement('a');
+ nextLink.href = nextItem.href;
+ nextLink.innerHTML = 'Next <span>'+nextItem.textContent +'</span>';
+ nextLink.className = 'md-footer-nav__link md-footer-nav__link--next';
+ navContainer.appendChild(nextLink);
+ }
+ }
+ }
+ });
+ </script>
  </body>
 </html>