markupress 0.8.6 → 0.9.0
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 -1
- package/dist/controllers/shell.d.ts.map +1 -1
- package/dist/controllers/shell.js +19 -13
- package/dist/controllers/shell.js.map +1 -1
- package/package.json +3 -3
- package/theme/chrome.html +4 -4
package/README.md
CHANGED
|
@@ -62,6 +62,6 @@ Foundation pins TypeScript, Vitest, Oxlint and pnpm. [AGENTS.md](AGENTS.md) is t
|
|
|
62
62
|
|
|
63
63
|
Markupress has its own quiet green light/dark palette. Its shell, navigation rows, current selection, focus, prose and controls consume Looma's public semantic properties, so a site can apply a different identity throughout. Put site-wide overrides in `app/site.css`, or use HTMLKit's `css` option. Keep styling for a new identity at that theme boundary rather than selecting the internals of nested Looma controls. Set `--markupress-background` to add a page-wide texture or gradient; it defaults to `var(--ui-surface)` and can use the same semantic colors.
|
|
64
64
|
|
|
65
|
-
Without a saved mode, the site follows the operating system and responds when that preference changes. The header
|
|
65
|
+
Without a saved mode, the site follows the operating system and responds when that preference changes. The header uses one Looma CycleButton: activate it to move through Automatic, Light and Dark. Its monitor, sun or moon icon shows the current choice. Explicit Light/Dark choices are remembered; Automatic clears the override and follows the operating system. Header actions reserve separate cells for the adjustable invisible hit-area preference, so their visible buttons stay compact without overlapping targets. This theme requires Looma 0.37.1 or newer on its supported 0.37 line. In an application that supplies its own mode switch, set `data-theme="light"` or `data-theme="dark"`; nested boundaries apply only to their descendants. Remove the root attribute when using the CSS directly to follow system preference.
|
|
66
66
|
|
|
67
67
|
The shared shell supports `--markupress-sidebar-width`, `--markupress-content-width`, `--markupress-page-width` and `--markupress-outline-width`. Navigation is rendered by Looma's Disclosure and Nav Item components and uses its `--ui-nav-*`, `--ui-selection-*`, typography, spacing and focus families. On screens at or below 996px it becomes a native popover drawer.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../src/controllers/shell.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../src/controllers/shell.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAuCvD"}
|
|
@@ -30,28 +30,34 @@ export default function shell(host) {
|
|
|
30
30
|
if (header)
|
|
31
31
|
observer.observe(header);
|
|
32
32
|
measureHeader();
|
|
33
|
+
const appearanceChange = (event) => {
|
|
34
|
+
const target = event.target;
|
|
35
|
+
if (!(target instanceof window.Element) || !target.matches('[data-action="theme"]'))
|
|
36
|
+
return;
|
|
37
|
+
const choice = event.detail?.value;
|
|
38
|
+
if (choice !== 'automatic' && choice !== 'light' && choice !== 'dark')
|
|
39
|
+
return;
|
|
40
|
+
appearance = choice;
|
|
41
|
+
apply();
|
|
42
|
+
try {
|
|
43
|
+
if (choice === 'automatic')
|
|
44
|
+
window.localStorage.removeItem('markupress:theme');
|
|
45
|
+
else
|
|
46
|
+
window.localStorage.setItem('markupress:theme', choice);
|
|
47
|
+
}
|
|
48
|
+
catch { /* Theme still applies for this page. */ }
|
|
49
|
+
};
|
|
33
50
|
const click = (event) => {
|
|
34
51
|
const target = event.target;
|
|
35
52
|
if (!(target instanceof window.Element))
|
|
36
53
|
return;
|
|
37
|
-
const choice = target.closest('[data-action="theme"]')?.dataset.themeChoice;
|
|
38
|
-
if (choice === 'automatic' || choice === 'light' || choice === 'dark') {
|
|
39
|
-
appearance = choice;
|
|
40
|
-
apply();
|
|
41
|
-
try {
|
|
42
|
-
if (choice === 'automatic')
|
|
43
|
-
window.localStorage.removeItem('markupress:theme');
|
|
44
|
-
else
|
|
45
|
-
window.localStorage.setItem('markupress:theme', choice);
|
|
46
|
-
}
|
|
47
|
-
catch { /* Theme still applies for this page. */ }
|
|
48
|
-
}
|
|
49
54
|
if (target.closest('a[href]'))
|
|
50
55
|
host.root.querySelector('#documentation-navigation:popover-open')?.hidePopover();
|
|
51
56
|
};
|
|
52
57
|
// The page sits inside the shell, so this sees every click.
|
|
58
|
+
host.root.addEventListener('change', appearanceChange);
|
|
53
59
|
host.root.addEventListener('click', click);
|
|
54
|
-
return () => { host.root.removeEventListener('click', click); system.removeEventListener('change', apply); observer.disconnect(); window.cancelAnimationFrame(ready); };
|
|
60
|
+
return () => { host.root.removeEventListener('change', appearanceChange); host.root.removeEventListener('click', click); system.removeEventListener('change', apply); observer.disconnect(); window.cancelAnimationFrame(ready); };
|
|
55
61
|
});
|
|
56
62
|
}
|
|
57
63
|
//# sourceMappingURL=shell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/controllers/shell.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAmB;IAC/C,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,WAAY,CAAC;QACrC,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QACjE,IAAI,UAAU,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC;YAAC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;YAAC,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM;gBAAE,UAAU,GAAG,KAAK,CAAC;QAAC,CAAC;QAAC,MAAM,CAAC,CAAC,wCAAwC,CAAC,CAAC;QACxL,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;YACnC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;QACzH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACzC,KAAK,EAAE,CAAC;QACR,MAAM,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACzF,gFAAgF;QAChF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,sCAAsC,CAAC,CAAC;QAC5F,MAAM,aAAa,GAAG,GAAG,EAAE,GAAG,IAAI,MAAM;YAAG,IAAI,CAAC,IAAoB,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACvK,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC1D,IAAI,MAAM;YAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,aAAa,EAAE,CAAC;QAChB,MAAM,
|
|
1
|
+
{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/controllers/shell.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markupress",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Versioned Markdown documentation built on HTMLKit and native declarative components.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"playwright": "1.64.0",
|
|
51
51
|
"@axe-core/playwright": "4.13.0",
|
|
52
52
|
"@nextwebwg/html-next": "1.0.0-alpha.69",
|
|
53
|
-
"@threadlabs/looma": "0.
|
|
53
|
+
"@threadlabs/looma": "0.37.1",
|
|
54
54
|
"@types/markdown-it": "14.2.0",
|
|
55
55
|
"jsdom": "30.1.2"
|
|
56
56
|
},
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
78
|
"@nextwebwg/html-next": "1.0.0-alpha.69",
|
|
79
|
-
"@threadlabs/looma": "^0.
|
|
79
|
+
"@threadlabs/looma": "^0.37.1"
|
|
80
80
|
},
|
|
81
81
|
"bin": {
|
|
82
82
|
"markupress": "./dist/cli.js"
|
package/theme/chrome.html
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<link rel="component" href="@threadlabs/looma/components/ui-icon-button/ui-icon-button.html">
|
|
2
|
+
<link rel="component" href="@threadlabs/looma/components/ui-cycle-button/ui-cycle-button.html">
|
|
2
3
|
<link rel="component" href="@threadlabs/looma/components/ui-badge/ui-badge.html">
|
|
3
4
|
<link rel="component" href="./search.html">
|
|
4
5
|
<template component="markupress-header">
|
|
@@ -17,13 +18,12 @@
|
|
|
17
18
|
<nav class="top" $if="$nav.length" aria-label="Main"><ul><li $each="item of $nav">
|
|
18
19
|
<a from:href="$item.href" from:aria-current="$item.current"><template $match><img $when="$item.icon" from:src="$item.icon" from:alt="$item.label"><template $else>{$item.label}</template></template></a>
|
|
19
20
|
</li></ul></nav>
|
|
20
|
-
<div class="actions"><markupress-search $if="$search" from:index="$search"></markupress-search><
|
|
21
|
+
<div class="actions" from:data-ready="$appearanceReady"><markupress-search $if="$search" from:index="$search"></markupress-search><ui-cycle-button label="Appearance" variant="outline" data-action="theme" from:index="{ automatic: 0, light: 1, dark: 2 }[$appearance]" items='[{"value":"automatic","label":"Automatic","icon":"monitor"},{"value":"light","label":"Light","icon":"sun"},{"value":"dark","label":"Dark","icon":"moon"}]'></ui-cycle-button></div></header>
|
|
21
22
|
<style>
|
|
22
23
|
:host { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-4); min-block-size: var(--markupress-header-height, 4.25rem); border-bottom: 1px solid var(--ui-border, #8885); padding: var(--ui-space-2) max(var(--ui-space-4), calc((100vw - var(--markupress-page-width, 90rem)) / 2)); background: var(--ui-surface); }
|
|
23
24
|
.brand { min-inline-size: 0; display: flex; align-items: center; gap: var(--ui-space-3); color: inherit; font-size: 1.15rem; font-weight: 700; text-decoration: none; } .brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo { flex-shrink: 0; block-size: 2rem; inline-size: auto; }
|
|
24
|
-
.
|
|
25
|
-
.
|
|
26
|
-
.actions { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; margin-inline-start: auto; }
|
|
25
|
+
.actions:not([data-ready]) { --ui-motion-fast: 0ms; --ui-motion-base: 0ms; }
|
|
26
|
+
.actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)); flex-shrink: 0; align-items: center; justify-items: center; gap: var(--ui-space-2); margin-inline-start: auto; }
|
|
27
27
|
ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
|
|
28
28
|
a { color: inherit; text-decoration: none; } a:hover, a[aria-current="page"], a[aria-current="true"] { color: var(--ui-accent); } a[aria-current="page"] { font-weight: 700; }
|
|
29
29
|
.top { font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-semibold); }
|