Merge pull request #96 from vinayaksh42/docsui

[Site] sub-sections for Docs
layer5io · May 7, 2021 · 85dc94b · 85dc94b
2 parents 5fe7527 + 638be78
commit 85dc94b
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 24 deletions.
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
@@ -17,7 +17,7 @@ GEM
     forwardable-extended (2.6.0)
     htmlcompressor (0.4.0)
     http_parser.rb (0.6.0)
-    i18n (1.8.9)
+    i18n (1.8.10)
       concurrent-ruby (~> 1.0)
     jekyll (4.1.1)
       addressable (~> 2.4)
@@ -63,7 +63,7 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.5.0)
+    listen (3.5.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)

diff --git a/docs/_data/docs.yml b/docs/_data/docs.yml
@@ -0,0 +1,6 @@
+- name: Section 1
+  number: One
+- name: Section 2
+  number: Two
+- name: Section 3
+  number: Three
diff --git a/docs/_includes/faq.html b/docs/_includes/faq.html
@@ -6,7 +6,7 @@ <h1 class="title">FAQs</h1>
             <div class="accordion accordion-flush" id="accordionFlushExample">
                 <div class="accordion-item">
                   <h2 class="accordion-header" id="flush-headingOne">
-                    <button id="faq-title" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+                    <button id="faq-title" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
                       Can I still build Nighthawk myself?
                     </button>
                   </h2>

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
@@ -40,19 +40,39 @@
         </button>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-            <ul class="sidebar">
-                <h4 class="doc-heading">Documentation</h4>
-                {% for doc in site.docs %}
-                    <li>
-                        <h5 ><a class="doc-link" href="{% include relative-src.html src=doc.url %}">{{ doc.title }}</a></h5>
-                    </li>
+          <ul class="sidebar">
+            <div class="accordion accordion-flush" id="accordionFlushExample">
+              {% for docs in site.data.docs %}
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="flush-heading{{docs.number}}">
+                  <button id="faq-title" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{docs.number}}" aria-expanded="false" aria-controls="flush-collapse{{docs.number}}">
+                    <h4 class="doc-heading">{{ docs.name }}</h4>
+                  </button>
+                </h2>
+                  <div id="flush-collapse{{docs.number}}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{docs.number}}" data-bs-parent="#accordionFlushExample">
+                    {% for doc in site.docs %}
+                      {% if doc.section == docs.name %}
+                        <li>
+                          <h5>
+                            <a
+                              class="doc-link"
+                              href="{% include relative-src.html src=doc.url %}"
+                              >{{ doc.title }}</a
+                            >
+                          </h5>
+                        </li>
+                      {% endif %}
+                    {% endfor %}
+                  </div>
+                </div>
                 {% endfor %}
-            </ul>
+            </div>
+          </ul>
         </div>
       </nav>    
   </div>
   <div class="col-lg-9 container-g">
+    {{ foo }}
     {{content}}
   </div>
 </div>
diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss
@@ -5972,3 +5972,9 @@ div.globalFooterCard.card-environment {
     font-size: 14px;
   }
 }
+.accordion-button {
+  border: 0px !important;
+}
+.accordion-button::after {
+  margin-left: 10px  !important;
+}
diff --git a/docs/collections/_docs/really-using-getnighthawk.md b/docs/collections/_docs/really-using-getnighthawk.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Overview
+section: "Section 1"
 ---
 # Nighthawk: architecture and key concepts
 

diff --git a/docs/collections/_docs/section2.md b/docs/collections/_docs/section2.md
@@ -0,0 +1,7 @@
+---
+layout: docs
+title: Overview
+section: "Section 2"
+---
+
+Test section 2
diff --git a/docs/collections/_docs/section3.md b/docs/collections/_docs/section3.md
@@ -0,0 +1,7 @@
+---
+layout: docs
+title: Overview
+section: "Section 3"
+---
+
+Test section 3
diff --git a/docs/collections/_docs/using-getnighthawk.md b/docs/collections/_docs/using-getnighthawk.md
@@ -1,5 +1,6 @@
 ---
 layout: docs
-title: Using GetNighthawk
+title: GetNighthawk
+section: "Section 1"
 ---
 Test
diff --git a/docs/pages/docs.html b/docs/pages/docs.html
@@ -93,18 +93,34 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="sidebar">
-            <h4 class="doc-heading">Documentation</h4>
-            {% for doc in site.docs %}
-            <li>
-              <h5>
-                <a
-                  class="doc-link"
-                  href="{% include relative-src.html src=doc.url %}"
-                  >{{ doc.title }}</a
-                >
-              </h5>
-            </li>
-            {% endfor %}
+
+            <div class="accordion accordion-flush" id="accordionFlushExample">
+              {% for docs in site.data.docs %}
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="flush-heading{{docs.number}}">
+                  <button id="faq-title" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{docs.number}}" aria-expanded="false" aria-controls="flush-collapse{{docs.number}}">
+                    <h4 class="doc-heading">{{ docs.name }}</h4>
+                  </button>
+                </h2>
+                  <div id="flush-collapse{{docs.number}}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{docs.number}}" data-bs-parent="#accordionFlushExample">
+                    {% for doc in site.docs %}
+                      {% if doc.section == docs.name %}
+                        <li>
+                          <h5>
+                            {% assign foo = docs.name %}
+                            <a
+                              class="doc-link"
+                              href={% include relative-src.html src=doc.url %}
+                              >{{ doc.title }}</a
+                            >
+                          </h5>
+                        </li>
+                      {% endif %}
+                    {% endfor %}
+                  </div>
+                </div>
+                {% endfor %}
+            </div>
           </ul>
         </div>
       </nav>