Core-Styles/fractality.config.js at main · TACC/Core-Styles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
'use strict';

const mandelbrotPackage = require('@fractality/mandelbrot');
const fractal = require('@fractality/fractality').create();
const mandelbrot = mandelbrotPackage.default || mandelbrotPackage;

// Get base theme
const themeConfig = require('./fractality.theme.js');
const theme = mandelbrot(themeConfig);

// Configure UI
fractal.set('project.title', 'TACC UI Pattern Library');
fractal.components.set('label', 'Patterns');
fractal.components.set('title', 'Patterns');
fractal.components.set('default.status', 'wip');
fractal.components.set('statuses', {
  reference: {
    label: "Reference",
    description: "Original skin from third-party library.",
    color: "#333333"
  },
  prototype: {
    label: "Prototype",
    description: "Do not implement.",
    color: "#666666"
  },
  wip: {
    label: "Work in Progress",
    description: "Work in progress. Implement with caution.",
    color: "#999933"
  },
  backup: {
    label: "Backup",
    description: "If regular variations fail.",
    color: "#996633"
  },
  ready: {
    label: "Ready",
    description: "Ready to implement.",
    color: "#339966"
  },
  deprecated: {
    label: 'Deprecated',
    description: 'Do not implement.',
    color: '#800000'
  }
});

// Set source paths
// (for components)
fractal.components.set('path', __dirname + '/src/lib/_imports');
fractal.components.set('resources', {
  // Render assets from component folders in a panel
  // WARNING: Undocumented feature
  // https://github.com/frctl/fractal/issues/150#issuecomment-254642411
  // https://github.com/frctl/fractal/issues/93#issuecomment-236429871
  assets: {
    label: 'Assets',
    match: ['**/*.css', '**/*.js'],
  },
});
fractal.components.set('default.context', {
  shouldSkipPattern: true, // true, because core-styles.….css loads most
  bootstrap4Styles: [{
    isInternal: true,
    layer: 'foundation',
    path: '/assets/core-styles.bootstrap4.css'
  }],
  bootstrap5Styles: [{
    isInternal: true,
    layer: 'foundation',
    path: '/assets/core-styles.bootstrap5.css'
  }],
  globalStyles: [{
    isInternal: true,
    layer: 'base',
    path: '/assets/core-styles.demo.css'
  },{
    isInternal: true,
    layer: 'base',
    path: '/assets/core-styles.base.css'
  }],
  cmsStyles: [{
    isInternal: true,
    layer: 'base',
    path: '/assets/core-styles.cms.css'
  }],
  docsStyles: [{
    isInternal: true,
    layer: 'base',
    path: '/assets/core-styles.docs.css'
  }],
  portalStyles: [{
    isInternal: true,
    layer: 'base',
    path: '/assets/core-styles.portal.css'
  }]
});

// Set website paths
fractal.docs.set('path', __dirname + '/docs');
fractal.web.set('static.path', __dirname + '/dist');
fractal.web.set('static.mount', 'assets');
fractal.web.set('builder.dest', __dirname + '/demo');

// Customize theme
fractal.web.theme(theme);

// Add template helpers
const engine = fractal.components.engine();
engine.handlebars.registerHelper('eq', function(a, b) {
  return a == b;
});
engine.handlebars.registerHelper('has', function(array, item) {
  return array.includes(item);
});
engine.handlebars.registerHelper('ifno', function(value, fallback) {
  const output = value || fallback;
  return new engine.handlebars.SafeString(output);
});
engine.handlebars.registerHelper('default', function(value, defaultValue) {
  return value || defaultValue;
});

// Export
module.exports = fractal;