fbrctr/fabricator-assemble

The assembly engine behind Fabricator

fabricator-assemble's Issues

Order of materials that mix folders and files not working

When I have something like this in fabricator:

materials
-- products
----01- listings
------- core.html
---- 02-something.html
---- 03.else.html

Fabricator is returning it in this order:

• Something
• Else
• Listings

Instead of in the proper order.

JSON files inside "views" folder getting converted to HTML

Hello,

We're experiencing kind of a strange issue. Inside the "views" folder we have a "services" folder with a few .json files in it. They're being referenced via AJAX. Upon running fabricator-assemble, these files are being converted to HTML files in our compiled "dist" folder. We are using a layout for these JSON files that simply consists of {% body %} Any thoughts on how we can get these to remain JSON files upon compiling? Or are all files in the "views" folder treated as HTML only? Thanks!

Material modifiers

Is it possible to allow modifiers to be passed into materials when being used in views? It would be pretty helpful, as currently I have the same material repeated 5 times just to show the variations of it.

Following on from this, it would be awesome if the styleguide actually showed {{modifier}} in the live preview, and below between the notes and live preview - listed the possible modifiers.

Possible to ignore partial?

I have a couple of helper partials that have no visual output but are just logic to direct other partials. Is there either a param I can set to ignore rendering a folder into the compiled front end view (it could be called util or some such) or is there a param to use in the front-matter to keep the file as a partial but nor render it?

Thank you!

assemble output going into /dist/src/views/

Hi, I've been loving working with fabricator and have scaffolded a new project with the latest generator.

Have noticed that the assemble task is placing output in /dist/src/view, and in the context of running fabricator, the only localhost output in the browser is Cannot GET /

Was wondering if an issue might have been introduced recently. Supplying a config param with the output folder still contained the output in src/views/.

Transfer *.JSON file from .src to .dist folder

Hello,

I,m working on a task with fabricator included.
I have one module which uses .JSON file. This JSON is into .src/data/myJSONFile.JSON. But this folder doesn't copy into .dist folder. And my .JSON file does,n read and render.
Is there way to copy the data folder into .dist folder.

Good Day !

Nested subdirectories flatten out

In my views I have a couple of nested subdirectories, on build to dest these flatten out to the top level.

Any idea how this can be avoided?

Ta

Allow custom material front-matter to be more accessible in Fabricator templates

Currently, parseMaterials() separates notes from the front-matter, treating them differently than other "custom" properties. They are available within the Fabricator templates as {{notes}}, but other properties are namespaced to the material. This makes it unclear how to lookup custom material data from the Fabricator templates.

An example use case:

You want to provide a list of documentation links specific to each material, and normalize the way they're displayed in the includes/f-item.html template.

notes: |
  These are notes associated with this `button` component.
external_docs:
  - url: http://example.com
    title: External Docs
  - url: http://example.com
    title: More External Docs

Accessing external_docs from within the Fabricator UI templates can apparently be done via {{@root.material-name.external_docs}}, but simply {{external_docs}} would be nicer.

I'm not sure if there is some possible combination of @root and @key that would provide the correct path without needing to explicitly reference the material name, but I was unable to find one. Using {{@[email protected]}} resulted in errors.

What if you could supply an array of keys to be relocated in the same way notes are?

assemble({
  localDataIncludes: ['notes', 'external_docs']
});

Is it feasible to allow something like this to be passed along as an option to assemble()? The array of keys could also be used in _.omit() FWIW.

error logs in fabricator-assemble

Is there a way to see in the error log which file or line of code causes the assemble task to fail? Would be a very useful enhancement imho.

Data not being parsed in nested partials

Data is not being parsed when I include it in third level nested partials.

For instance, if I include {{baseurl}} in partial img, it will work, if I nest that partial in another partial tile it will still work but if I next tile in a third partial tile-list then the baseurl stops working in img.

This applies for data in the data folder also.

Show file name when template compiled with error

Compilation error message confuse user because file path or name is not presented in error message.

subfolder limit?

Is there a way to have more subfolders (levels) in materials? Or, if not, can you help me and tell me where i can change myself?

Now I have the following structure:

└── materials
    ├── atoms
    │   └── buttons
    │       ├── default.html
    │       └── sizes.html
    └── molecules

Structure i need (1 or more levels):

└── materials
    ├── group1
    │   └── atoms
    │       └── buttons
    │           ├── default.html
    │           └── sizes.html
    └── group2

Handlebars compile options (preventIndent)

I've been having problems with indentation in the code snippet preview and to fix this I have to pass preventIndent as an option into the Handlebars compile method.

is it possible to pass options via the gruntfile/gulpfile?

Orginal

Without preventIndent=true and beautifier.indent_with_tabs= true

With preventIndent=true and beautifier.indent_with_tabs= true

Layouts and data usage

Hey, sorry if this is a stupid question but I'm a bit confused as to the usage of Layouts. I'm trying to get my head around using Fabricator in a more data driven way.

What are they used for if all of the content is simply inserted into the body? It might just be a terminology thing, but when I think of layouts I'm thinking of maybe a single, dual etc grid layout and being able to specify the content for the main section, aside etc

Thanks
Chris

Fabricator Stopped Working

I`ve created a simple project following the basic structure to use fabricator-assemble. Everything was working great. But suddenly assemble has stopped changing my html files and wasn't generating other new files.

I`m using gulp for executing assemble task.

Heres my project:
https://github.com/wellingtonamaralleitao/planilhareembolso-app

Everything in Materials directories being parsed

In regards to line: https://github.com/fbrctr/fabricator-assemble/blob/master/index.js#L50

This appears to be pulling in every file that lives in any materials directory.
In the generic Fabricator build, we have this line in the Gulpfile

  templates: {
    watch: 'src/**/*.{html,md,json,yml}',
  },

So, while the assembler is pulling in everything, the watcher (by default) only watches these four file types.
Is it possible for the assembler to have an option to negate rendering of specific file types?

Update needed

@LukeAskew Is it possible to publish a new release ? Because it's not really clean to call the master branch in our package.json 😅

Materials hierarchy is wrong if a goup contains only sub-folders

I saw some pull-requests about folders so it may have already been addressed but I’m not sure so I prefer to report it.

Imagine you have such hierarchy in your materials:

└── materials
    ├── components
    │   ├── forms
    │   │   ├── fields.html
    │   │   └── buttons.html
    │   └── media.html
    └── structures
        └── lists
            ├── inline-list.html
            └── stacked-list.html

The components folder will be assembled perfectly. However, the structures level disappear and lists is built at root because it contains no html files, only sub-folders. Since the dedicated file to list those materials is views/structures.html and not views/lists.html, any link to this section result in a 404.

v1.1.11: You must pass a string or Handlebars AST to Handlebars.compile.

Since version 1.1.11 I have an error when assembling (see below). Worked fine with v1.1.10, my architecture is something like:

src
    materials
        components
            01-logos
                01-logo-dark
                02-logo-light
            02-whatever
                01-something
                02-something-else

As I was looking to find the reason behind it, turns out the error is gone when removing the numbers in front on the first level folder of the component, ie: 01-logos becomes 'logos' and so on...

Reverting commit d52fad9 works great. I guess the regex is not the one yet... :)

The error I'm talking about:

Error (fabricator-assemble): You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
 Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
    at Object.compile (.../node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:464:11)
    at HandlebarsEnvironment.hb.compile (.../node_modules/handlebars/dist/cjs/handlebars.js:38:41)
    at Object.<anonymous> (.../node_modules/fabricator-assemble/index.js:562:20)
    at Object.eval (eval at createFunctionContext (.../node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:221:23), <anonymous>:9:78)
    at Object.ret (.../node_modules/handlebars/dist/cjs/handlebars/runtime.js:159:30)
    at Object.ret [as f-item-content] (.../node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:488:21)
    at Object.invokePartialWrapper [as invokePartial] (.../node_modules/handlebars/dist/cjs/handlebars/runtime.js:65:46)
    at Object.eval (eval at createFunctionContext (.../node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:221:23), <anonymous>:12:23)
    at prog (.../node_modules/handlebars/dist/cjs/handlebars/runtime.js:193:15)
    at execIteration (.../node_modules/handlebars/dist/cjs/handlebars/base.js:155:19)

Option to split up sections into multiple files

It would be good to have an option to split up materials / docs etc into multiple HTML files.

As an example, when viewing the tables section in materials, instead of going to that section on the page...

/materials.html#table

...it would go to the actual tables page itself...

/materials/table

I suspect, having this option per section would be ideal, as you might only want to split up the documentation into multiple files, as an example.

Regex remove any digit of files names

The regex that remove the digit prefixes from the file name to create the Handlebar template also remove any digit.

/(\d+[\-\.]?)+/ig
https://regex101.com/r/hK0rZ2/3

It means that when you have files like that:

atoms/01-headings/01-heading-level-01.html
atoms/01-headings/01-heading-level-1.html
atoms/01-headings/02-heading-level-02.html
atoms/01-headings/02-heading-level-2.html

atoms/01-headings/01-heading-level-01/01-headings-level-01-red.html

you will get an error.

see #31

Workaround

for now I use this workaround:

atoms/01-headings/01-heading-level-one.html
atoms/01-headings/02-heading-level-two.html
...

Allow callback functionality

I think it would be incredibly useful to allow the user to provide a callback to the assemble function which gets called when assemble is finished executing.

Example:

// let config = { ... };
assemble(config, () => {
    console.log('complete');
});

This would be especially useful in situations where something must happen after assemble is completely finished, such as a build task.

Folder naming conventions

We just had an issue with building our pattern library. It was caused by a developer creating a folder with a space in materials/molecules:
'notification bars'

Looking at the code, it looks as though fabricator-assemble only supports folder names with hyphens (when combined with using ordering on partial in a sub-collection):
'notification-bars'

That's all good - I wonder if it's worth documenting this restriction - I had a look through the readme and couldn't see it mentioned anywhere.

For your info, this is the regular expression that causes this restriction (index.js:553). If a template has both a space in the folder name and a leading number, the leading number isn't stripped out:

var key = name.replace(/^([a-z][a-z0-9\-]*\.)?([0-9\.-]+)(.*)$/i, '$1$3');

use of assemble/handlebars-helpers

It would be awesome to be able to use the great helpers at https://github.com/assemble/handlebars-helpers - is this currently possible? I tried requiring them but failed.

Option to use alternative taxonomy for API

It would be great if alternative names could be used in place of Fabricator terms, i.e. materials could be named components or partials instead. Currently, it is only possible to change the name of the folder these terms relate to, but in templates, the terms Fabricator understands still need to be used.

(Materials seems most problematic, as it’s a new term that relates only to Fabricator. A more generic/common term for this construct might be more widely understood).

Add ability to use .hbs files

When working with a toolkit, it's easier to use .hbs files as intellij can then use the handlebars plugin. But fabricator-assemble only accepts .html files. I would like too see the usage of both.

Paths to assets are incorrect in root-level HTML files

By default the paths used for the assets are incorrect in root-level HTML files.

For example, the index.html file has this:
<link rel="stylesheet" href="/assets/toolkit/styles/toolkit.css">

.. whereas a file in a subdirectory will have this:
<link rel="stylesheet" href="../assets/toolkit/styles/toolkit.css">

If the files are load from a path where the "dist" directory is not at the top level of the web host, this results in the HTML files at the top level not working correctly whereas HTML files in directories do work correctly.

This could be resolved by using . for all files generated in the top directory.

Menu hierarchy incorrect on 1.1.8

I have filtered what kind of files are shown in Fabricator in the materials directory. i.e.

gulp.task('assemble', function (done) {
    assemble({
        logErrors: config.dev,
        materials: 'src/materials/**/*.html'
    });
    done();
});

This is because I am grouping my CSS, JS and HTML into folders within the materials folder but don't want CSS and JS files to be outputted into the Fabricator pages.

Using version 1.1.7 this worked, but on 1.1.8 the menu structure outputs my HTML files ungrouped. i.e.:

It should look like more like this:

Any ideas?