@phun-ky/speccer 9.0.1 → 9.0.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 +20 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
> A zero dependency package to highlight elements
|
|
6
6
|
|
|
7
|
-
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)      
|
|
7
|
+
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)       [](https://codecov.io/gh/phun-ky/speccer)
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -48,14 +48,14 @@ Go [here](https://github.com/phun-ky/speccer/blob/main/api/README.md) to read th
|
|
|
48
48
|
|
|
49
49
|
### Typescript
|
|
50
50
|
|
|
51
|
-
Types can be found in `@phun-ky/speccer/speccer.d.ts`.
|
|
51
|
+
Types can be found in `@phun-ky/speccer/dist/speccer.d.ts`.
|
|
52
52
|
|
|
53
53
|
### ESM
|
|
54
54
|
|
|
55
55
|
Either import and run the required functions:
|
|
56
56
|
|
|
57
57
|
```javascript
|
|
58
|
-
import '@phun-ky/speccer/speccer.min.css';
|
|
58
|
+
import '@phun-ky/speccer/dist/speccer.min.css';
|
|
59
59
|
import speccer from '@phun-ky/speccer';
|
|
60
60
|
|
|
61
61
|
// do stuff
|
|
@@ -71,6 +71,16 @@ Or place these `script` and `link` tags in your web page:
|
|
|
71
71
|
<script src="../path/to/speccer.js"></script>
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
Or with a CDN:
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<link
|
|
78
|
+
rel="stylesheet"
|
|
79
|
+
href="https://unpkg.com/@phun-ky/speccer/dist/speccer.min.css"
|
|
80
|
+
/>
|
|
81
|
+
<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js"></script>
|
|
82
|
+
```
|
|
83
|
+
|
|
74
84
|
And then follow the steps below to display the specifications you want :)
|
|
75
85
|
|
|
76
86
|
### React
|
|
@@ -82,7 +92,7 @@ import React, { useEffect } from 'react';
|
|
|
82
92
|
import PropTypes from 'prop-types';
|
|
83
93
|
|
|
84
94
|
import debounce from './lib/debounce';
|
|
85
|
-
import '@phun-ky/speccer/speccer.min.css';
|
|
95
|
+
import '@phun-ky/speccer/dist/speccer.min.css';
|
|
86
96
|
|
|
87
97
|
const Component = () => {
|
|
88
98
|
let speccerEventFunc;
|
|
@@ -116,6 +126,12 @@ If you want to control speccer a bit more, you have some options. Apply one of t
|
|
|
116
126
|
<script src="../speccer.js" data-<manual|instant|dom|lazy></script>
|
|
117
127
|
```
|
|
118
128
|
|
|
129
|
+
Or with a CDN:
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<script src="https://unpkg.com/@phun-ky/speccer/dist/speccer.js" data-<manual|instant|dom|lazy></script>
|
|
133
|
+
```
|
|
134
|
+
|
|
119
135
|
| Tag | Description |
|
|
120
136
|
| -------------- | ------------------------------------------------------------------- |
|
|
121
137
|
| `data-manual` | Makes `window.speccer()` available to be used when you feel like it |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phun-ky/speccer",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.2",
|
|
4
4
|
"description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
|
|
5
5
|
"main": "dist/speccer.js",
|
|
6
6
|
"module": "dist/speccer.esm.js",
|