big update / search engine works

Author: fzingg

app/app.js.rb

@@ -1,5 +1,8 @@
 require_tree './components'
 require_tree './stores'
+require_tree './operations'
+
+
 
 # following only required for development (find a way to build without for production)
 require 'opal_hot_reloader'

app/components/docs/docs_page.rb

@@ -1,33 +1,45 @@
 class DocsPage < Hyperloop::Router::Component
 
-  
+    
   before_mount do
     SidebarStore.hide
   end
 
   render(DIV) do
-    puts match.url
+    #puts match.url
 
-    section_name = "docs"
+    section = "docs"
     displaytitle = "Hyperloop Documentation"
 
-    sidebar = PageToc(history: params.history, location: params.location, section: section_name).as_node
-    body = PageBody(section: section_name).as_node
+    sidebar = PageToc(history: history, location: location, section: section).as_node
+    body = PageBody(section: section).as_node
 
 
-    Route('/docs/:repo', exact: true) do
-      puts "we have a repo"
-    end
-
-    Route('/docs/:repo/:file', exact: true) do
-      puts "we have a repo and file"
-    end
-
-    Route('/docs/:repo/:file/:slug', exact: true) do
-      puts "we have a repo and file and slug"
-    end
-
-    PageLayout(sidebar_component: sidebar, body_component: body, page_title: displaytitle, section: section_name, loaded: SiteStore.sections[section_name].loaded?)
+    # Route('/docs/:repo', exact: true) do
+    #   puts "we have a repo"
+    # end
+
+    # Route('/docs/:repo/:file', exact: true) do
+    #   puts "we have a repo and file"
+    # end
+
+    # Route("#{match.url}", exact: false) do |m, l, h|
+    #   puts "we have only a section name #{match.url}"
+    #   PageLayout(section: match.url, match: m, location: l, history: h) 
+    # end
+
+    # Route("#{match.url}/:page_name", exact: false) do |m, l, h|
+    #   puts "we have a section name #{match.url} and a page name"
+    #   PageLayout(section: match.url, match: m, location: l, history: h) 
+    # end
+
+    PageLayout(sidebar_component: sidebar, 
+              body_component: body, 
+              page_title: displaytitle, 
+              section: section, 
+              loaded: SiteStore.sections[section].loaded?,
+              history: history,
+              location: location)
 
   end
 

app/components/router/app_router.rb

@@ -16,14 +16,16 @@ class AppRouter < Hyperloop::Router
     DIV {
       Switch do
         Route('/', exact: true, mounts: HomePage)
-        Route('/start', exact: false, mounts: StartPage)
+        Route('/start', exact: false) { |m, l, h| StartPage(match: m, location: l, history: h) }
         Route('/installation', exact: true, mounts: InstallationPage)
         Route('/tutorials', exact: true, mounts: TutorialsPage)
         Route('/gems', exact: true, mounts: GemsPage)
         Route('/tools', exact: true, mounts: ToolsPage)
         Route('/docs', exact: false) { |m, l, h| DocsPage(match: m, location: l, history: h) }
-        
+        Route('/searchresult', exact: false) { |m, l, h| SearchResultPage(match: m, location: l, history: h) }
       end
     }
   end
+
+  
 end

app/components/searchresult/search_result_body.rb

@@ -0,0 +1,97 @@
+
+class SearchResultBody < Hyperloop::Router::Component
+  
+  param :history
+  param :location
+  param :section
+
+
+  def gotoslug slug, sectionname, pageid
+    
+    NavigationStore.mutate.slug ""
+    pagetogo = SiteStore.sections[sectionname].pages[pageid]
+    SiteStore.sections[sectionname].set_current_page pagetogo
+     
+    NavigationStore.mutate.accordionindex pageid
+    NavigationStore.mutate.slug slug
+
+    history.push "/#{sectionname}/#{pagetogo[:name]}/#{slug}"
+        
+  end
+
+  def highlight(text, search_string)
+    keywords = search_string.strip.split(" ").compact.uniq
+    matcher = Regexp.new( '(' + keywords.join("|") + ')' )
+    highlighted = text.gsub(matcher) { |match| "<a class='ui teal label'>#{match}</a>" }
+    return highlighted
+  end
+
+
+
+  render do
+    
+    DIV(class: 'searchresultcontent') do
+
+
+      
+      SearchEngineStore.allresults.each_with_index do |result, index|
+
+        resulthtmlparagraph = ""
+        resultpagename = ""
+        resultheadingname = ""
+        resultheadingslug = ""
+        resultsectionname = ""
+        resultpageid = ""
+      
+        SiteStore.sections[SearchEngineStore.previoussectionquery].pages.each_with_index do |page, index| 
+          
+          page[:headings].each do |heading|
+            if (heading[:id] == result[:ref]) 
+              resultsectionname = heading[:sectionname]
+              resultpageid = heading[:pageid]
+              resultpagename = heading[:pagename]
+              resultheadingname = heading[:text]
+              resultheadingslug = heading[:slug]
+              resulthtmlparagraph = heading[:paragraphs].join(' ')
+            end
+          end
+
+        end      
+        
+
+        H2(class: 'ui header') do
+          IMG(src: 'dist/images/icons/gear.png')
+          DIV(class: 'content') do
+          
+            A() do 
+              DIV(dangerously_set_inner_HTML: 
+                { __html: 
+                  "#{index+1}. In #{resultpagename}: #{highlight(resultheadingname, result[:matchingwords]) } <a class='ui black label'>#{result[:nbresults]} results</a>" 
+                })
+              
+            end.on(:click) { gotoslug(resultheadingslug, resultsectionname, resultpageid) }
+
+            # A(class:'ui black label') {"#{result[:nbresults]} results" } 
+
+            DIV(class: 'sub header') do
+              "_______________"
+            end
+
+          end
+          
+        end
+
+        DIV(dangerously_set_inner_HTML: { __html: highlight(resulthtmlparagraph, result[:matchingwords]) })
+        
+        BR()
+      end
+
+    end
+    
+
+  end
+
+
+
+
+end

app/components/searchresult/search_result_page.rb

@@ -0,0 +1,29 @@
+
+class SearchResultPage < Hyperloop::Router::Component
+
+  after_mount do
+    Element['html, body'].animate({
+             scrollTop: 0
+           }, :slow)
+  end
+
+  render do
+
+    section = "docs"
+    displaytitle = "Search results for { #{SearchEngineStore.querystring} }"
+
+    sidebar = SearchResultSidebar(history: history, location: location, section: section).as_node
+    body = SearchResultBody(history: history, location: location, section: section).as_node
+
+    PageLayout(sidebar_component: sidebar, 
+              body_component: body, 
+              page_title: displaytitle, 
+              section: section, 
+              loaded: true,
+              history: history,
+              location: location)
+
+  end
+
+
+end

app/components/searchresult/search_result_sidebar.rb

@@ -0,0 +1,23 @@
+
+class ReactYahooSticky < Hyperloop::Component
+  imports 'YahooSticky'
+end
+
+class SearchResultSidebar < Hyperloop::Component
+  
+  param :history
+  param :location
+  param :section
+
+  render do
+    Sem.Rail(close: true, dividing: false, position: 'left') do
+      ReactYahooSticky(enable: true, top: 50) do
+        DIV(class: 'ui sticky visible transition') do
+          H1(){"#{SearchEngineStore.nbresults} results found."}
+          H2(){"in #{SearchEngineStore.allresults.length} chapters"}
+        end
+      end
+    end
+  end
+
+end

app/components/shared/app_menu.rb

@@ -1,12 +1,13 @@
 class AppMenu < Hyperloop::Router::Component
 
   param :section
-
+  
   render do
 
     DIV(class: 'following bar fixed') do
       DIV(class: 'ui page grid') do
         DIV(class: 'column') do
+          
           DIV(class: 'ui logo shape') do
             DIV(class: 'sides') do
               DIV(class: 'active learn side') do
@@ -17,16 +18,18 @@ class AppMenu < Hyperloop::Router::Component
 
             end
           end
+
           DIV(class: 'ui inverted right floated secondary menu') do
-            DIV(class: 'item') do
-              IFRAME(class: 'github', src: 'http://ghbtns.com/github-btn.html?user=ruby-hyperloop&repo=hyperloop&type=watch&count=true', allowTransparency: 'true', frameBorder: '0', scrolling: '0', width: '100', height: '20')
-            end
+            # DIV(class: 'item') do
+            #   IFRAME(class: 'github', src: 'http://ghbtns.com/github-btn.html?user=ruby-hyperloop&repo=hyperloop&type=watch&count=true', allowTransparency: 'true', frameBorder: '0', scrolling: '0', width: '100', height: '20')
+            # end
             DIV(class: 'ui language floating dropdown link item', id: 'languages') do
               I(class: 'world icon')
               DIV(class: 'text') { 'English' }
               DIV(class: 'menu')
             end
           end
+
           DIV(class: 'ui large secondary network menu') do
             A(class: 'view-ui item') do
               I(class: 'sidebar icon')
@@ -39,11 +42,26 @@ class AppMenu < Hyperloop::Router::Component
 
             if (params.section != 'home')
               Sem.MenuItem {
-                SiteSearch(section: params.section)
+                SiteSearch(section: params.section, history: history, location: location)
+              }
+
+              Sem.MenuItem {
+                #puts "MATCH #{location.pathname == "/searchresult"}"
+                if (!(SearchEngineStore.querystring.empty?) && !(location.pathname == "/searchresult"))
+                  Sem.Button(color: 'pink') {"See results for: { #{SearchEngineStore.querystring} }"}.on(:click) do
+                    params.history.push "/searchresult"
+                  end
+                end
               }
+
             end
 
+            Sem.MenuItem {
+              IFRAME(class: 'github', src: 'http://ghbtns.com/github-btn.html?user=ruby-hyperloop&repo=hyperloop&type=watch&count=true', allowTransparency: 'true', frameBorder: '0', scrolling: '0', width: '100', height: '20')
+            }
+
           end
+
         end
       end
     end

app/components/shared/md_converter.rb

@@ -1,10 +1,18 @@
 # https://www.npmjs.com/package/marked#block-level-renderer-methods
 
 class MdConverter
-  def initialize md
+  def initialize md, sectionname, sectionid, pageid, pagename
     @md = md.gsub 'ruby runable', 'ruby-runable' #the space messes up the parsing
+    @sectionname = sectionname
+    @sectionid = sectionid
+    @pageid = pageid
+    @pagename = pagename
     @headings = []
+    @paragraphs = []
     @code_blocks = []
+
+    @headings_index = 0
+
     process
   end
 
@@ -20,9 +28,12 @@ def headings
     @headings
   end
 
+  
+
   def process
     `var renderer = new Marked.Renderer()`
     `renderer.heading = #{lambda {|text, level| on_heading(text, level)} }`
+    `renderer.paragraph = #{lambda {|text| on_paragraph(text)} }`
     `renderer.code = #{lambda {|code, lang| on_code(code, lang)} }`
     `renderer.codespan = #{lambda {|code| on_codespan(code)} }`
     `renderer.blockquote = #{lambda {|quote| on_blockquote(quote)} }`
@@ -59,11 +70,23 @@ def on_blockquote quote
 
   def on_heading text, level
     heading = {}
+    heading[:id] = "#{@sectionid}-#{@pageid}-#{@headings_index}"
+    heading[:sectionname] = @sectionname
+    heading[:pageid] = @pageid
+    heading[:pagename] = @pagename
     heading[:text] = text
     heading[:level] = level
     heading[:slug] = text.downcase.gsub(/[^\w]+/g, '-')
+    heading[:paragraphs] = []
+    @headings_index += 1
+
     @headings << heading
     "<h#{level} class='doc_h#{level} chapteranchor' id='#{heading[:slug]}'>#{text}</h#{level}>"
   end
 
+  def on_paragraph text
+    @headings[@headings_index-1][:paragraphs] << "<p>#{text}</p>"
+    "<p>#{text}</p>"
+  end
+
 end

app/components/shared/modal_dialog.rb

@@ -2,7 +2,7 @@ class ModalDialog < Hyperloop::Component
 
   render do
 
-    Sem.Modal(size: :large, open: (SearchResultModalStore.visible ? true : false)) do
+    Sem.Modal(size: :large,open: (SearchResultModalStore.visible ? true : false)) do
       Sem.ModalHeader {"Search Results: "}
       Sem.ModalContent(image: true, scrolling: true) do
         Sem.Image(size: 'massive', src: 'dist/images/hyperloop-logo-title.png', wrapped: true) {}
@@ -18,6 +18,8 @@ class ModalDialog < Hyperloop::Component
       end
     end
 
+    
+
   end
 
 end