adjusted docs app to new content structure

Author: jonasjabari

app/controllers/docs_app_controller.rb

@@ -9,16 +9,21 @@ def api
     render Docs::Pages::Api
   end
 
-  def components
-    render Docs::Pages::Components
+  def components_api
+    render Docs::Pages::ComponentsApi
+  end
+
+  def api
+    render Docs::Pages::BaseApi
+  end
+
+  def base_api
+    render Docs::Pages::BaseApi
   end
 
   def guides
     render Docs::Pages::Guides
   end
 
-  def spec
-    render Docs::Pages::Spec
-  end
 
 end

app/javascript/css/custom-bootstrap.scss

@@ -34,6 +34,7 @@ body {
 }
 
 #hero {
+  min-height: 160px;
   background-color: $m_light_grey;
 }
 

app/matestack/components/header.rb

@@ -6,7 +6,7 @@ def response
         button class: 'navbar-toggler', type: 'button', attributes: {"v-bind:class": "{ \"expanded-toggler\": open }", "@click": "sidebarToggle"} do
           img path: 'menu/arrow.svg', class: 'left-closed'
         end
-        link class: 'navbar-brand my-0 p-0', path: :root_path do
+        link class: 'navbar-brand my-0 p-0', path: "https://matestack.io" do
           img alt: 'matestack high quality software, simply delivered', path: 'logo/matestack_logo_orange.png', class: 'd-none d-sm-block'
           img alt: 'matestack high quality software, simply delivered', path: 'logo/matestack_logo_symbol.png', class: 'symbol d-block d-sm-none'
         end
@@ -17,23 +17,24 @@ def response
         div id: 'navbarSupportedContent', class: 'collapse navbar-collapse', attributes: {"v-bind:class": "{ \"show\": expanded }"} do
           ul class: 'navbar-nav nav-pills ml-auto align-items-center' do
             li class: 'nav-item' do
-              transition class: "nav-link #{active_class(:guides)}",
+              link class: "nav-link #{active_class(:guides)}",
               path: :guides_path,
               params: { key: 'README.md' },
               text: 'Guides'.upcase
             end
             li class: 'nav-item' do
-              transition class: "nav-link #{active_class(:components)}",
-              path: :api_path,
+              link class: "nav-link #{active_class(:components)}",
+              path: :components_api_path,
               params: { key: 'README.md' },
-              text: 'Api'.upcase
+              text: 'Components API'.upcase
             end
             li class: 'nav-item' do
-              transition class: "nav-link #{active_class(:spec)}",
-              path: :spec_path,
-              params: { key: 'usage/README.md' },
-              text: 'Specs'.upcase
+              link class: "nav-link #{active_class(:components)}",
+              path: :base_api_path,
+              params: { key: 'README.md' },
+              text: 'Base API'.upcase
             end
+
             # TODO: Add button links for "sponsor"/"book us"
           end
         end

app/matestack/components/header.scss

@@ -32,7 +32,7 @@ header {
   .nav-link {
     font-family: "Geometrica";
     color: $m_dark;
-    font-size: 14px;
+    font-size: 11px;
     letter-spacing: 1.14px;
     line-height: 28px;
     text-align: center;

app/matestack/components/md.scss

@@ -1,6 +1,8 @@
 .markdown-content {
 	margin-top: 40px;
 	h1 {
+		margin-top: -116px;
+		margin-bottom: 30px;
     font-size: 26px;
     line-height: 48px;
 	}

app/matestack/components/sidebar.rb

@@ -11,93 +11,75 @@ def prepare
 
     # TODO: Refactor below to work fine with new doc/api/guides structure! (esp. add /docs/ prefix to @github_component_docs_path)
     case @current_path
-    when root_path
-      # what shall we display inside side nav on home page?
-    when components_path
-      @github_component_docs_path = "#{@github_base_api_url}/docs/components"
-      @tree = ::Rails.cache.fetch("components_remote_#{options[:path]}", expires_in: 1.hours) do
-        JSON.parse(RestClient.get(@github_component_docs_path).body)
-      end
-
-    when guides_path
-      @github_component_docs_path = "#{@github_base_api_url}/guides"
-      @tree = ::Rails.cache.fetch("guides_remote_#{options[:path]}", expires_in: 1.hours) do
+    when base_api_path
+      @github_component_docs_path = "#{@github_base_api_url}/docs/api/1-base"
+      @tree = ::Rails.cache.fetch("base_remote_#{options[:path]}", expires_in: 1.hours) do
         JSON.parse(RestClient.get(@github_component_docs_path).body)
       end
-    when spec_path
-      @github_component_spec_path = "#{@github_base_api_url}/spec/usage/components"
-      @tree = ::Rails.cache.fetch("spec_components_remote_#{options[:path]}", expires_in: 1.hours) do
-        JSON.parse(RestClient.get(@github_component_spec_path).body)
+      if @tree
+        @tree.each do |item|
+          if item["type"] == "file"
+            @file_doc_links << item
+          end
+        end
       end
-
-      # TODO: missing "when"?
-      @github_concept_specs_path = "#{@github_base_api_url}/spec/usage/base"
-      @concept_specs_links = []
-      @tree_spec_base = ::Rails.cache.fetch("spec_base_remote_#{options[:path]}", expires_in: 1.hours) do
-        JSON.parse(RestClient.get(@github_concept_specs_path).body)
+      @file_doc_links.sort_by! { |item| item['name'].scan(/\d+/).first.to_i }
+    when components_api_path
+      @github_component_docs_path = "#{@github_base_api_url}/docs/api/2-components"
+      @tree = ::Rails.cache.fetch("components_remote_#{options[:path]}", expires_in: 1.hours) do
+        JSON.parse(RestClient.get(@github_component_docs_path).body)
       end
-      @tree_spec_base.each do |item|
-        if item["type"] == "file"
-          @concept_specs_links << item
+      if @tree
+        @tree.each do |item|
+          if item["type"] == "file"
+            @file_doc_links << item
+          end
         end
       end
-    else
-      # TODO: refactor home page sidebar links
-      if @current_page.starts_with?("/docs") && !@current_page.starts_with?("/docs/components")
-        @menu_links = ["install", "concepts", "components", "integrations", "tooling", "extend", "architecture", "contribute"]
-        @file_doc_links = []
+      @file_doc_links.sort_by! { |item| item['name'].scan(/\d+/).first.to_i }
+    when guides_path
+      @github_component_docs_path = "#{@github_base_api_url}/docs/guides"
+      @tree = ::Rails.cache.fetch("guides_remote_#{options[:path]}", expires_in: 1.hours) do
+        JSON.parse(RestClient.get(@github_component_docs_path).body)
       end
-    end
-    if @tree
-      @tree.each do |item|
-        if item["type"] == "file"
-          @file_doc_links << item
+      if @tree
+        @tree.each do |item|
+          if item["type"] == "dir"
+            @file_doc_links << item
+          end
         end
       end
+      @file_doc_links.sort_by! { |item| item['name'].scan(/\d+/).first.to_i }
     end
+
   end
 
   def response
-    components {
-      div id: 'custom-sidebar', class: 'container-fluid' do
-        nav id: 'wrapper', class: 'bg-dark sidebar pt-5' do
-          div class: 'sidebar-sticky menu' do
-            ul id: 'listGroup', class: 'list-group list-group-flush' do
-              case @current_path
-              when '/'
-                # TODO: add content for sidebar on start page
-              when components_path
-                partial :side_title, 'components'
-                @file_doc_links.each do |item|
-                  partial :transition_link, :components_path, { key: item['name'],  }, item['name'].gsub(".md", "")
-                end
-              when guides_path
-                partial :side_title, 'guides'
-                @file_doc_links.each do |item|
-                  partial :transition_link, :guides_path, { key: item['name'],  }, item['name'].gsub(".md", "")
-                end
-              when spec_path
-                partial :side_title, 'concept specs'
-                @concept_specs_links.each do |item|
-                  partial :transition_link, :spec_path, { key: "usage/base/#{item['name']}" }, item['name'].gsub("_spec.rb", "")
-                end
-                partial :side_title, 'component specs'
-                @file_doc_links.each do |item|
-                  partial :transition_link, :spec_path, { key: "usage/components/#{item['name']}" }, item['name'].gsub("_spec.rb", "")
-                end
-              else
-                partial :side_title, 'documentation'
-                if @current_page.starts_with?("/docs") && !@current_page.starts_with?("/docs/components")
-                  @menu_links.each do |item|
-                    partial :transition_link, :docs_path, { key: item }, item
-                  end
-                end
+    div id: 'custom-sidebar', class: 'container-fluid' do
+      nav id: 'wrapper', class: 'bg-dark sidebar pt-5' do
+        div class: 'sidebar-sticky menu' do
+          ul id: 'listGroup', class: 'list-group list-group-flush' do
+            case @current_path
+            when base_api_path
+              partial :side_title, 'base api'
+              @file_doc_links.each do |item|
+                partial :transition_link, :base_api_path, { key: item['name'],  }, item['name'].gsub(".md", "")
+              end
+            when components_api_path
+              partial :side_title, 'components api'
+              @file_doc_links.each do |item|
+                partial :transition_link, :components_api_path, { key: item['name'],  }, item['name'].gsub(".md", "")
+              end
+            when guides_path
+              partial :side_title, 'guides'
+              @file_doc_links.each do |item|
+                partial :transition_link, :guides_path, { key: "#{item['name']}/README.md"  }, item['name'].split("-").last.humanize.camelcase
               end
             end
           end
         end
       end
-    }
+    end
   end
 
   private

app/matestack/docs/app.rb

@@ -4,9 +4,9 @@ def response
     docs_header
     main class: 'pt-5' do
       docs_sidebar currentPage: context[:request].path
-      page_content
+      yield_page
     end
-    docs_footer
+    # docs_footer
   end
 
 end

app/matestack/docs/pages/api.rb

@@ -6,7 +6,7 @@ def prepare
     # Final TODO: change branch to master
     # Final TODO: change line below to call GitHub API like in sidebar (?)
     @github_base_url = 'https://raw.githubusercontent.com/matestack/matestack-ui-core'
-    @branch = '06_07_2020_pwengerter_update_guides'
+    @branch = 'master'
     case context[:params][:format]
     when 'md'
       @file = context[:params][:key] + '.md'
@@ -30,8 +30,8 @@ def hero
       div class: 'container' do
         div class: 'row py-3' do
           div class: 'col-md-4 offset-md-3 col-12' do
-            heading size: 2, class: 'my-3 pr-3', text: @file.gsub('.md', '').gsub('.rb', '').gsub('/README', '').camelcase
-            heading size: 5, class: 'my-3', text: @sub_title.upcase
+            # heading size: 2, class: 'my-3 pr-3', text: @file.gsub('.md', '').gsub('.rb', '').gsub('/README', '').camelcase
+            # heading size: 5, class: 'my-3', text: @sub_title.upcase
           end
         end
       end

app/matestack/docs/pages/base.rb

@@ -0,0 +1,7 @@
+class Docs::Pages::BaseApi < Docs::Pages::Base
+  def prepare
+    super
+    @github_api_md_path = "#{@github_base_url}/#{@branch}/docs/api/1-base/#{@file}"
+    @sub_title = "Base API Documentation"
+  end
+end

app/matestack/docs/pages/base_api.rb

@@ -0,0 +1,7 @@
+class Docs::Pages::ComponentsApi < Docs::Pages::Base
+  def prepare
+    super
+    @github_api_md_path = "#{@github_base_url}/#{@branch}/docs/api/2-components/#{@file}"
+    @sub_title = "Components API Documentation"
+  end
+end

app/matestack/docs/pages/components_api.rb

@@ -15,7 +15,7 @@
   </head>
 
   <body>
-    <div id="matestack_ui">
+    <div id="matestack-ui">
       <%= yield %>
     </div>
   </body>