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 vuenpm 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:
;; windowvm = hlt;
hlt
is an object prepped for a Vue instance. If you need to change/add anything, do so like this:
;;; hltcomponents = HexTabs: HexTabsHexTabs HexTabList: HexTabsHexTabList HexTab: HexTabsHexTab HexTabPanelList: HexTabsHexTabPanelList HexTabPanel: HexTabsHexTabPanel; hltdata = ...; windowvm = 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:
Style Guide Some Page Kitchen Sink Typography Headings Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Body text 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.
- Anything you want an auto-generated code sample for must be in a
.sample
. - 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. - You need an element with the class
header-primary
. Once you scroll past it, the generated sidebar nav will have the classis-sticky
applied to it. Which you can use to setposition: fixed
for a sticky nav.