@vit-foundation/ui 0.23.0 → 0.24.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/dist/components/admin/Sidebar.svelte +11 -21
- package/dist/components/layout/PageShell.svelte +5 -4
- package/dist/components/layout/PageShell.svelte.d.ts +3 -3
- package/dist/contract.d.ts +5 -0
- package/dist/contract.js +5 -0
- package/dist/testing/imports.d.ts +51 -0
- package/dist/testing/imports.js +70 -0
- package/dist/utils/document-title.d.ts +22 -0
- package/dist/utils/document-title.js +27 -0
- package/package.json +1 -1
|
@@ -95,7 +95,15 @@
|
|
|
95
95
|
box-shadow: var(--shadow-1);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
/*
|
|
99
|
+
* The rail's footprint, and the host's footer control with it — "should sit
|
|
100
|
+
* like an item" was the comment on a second, identical copy of these eleven
|
|
101
|
+
* declarations, and vit-brain had a third on its own logout button. One
|
|
102
|
+
* selector list is the whole rule: a host's footer submit is an item that
|
|
103
|
+
* happens to come from outside.
|
|
104
|
+
*/
|
|
105
|
+
.item,
|
|
106
|
+
.footer :global(button) {
|
|
99
107
|
display: inline-flex;
|
|
100
108
|
align-items: center;
|
|
101
109
|
justify-content: center;
|
|
@@ -109,7 +117,8 @@
|
|
|
109
117
|
transition: background var(--transition-fast);
|
|
110
118
|
}
|
|
111
119
|
|
|
112
|
-
.item:hover
|
|
120
|
+
.item:hover,
|
|
121
|
+
.footer :global(button:hover) {
|
|
113
122
|
background: color-mix(in srgb, var(--color-navy) 10%, transparent);
|
|
114
123
|
}
|
|
115
124
|
|
|
@@ -122,25 +131,6 @@
|
|
|
122
131
|
margin-top: auto;
|
|
123
132
|
}
|
|
124
133
|
|
|
125
|
-
/* The host's footer control (a logout submit) should sit like an item. */
|
|
126
|
-
.footer :global(button) {
|
|
127
|
-
display: inline-flex;
|
|
128
|
-
align-items: center;
|
|
129
|
-
justify-content: center;
|
|
130
|
-
width: 2.4rem;
|
|
131
|
-
height: 2.4rem;
|
|
132
|
-
border-radius: 999px;
|
|
133
|
-
color: var(--color-navy);
|
|
134
|
-
border: none;
|
|
135
|
-
background: transparent;
|
|
136
|
-
cursor: pointer;
|
|
137
|
-
transition: background var(--transition-fast);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.footer :global(button:hover) {
|
|
141
|
-
background: color-mix(in srgb, var(--color-navy) 10%, transparent);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
134
|
@media print {
|
|
145
135
|
.sidebar {
|
|
146
136
|
display: none;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
import { getUiConfig } from '../../config/context.js';
|
|
4
|
+
import { documentTitle } from '../../utils/document-title.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* The chrome every page shares: the content column, the vertical rhythm,
|
|
7
|
-
* and the browser title
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* and the browser title. The title FORMAT is `documentTitle`'s — the
|
|
9
|
+
* foundation site's error page cannot render through this component and
|
|
10
|
+
* needs the same format, and the two used to spell it separately.
|
|
10
11
|
*
|
|
11
12
|
* The shape is one named variant rather than four presentation flags.
|
|
12
13
|
* Width, spacing, stacking and the wrapper element were independent props,
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
let { title, description, variant = 'content', children }: Props = $props();
|
|
46
47
|
|
|
47
48
|
const config = getUiConfig();
|
|
48
|
-
const pageTitle = $derived(title
|
|
49
|
+
const pageTitle = $derived(documentTitle(title, config.siteName));
|
|
49
50
|
/**
|
|
50
51
|
* The editorial variants render an <article>, and say so to crawlers too.
|
|
51
52
|
* og:type was hardcoded to 'website' while the element already switched,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
/**
|
|
3
3
|
* The chrome every page shares: the content column, the vertical rhythm,
|
|
4
|
-
* and the browser title
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* and the browser title. The title FORMAT is `documentTitle`'s — the
|
|
5
|
+
* foundation site's error page cannot render through this component and
|
|
6
|
+
* needs the same format, and the two used to spell it separately.
|
|
7
7
|
*
|
|
8
8
|
* The shape is one named variant rather than four presentation flags.
|
|
9
9
|
* Width, spacing, stacking and the wrapper element were independent props,
|
package/dist/contract.d.ts
CHANGED
|
@@ -54,6 +54,11 @@ export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN
|
|
|
54
54
|
export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './forms/transport.js';
|
|
55
55
|
export type { FormFail, FormFieldIssue, FormResultLike, FormResultOf, KeyedRemoteForms, RemoteField, RemoteFormAttributes, RemoteFormInstance } from './forms/types.js';
|
|
56
56
|
export { buildQueryString, isExternalUrl, isInternalPath } from './utils/paths.js';
|
|
57
|
+
/**
|
|
58
|
+
* The browser-title format. On `./contract` because its second reader is a
|
|
59
|
+
* host's error page, which composes a title without rendering `PageShell`.
|
|
60
|
+
*/
|
|
61
|
+
export { documentTitle } from './utils/document-title.js';
|
|
57
62
|
/**
|
|
58
63
|
* The descriptor factories. `edit/helpers.ts` imports nothing but types from
|
|
59
64
|
* two modules this subpath already anchors, so it needed a door rather than a
|
package/dist/contract.js
CHANGED
|
@@ -57,6 +57,11 @@ export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INT
|
|
|
57
57
|
// import and no host has ever imported it, so exporting it pinned a prefix rule
|
|
58
58
|
// into semver for nobody. See utils/paths.ts.
|
|
59
59
|
export { buildQueryString, isExternalUrl, isInternalPath } from './utils/paths.js';
|
|
60
|
+
/**
|
|
61
|
+
* The browser-title format. On `./contract` because its second reader is a
|
|
62
|
+
* host's error page, which composes a title without rendering `PageShell`.
|
|
63
|
+
*/
|
|
64
|
+
export { documentTitle } from './utils/document-title.js';
|
|
60
65
|
/**
|
|
61
66
|
* The descriptor factories. `edit/helpers.ts` imports nothing but types from
|
|
62
67
|
* two modules this subpath already anchors, so it needed a door rather than a
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* What a source scan needs to see, and the anchors that keep it honest.
|
|
3
|
+
*
|
|
4
|
+
* Two guards in this package walk the source: `contract.test.ts` follows the
|
|
5
|
+
* relative import graph beneath `./contract`, and `no-app-imports.test.ts`
|
|
6
|
+
* scans every module for an app virtual specifier. They ask different
|
|
7
|
+
* questions of the same rule — WHICH MODULES DOES THIS ONE NAME — and each
|
|
8
|
+
* used to answer it with a pattern of its own. `contract.test.ts` found the
|
|
9
|
+
* defect in its copy and fixed it there:
|
|
10
|
+
*
|
|
11
|
+
* "THREE import forms, because two of them used to be invisible here. The
|
|
12
|
+
* pattern required the `from` keyword, so a side-effect import and a
|
|
13
|
+
* dynamic one both walked past a guard whose whole job is to see them."
|
|
14
|
+
*
|
|
15
|
+
* The other copy was not fixed and still required `from`, so a dynamic import
|
|
16
|
+
* of an $app specifier walked past the gate that decides whether this package
|
|
17
|
+
* is publishable. Copying the lesson a third time is how a guard
|
|
18
|
+
* starts missing things again; the grammar lives here instead, and each guard
|
|
19
|
+
* filters the specifiers it cares about.
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Every module specifier a source file names, in all three forms a bundler
|
|
23
|
+
* follows: `from '…'` (import and re-export alike), a bare side-effect
|
|
24
|
+
* `import '…'`, and a dynamic `import('…')`.
|
|
25
|
+
*
|
|
26
|
+
* A type-only import is reported like any other. That is deliberate, and it
|
|
27
|
+
* is `contract.test.ts`'s standing argument: erasure is a build-time fact, and
|
|
28
|
+
* a pattern that has to understand `import type` is a pattern with a second
|
|
29
|
+
* way to be wrong.
|
|
30
|
+
*/
|
|
31
|
+
export declare function importSpecifiers(source: string): readonly string[];
|
|
32
|
+
/**
|
|
33
|
+
* Every `.ts` and `.svelte` file beneath `root`, and the ones the walk MUST
|
|
34
|
+
* find.
|
|
35
|
+
*
|
|
36
|
+
* `mustReach` is a required argument for the reason `contract.test.ts` gives
|
|
37
|
+
* at length: an assertion over an empty list passes. `expect(offenders)
|
|
38
|
+
* .toEqual([])` is a clean bill of health over a walk that enumerated nothing
|
|
39
|
+
* — a directory renamed, a `readdirSync` that threw and was caught upstream,
|
|
40
|
+
* an entry filter that stopped matching — and a safety net that can narrow in
|
|
41
|
+
* silence reproduces the defect it exists to prevent. fndvit-website's
|
|
42
|
+
* `src/lib/testing/source-scan.ts` settled the shape: a scan cannot walk the
|
|
43
|
+
* tree without saying what it must find.
|
|
44
|
+
*
|
|
45
|
+
* Anchors are relative to `root` with `/` separators, so one representation
|
|
46
|
+
* crosses this interface and an anchor cannot silently fail to match an
|
|
47
|
+
* absolute path. A FLOOR was the alternative and is the thing being replaced:
|
|
48
|
+
* a walk that quietly stopped seeing two thirds of the tree clears any floor
|
|
49
|
+
* worth setting.
|
|
50
|
+
*/
|
|
51
|
+
export declare function sourceFiles(root: string, mustReach: readonly string[]): readonly string[];
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { readdirSync } from 'node:fs';
|
|
2
|
+
import { join, relative } from 'node:path';
|
|
3
|
+
/**
|
|
4
|
+
* What a source scan needs to see, and the anchors that keep it honest.
|
|
5
|
+
*
|
|
6
|
+
* Two guards in this package walk the source: `contract.test.ts` follows the
|
|
7
|
+
* relative import graph beneath `./contract`, and `no-app-imports.test.ts`
|
|
8
|
+
* scans every module for an app virtual specifier. They ask different
|
|
9
|
+
* questions of the same rule — WHICH MODULES DOES THIS ONE NAME — and each
|
|
10
|
+
* used to answer it with a pattern of its own. `contract.test.ts` found the
|
|
11
|
+
* defect in its copy and fixed it there:
|
|
12
|
+
*
|
|
13
|
+
* "THREE import forms, because two of them used to be invisible here. The
|
|
14
|
+
* pattern required the `from` keyword, so a side-effect import and a
|
|
15
|
+
* dynamic one both walked past a guard whose whole job is to see them."
|
|
16
|
+
*
|
|
17
|
+
* The other copy was not fixed and still required `from`, so a dynamic import
|
|
18
|
+
* of an $app specifier walked past the gate that decides whether this package
|
|
19
|
+
* is publishable. Copying the lesson a third time is how a guard
|
|
20
|
+
* starts missing things again; the grammar lives here instead, and each guard
|
|
21
|
+
* filters the specifiers it cares about.
|
|
22
|
+
*/
|
|
23
|
+
/**
|
|
24
|
+
* Every module specifier a source file names, in all three forms a bundler
|
|
25
|
+
* follows: `from '…'` (import and re-export alike), a bare side-effect
|
|
26
|
+
* `import '…'`, and a dynamic `import('…')`.
|
|
27
|
+
*
|
|
28
|
+
* A type-only import is reported like any other. That is deliberate, and it
|
|
29
|
+
* is `contract.test.ts`'s standing argument: erasure is a build-time fact, and
|
|
30
|
+
* a pattern that has to understand `import type` is a pattern with a second
|
|
31
|
+
* way to be wrong.
|
|
32
|
+
*/
|
|
33
|
+
export function importSpecifiers(source) {
|
|
34
|
+
return [...source.matchAll(/(?:\bfrom|\bimport)\s*\(?\s*['"]([^'"]*)['"]/g)].map(([, specifier]) => specifier);
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Every `.ts` and `.svelte` file beneath `root`, and the ones the walk MUST
|
|
38
|
+
* find.
|
|
39
|
+
*
|
|
40
|
+
* `mustReach` is a required argument for the reason `contract.test.ts` gives
|
|
41
|
+
* at length: an assertion over an empty list passes. `expect(offenders)
|
|
42
|
+
* .toEqual([])` is a clean bill of health over a walk that enumerated nothing
|
|
43
|
+
* — a directory renamed, a `readdirSync` that threw and was caught upstream,
|
|
44
|
+
* an entry filter that stopped matching — and a safety net that can narrow in
|
|
45
|
+
* silence reproduces the defect it exists to prevent. fndvit-website's
|
|
46
|
+
* `src/lib/testing/source-scan.ts` settled the shape: a scan cannot walk the
|
|
47
|
+
* tree without saying what it must find.
|
|
48
|
+
*
|
|
49
|
+
* Anchors are relative to `root` with `/` separators, so one representation
|
|
50
|
+
* crosses this interface and an anchor cannot silently fail to match an
|
|
51
|
+
* absolute path. A FLOOR was the alternative and is the thing being replaced:
|
|
52
|
+
* a walk that quietly stopped seeing two thirds of the tree clears any floor
|
|
53
|
+
* worth setting.
|
|
54
|
+
*/
|
|
55
|
+
export function sourceFiles(root, mustReach) {
|
|
56
|
+
const walk = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
|
|
57
|
+
const path = join(dir, entry.name);
|
|
58
|
+
if (entry.isDirectory())
|
|
59
|
+
return walk(path);
|
|
60
|
+
return /\.(ts|svelte)$/.test(entry.name) ? [path] : [];
|
|
61
|
+
});
|
|
62
|
+
const files = walk(root);
|
|
63
|
+
const found = new Set(files.map((file) => relative(root, file).replaceAll('\\', '/')));
|
|
64
|
+
const missing = mustReach.filter((anchor) => !found.has(anchor));
|
|
65
|
+
if (missing.length > 0) {
|
|
66
|
+
throw new Error(`the source scan enumerated ${files.length} files but not ${missing.join(', ')} — ` +
|
|
67
|
+
'either the module moved or the walk stopped seeing it');
|
|
68
|
+
}
|
|
69
|
+
return files;
|
|
70
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How a page names itself to the browser: `title — siteName`, or the site name
|
|
3
|
+
* alone.
|
|
4
|
+
*
|
|
5
|
+
* The format had two owners. `PageShell` composed it from `UiConfig.siteName`,
|
|
6
|
+
* and fndvit-website's `$lib/site` composed it again for the one page that
|
|
7
|
+
* cannot render through `PageShell` — its error page, whose centred layout is
|
|
8
|
+
* not one of the six variants. Both spelled the same expression, both
|
|
9
|
+
* comments noted that the other existed, and `site.test.ts` pinned the result
|
|
10
|
+
* as the literal `'Transparència — ViT'`: change the separator in the package
|
|
11
|
+
* and the error page drifts with nothing failing.
|
|
12
|
+
*
|
|
13
|
+
* It lives on `./contract` rather than in `UiConfig` because a config field
|
|
14
|
+
* would need a package DEFAULT, and that default is the expression — the
|
|
15
|
+
* duplication would survive the move. No host wants a separator of its own;
|
|
16
|
+
* one is a hypothetical seam.
|
|
17
|
+
*
|
|
18
|
+
* `siteName` is a parameter rather than a read, so this stays component-free
|
|
19
|
+
* and a server module can call it (fndvit-website's `$lib/site` supplies
|
|
20
|
+
* `SITE_NAME`, `PageShell` supplies `config.siteName`).
|
|
21
|
+
*/
|
|
22
|
+
export declare function documentTitle(title: string, siteName: string): string;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How a page names itself to the browser: `title — siteName`, or the site name
|
|
3
|
+
* alone.
|
|
4
|
+
*
|
|
5
|
+
* The format had two owners. `PageShell` composed it from `UiConfig.siteName`,
|
|
6
|
+
* and fndvit-website's `$lib/site` composed it again for the one page that
|
|
7
|
+
* cannot render through `PageShell` — its error page, whose centred layout is
|
|
8
|
+
* not one of the six variants. Both spelled the same expression, both
|
|
9
|
+
* comments noted that the other existed, and `site.test.ts` pinned the result
|
|
10
|
+
* as the literal `'Transparència — ViT'`: change the separator in the package
|
|
11
|
+
* and the error page drifts with nothing failing.
|
|
12
|
+
*
|
|
13
|
+
* It lives on `./contract` rather than in `UiConfig` because a config field
|
|
14
|
+
* would need a package DEFAULT, and that default is the expression — the
|
|
15
|
+
* duplication would survive the move. No host wants a separator of its own;
|
|
16
|
+
* one is a hypothetical seam.
|
|
17
|
+
*
|
|
18
|
+
* `siteName` is a parameter rather than a read, so this stays component-free
|
|
19
|
+
* and a server module can call it (fndvit-website's `$lib/site` supplies
|
|
20
|
+
* `SITE_NAME`, `PageShell` supplies `config.siteName`).
|
|
21
|
+
*/
|
|
22
|
+
export function documentTitle(title, siteName) {
|
|
23
|
+
// An empty title is a REAL state, not a guard: pages title themselves from
|
|
24
|
+
// page copy and `content.getPage` returns '' for a missing row, so the site
|
|
25
|
+
// name alone must ship rather than a dangling separator.
|
|
26
|
+
return title ? `${title} — ${siteName}` : siteName;
|
|
27
|
+
}
|