pages output in styleguide

stoplion commented 9 years ago

Text that looks like a list of html generated with Hologram is output in generated styleguide in a div with class name styleguide:

Screenshots of the output:

In header.html

<div>
  <div class="style-guide-banner">
    <div class="container centered">
      <h3>My Style Guide</h3>
    </div>
  </div>
</div>

<div class="container">
  <section class="content col-xs-12 col-sm-9">
    <h3 class="styleguide-header">
      <% if file_name.include?('index.html') %>
        <%= @config["index"] %>
      <% else %>
        <%= title %>
      <% end %>
    </h3>
    <hr class="trailer-mg-lg" />

In footer.html

  </section>

  <div class="col-xs-12 col-sm-3">
    <ul class="list-group styleguide-links">
      <% @categories.each do |category, file_name| %>
        <li class="list-group-item">
          <a href="/styleguide/<%= file_name %>" data-category="<%= category.gsub(' ', '_') %>">
            <%= category %>
          </a>
        </li>
      <% end %>
    </ul>
  </div>

</div> <!-- container -->

<link rel="stylesheet" href="/assets/styleguide/styleguide.css">
<link rel="stylesheet" href="/assets/styleguide/pygments.css">
<script type="text/javascript" src="/assets/styleguide_helper.js"></script>

jdcantrell commented 9 years ago

Hmm, that is strange. I don't see anything offhand that appears incorrect. Can you share more details? The full generated html and the source for one of the sections might be a good starting point.

stoplion commented 9 years ago

This is the header section

<div>
  <div class="jumbotron subNav style-guide-banner">
    <div class="container centered">
      <h3 class="white">Upstart Style Guide</h3>
    </div>
  </div>
</div>

<div class="container">

  <section class="content col-xs-12 col-sm-9">
    <h3 class="styleguide-header">
      <% if file_name.include?('index.html') %>
        <%= @config["index"] %>
      <% else %>
        <%= title %>
      <% end %>
    </h3>
    <hr class="trailer-mg-lg" />

This is the footer section

</section>

  <div class="col-xs-12 col-sm-3">
    <ul class="list-group styleguide-links">
      <% @categories.each do |category, file_name| %>
        <li class="list-group-item">
          <a href="/styleguide/<%= file_name %>" data-category="<%= category.gsub(' ', '_') %>">
            <%= category %>
          </a>
        </li>
      <% end %>
    </ul>
  </div>

</div> <!-- container -->

<link rel="stylesheet" href="/assets/styleguide/styleguide.css">
<link rel="stylesheet" href="/assets/styleguide/pygments.css">
<script type="text/javascript" src="/assets/styleguide_helper.js"></script>

Here is an example of the output for our "Alert" Section of the styleguide:


<div>
  <div class="jumbotron subNav style-guide-banner">
    <div class="container centered">
      <h3 class="white">Our Style Guide</h3>
    </div>
  </div>
</div>

<div class="container">

  <section class="content col-xs-12 col-sm-9">
    <h3 class="styleguide-header">

        alerts

    </h3>
    <hr class="trailer-mg-lg" />
<p class="styleguide">[Button Switch]: buttons.html#Button Switch
[Solid Danger Button]: buttons.html#Solid Danger Button</p><p class="styleguide">[Background and Border Colors]: colors.html#Background and Border Colors
[Main Colors]: colors.html#Main Colors
[Basic Table]: table.html#Basic Table
[Bold Horizontal Rule]: rules.html#Bold Horizontal Rule
[Dashed Horizontal Rule]: rules.html#Dashed Horizontal Rule
[Horizontal Rule]: rules.html#Horizontal Rule
[Button Default]: basics.html#Button Default
[Description Lists]: lists.html#Description Lists
[Flash Messages]: alerts.html#Flash Messages</p><p class="styleguide">[Progress Bar]: widgets.html#Progress Bar</p>
<h1 id="Flash Messages" class="styleguide"></h1>
<div class="codeExample">
  <div class="exampleOutput">
    <div class="alert alert-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
  <div class="codeBlock">
    <div class="highlight">
      <pre><span class="nc">.alert.alert-info</span>
    <span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
    </div>
  </div>
</div>
<div class="codeExample">
  <div class="exampleOutput">
    <div class="alert alert-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
  <div class="codeBlock">
    <div class="highlight">
      <pre><span class="nc">.alert.alert-danger</span>
    <span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
    </div>
  </div>
</div>
<div class="codeExample">
  <div class="exampleOutput">
    <div class="alert alert-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
  <div class="codeBlock">
    <div class="highlight">
      <pre><span class="nc">.alert.alert-warning</span>
    <span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
    </div>
  </div>
</div>
<div class="codeExample">
  <div class="exampleOutput">
    <div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
  <div class="codeBlock">
    <div class="highlight">
      <pre><span class="nc">.alert.alert-success</span>
    <span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
    </div>
  </div>
</div>
  </section>

  <div class="col-xs-12 col-sm-3">
    <ul class="list-group styleguide-links">

        <li class="list-group-item">
          <a href="/styleguide/buttons.html" data-category="buttons">
            buttons
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/typography.html" data-category="typography">
            typography
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/icons.html" data-category="icons">
            icons
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/form_elements.html" data-category="form_elements">
            form elements
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/colors.html" data-category="colors">
            colors
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/table.html" data-category="table">
            table
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/rules.html" data-category="rules">
            rules
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/basics.html" data-category="basics">
            basics
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/lists.html" data-category="lists">
            lists
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/alerts.html" data-category="alerts">
            alerts
          </a>
        </li>

        <li class="list-group-item">
          <a href="/styleguide/widgets.html" data-category="widgets">
            widgets
          </a>
        </li>

    </ul>
  </div>

</div> <!-- container -->

<link rel="stylesheet" href="/assets/styleguide/styleguide.css">
<link rel="stylesheet" href="/assets/styleguide/pygments.css">
<script type="text/javascript" src="/assets/styleguide_helper.js"></script>

Yea it might be something I am doing, but it didn't output this before..

The only new thing I've done recently is updated the gem and switched from HTML to SLIM examples.

stoplion commented 9 years ago

Seems like adding underscore to name has an effect on this. name: Flash Messages to name: Flash_Messages

trulia / hologram

pages output in styleguide #229