@madgex/design-system 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,58 @@ $mds-size-font-md: 20px; // my base font-size is 20px
|
|
|
25
25
|
@import 'node_modules/@madgex/design-system/src/scss/index.scss';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
## Working with [hapi.js](https://hapijs.com/), [vision](https://github.com/hapijs/vision) and [Nunjucks](https://mozilla.github.io/nunjucks/)
|
|
29
|
+
|
|
30
|
+
If you're wanting to use the Madgex DS components from a hapi.js+vision+Nunjucks setup you'll need to include the Madgex DS in the Nunjucks pathing:
|
|
31
|
+
|
|
32
|
+
```(js)
|
|
33
|
+
engines: {
|
|
34
|
+
njk: {
|
|
35
|
+
compile: (src, options) => {
|
|
36
|
+
const template = Nunjucks.compile(src, options.environment);
|
|
37
|
+
return (context) => {
|
|
38
|
+
return template.render(context);
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
prepare: (options, next) => {
|
|
42
|
+
options.compileOptions.environment = Nunjucks.configure(
|
|
43
|
+
[
|
|
44
|
+
Path.join(options.path),
|
|
45
|
+
'node_modules/@madgex/design-system/',
|
|
46
|
+
'node_modules/@madgex/design-system/src/',
|
|
47
|
+
'node_modules/@madgex/design-system/src/components/',
|
|
48
|
+
],
|
|
49
|
+
{ watch: false }
|
|
50
|
+
);
|
|
51
|
+
return next();
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Then you should be able to use components as such:
|
|
58
|
+
|
|
59
|
+
```(nunjucks)
|
|
60
|
+
{% extends "template.njk" %} {# a base template is available in the DS #}
|
|
61
|
+
|
|
62
|
+
{% from "button/_macro.njk" import Button %} {# load the DS button component #}
|
|
63
|
+
|
|
64
|
+
{% block content %}
|
|
65
|
+
|
|
66
|
+
<p>My new project homepage</p>
|
|
67
|
+
|
|
68
|
+
{# Use the Madgex DS button! #}
|
|
69
|
+
{{
|
|
70
|
+
Button({
|
|
71
|
+
text: 'Click me!'
|
|
72
|
+
})
|
|
73
|
+
}}
|
|
74
|
+
|
|
75
|
+
{% endblock %}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Note you'll need the scss for the component styles.
|
|
79
|
+
|
|
28
80
|
## Releases
|
|
29
81
|
|
|
30
82
|
With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to [npm](https://npmjs.org) as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).
|