Commit 51d450d9 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Automatic creation of guides listing on main page. 

JSDuck creates HTML for the guides section, listing all the
available guides specified with --guides option, and places
the HTML in index.html inside a hidden div.

Tweaked styles to automatically adjust to fit all the guides links
to the Guides section at index page.  Previously the column-widths
were simply hard-coded.

Additionally the guides section will now be completely turned off
when no --guides option specified.
parent be455285

lib/jsduck/app.rb

+4 −3
Original line number Diff line number Diff line
@@ -86,9 +86,9 @@ module JsDuck 
      warn_globals(relations)

      warn_unnamed(relations)



      guides = Guides.new(get_doc_formatter(relations))

      @guides = Guides.new(get_doc_formatter(relations))

      if @guides_dir

        @timer.time(:parsing) { guides.parse_dir(@guides_dir) }

        @timer.time(:parsing) { @guides.parse_dir(@guides_dir) }

      end



      clear_dir(@output_dir)
@@ -109,7 +109,7 @@ module JsDuck 
        @timer.time(:generating) { write_members(@output_dir+"/output/members.js", relations) }

        @timer.time(:generating) { write_class(@output_dir+"/output", relations) }

        @timer.time(:generating) { write_overview(@output_dir+"/output/overviewData.js", relations) }

        @timer.time(:generating) { guides.write(@output_dir+"/guides") }

        @timer.time(:generating) { @guides.write(@output_dir+"/guides") }

      end



      @timer.report
@@ -306,6 +306,7 @@ module JsDuck 
      html.gsub!("{footer}", @footer)

      html.gsub!("{extjs_path}", @extjs_path)

      html.gsub!("{append_html}", @append_html)

      html.gsub!("{guides}", @guides.to_html)

      FileUtils.rm(dir+"/index.html")

      File.open(dir+"/index.html", 'w') {|f| f.write(html) }

    end

lib/jsduck/guides.rb

+30 −2
Original line number Diff line number Diff line
@@ -18,6 +18,9 @@ module JsDuck 
          parse_guide(dir)

        end

      end



      # Sort guides alphabetically

      @guides.sort! {|a, b| a[:title] <=> b[:title] }

    end



    def parse_guide(dir)
@@ -30,7 +33,7 @@ module JsDuck 
      markdown = IO.read(guide_file)

      name = File.basename(dir)

      # Treat the first line of file as title

      title = markdown.match(/^([^\n]*?)(\r?\n|$)/)[1],

      title = markdown.match(/^#\s*([^\n]*?)(\r?\n|$)/)[1]



      @formatter.doc_context = {:filename => guide_file, :linenr => 0}

      html = @formatter.format(markdown)
@@ -40,7 +43,7 @@ module JsDuck 
        :dir => dir,

        :name => name,

        :title => title,

        :icon => File.exists?(dir+"/icon.png") ? dir+"/icon.png" : nil,

        :icon => File.exists?(dir+"/icon.png"),

        :html => html,

      }

    end
@@ -59,6 +62,31 @@ module JsDuck 
      end

    end



    def to_html

      return "" if @guides.length == 0



      links = @guides.map do |g|

        style = g[:icon] ? "style='background: url(guides/#{g[:name]}/icon.png) no-repeat'" : ""

        "<a class='guide' rel='#{g[:name]}' #{style} href='#/guide/#{g[:name]}'>#{g[:title]}</a>"

      end



      # Divide to three columns: lft, mid, rgt

      col_height = (links.length / 3).ceil

      return <<-EOHTML

        <div id='guides-content' style='display:none'>

            <div class="lft">

                #{links.slice(0, col_height).join("\n")}

            </div>

            <div class="mid">

                #{links.slice(col_height, col_height).join("\n")}

            </div>

            <div class="rgt">

                #{links.slice(col_height*2, col_height).join("\n")}

            </div>

        </div>

      EOHTML

    end



  end



end

template/app/view/index/Container.js

+12 −24
Original line number Diff line number Diff line
@@ -25,30 +25,15 @@ Ext.define('Docs.view.index.Container', { 
                    '<li class="icon icon-guide">Guide</li>',

                '</ul>',

            '</div>',

            '<tpl if="guides">',

                '<div class="section guides">',

                    '<h1>Guides</h1>',

                '<div class="lft">',

                    '<a class="guide" rel="getting_started" href="#/guide/getting_started">Getting Started</a>',

                    '<a class="guide" rel="class_system" style="background: url(guides/class_system/icon.png) no-repeat" href="#/guide/class_system">Class System</a>',

                    '<a class="guide" rel="application_architecture" style="background: url(guides/application_architecture/icon.png) no-repeat" href="#/guide/application_architecture">MVC Architecture</a>',

                    '<a class="guide" rel="layouts_and_containers" style="background: url(guides/layouts_and_containers/icon.png) no-repeat" href="#/guide/layouts_and_containers">Layouts and Containers</a>',

                '</div>',

                '<div class="mid">',

                    '<a class="guide" rel="data" style="background: url(guides/data/icon.png) no-repeat" href="#/guide/data">Data</a>',

                    '<a class="guide" rel="grid" style="background: url(guides/grid/icon.png) no-repeat" href="#/guide/grid">Grids</a>',

                    '<a class="guide" rel="tree" style="background: url(guides/tree/icon.png) no-repeat" href="#/guide/tree">Trees</a>',

                    '<a class="guide" rel="drawing_and_charting" style="background: url(guides/drawing_and_charting/icon.png) no-repeat" href="#/guide/drawing_and_charting">Charts</a>',

                '</div>',

                '<div class="rgt">',

                    '<a class="guide" rel="forms" style="background: url(guides/forms/icon.png) no-repeat" href="#/guide/forms">Forms</a>',

                    '<a class="guide" rel="components" style="background: url(guides/components/icon.png) no-repeat" href="#/guide/components">Components</a>',

                    '<a class="guide" rel="theming" style="background: url(guides/theming/icon.png) no-repeat" href="#/guide/theming">Theming</a>',

                    '<a class="guide" rel="direct" style="background: url(guides/direct/icon.png) no-repeat" href="#/guide/direct">Direct</a>',

                '</div>',

                    '{guides}',

                    '<div class="examples">',

                        '<a href="http://dev.sencha.com/deploy/ext-4.0.2a/examples/index.html">View the Ext 4.0 examples &rarr;</a>',

                    '</div>',

                '</div>',

            '</tpl>',

            '<tpl for="organisation">',

                '<div class="section classes">',

                    '<h1>{name}</h1>',
@@ -75,11 +60,14 @@ Ext.define('Docs.view.index.Container', { 
        );



        var notice = Ext.get("notice-text");

        var guides = Ext.get("guides-content");

        this.html = tpl.apply(Ext.apply({

            // Use the same title as in <title>

            title: Ext.query("title")[0].innerHTML,

            // If page contains div with notice-text extract the text and show it as notice

            notice: notice && notice.dom.innerHTML

            notice: notice && notice.dom.innerHTML,

            // Extract guides

            guides: guides && guides.dom.innerHTML

        }, data));



        this.callParent(arguments);

template/index.html

+1 −0
Original line number Diff line number Diff line
@@ -36,6 +36,7 @@ 
        <input type="hidden" id="x-history-field" />

        <iframe id="x-history-frame"></iframe>

    </form>

    {guides}

    <div id="footer-content" style="display: none">{footer}</div>

    {append_html}

</body>

template/resources/sass/viewport.scss

+4 −10
Original line number Diff line number Diff line
@@ -322,21 +322,14 @@ a { 
        display: block; } }

    // Guides section at top left

    &.guides {

      padding: 15px;

      width: 560px;

      padding: 15px 35px 15px 15px;

      line-height: 1.7em;

      float: left;

      h1 {

        font-size: 1.7em !important; }

      .lft {

        float: left;

        width: 200px;

        margin-left: 20px }

      .mid {

      .lft, .mid, .rgt {

        float: left;

        width: 100px;

        margin-left: 20px; }

      .rgt {

        margin-left: 370px; }

      a {

        display: block;

        height: 32px;
@@ -344,6 +337,7 @@ a { 
        padding-left: 40px; }

      // Link to examples

      .examples {

        clear: both;

        border-top: 1px solid #ebebeb;

        a {

          padding-left: 10px;