@hbeneke/parley 0.1.1 → 0.2.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/custom-elements.json +145 -0
- package/dist/footer/site-footer.d.ts +20 -0
- package/dist/footer/site-footer.js +21 -1
- package/docs/_template.md +31 -0
- package/docs/site-footer.md +55 -0
- package/llms.txt +19 -0
- package/package.json +16 -5
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/footer/site-footer.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "A configurable site footer with a name link, a copyright line and a\nreveal-on-hover tagline.",
|
|
12
|
+
"name": "SiteFooter",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Footer font family.",
|
|
16
|
+
"name": "--font",
|
|
17
|
+
"default": "inherit"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"description": "Name link color.",
|
|
21
|
+
"name": "--link",
|
|
22
|
+
"default": "inherit"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"description": "Name link hover color.",
|
|
26
|
+
"name": "--link-hover",
|
|
27
|
+
"default": "var(--link)"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"description": "Heart / accent color in the default tagline.",
|
|
31
|
+
"name": "--accent",
|
|
32
|
+
"default": "crimson"
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"slots": [
|
|
36
|
+
{
|
|
37
|
+
"description": "Default slot for extra footer content.",
|
|
38
|
+
"name": ""
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"description": "Overrides the default \"Made with ❤️ from Spain.\" tagline.",
|
|
42
|
+
"name": "tagline"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"members": [
|
|
46
|
+
{
|
|
47
|
+
"kind": "method",
|
|
48
|
+
"name": "render",
|
|
49
|
+
"privacy": "private",
|
|
50
|
+
"return": {
|
|
51
|
+
"type": {
|
|
52
|
+
"text": "void"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"kind": "method",
|
|
58
|
+
"name": "copyrightText",
|
|
59
|
+
"privacy": "private",
|
|
60
|
+
"return": {
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "string"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"parameters": [
|
|
66
|
+
{
|
|
67
|
+
"name": "nickname",
|
|
68
|
+
"type": {
|
|
69
|
+
"text": "string"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"name": "year",
|
|
74
|
+
"type": {
|
|
75
|
+
"text": "string"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
"attributes": [
|
|
82
|
+
{
|
|
83
|
+
"name": "nickname",
|
|
84
|
+
"type": {
|
|
85
|
+
"text": "string"
|
|
86
|
+
},
|
|
87
|
+
"description": "Name shown in the link and copyright line. Defaults to `Anonymous`."
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "year",
|
|
91
|
+
"type": {
|
|
92
|
+
"text": "string"
|
|
93
|
+
},
|
|
94
|
+
"description": "Copyright year. Defaults to the current year."
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "copyright",
|
|
98
|
+
"type": {
|
|
99
|
+
"text": "\"bugs\"|\"reserved\"|\"copyright\"|\"simple\""
|
|
100
|
+
},
|
|
101
|
+
"description": "Copyright preset. Defaults to `bugs`."
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "copyright-text",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "string"
|
|
107
|
+
},
|
|
108
|
+
"description": "Custom copyright template. Overrides `copyright`. Supports `{year}` and `{nickname}` placeholders."
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"type": {
|
|
112
|
+
"text": "\"always\""
|
|
113
|
+
},
|
|
114
|
+
"description": "When `always`, the tagline is always visible instead of only on hover.",
|
|
115
|
+
"name": "reveal"
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
"superclass": {
|
|
119
|
+
"name": "HTMLElement"
|
|
120
|
+
},
|
|
121
|
+
"tagName": "site-footer",
|
|
122
|
+
"customElement": true
|
|
123
|
+
}
|
|
124
|
+
],
|
|
125
|
+
"exports": [
|
|
126
|
+
{
|
|
127
|
+
"kind": "js",
|
|
128
|
+
"name": "SiteFooter",
|
|
129
|
+
"declaration": {
|
|
130
|
+
"name": "SiteFooter",
|
|
131
|
+
"module": "src/footer/site-footer.ts"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"kind": "custom-element-definition",
|
|
136
|
+
"name": "site-footer",
|
|
137
|
+
"declaration": {
|
|
138
|
+
"name": "SiteFooter",
|
|
139
|
+
"module": "src/footer/site-footer.ts"
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
}
|
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A configurable site footer with a name link, a copyright line and a
|
|
3
|
+
* reveal-on-hover tagline.
|
|
4
|
+
*
|
|
5
|
+
* @element site-footer
|
|
6
|
+
*
|
|
7
|
+
* @attr {string} nickname - Name shown in the link and copyright line. Defaults to `Anonymous`.
|
|
8
|
+
* @attr {string} year - Copyright year. Defaults to the current year.
|
|
9
|
+
* @attr {"bugs"|"reserved"|"copyright"|"simple"} copyright - Copyright preset. Defaults to `bugs`.
|
|
10
|
+
* @attr {string} copyright-text - Custom copyright template. Overrides `copyright`. Supports `{year}` and `{nickname}` placeholders.
|
|
11
|
+
* @attr {"always"} reveal - When `always`, the tagline is always visible instead of only on hover.
|
|
12
|
+
*
|
|
13
|
+
* @slot - Default slot for extra footer content.
|
|
14
|
+
* @slot tagline - Overrides the default "Made with ❤️ from Spain." tagline.
|
|
15
|
+
*
|
|
16
|
+
* @cssprop [--font=inherit] - Footer font family.
|
|
17
|
+
* @cssprop [--link=inherit] - Name link color.
|
|
18
|
+
* @cssprop [--link-hover=var(--link)] - Name link hover color.
|
|
19
|
+
* @cssprop [--accent=crimson] - Heart / accent color in the default tagline.
|
|
20
|
+
*/
|
|
1
21
|
export declare class SiteFooter extends HTMLElement {
|
|
2
22
|
static observedAttributes: string[];
|
|
3
23
|
constructor();
|
|
@@ -29,7 +29,7 @@ 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); }
|
|
32
|
+
#name-link { color: var(--link, inherit); text-decoration: none; }
|
|
33
33
|
#name-link:hover { color: var(--link-hover, var(--link)); }
|
|
34
34
|
.heart { color: var(--accent, crimson); }
|
|
35
35
|
|
|
@@ -51,6 +51,26 @@ template.innerHTML = `
|
|
|
51
51
|
</div>
|
|
52
52
|
</footer>
|
|
53
53
|
`;
|
|
54
|
+
/**
|
|
55
|
+
* A configurable site footer with a name link, a copyright line and a
|
|
56
|
+
* reveal-on-hover tagline.
|
|
57
|
+
*
|
|
58
|
+
* @element site-footer
|
|
59
|
+
*
|
|
60
|
+
* @attr {string} nickname - Name shown in the link and copyright line. Defaults to `Anonymous`.
|
|
61
|
+
* @attr {string} year - Copyright year. Defaults to the current year.
|
|
62
|
+
* @attr {"bugs"|"reserved"|"copyright"|"simple"} copyright - Copyright preset. Defaults to `bugs`.
|
|
63
|
+
* @attr {string} copyright-text - Custom copyright template. Overrides `copyright`. Supports `{year}` and `{nickname}` placeholders.
|
|
64
|
+
* @attr {"always"} reveal - When `always`, the tagline is always visible instead of only on hover.
|
|
65
|
+
*
|
|
66
|
+
* @slot - Default slot for extra footer content.
|
|
67
|
+
* @slot tagline - Overrides the default "Made with ❤️ from Spain." tagline.
|
|
68
|
+
*
|
|
69
|
+
* @cssprop [--font=inherit] - Footer font family.
|
|
70
|
+
* @cssprop [--link=inherit] - Name link color.
|
|
71
|
+
* @cssprop [--link-hover=var(--link)] - Name link hover color.
|
|
72
|
+
* @cssprop [--accent=crimson] - Heart / accent color in the default tagline.
|
|
73
|
+
*/
|
|
54
74
|
export class SiteFooter extends HTMLElement {
|
|
55
75
|
static observedAttributes = [
|
|
56
76
|
"nickname",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# `<component-name>`
|
|
2
|
+
|
|
3
|
+
One-line description of what the component is and does.
|
|
4
|
+
|
|
5
|
+
## Example
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<component-name attr="value"></component-name>
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Attributes
|
|
12
|
+
|
|
13
|
+
| Attribute | Values | Default | Effect |
|
|
14
|
+
| --- | --- | --- | --- |
|
|
15
|
+
| | | | |
|
|
16
|
+
|
|
17
|
+
## Slots
|
|
18
|
+
|
|
19
|
+
| Slot | Description |
|
|
20
|
+
| --- | --- |
|
|
21
|
+
| _(default)_ | |
|
|
22
|
+
|
|
23
|
+
## CSS Custom Properties
|
|
24
|
+
|
|
25
|
+
| Property | Default | Description |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| | | |
|
|
28
|
+
|
|
29
|
+
## Notes
|
|
30
|
+
|
|
31
|
+
- Anything non-obvious: accessibility behavior, runtime caveats, defaults.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# `<site-footer>`
|
|
2
|
+
|
|
3
|
+
A configurable site footer with a name link, a copyright line and a reveal-on-hover tagline. Native custom element — no framework, no build step.
|
|
4
|
+
|
|
5
|
+
## Example
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<site-footer
|
|
9
|
+
nickname="Habakuk Beneke"
|
|
10
|
+
copyright="reserved"
|
|
11
|
+
style="--link: #4f46e5; --accent: crimson;"
|
|
12
|
+
>
|
|
13
|
+
<span slot="tagline">Made with ❤️ in Spain.</span>
|
|
14
|
+
</site-footer>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Attributes
|
|
18
|
+
|
|
19
|
+
| Attribute | Values | Default | Effect |
|
|
20
|
+
| --- | --- | --- | --- |
|
|
21
|
+
| `nickname` | string | `Anonymous` | Name shown in the link and copyright line. |
|
|
22
|
+
| `year` | string | current year | Copyright year. |
|
|
23
|
+
| `copyright` | `bugs` \| `reserved` \| `copyright` \| `simple` | `bugs` | Copyright preset (see below). |
|
|
24
|
+
| `copyright-text` | string | — | Custom copyright template. Overrides `copyright`. Supports `{year}` / `{nickname}`. |
|
|
25
|
+
| `reveal` | `always` | — | When `always`, the tagline stays visible instead of only on hover. |
|
|
26
|
+
|
|
27
|
+
### Copyright presets
|
|
28
|
+
|
|
29
|
+
| Preset | Output |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| `bugs` | `Copyright© {year}. All bugs reserved.` |
|
|
32
|
+
| `reserved` | `© {year} {nickname}. All rights reserved.` |
|
|
33
|
+
| `copyright` | `Copyright © {year} {nickname}. All rights reserved.` |
|
|
34
|
+
| `simple` | `© {year} {nickname}` |
|
|
35
|
+
|
|
36
|
+
## Slots
|
|
37
|
+
|
|
38
|
+
| Slot | Description |
|
|
39
|
+
| --- | --- |
|
|
40
|
+
| _(default)_ | Extra footer content appended after the tagline. |
|
|
41
|
+
| `tagline` | Overrides the default "Made with ❤️ from Spain." line. |
|
|
42
|
+
|
|
43
|
+
## CSS Custom Properties
|
|
44
|
+
|
|
45
|
+
| Property | Default | Description |
|
|
46
|
+
| --- | --- | --- |
|
|
47
|
+
| `--font` | `inherit` | Footer font family. |
|
|
48
|
+
| `--link` | `inherit` | Name link color. |
|
|
49
|
+
| `--link-hover` | `var(--link)` | Name link hover color. |
|
|
50
|
+
| `--accent` | `crimson` | Heart / accent color in the tagline. |
|
|
51
|
+
|
|
52
|
+
## Notes
|
|
53
|
+
|
|
54
|
+
- The name link points to `/about` and carries an `aria-label` of `Learn more about {nickname}`.
|
|
55
|
+
- On devices with hover, the tagline is hidden until the footer box is hovered. Set `reveal="always"` to keep it visible. `reveal` is read on render only; it is not currently in `observedAttributes`, so changing it at runtime after connection does not re-render.
|
package/llms.txt
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# parley
|
|
2
|
+
|
|
3
|
+
> A small crew of native Web Components. No framework, no runtime, no build step on the consumer side — custom elements that work wherever HTML does. Published as `@hbeneke/parley` on npm.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```js
|
|
8
|
+
import "@hbeneke/parley";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Then drop the tags into your markup.
|
|
12
|
+
|
|
13
|
+
## Components
|
|
14
|
+
|
|
15
|
+
- [site-footer](docs/site-footer.md): Configurable site footer with a name link, copyright-line presets, an optional custom copyright template, slotted content, a reveal-on-hover tagline, and CSS custom properties for theming.
|
|
16
|
+
|
|
17
|
+
## Reference
|
|
18
|
+
|
|
19
|
+
- [custom-elements.json](custom-elements.json): Custom Elements Manifest — machine-readable metadata (attributes, slots, CSS custom properties) for every component.
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hbeneke/parley",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "A crew of reusable native Web Components.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Enrique Quero Vilar",
|
|
7
7
|
"nickname": "Habakuk Beneke",
|
|
8
|
-
"e-mail": "
|
|
8
|
+
"e-mail": "hbeneke [at] proton [dot] me"
|
|
9
9
|
},
|
|
10
10
|
"license": "GPL-3.0-only",
|
|
11
11
|
"repository": {
|
|
@@ -26,7 +26,12 @@
|
|
|
26
26
|
"import": "./dist/index.js"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
-
"files": [
|
|
29
|
+
"files": [
|
|
30
|
+
"dist",
|
|
31
|
+
"custom-elements.json",
|
|
32
|
+
"llms.txt",
|
|
33
|
+
"docs"
|
|
34
|
+
],
|
|
30
35
|
"keywords": [
|
|
31
36
|
"web-components",
|
|
32
37
|
"custom-elements",
|
|
@@ -36,12 +41,18 @@
|
|
|
36
41
|
"scripts": {
|
|
37
42
|
"build": "tsc",
|
|
38
43
|
"dev": "tsc -w",
|
|
39
|
-
"
|
|
44
|
+
"analyze": "cem analyze",
|
|
45
|
+
"prepublishOnly": "npm run analyze && npm run build",
|
|
46
|
+
"release:patch": "npm version patch -m \"chore(release): %s\" && git push --follow-tags && npm publish",
|
|
47
|
+
"release:minor": "npm version minor -m \"chore(release): %s\" && git push --follow-tags && npm publish",
|
|
48
|
+
"release:major": "npm version major -m \"chore(release): %s\" && git push --follow-tags && npm publish"
|
|
40
49
|
},
|
|
41
50
|
"publishConfig": {
|
|
42
51
|
"access": "public"
|
|
43
52
|
},
|
|
44
53
|
"devDependencies": {
|
|
54
|
+
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
45
55
|
"typescript": "^5.8.3"
|
|
46
|
-
}
|
|
56
|
+
},
|
|
57
|
+
"customElements": "custom-elements.json"
|
|
47
58
|
}
|