How to use @frctl/fractal - 10 common examples

const path = require('path');

const fractal = module.exports = require('@frctl/fractal').create();
const pkg = require(path.join(__dirname, 'package.json'));


/*-------------------------------------------------------*\
  Feel free to adapt Fractal config below to your needs
\*-------------------------------------------------------*/

/**
 * Metadata
 */
fractal.set('project.title', 'Styleguide Starterkit');
// Provide the package.json "version" to the templates
fractal.set('project.version', pkg.version);

/**
 * Files location

import path from 'path';
import Fractal from '@frctl/fractal';
import Nunjucks from '@frctl/nunjucks';
import mandelbrot from '@frctl/mandelbrot';
import {Map} from 'immutable';
import filters from '../server/filters';
import extensions from '../server/extensions';
import {getEnvWithGlobalsExtensionsAndFilters} from '../server/view/env-utils';
import {createPageConfig} from '../server/model/page-config';
import statuses from './config/statuses';

const fractal = Fractal.create();
const root = serverDir('views');

// We need to set this up because Fractal doesn't allow us to specify our own
// nunjucks env, but rather uses config to set it up.
const nunjucksEnv = getEnvWithGlobalsExtensionsAndFilters(root, Map());
const extensionsWithEnv = extensions.map(Extension => new Extension(nunjucksEnv));

const nunjucks = Nunjucks({
  paths: ['./../server', root],
  filters: filters.toJS(),
  extensions: extensionsWithEnv.toJS(),
  globals: {
    pageConfig: createPageConfig({ title: 'Cardigan', inSection: 'explore', path: '/' })
  }
});
fractal.components.engine(nunjucks);

/* eslint-env node */
/* eslint-disable one-var */

const autoprefixer = require('autoprefixer'),
      bluebird     = require('bluebird'),
      eslint       = require('gulp-eslint'),
      fractal      = require('@frctl/fractal').create(),
      fs           = require('fs-extra'),
      globby       = require('globby'),
      gulp         = require('gulp'),
      gulpif       = require('gulp-if'),
      hbsEngine    = fractal.components.engine(),
      log          = require('gulp-logger'),
      logger       = fractal.cli.console,
      mandelbrot   = require('@frctl/mandelbrot'),
      notify       = require('gulp-notify'),
      path         = require('path'),
      plumber      = require('gulp-plumber'),
      postcss      = require('gulp-postcss'),
      reporter     = require('postcss-reporter'),
      sass         = require('gulp-sass'),
      sassError    = require('gulp-sass-error'),
      sassLint     = require('gulp-sass-lint'),

'use strict';

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

const myCustomisedTheme = mandelbrot({
    skin: 'black',
    panels: ["notes", "html", "context", "resources", "info"]
});

/* Fractal project config
----------------------------------------------------------------------------- */

/* Set the title of the project */
fractal.set('project.title', 'Innovate UK Front-end');

/* Fractal components
----------------------------------------------------------------------------- */

const path = require('path');
const Fractal = require('@frctl/fractal');
const mandelbrot = require('@frctl/mandelbrot');
const statuses = require('./config/statuses');
const fractal = Fractal.create();

fractal.set('project.title', 'Design system');
fractal.components.set('path', path.join(__dirname, '../common/views'));

var reactAdapter = require('fractal-react-adapter')({
  babelConfig: {
    extensions: ['.js', '.jsx']
  }
});
fractal.components.engine(reactAdapter);
fractal.components.set('ext', '.js');
fractal.components.set('statuses', statuses);
fractal.components.set('default.status', 'wip');
fractal.components.set('default.preview', '@preview');
fractal.components.set('default.collator', function(markup, item) {
  return (`

"use strict";
const pkg = require("./package.json");
const path = require("path");
const fractal = require("@frctl/fractal").create();

const context = {
  package: {
    name: pkg.name,
    version: pkg.version
  },
  uswds: {
    path: "../../dist"
  }
};

fractal.set("project.title", `U.S. Web Design System (v${pkg.version})`);

const components = fractal.components;
components.set("ext", ".njk");
components.set("path", "src/components");

import fs from 'fs'
import path from 'path'
const fractal = require('@frctl/fractal').create()

const paths = {
	src: PATH_CONFIG.src,
	library: PATH_CONFIG.fractal.library,
	tmp: PATH_CONFIG.fractal.tmp
}

const stamp = PRODUCTION ? `.${TASK_CONFIG.stamp}` : ''

const mandelbrot = require('@frctl/mandelbrot')({
	favicon: '/favicon.ico',
	lang: 'en-gb',
	styles: ['default', `/dist/css/theme${stamp}.css`],
	static: {
		mount: 'fractal'
	}

'use strict';

/*
* Require the path module
*/
const path = require('path');

/*
 * Require the Fractal module
 */
const fractal = module.exports = require('@frctl/fractal').create();

/*
 * Give your project a title.
 */
fractal.set('project.title', 'WAI Website Assets');

fractal.components.engine('@frctl/nunjucks');
fractal.components.set('default.preview', '@preview');
fractal.components.set('default.status', null);
fractal.components.set('ext', '.html');
/*
 * Tell Fractal where to look for components.
 */
fractal.components.set('path', path.join(__dirname, 'components'));

/*

'use strict';

/*
 * Require the path module
 */
const path = require('path');

/*
 * Set the UI Library root path
 */
const uiLibRoot = __dirname + '/';

/*
 * Require the Fractal module
 */
const fractal = module.exports = require('@frctl/fractal').create();

/*
 * Give your project a title.
 */
fractal.set('project.title', '[ENTER PROJECT NAME] UI Component Library');

/*
 * Other project metadata.
 */
fractal.set('project.version', 'v1.0');
fractal.set('project.repository', '[ENTER REPOSITORY URL]');
fractal.set('project.author', '[ENTER AUTHOR NAME]');

/*
 * Tell Fractal where to look for components.
 */