@hbeneke/parley 0.1.0 → 0.1.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 +1 -70
- package/dist/footer/site-footer.js +2 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
A small crew of native Web Components I kept rewriting across my own projects, so I packaged them up. No framework, no runtime, no build step on your side — just custom elements that work wherever HTML does.
|
|
4
4
|
|
|
5
|
-
Right now there's one: `<site-footer>`. More will land as I get tired of copy-pasting them.
|
|
6
|
-
|
|
7
5
|
## Install
|
|
8
6
|
|
|
9
7
|
```bash
|
|
@@ -12,78 +10,11 @@ npm install @hbeneke/parley
|
|
|
12
10
|
|
|
13
11
|
## Usage
|
|
14
12
|
|
|
15
|
-
Import the package once (anywhere — entry file, a script tag with a bundler, whatever). That registers the elements.
|
|
16
|
-
|
|
17
13
|
```js
|
|
18
14
|
import "@hbeneke/parley";
|
|
19
15
|
```
|
|
20
16
|
|
|
21
|
-
Then drop the
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<site-footer nickname="Habakuk" copyright="reserved"></site-footer>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
That's it. The element renders its own footer, owns its styles, and won't leak CSS into your page or pick up yours — it lives behind a shadow root.
|
|
28
|
-
|
|
29
|
-
## `<site-footer>`
|
|
30
|
-
|
|
31
|
-
A footer with a name link, a copyright line, and a tagline that fades in on hover.
|
|
32
|
-
|
|
33
|
-
### Attributes
|
|
34
|
-
|
|
35
|
-
| Attribute | Default | What it does |
|
|
36
|
-
| ---------------- | ------------- | ------------------------------------------------------ |
|
|
37
|
-
| `nickname` | `Anonymous` | Name shown in the link and copyright text |
|
|
38
|
-
| `year` | current year | Year used in the copyright line |
|
|
39
|
-
| `copyright` | `bugs` | Picks one of the built-in copyright phrasings |
|
|
40
|
-
| `copyright-text` | — | Your own template, wins over `copyright` if set |
|
|
41
|
-
| `reveal` | — | Set to `always` to keep the tagline visible (no hover) |
|
|
42
|
-
|
|
43
|
-
The `copyright` presets:
|
|
44
|
-
|
|
45
|
-
- `bugs` — `Copyright© {year}. All bugs reserved.`
|
|
46
|
-
- `reserved` — `© {year} {nickname}. All rights reserved.`
|
|
47
|
-
- `copyright` — `Copyright © {year} {nickname}. All rights reserved.`
|
|
48
|
-
- `simple` — `© {year} {nickname}`
|
|
49
|
-
|
|
50
|
-
If none of those fit, write your own and use `{year}` / `{nickname}` as placeholders:
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<site-footer
|
|
54
|
-
nickname="Habakuk"
|
|
55
|
-
copyright-text="Built and maintained by {nickname}, {year}."
|
|
56
|
-
></site-footer>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Slots
|
|
60
|
-
|
|
61
|
-
```html
|
|
62
|
-
<site-footer nickname="Habakuk">
|
|
63
|
-
<span slot="tagline">Shipped from a tiny town in Galicia.</span>
|
|
64
|
-
<a href="/rss">RSS</a>
|
|
65
|
-
</site-footer>
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
- `tagline` — replaces the default "Made with ❤️ from Spain."
|
|
69
|
-
- default slot — anything else you want under the copyright line.
|
|
70
|
-
|
|
71
|
-
### Styling
|
|
72
|
-
|
|
73
|
-
The internals are encapsulated, so reach in through these custom properties instead:
|
|
74
|
-
|
|
75
|
-
```css
|
|
76
|
-
site-footer {
|
|
77
|
-
--font: "Inter", sans-serif;
|
|
78
|
-
--accent: rebeccapurple; /* the heart colour */
|
|
79
|
-
}
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
The `reveal="always"` attribute is there for touch devices or anyone who'd rather not hide the tagline behind a hover.
|
|
83
|
-
|
|
84
|
-
## Browser support
|
|
85
|
-
|
|
86
|
-
Anything with Custom Elements and Shadow DOM — every current browser. No polyfills shipped.
|
|
17
|
+
Then drop the tags in your markup. Right now there's one: `<site-footer>`.
|
|
87
18
|
|
|
88
19
|
## License
|
|
89
20
|
|
|
@@ -29,6 +29,8 @@ template.innerHTML = `
|
|
|
29
29
|
.box p { margin: 0; }
|
|
30
30
|
.box p + p { margin-top: 0.5rem; }
|
|
31
31
|
a { color: inherit; text-underline-offset: 2px; }
|
|
32
|
+
#name-link { color: var(--link, inherit); text-decoration: none; }
|
|
33
|
+
#name-link:hover { color: var(--link-hover, var(--link)); }
|
|
32
34
|
.heart { color: var(--accent, crimson); }
|
|
33
35
|
|
|
34
36
|
.tagline { transition: opacity 0.3s; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hbeneke/parley",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A crew of reusable native Web Components.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Enrique Quero Vilar",
|
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
"import": "./dist/index.js"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
-
"files": [
|
|
29
|
+
"files": [
|
|
30
|
+
"dist"
|
|
31
|
+
],
|
|
30
32
|
"keywords": [
|
|
31
33
|
"web-components",
|
|
32
34
|
"custom-elements",
|