so-web-components 0.1.0 → 0.1.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/README.md +42 -2
- package/dist/components/so-header.js +9 -9
- package/dist/demo/cdn-demo.html +54 -0
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ abgeleitet aus dem Layout-Prinzip von so.ch.
|
|
|
12
12
|
- `src/components/so-header.ts` – `<so-header>` Web Component (Shadow DOM)
|
|
13
13
|
- `src/components/so-breadcrumb.ts` – `<so-breadcrumb>` Web Component (Shadow DOM)
|
|
14
14
|
- `src/demo/index.html` – Demo-Seite
|
|
15
|
+
- `src/demo/cdn-demo.html` – einfache CDN-Demo-Seite
|
|
15
16
|
- `tests/so-header.test.ts` – Tests (Jest + JSDOM)
|
|
16
17
|
- `tests/so-breadcrumb.test.ts` – Tests (Jest + JSDOM)
|
|
17
18
|
|
|
@@ -39,7 +40,9 @@ Outputs:
|
|
|
39
40
|
- `dist/components/...`
|
|
40
41
|
- `dist/styles/tokens.css`
|
|
41
42
|
- `dist/styles/reset.css`
|
|
43
|
+
- `dist/styles/fonts.css`
|
|
42
44
|
- `dist/demo/index.html`
|
|
45
|
+
- `dist/demo/cdn-demo.html`
|
|
43
46
|
|
|
44
47
|
## Tests
|
|
45
48
|
|
|
@@ -89,6 +92,43 @@ Optional ohne Versions-Pin:
|
|
|
89
92
|
<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components/dist/index.js"></script>
|
|
90
93
|
```
|
|
91
94
|
|
|
95
|
+
### Einfache Test-Webseite via CDN (Version `0.1.1`)
|
|
96
|
+
|
|
97
|
+
Eine fertige Beispielseite liegt unter `src/demo/cdn-demo.html` (wird nach `dist/demo/cdn-demo.html` kopiert):
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!doctype html>
|
|
101
|
+
<html lang="de">
|
|
102
|
+
<head>
|
|
103
|
+
<meta charset="utf-8" />
|
|
104
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
105
|
+
<title>so-web-components CDN Demo</title>
|
|
106
|
+
|
|
107
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
|
|
108
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
|
|
109
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
|
|
110
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
|
|
111
|
+
</head>
|
|
112
|
+
<body>
|
|
113
|
+
<so-header
|
|
114
|
+
active-section="Verwaltung"
|
|
115
|
+
site-name="Kanton Solothurn">
|
|
116
|
+
</so-header>
|
|
117
|
+
<so-breadcrumb>
|
|
118
|
+
<so-breadcrumb-item href="/">Startseite</so-breadcrumb-item>
|
|
119
|
+
<so-breadcrumb-item href="/beispiele">Beispiele</so-breadcrumb-item>
|
|
120
|
+
<so-breadcrumb-item isCurrentPage>CDN Demo</so-breadcrumb-item>
|
|
121
|
+
</so-breadcrumb>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Hinweis zu Fonts:
|
|
127
|
+
|
|
128
|
+
- Die Schrift wird **nicht** automatisch durch `index.js` nachgeladen.
|
|
129
|
+
- `dist/styles/fonts.css` muss explizit eingebunden werden (lokal oder via CDN).
|
|
130
|
+
- In `fonts.css` ist die Frutiger-Webfont als `@font-face` enthalten.
|
|
131
|
+
|
|
92
132
|
## Dev / Demo starten
|
|
93
133
|
|
|
94
134
|
### Live Reload (empfohlen)
|
|
@@ -145,7 +185,7 @@ Dann im Browser öffnen:
|
|
|
145
185
|
|
|
146
186
|
```html
|
|
147
187
|
<so-header
|
|
148
|
-
top-nav='[{"label":"Regierung","href":"/regierung"},{"label":"Gerichte","href":"/gerichte"}]'
|
|
188
|
+
top-nav='[{"label":"Regierung","href":"https://so.ch/regierung/"},{"label":"Gerichte","href":"https://so.ch/gerichte/"}]'
|
|
149
189
|
section-nav='[{"label":"Services","href":"/services"},{"label":"Verwaltung","href":"/verwaltung"}]'
|
|
150
190
|
active-section="Services"
|
|
151
191
|
logo-href="/"
|
|
@@ -210,7 +250,7 @@ Einfach per CSS Custom Properties:
|
|
|
210
250
|
}
|
|
211
251
|
```
|
|
212
252
|
|
|
213
|
-
> Hinweis:
|
|
253
|
+
> Hinweis: Wenn du `styles/fonts.css` einbindest, wird Frutiger als Webfont geladen.
|
|
214
254
|
|
|
215
255
|
## Lizenz
|
|
216
256
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
const DEFAULT_TOP_NAV = [
|
|
2
|
-
{ label: "Regierung", href: "
|
|
3
|
-
{ label: "Gerichte", href: "
|
|
4
|
-
{ label: "Parlament", href: "
|
|
5
|
-
{ label: "Karriere", href: "
|
|
6
|
-
{ label: "my.so.ch", href: "
|
|
2
|
+
{ label: "Regierung", href: "https://so.ch/regierung/" },
|
|
3
|
+
{ label: "Gerichte", href: "https://so.ch/gerichte/" },
|
|
4
|
+
{ label: "Parlament", href: "https://so.ch/parlament/" },
|
|
5
|
+
{ label: "Karriere", href: "https://karriere.so.ch/" },
|
|
6
|
+
{ label: "my.so.ch", href: "https://my.so.ch/" }
|
|
7
7
|
];
|
|
8
8
|
const DEFAULT_SECTION_NAV = [
|
|
9
|
-
{ label: "Services", href: "
|
|
10
|
-
{ label: "Verwaltung", href: "
|
|
9
|
+
{ label: "Services", href: "https://so.ch/services/" },
|
|
10
|
+
{ label: "Verwaltung", href: "https://so.ch/verwaltung/" }
|
|
11
11
|
];
|
|
12
12
|
function safeParseNav(json, fallback) {
|
|
13
13
|
if (!json)
|
|
@@ -84,7 +84,7 @@ export class SoHeader extends HTMLElement {
|
|
|
84
84
|
this.topNav = DEFAULT_TOP_NAV;
|
|
85
85
|
this.sectionNav = DEFAULT_SECTION_NAV;
|
|
86
86
|
this.activeSection = "Services";
|
|
87
|
-
this.logoHref = "
|
|
87
|
+
this.logoHref = "https://so.ch";
|
|
88
88
|
this.siteName = "Kanton Solothurn";
|
|
89
89
|
this.root = this.attachShadow({ mode: "open" });
|
|
90
90
|
this.updateFromAttributes();
|
|
@@ -159,7 +159,7 @@ export class SoHeader extends HTMLElement {
|
|
|
159
159
|
const label = el("span");
|
|
160
160
|
label.textContent = item.label;
|
|
161
161
|
a.append(label);
|
|
162
|
-
a.insertAdjacentHTML("beforeend", ` <svg class="icon" viewBox="0 0
|
|
162
|
+
a.insertAdjacentHTML("beforeend", ` <svg class="icon" viewBox="0 0 22 22" aria-hidden="true" focusable="false"><title>my.so.ch</title><path d="M20.39 18.71c1.48-1.84 2.36-4.17 2.36-6.71 0-5.93-4.82-10.75-10.75-10.75S1.25 6.07 1.25 12 6.07 22.75 12 22.75c3.39 0 6.41-1.58 8.38-4.04ZM12 2.75c5.1 0 9.25 4.15 9.25 9.25 0 1.93-.6 3.72-1.61 5.21-1.08-.92-3.49-2.46-7.64-2.46s-6.56 1.54-7.64 2.46A9.156 9.156 0 0 1 2.75 12c0-5.1 4.15-9.25 9.25-9.25Zm0 18.5c-2.63 0-5.01-1.11-6.69-2.88.84-.74 2.93-2.12 6.69-2.12s5.85 1.38 6.69 2.12C17 20.14 14.63 21.25 12 21.25Z"/><path d="M12 12.75c2.07 0 3.75-1.68 3.75-3.75S14.07 5.25 12 5.25 8.25 6.93 8.25 9s1.68 3.75 3.75 3.75Zm0-6c1.24 0 2.25 1.01 2.25 2.25s-1.01 2.25-2.25 2.25S9.75 10.24 9.75 9 10.76 6.75 12 6.75Z"/></svg>`);
|
|
163
163
|
return true;
|
|
164
164
|
}
|
|
165
165
|
return false;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="de">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
6
|
+
<title>so-web-components CDN Demo</title>
|
|
7
|
+
|
|
8
|
+
<!-- Basis-Styles und Fonts von CDN -->
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
|
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
|
|
12
|
+
|
|
13
|
+
<!-- Web Components von CDN -->
|
|
14
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
|
|
15
|
+
|
|
16
|
+
<style>
|
|
17
|
+
body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
background: var(--so-bg);
|
|
20
|
+
color: var(--so-fg);
|
|
21
|
+
font-family: var(--so-font-family);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
main {
|
|
25
|
+
max-width: 960px;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
padding: 24px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1 {
|
|
31
|
+
margin: 0 0 12px;
|
|
32
|
+
font-size: 1.5rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
p {
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
39
|
+
</head>
|
|
40
|
+
<body>
|
|
41
|
+
<so-header></so-header>
|
|
42
|
+
|
|
43
|
+
<so-breadcrumb>
|
|
44
|
+
<so-breadcrumb-item href="/">Startseite</so-breadcrumb-item>
|
|
45
|
+
<so-breadcrumb-item href="/beispiele">Beispiele</so-breadcrumb-item>
|
|
46
|
+
<so-breadcrumb-item isCurrentPage>CDN Demo</so-breadcrumb-item>
|
|
47
|
+
</so-breadcrumb>
|
|
48
|
+
|
|
49
|
+
<main>
|
|
50
|
+
<h1>Demo-Seite für einfache Webseiten</h1>
|
|
51
|
+
<p>Diese Seite lädt <code>so-header</code> und <code>so-breadcrumb</code> direkt aus dem CDN.</p>
|
|
52
|
+
</main>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "so-web-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "https://github.com/edigonzales/so-web-components.git"
|
|
7
|
+
},
|
|
8
|
+
"homepage": "https://github.com/edigonzales/so-web-components#readme",
|
|
9
|
+
"bugs": {
|
|
10
|
+
"url": "https://github.com/edigonzales/so-web-components/issues"
|
|
11
|
+
},
|
|
4
12
|
"private": false,
|
|
5
13
|
"type": "module",
|
|
6
14
|
"description": "Vanilla TypeScript Web Components inspired by so.ch layout (tokens + header component).",
|