If Fractal is running, saving a change to fractal.jscauses Fractal to stop with

✘ ReferenceError: hasChanged is not defined

Steps to reproduce:

1. cd into a Fractal project directory
2. start Fractal with fractal: the Fractal server starts and the fractal ➤ prompt appears
3. edit the fractal.js file, and save it
4. notice that fractal has stopped, saying ✘ ReferenceError: hasChanged is not defined
   

I wanted to rename components in the UI, but saw nothing in the documentation. Looked at the theme, and lo-and-behold, there were references to components.title and docs.title; these should be documented.

Folders can't be reordered using numbers in their folder names, but files can.

Behviour should match that of components, i.e. can use filename prefix or specify in config.

• support non-component preview layouts. Reference by path?
• support for requireing and converting JSX files (https://babeljs.io/docs/usage/require/)
• defer rendering of preview layout to adapter, if renderLayout method is defined
• prevent .config.js files from being parsed as components
• Figure out how to support FE integration
• ability to customise UI labels to match the terms that React users would typically use
• smarter reloading/invalidating of view cache

Startup seems too slow at the moment. Reducing dependencies should help, need to get some profiling running to figure out exactly what is causing the lag.

Most of my components are HTML, but some are SVG. What if I wish to have them both types use their correct file extensions… possible?

Currently the only way to specify a custom collator is global in the project settings file.

Is it possible to beautify rendered HTML markup? For example, should a component include another, the indentation is lost after the first line, e.g. this component markup:

is rendered as:

🙈

if I add a note that needs to demo how to include a component, I will need to include something like

{{render @hoff-knight2000}}

However doing this alone renders the components code within the markdown file

If I put this in a code block it renders the components code in the codeblock

If I replace { with &123; and } with &125; this works unless it's in a codeblock or blockquote where the numbers don't rendered properly - which is pretty crappy.

Adding as an issue if only to serve as a reminder to add to documentation.

If I wish to add additional helpers for my template language (i.e. handlebars), how would I enable (and optionally configure) these?

Given a component (hr.hbs):

<hr>

with the following config (hr.config.yml):

label: "Horizontal rule"
notes: |
  The `hr` element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
preview: "@preview"

and the following preview layout (_preview.hbs):

<p>…</p>

{{{yeild}}}

<p>…</p>

A component is only rendered if the preview layout is in a folder above the compound folder. So this:

├── components
│   └── hr
│   │   ├── _preview.hbs
│   │   ├── hr.config.yml
│   │   ├── hr.hbs

doesn’t work, but this:

├── components
│   ├── _preview.hbs
│   └── hr
│   │   ├── hr.config.yml
│   │   ├── hr.hbs

does. Is this the expected behaviour?

This can certainly be filed under ‘nice to have’, but needing a fractal.js file in the root of a project sits a little uncomfortably with me; especially as it mainly consists of configuration options, which seem better suited to being in a JSON/YAML file of some description (assuming no JavaScript additions are needed).

This niggle is further reinforced having recently spotted cosmiconfig, a project whose philosophy seems similar to that of fractal. This package allows projects to be unopinionated about how and where configuration is provided (be it a .fractalrc file, inside package.json, a fractal.config.js file, --config options within the CLI etc. etc.). Worth a look!

At the moment using a variant name value with spaces etc causes things to break.

Hi, this looks like a great project, but so far I'm getting no output from the fractal new command. I've tried reinstalling Fractal globally and it hasn't made any difference. Am I missing something? I've copypasted my Terminal output below.

 10:41:44  ...code/planetary/fractaltests  ⬡ system 
👉 fractal new project-test

⚑ Creating new project.... just a few questions:

? What's the title of your project? Project Test
? Where would you like to keep your components? components
? Where would you like to keep your docs? docs
? What would you like to call your public directory? public
? Will you use Git for version control on this project? Yes

 10:42:01  ...code/planetary/fractaltests  ⬡ system 
👉 ll

 10:42:03  ...code/planetary/fractaltests  ⬡ system 
👉

Any help much appreciated!

The use of kexec in https://github.com/frctl/fractal/blob/57f8d8d67c0ee9bb63814d05439a5c58f191025b/src/commands/reboot.js is a barrier to successfully installing Fractal on a Windows machine.

Can't release a 1.0 until tests are written.

I have a group of components - hoff-hair, hoff-shades, hoff-tan that are in a parent folder hoff
I have a hoff.config.yml that has overall data for all of the child components
If I create a separate config file for hoff-hair - hoff-hair.config.yml this gets outputted in the context data followed by the data within hoff.config.yml

Is there a way to tell the component when it's 'all by itself' to only use the config.yml file that's within the folder?

I tried to write a custom template engine for marko.js, but can't get it to work. fractal had trouble to finding the module.
My custom adapter: https://github.com/taurni/marko-adapter
and demo project: https://github.com/taurni/fractal-demo
can you help me out?

There is no build task included or comments around the example.scss file to give some context to it's existence so it might be confusing if you are expecting the styles to be applied to the example component.

Currently only JSON is supported. Would be nice to be able to pick YAML or whatever.

Folders and files prefixed with an underscore cause issues with static sites published using GitHub pages. You can get around this by including a .nojekyll file in the root of the repo being published, but this is an extra step, a potential pinch point. Is there another symbol prefix that can be used for this folder instead?

API docs

• overview
• sources
• collections
• components
• variants
• assets

Plugins & commands

• overview
• writing plugins
• plugins list
• creating bespoke commands

Web UI

• CLI and non-command line configuration options
• themes & colour schemes

Guides

• Generating dynamic data
• Working with build tools/assets
• Using Fractal as a dependency in projects

Other

• Naming things
• Glossary (incomplete)

Seems to be some issue when a promise is used as a context property value (even though this should work!). Specifically tested with promisified API requests.

I'd like to upload the built styleguide to a subfolder on my server (instead of having to make a subdomain for every demo) Is there a way to configurate the web UI plugin or fractal to make the URLs relative instead of absolute?

Ok, I've got a set of patterns that are in a folder /hoff which are each in their own folder /hoff/hoff-title, /hoff/hoff-paragraph and /hoff/hoff-media. These patterns pull in data from a .yml file that's in the parent folder (/hoff).
As part of our pattern library we are also showing certain generic pages. If I have the page in a new folder /baywatch and each pattern in /hoff is included the context data gets pull in when making the page (which is ace) but when going to the dropdown of /baywatch the context data isn't there.

Is there any way of getting this showing up? Maybe even with multiple data files too?

Given the following documentation:

---
title: My Fabulous UI Toolkit
colors:
  primary:
    $color-darkgreen: "#166729"
    $color-darkgrey: "#585958"
    $color-pebble: "#dedbd2"
  shades:
    $color-palegreen: "#e5f0df"
    $color-lightgrey: "#ccc"
    $color-linen: "#f3f1ed"
    $color-light: "#fcfbf9"
  accents:
    $color-brightgreen: "#8dc63f"
    $color-magenta: "#d70171"
    $color-mustard: "#fbb531"
    $color-red: "#b40a16"
    $color-blue: "#3199d8"

---
This UI toolkit is a highly-modular design system for rapid web page development.

Can I access the additional front matter values inside the document body, for example:

## Colours
{{#each colors}}
    <ul class="palette">
        {{#each this}}
            <li class="palette__color" style="background-color: {{ this }}">{{@key}}</li>
        {{/each}}
    </ul>
{{/each}}

This particular example is taken from a port of some documentation written for Fabricator, but it’s a useful feature.

This would allow Fractal to integrate better with stream-based tools like Gulp.

It seems isHidden is only available at the root level of a component, yet I have a case where I wish to hide a particular variant (as it goes, the default). Is this possible?

I've not managed to work out why (as yet) but the close icon is a little 'squished' in Firefox (Dev Edition v47).

When adding notes to a component, thus:

status: ready
notes: Use `block` to segregate content into a grid. Each child `block__item` will alongside siblings at larger breakpoints, its width dictated by the number of siblings in a block.

Fractal throws an error: TypeError: Handlebars.create is not a function and the list of components in the navigation disappears.

Currently on smaller viewports, notes (as well as templating and context information etc.), is missing. While it may not need to be shown by default, it should still be available to view. Somehow.

I have the following components, with the order value set in their respective configs as follows:

a: 1
cite: 6
dfn: 8
abbr: 9
data: 10
code: 12
b: 19
br: 22

Yet, the components are displayed in the following (seemingly random) order in the UI:

a
b
br
cite
dfn
abbr
code

Here is an example config file:

label: "Abbreviation"
order: 9
notes: |
  The `abbr` element represents an abbreviation or acronym, optionally with its expansion. The `title` attribute may be used to provide an expansion of the abbreviation.

What’s going on? (This is just a subset of the components I’m trying to order, BTW).

I wish to use a path within a nunjucks {% include %}, as allowed by that templating language. However, Fractal only allow authors to use a @handle. Reason: I wish to keep all SVGs within their own folder within my assets directory, and then include them inline.

From @allmarkedup:

no that is not currently possible… arbitrary includes would be quite a nice feature but it would have to be template-engine specific. Open and issue and I will try to get to it!

As my component library gets larger - I think it would be a "nice-to-have" if we could toggle the navigation to show/hide the components / documentation (anything else that goes there)

…which gets bit tricky if you wish to use BEM-like naming for your component names.

Rather than link out to a (remote) placeholder image service, instead provide one that can be used locally (and offline).

Not sure this is possible as it would require keeping state between processes somehow..?

A fair bit of repetition at the moment.