happy-little-trees

Happy Little Trees is a style guide with auto-generating code samples and on-page nav.

Currently, HLT has some pretty strict requirements that mesh well with our workflow. We may make it more customizable if demand arises.

Installation

npm i -S vue
npm i -D happy-little-trees

If you don't use Vue in your project, you can save it as a dev dependency instead.

Usage

Create a JavaScript file with the following contents and include it in your document:

import hlt from 'happy-little-trees';
import Vue from 'vue';
 
window.vm = new Vue(hlt);

hlt is an object prepped for a Vue instance. If you need to change/add anything, do so like this:

import HexTabs from 'vue-hex-tabs';
import hlt     from 'happy-little-trees';
import Vue     from 'vue';
 
hlt.components = {
  HexTabs:         HexTabs.HexTabs,
  HexTabList:      HexTabs.HexTabList,
  HexTab:          HexTabs.HexTab,
  HexTabPanelList: HexTabs.HexTabPanelList,
  HexTabPanel:     HexTabs.HexTabPanel,
};
 
hlt.data = {...};
 
window.vm = new Vue(hlt);

Note: When generating code samples, HLT checks for Hex components. If any are found, it'll use Hex Tabs to display the code. One tab for the Vue component markup, and one for the rendered Vue component (standard HTML). If you have your own components, make sure to include Hex Tabs in there as shown above.

Markup

In order for HLT to work, your markup will need to look something like this:

<header class="header-primary">
  <nav>
    <a href="/style-guide" class="logo">Style Guide</a>
    <ol>
      <li><a href="some-page">Some Page</a></li>
      <li><a href="kitchen-sink">Kitchen Sink</a></li>
    </ol>
  </nav>
</header>
 
<main>
  <section>
    <h2>Typography</h2>
    <h3>Headings</h3>
    <div class="sample">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
    </div>
 
    <h3>Body text</h3>
    <div class="sample">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
</main>

1. Anything you want an auto-generated code sample for must be in a .sample.
2. The nav is generated from all direct descendant headings in main > section. So in the above markup, "Typography," "Headings," and "Body Text" will end up in the nav, but "Heading 1" through "Heading 6" will not.
3. You need an element with the class header-primary. Once you scroll past it, the generated sidebar nav will have the class is-sticky applied to it. Which you can use to set position: fixed for a sticky nav.