Generate Navigation Tree

Author: GeorgeBerdovskiy

app/controllers/articles_controller.rb

@@ -28,10 +28,44 @@ def markdown(text)
   def index
     @parent_path = request.path
     puts "PATH = " + @parent_path
+    puts File.basename(Dir.getwd)
+    @nav_tree = walk("./app/markdown", "")
+    puts @nav_tree
+  end
+
+  def titleize(name)
+    lowercase_words = %w{a an the and but or for nor of}
+    name.split.each_with_index.map{|x, index| lowercase_words.include?(x) && index > 0 ? x : x.capitalize }.join(" ")
+  end
+
+  def walk(start, parent)
+    temp_hash = {}
+
+    Dir.foreach(start) do |x|
+      path = File.join(start, x)
+      if x == "." or x == ".."
+        next
+      elsif File.directory?(path)
+        # puts path + "/" # remove this line if you want; just prints directories
+        name = titleize(x.gsub('-', ' '))
+        temp_hash[name] = walk(path, parent + "_" + x)
+      else
+        # Convert path to name
+        name = titleize(x[0..-4].gsub('-', ' '))
+
+        temp_hash[name] = parent + '_' + x[0..-4]
+
+        if parent == ""
+          temp_hash[name] = name
+        end
+      end
+    end
+
+    temp_hash
   end
 
   def open_article
-    title = Rails.root.to_s + "/app/markdown/" + params[:title] + ".md"
+    title = Rails.root.to_s + "/app/markdown/" + params[:title].gsub('_', '/') + ".md"
     @content = markdown(File.read(title))
   end
 

app/javascript/controllers/articles/page_controller.js

@@ -10,7 +10,7 @@ export default class extends Controller {
 
     // Account for empty fragment
     if (fragment === "" || fragment === undefined) {
-      window.location.hash = "getting-started";
+      window.location.hash = "getting-started_index";
       fragment = window.location.hash.split("#")[1];
     }
 

app/markdown/chart-styling.md renamed to app/markdown/chart-styling/index.md

@@ -0,0 +1,2 @@
+# Bar Chart
+Words go here.

app/markdown/contribution.md renamed to app/markdown/contribution/index.md

@@ -0,0 +1,2 @@
+# Types of Charts
+This is about types of charts.

app/markdown/getting-started.md renamed to app/markdown/getting-started/index.md

@@ -0,0 +1,2 @@
+# Pie Chart
+Words go here.

app/markdown/types-of-charts.md

@@ -10,10 +10,15 @@
             </div>
 
             <div class='links padding-top'>
-                <%= button_tag "Getting Started", id: "getting-started", class: "nav-button getting-started", data: { action: "click->articles--page#navigate" } %>
-                <%= button_tag "Types of Charts", id: "types-of-charts", class: "nav-button types-of-charts", data: { action: "click->articles--page#navigate" } %>
-                <%= button_tag "Chart Styling", id: "chart-styling", class: "nav-button chart-styling", data: { action: "click->articles--page#navigate" } %>
-                <%= button_tag "Contribution", id: "contribution", class: "nav-button contribution", data: { action: "click->articles--page#navigate" } %>
+                <% @nav_tree.each do |key, value| %>
+                    <%= button_tag key, id: value["Index"], class: "nav-button #{value}", data: { action: "click->articles--page#navigate" } %>
+
+                    <% value.each do |skey, svalue| %>
+                        <% if skey != "Index" %>
+                            <%= button_tag skey, id: svalue["Index"], class: "nav-button #{svalue}", data: { action: "click->articles--page#navigate" } %>
+                        <% end %>
+                    <% end %>
+                <% end %>
             </div>
         </div>
 
@@ -56,7 +61,3 @@
         </div>
     </div>
 </div>
-
-<script>
-
-</script>