POC for patternlab viewer: initial commit #1

sergesemashko · 2015-05-05T22:54:22Z

sergesemashko · 2015-05-06T13:12:33Z

A lot of files are just copies of patternlab, I'll mark which files should be reviewed

sergesemashko · 2015-05-06T13:13:13Z

index.js

@@ -0,0 +1,85 @@
+/**


Review this file

…ith generated files

scottnath · 2015-05-07T15:41:39Z

@sergesemashko
how do I set up patternPaths with the current pattern-library? Is it required?

sergesemashko · 2015-05-07T15:52:49Z

@scottnath all params are optional, but I would recommend pass to custom dest. Also you can provide custom HTML in patternNavHTML or generated object in patternPaths if you want custom menu, for now it's hardcoded.
Examples of usages:

// custom patternPaths object 
patternlabWrapper({
    dest: './app/public',
    patternPaths: {"category":
       {"subcategory": {"patternName1": "00-atoms-01-global-00-colors"},
      {"subcategory2": {"patternName2": "00-atoms-01-global-01-redirect"},
       ...
    }
  });

// OR custom menu html
patternlabWrapper({
    dest: './app/public',
    patternNavHTML: '<ul class="patterns-menu sg-nav">
    <li class="sg-nav-"><a class="sg-acc-handle">base</a>
        <ul class="sg-acc-panel">

            <li class="sg-nav-"><a class="sg-pop" href="app/bower_components/pattern-library/patterns/base/blockquote">Blockquote</a></li>
            <li class="sg-nav-"><a class="sg-pop" href="app/bower_components/pattern-library/patterns/base/body">Body</a></li>
        </ul>
    </li>
    </ul>'
  });

// OR with html hardcoded in _patternlab-files/partials/patterNav.twig
patternlabWrapper({
    dest: './app/public'
});

Let me know if you have any troubles/

scottnath · 2015-05-07T15:53:15Z

@sergesemashko Created this:

var patternlabWrapper = require('patternlab-wrapper');
var fs = require('fs');

var navHtml = fs.readFileSync('./menu.html');
console.log(navHtml);
patternlabWrapper({
    dest: './app/public',
    patternPaths: {"atoms":{"colors":"00-atoms-01-global-00-colors","redirect":"00-atoms-01-global-01-redirect"}},
    patternNavHTML: navHtml
});

Getting this:

Buffer 0a 20 20 3c 75 6c 20 63 6c 61 73 73 3d 22 70 61 74 74 65 72 6e 73 2d 6d 65 6e 75 22 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 6c ... >
fs.js:500
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT, no such file or directory './_patternlab-files/partials/ishControls.twig'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at Object.fs.readFileSync (fs.js:352:15)
    at patternlabWrapper (/Users/scottnath/development/gitrepos/pattern-presenter/node_modules/patternlab-wrapper/index.js:80:76)
    at Object.<anonymous> (/Users/scottnath/development/gitrepos/pattern-presenter/test.js:6:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)

sergesemashko · 2015-05-07T16:37:23Z

@scottnath something wrong with relative paths, checking locally

sergesemashko · 2015-05-07T16:52:03Z

@scottnath , that was relative path issue, I fixed it. Please, try again

scottnath · 2015-05-07T17:31:27Z

@sergesemashko

so, the links seem to be in the wrong place. When I click them, they go to the plain html file of the pattern, but not inside the PL interface.

my current code:

var patternlabWrapper = require('patternlab-wrapper');
var fs = require('fs');

var navHtml = fs.readFileSync('./app/PUBLIC/menu.html');
console.log(navHtml);
patternlabWrapper({
    dest: './app',
    patternPaths: {"atoms":{"colors":"00-atoms-01-global-00-colors","redirect":"00-atoms-01-global-01-redirect"}},
    patternNavHTML: navHtml
});

scottnath · 2015-05-07T17:33:21Z

how the html for the menu is in there...

sergesemashko · 2015-05-07T17:51:42Z

@scottnath there is some JS bound on classes to do that kind of logic.
Resulting menu should be something like this:

<ul class="patterns-menu sg-nav">
    <li>
        <a class="sg-acc-handle">base</a>
        <ul class="sg-acc-panel">

            <li ><a class="sg-acc-handle" href="PUBLIC/base/a/a.html">Anchor Link</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/blockquote/blockquote.html">Blockquote</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/body/body.html">Body</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/button/button.html">Button</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/code/code.html">Code</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/em/em.html">Em</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h1/h1.html">Heading Level 1</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h2/h2.html">Heading Level 2</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h3/h3.html">Heading Level 3</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h4/h4.html">Heading Level 4</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h5/h5.html">Heading Level 5</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/h6/h6.html">Heading Level 6</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/img/img.html">Base Image</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/label/label.html">Label</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/li/li.html">List Item</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/ol/ol.html">Ordered List</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/option/option.html">Option</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/p/p.html">Paragraph</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/pre/pre.html">Pre</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/select/select.html">Select</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/strong/strong.html">Strong</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/table/table.html">Table</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/tbody/tbody.html">Table body element</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/td/td.html">Table cell</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/test-img/test-img.html">Base Image</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/textarea/textarea.html">Textarea</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/th/th.html">Table header cell</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/thead/thead.html">Table header</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/tr/tr.html">Table row</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/base/ul/ul.html">Unordered List</a></li>
        </ul>
    </li>
    <li><a class="sg-acc-handle">uncategorized</a>
        <ul class="sg-acc-panel">
            <li ><a class="sg-pop"  href="PUBLIC/uncategorized/generic-elm-h2/generic-elm-h2.html">Heading Level 2 Generic H2</a></li>
        </ul>
    </li>
    <li>
        <a class="sg-acc-handle">components</a>
        <ul class="sg-acc-panel">
            <li ><a class="sg-acc-handle" href="PUBLIC/components/figure-image/figure-image.html">Figure Image</a></li>
            <li ><a class="sg-acc-handle" href="PUBLIC/components/message/message.html">Message</a></li>
        </ul>
    </li>
</ul>

This is updated twig template with classes for menu (insert links into href attributes if something is missing):

{% if categories is not empty %}
    <ul class="patterns-menu sg-nav">
        {% for key,value in categories %}
            {% if value.patterns is not empty %}
                <li>
                    <a href="#" class="sg-acc-handle">{{key}}</a>
                    <ul class="sg-acc-panel">
                        {% if value.subcategories is not empty %}
                            {% for key,value in value.subcategories %}
                                {% if value.patterns is not empty %}
                                    <li>
                                        <a href="#" class="sg-acc-handle">{{key}}</a>
                                        <ul class="sg-acc-panel">
                                            {% for item in value.patterns %}
                                                <li><a class="sg-pop" href="{{item.url}}">{{item.name}}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        {% for item in value.patterns %}
                            <li class="sg-nav-"><a class="sg-pop" href="{{item.url}}">{{item.name}}</a></li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}
        {% endfor %}
    </ul>
{% endif %}

also both _patterns and index.html should be in the same folder and urls for patterns should be relative to public folder:

public/
|_ index.html
|_ patterns/
    |_ pattern1/pattern.html // URL should be "patterns/pattern1/pattern.html"

Let me know if that doesn't work.

scottnath · 2015-05-07T18:53:10Z

@sergesemashko didn't work. I've got the links right, but it just repeats the main interface, so then it just starts to double up.

Is there any way you could simplify this? We really need drop-in solutions for all of these pieces.

sergesemashko · 2015-05-07T19:42:26Z

@scottnath, simpler solution will be to combine this repo with pattern-presenter and generate view in pattern-presenter only. I can start looking into that. What do you think?

scottnath · 2015-05-07T19:53:55Z

@sergesemashko that seems like a possible solution, but really all of this patternlab code seems like very excessive overkill. Other than the familiar interface, what are we gaining brining all this in?

Is something like this pull request workable? What do we lose with a basic version like that (other than the styling of the interface?)

sergesemashko · 2015-05-07T20:04:56Z

Speaking about POC - we do not lose anything. But, obviously, it would be hard to use the tool without some interface features.

scottnath · 2015-05-07T20:21:22Z

@sergesemashko agreed. But maybe we can keep it simple and still have an interface. This is what my PR creates:

http://pattern-library.github.io/

it is ugly, but it is simple.

POC for patternlab viewer: initial commit

6a5895b

sergesemashko reviewed May 6, 2015
View reviewed changes

index.js

@@ -0,0 +1,85 @@

/**

Copy link

Contributor Author

sergesemashko May 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review this file

sergesemashko added 2 commits May 6, 2015 17:04

Updated patternNav.twig, Added more examples, removed public folder w…

f368cf9

…ith generated files

Updated README.md

f4c7cf2

Change folders to absolute paths

b378ec4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

POC for patternlab viewer: initial commit #1

POC for patternlab viewer: initial commit #1

sergesemashko commented May 5, 2015

sergesemashko commented May 6, 2015

sergesemashko May 6, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

POC for patternlab viewer: initial commit #1

Are you sure you want to change the base?

POC for patternlab viewer: initial commit #1

Conversation

sergesemashko commented May 5, 2015

sergesemashko commented May 6, 2015

sergesemashko May 6, 2015

Choose a reason for hiding this comment

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015

sergesemashko commented May 7, 2015

scottnath commented May 7, 2015