@biggive/components 0.0.4 → 0.0.5
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/package.json +1 -1
- package/readme.md +32 -1
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -22,6 +22,8 @@ npm install
|
|
|
22
22
|
npm start
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Development
|
|
26
|
+
|
|
25
27
|
### Follow Stencil + repository conventions
|
|
26
28
|
|
|
27
29
|
CI runs lint checks, but there are tools to help you follow the expected code style so you don't have
|
|
@@ -37,6 +39,35 @@ Husky should also set you up a pre-commit hook that fixes anything it can automa
|
|
|
37
39
|
about anything else. If you don't appear to have this and had already installed packages before this
|
|
38
40
|
feature was set up, run `npm install` again.
|
|
39
41
|
|
|
42
|
+
### Dependencies and build output
|
|
43
|
+
|
|
44
|
+
Anything externally managed should be loaded with npm and no copies checked into this codebase. We can use Stencil `copy` tasks and target app build strategies to get things in the right place.
|
|
45
|
+
|
|
46
|
+
Generated build outputs should similarly be `.gitignore`d.
|
|
47
|
+
|
|
48
|
+
### Asset dependencies
|
|
49
|
+
|
|
50
|
+
So far our strategy has been to avoid separate file assets where this is an out-the-box option, but
|
|
51
|
+
to choose copying over more complex build time changes (e.g. base-64-inlining images) otherwise.
|
|
52
|
+
This is to get the simplest working proof of concept up quickly and we may revisit it soon.
|
|
53
|
+
|
|
54
|
+
For now:
|
|
55
|
+
|
|
56
|
+
* FontAwesome uses pure SVGs and not fonts. This seems to work well and I suspect is the best option
|
|
57
|
+
for performance, component interoperability, simplicity and licence compliance.
|
|
58
|
+
* The Euclid font is copied with a Stencil `copy` task and available in the dist output's
|
|
59
|
+
`assets/fonts`. An Angular app's build, for example, can then use the style with the following
|
|
60
|
+
addition to an `angular.json` `"styles"` key:
|
|
61
|
+
`"node_modules/@biggive/components/dist/biggive/assets/fonts/EuclidTriangle/stylesheet.css"`
|
|
62
|
+
* Images are also copied with a Stencil `copy` task, and fixed references use getAssetPath() plus
|
|
63
|
+
an absolute path, e.g. `getAssetPath('/assets/images/banner.png')`. See the
|
|
64
|
+
[Stencil asset docs](https://stenciljs.com/docs/assets) for more on this. Angular seems to be
|
|
65
|
+
able to use this without `setAssetPath()` if we config its `"assets"` key to put files in the same
|
|
66
|
+
folder as the app's own images. This is the approach taken on [this proof of concept branch](https://github.com/thebiggive/donate-frontend/tree/COM-5-proof-of-concept).
|
|
67
|
+
Should we find managing image assets messy in apps generally, an alternative approach we might
|
|
68
|
+
try is importing images to component style and adding [`@rollup/plugin-image`](https://github.com/rollup/plugins/tree/master/packages/image/#readme)
|
|
69
|
+
to Stencil's build config.
|
|
70
|
+
|
|
40
71
|
### Make any required changes to the sample web components
|
|
41
72
|
|
|
42
73
|
The web components are configured in /src/components
|
|
@@ -105,7 +136,7 @@ These can be added to an HTML page with the following code:
|
|
|
105
136
|
<biggive-grid>
|
|
106
137
|
|
|
107
138
|
<biggive-campaign-card
|
|
108
|
-
banner="
|
|
139
|
+
banner="/assets/images/banner.png"
|
|
109
140
|
days-remaining={50}
|
|
110
141
|
target={50000}
|
|
111
142
|
organisation-name="Ardent Theatre Company"
|