Fractal Configuration

fractal.js

'use strict';

const pkg = require('./package.json');
const exportStylesheetToGlobalContext = require('./config/sass-email-context');

const context = {
  package: {
    name: pkg.name,
    version: pkg.version,
    path: '../../dist'
  },
  title: 'FoamFactory: An elegant brewery management system for a more civilized age',
  include_jquery: true,
  include_package_scripts: true
};

// This is added later so that we can reference the above context.
context.stylesheet_url = context.package.path + '/css/' + pkg.name + "-" + pkg.version + ".css";

/* Create a new Fractal instance and export it for use elsewhere if required */
const fractal = module.exports = require('@frctl/fractal').create();
const FractalStatusHelper = require('fractal-status-helper')(fractal);

/* Set the title of the project */
fractal.set('project.title', `${pkg.title} (v${pkg.version})`);

const components = fractal.components;

components.set('path', 'src/components');
components.set('default.preview', '@ninkasi-standard');
components.set('default.context', context);

// Use mustache as the templating engine
components.engine(require('@frctl/mustache'));
components.set('ext', '.mustache');

components.set('statuses', {
  proposed: {
      label: "Proposed",
      description: "A component should be marked `PROPOSED` in the design system if it is not yet being used, in its current form, in the staging version of the application.",
      color: "#FF3333"
  },
  unstable: {
      label: "Unstable",
      description: "A component should be marked `UNSTABLE` in the design system if it's being used, in its current form, in the staging version of the application, AND it is scheduled to be updated within the next sprint.",
      color: "#FF9233"
  },
  complete: {
      label: "Complete",
      description: "A component should be marked as `COMPLETE` in the design system if it's being used, in its current form, in the production version of the application OR it's being used, in its current form, in the staging version of the application AND it is not scheduled to be updated within the next sprint. Components marked as `COMPLETE` should _not_ be scheduled for updates within the next sprint.",
      color: "#29CC29"
  }
});

components.set('default.status', 'proposed');

const docs = fractal.docs;

/* Tell Fractal where the documentation pages will live */
docs.set('path', __dirname + '/src/docs');

docs.set('statuses', {
  draft: {
      label: 'Draft',
      description: 'A new document in working draft state. This may change rapidly or be incomplete.',
      color: '#FF3333'
  },
  outofdate: {
    label: 'Out of Date',
    description: 'Currently out of date, but some information from this document may be useful.',
    color: '#FF9233'
  },
  complete: {
      label: 'Complete',
      description: 'Complete to the necessary level of detail required for the usage of the documented aspects.',
      color: '#29CC29'
  }
});
docs.set('default.status', 'draft');
docs.engine(require('@frctl/handlebars')({
    helpers: {
        componentStatuses: FractalStatusHelper.componentStatusTable,
        documentStatuses: FractalStatusHelper.documentStatusTable
    }
}));

const web = fractal.web;

web.set('static.path', 'dist');
web.set('static.mount', 'dist');
// output files to /build
web.set('builder.dest', 'build');

/* Setup our theme */
web.theme(require('@frctl/mandelbrot')({
  lang: 'en-US',
  skin: 'white',
  // display context data in YAML
  format: 'yaml'
}));

fractal.on('source:loaded', function(source) {
  let localContext = source.context;
  if (!localContext) {
    localContext = context;
  }

  exportStylesheetToGlobalContext(localContext);

  source.refresh();
});

fractal.on('source:changed', function(source, eventData) {
  let localContext = source.context;
  if (!localContext) {
    localContext = context;
  }

  exportStylesheetToGlobalContext(localContext);

  source.refresh();
});