kempo-server 3.1.0 → 3.1.1

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.
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
package/docs/index.html CHANGED
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
package/docs/routing.html CHANGED
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
@@ -37,13 +37,35 @@
37
37
  class="d-if ph"
38
38
  style="align-items: center"
39
39
  >
40
- <img src="./media/icon32.png" alt="Kempo Server Icon" class="pr" />
40
+ <img
41
+ src="./media/icon32.png"
42
+ alt="Kempo Server Icon"
43
+ class="pr"
44
+ />
41
45
  Kempo Server
42
46
  </a>
43
47
  <div class="flex"></div>
44
- <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
45
- <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
46
- <k-theme-switcher></k-theme-switcher>
48
+ <a
49
+ href="https://github.com/dustinpoissant/kempo-server?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
50
+ target="_blank"
51
+ ><k-icon name="license"></k-icon></a>
52
+ <a
53
+ href="https://www.npmjs.com/package/kempo-server"
54
+ target="_blank"
55
+ ><k-icon name="npm"></k-icon></a>
56
+ <a
57
+ href="https://github.com/dustinpoissant/kempo-server"
58
+ target="_blank"
59
+ ><k-icon name="github-mark"></k-icon></a>
60
+ <k-theme-switcher
61
+ class="mr"
62
+ style="
63
+ --padding: 0.5rem;
64
+ --c_active: var(--tc_on_primary);
65
+ --tc_active: var(--c_primary);
66
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
67
+ "
68
+ ></k-theme-switcher>
47
69
  </k-nav>
48
70
  <div style="width: 100%; height: 4rem;"></div>
49
71
  <k-aside
@@ -51,9 +73,15 @@
51
73
  state="offscreen"
52
74
  >
53
75
  <menu>
54
- <a href="./" class="ta-center bb mb r0">
76
+ <a
77
+ href="./"
78
+ class="ta-center bb mb r0"
79
+ >
55
80
  <h1 class="tc-primary">Kempo Server</h1>
56
- <img src="./media/icon128.png" alt="Kempo UI Icon" />
81
+ <img
82
+ src="./media/icon128.png"
83
+ alt="Kempo UI Icon"
84
+ />
57
85
  </a>
58
86
 
59
87
  <h3 class="mt mb0">Advanced Features</h3>
@@ -72,18 +100,38 @@
72
100
  <br /><br />
73
101
 
74
102
  </menu>
103
+ <k-aside-spacer></k-aside-spacer>
104
+ <k-theme-switcher
105
+ labels
106
+ style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
107
+ ></k-theme-switcher>
75
108
  </k-aside>
76
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js" type="module"></script>
77
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js" type="module"></script>
78
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js" type="module"></script>
80
- <script src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js" type="module"></script>
109
+ <script
110
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Aside.js"
111
+ type="module"
112
+ ></script>
113
+ <script
114
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Main.js"
115
+ type="module"
116
+ ></script>
117
+ <script
118
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Nav.js"
119
+ type="module"
120
+ ></script>
121
+ <script
122
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/Icon.js"
123
+ type="module"
124
+ ></script>
125
+ <script
126
+ src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/src/components/ThemeSwitcher.js"
127
+ type="module"
128
+ ></script>
81
129
  <script>
82
130
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
83
131
  await window.customElements.whenDefined('k-aside');
84
132
  document.getElementById('navSideMenu').toggle();
85
133
  });
86
- document.addEventListener('click', function(e) {
134
+ document.addEventListener('click', function (e) {
87
135
  if (e.target.matches('a[href^="#"]')) {
88
136
  e.preventDefault();
89
137
  const targetId = e.target.getAttribute('href').replace('#', '');
@@ -336,7 +384,7 @@
336
384
  </div>
337
385
  <p>A common use case is sending templated emails. Create a dedicated email directory with a shared template, per-email pages, reusable fragments, and optional global content:</p>
338
386
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderPageToString } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><span class="hljs-keyword">import</span> path <span class="hljs-keyword">from</span> <span class="hljs-string">'path'</span>;<br /><br /><span class="hljs-keyword">const</span> emailsDir = path.resolve(<span class="hljs-string">'./emails'</span>);<br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPageToString(<br /> path.join(emailsDir, <span class="hljs-string">'welcome.page.html'</span>),<br /> { userName: <span class="hljs-string">'Alice'</span>, orderId: <span class="hljs-string">'1234'</span> }<br />);</code></pre>
339
- <p>Built-in vars (<code>2026</code>, <code>2026-04-19</code>, <code>2026-04-19T16:45:40.333Z</code>, <code>1776617140333</code>) are always available. Note that <code>&lt;page&gt;</code> tag attributes take highest priority and override <code>vars</code> with the same key.</p>
387
+ <p>Built-in vars (<code>2026</code>, <code>2026-04-20</code>, <code>2026-04-20T13:49:28.936Z</code>, <code>1776692968936</code>) are always available. Note that <code>&lt;page&gt;</code> tag attributes take highest priority and override <code>vars</code> with the same key.</p>
340
388
 
341
389
  <h3 id="render-external-page">renderExternalPage</h3>
342
390
  <p>Identical pipeline to <code>renderPage</code>, but decouples the page file's physical location from where templates and fragments are resolved. Use this when a page file lives outside <code>rootDir</code> — for example, in a plugin or extension package — but should be rendered using the host project's templates, fragments, and globals.</p>
package/docs/theme.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --c_primary: hsl(262, 52%, 47%);
3
3
  --c_secondary: rgb(51, 102, 255);
4
- --tc_primary: light-dark(#93f, rgb(187, 102, 255));
4
+ --tc_primary: light-dark(hsl(262, 52%, 47%), rgb(187, 102, 255));
5
5
  --tc_secondary: light-dark(#36f, rgb(138, 180, 248));
6
6
  --c_highlight: light-dark(rgba(153, 51, 255, 0.25), rgba(153, 51, 255, 0.25));
7
7
  }