Linking to other components #125

pete-hotchkiss opened this Issue Aug 17, 2016 · 2 comments


None yet

3 participants

pete-hotchkiss commented Aug 17, 2016 edited

I could be completely missing this in the documentation, but I can't see where there is a way to have handlebars / MD in a components notes file render a link to another component.


This is a description of how this component works. But it's also
similar to {{ components.buttons.cancel-button }}  

Am I just being blind/dumb ?


No not blind or dumb... but because it's actually a theme's job to specify what URLs are available it's a little tricky to provide a way to handle this that still works if people use a different theme from the default.

At the moment I handle this with a custom handlebars helper, and eventually I'll get round to adding some more default helpers in to make stuff like this easier in documentation pages.

For the default theme, the component URLs always take the form of:

  • Component detail page: /components/detail/handle
  • Component preview page: /components/preview/handle
  • Component rendered without preview layout: /components/preview/handle

so you could create a helper that looks something like this:

const Handlebars = require('handlebars'); // note you need to `npm i --save handlebars` first!

function linkTo(handle, view) {
    view = view || 'detail';
    return new Handlebars.SafeString(`/components/${view}/${handle.replace('@','')}`);

You obviously still need to register this with the handlebars template adapter but hopefully that will help somewhat?

risker commented Oct 5, 2016

Trying to do something similar. A problem arises when generating a static html build of fractal, as all the paths should then have an .html extension. Any simple way to check that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment