@canopy-iiif/app 1.5.14 → 1.5.16

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.
Files changed (13) hide show
  1. package/lib/build/mdx.js +3 -0
  2. package/lib/common.js +34 -2
  3. package/lib/head.js +39 -4
  4. package/lib/page-context.js +1 -1
  5. package/package.json +1 -1
  6. package/ui/dist/index.mjs +28 -9
  7. package/ui/dist/index.mjs.map +2 -2
  8. package/ui/dist/server.mjs +425 -86
  9. package/ui/dist/server.mjs.map +3 -3
  10. package/ui/styles/components/_layout.scss +3 -3
  11. package/ui/styles/components/_nav-tree.scss +12 -5
  12. package/ui/styles/components/_sub-navigation.scss +69 -38
  13. package/ui/styles/index.css +78 -38
package/ui/styles/components/_layout.scss CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  .canopy-layout {
4
4
  --canopy-layout-sidebar-width: 13rem;
5
- --canopy-layout-content-nav-width: 14rem;
6
- --canopy-layout-row-gap: clamp(1.25rem, 3vw, 3rem);
7
- --canopy-layout-column-gap: clamp(1.25rem, 3vw, 3rem);
5
+ --canopy-layout-content-nav-width: 13rem;
6
+ --canopy-layout-row-gap: 2.618rem;
7
+ --canopy-layout-column-gap: 2.618rem;
8
8
  display: grid;
9
9
  width: 100%;
10
10
  padding: clamp(1rem, 2vw, 2.5rem);
package/ui/styles/components/_nav-tree.scss CHANGED
@@ -22,8 +22,6 @@
22
22
 
23
23
  .canopy-nav-tree__row {
24
24
  display: flex;
25
- align-items: center;
26
- gap: 0.25rem;
27
25
  }
28
26
 
29
27
  .canopy-nav-tree__row .canopy-nav-tree__link {
@@ -35,17 +33,26 @@
35
33
  text-decoration: none;
36
34
  }
37
35
 
36
+ .canopy-nav-tree__link-wrapper {
37
+ padding: 0.382rem 0;
38
+ flex-grow: 1;
39
+ }
40
+
38
41
  .canopy-nav-tree__toggle {
39
42
  appearance: none;
40
43
  border: none;
41
44
  background: transparent;
42
- padding: 0.25rem;
43
- margin: -0.25rem;
45
+ padding: 0.5rem;
44
46
  display: inline-flex;
45
47
  align-items: center;
46
48
  justify-content: flex-end;
47
49
  cursor: pointer;
48
- flex-grow: 1;
50
+ width: 40px;
51
+ height: 40px;
52
+
53
+ svg {
54
+ stroke-width: 2.618px;
55
+ }
49
56
 
50
57
  &:hover,
51
58
  &:focus {
package/ui/styles/components/_sub-navigation.scss CHANGED
@@ -21,16 +21,15 @@
21
21
  .canopy-sub-navigation__link,
22
22
  .canopy-sub-navigation__tree .canopy-nav-tree__link,
23
23
  .canopy-modal__section-nav .canopy-nav-tree__link {
24
- display: inline;
25
- padding: 0.382rem 0.618;
26
- border-radius: 0.382rem;
27
24
  color: inherit;
28
25
  text-decoration: none;
29
26
  cursor: pointer;
30
27
  transition:
31
28
  background-color 120ms ease,
32
29
  color 120ms ease;
33
- flex-shrink: 1;
30
+ display: inline;
31
+ white-space: normal;
32
+ overflow-wrap: anywhere;
34
33
  }
35
34
 
36
35
  .canopy-sub-navigation__link:hover,
@@ -59,14 +58,12 @@
59
58
  display: inline-flex;
60
59
  align-items: center;
61
60
  justify-content: center;
62
- border-radius: 3px;
63
61
  font-size: 0.6111rem;
64
62
  font-weight: 600;
65
63
  line-height: 1;
66
64
  white-space: nowrap;
67
65
  z-index: 0;
68
66
  position: relative;
69
- background: var(--color-accent-200);
70
67
  color: var(--color-accent-default);
71
68
  font-family: var(--font-sans);
72
69
  padding: 0.175rem 0.175rem;
@@ -85,30 +82,49 @@
85
82
  .canopy-sub-navigation__list--nested,
86
83
  .canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
87
84
  .canopy-modal__section-nav .canopy-nav-tree__list--nested {
88
- margin: 0.382rem 0 0.382rem 0.618rem;
89
- padding-left: 0.618rem;
85
+ padding-left: 1rem;
90
86
  border-left: 1px solid var(--color-gray-200);
91
87
  }
92
88
 
93
- .canopy-sub-navigation__link.depth-0,
94
- .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
95
- .canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
96
- padding-left: 0.382rem;
97
- }
98
-
99
89
  .canopy-sub-navigation__link.depth-1,
100
90
  .canopy-sub-navigation__link.depth-2,
101
91
  .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
102
92
  .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
103
93
  .canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
104
94
  .canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
105
- padding-left: calc(0.382rem);
106
95
  font-size: 0.9222rem;
107
96
  }
108
97
 
109
98
  .canopy-content-navigation {
110
99
  position: sticky;
111
100
  top: 1.5rem;
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: 0.618rem;
104
+ transition:
105
+ background-color 150ms ease,
106
+ border-color 150ms ease,
107
+ box-shadow 150ms ease,
108
+ padding 150ms ease;
109
+ color: var(--color-gray-muted);
110
+ }
111
+
112
+ .canopy-content-navigation--collapsed {
113
+ padding: 0.25rem;
114
+ border-color: transparent;
115
+ background: none;
116
+ box-shadow: none;
117
+ }
118
+
119
+ .canopy-content-navigation--floating {
120
+ position: fixed;
121
+ top: 1.618rem;
122
+ right: var(--canopy-content-nav-fixed-right, 1.618rem);
123
+ width: var(--canopy-content-nav-fixed-width, auto);
124
+ z-index: 10;
125
+ max-height: calc(100vh - 1.5rem);
126
+ overflow-x: hidden;
127
+ overflow-y: auto;
112
128
  }
113
129
 
114
130
  .canopy-content-navigation__toggle {
@@ -116,33 +132,32 @@
116
132
  display: inline-flex;
117
133
  align-items: center;
118
134
  justify-content: center;
119
- gap: 0.25rem;
120
- padding: 0.25rem 0.75rem;
121
- border-radius: 9999px;
122
- border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
123
135
  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
124
- background-color: var(--color-gray-50);
125
- font-size: 0.7222rem;
136
+ font-size: 1rem;
126
137
  font-weight: 600;
127
138
  cursor: pointer;
128
- transition:
129
- background-color 120ms ease,
130
- color 120ms ease,
131
- border-color 120ms ease,
132
- box-shadow 120ms ease;
139
+ line-height: 1.2;
140
+ transition: color 150ms ease;
133
141
  }
134
142
 
135
143
  .canopy-content-navigation__toggle:hover,
136
144
  .canopy-content-navigation__toggle:focus-visible {
137
- border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
138
- background-color: color-mix(
139
- in srgb,
140
- var(--color-accent-200) 25%,
141
- transparent
142
- );
143
145
  color: var(--color-accent-default);
144
146
  }
145
147
 
148
+ .canopy-content-navigation__toggle-icon {
149
+ display: inline-flex;
150
+ width: 1.5rem;
151
+ height: 1.5rem;
152
+ align-items: center;
153
+ justify-content: center;
154
+ }
155
+
156
+ .canopy-content-navigation__toggle-icon svg {
157
+ width: 100%;
158
+ height: 100%;
159
+ }
160
+
146
161
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
147
162
  padding: 0;
148
163
  margin: 0;
@@ -151,15 +166,11 @@
151
166
 
152
167
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation__toggle {
153
168
  position: sticky;
154
- top: 1.5rem;
155
- transform: translateX(40%);
169
+ top: 1.618rem;
156
170
  }
157
171
 
158
172
  .canopy-content-navigation--collapsed .canopy-content-navigation__toggle {
159
- padding: 0.5rem 0.5rem;
160
- writing-mode: vertical-rl;
161
- text-orientation: mixed;
162
- letter-spacing: 0.05em;
173
+ /* button only */
163
174
  }
164
175
 
165
176
  .canopy-content-navigation--collapsed .canopy-sub-navigation__list,
@@ -168,3 +179,23 @@
168
179
  .canopy-nav-tree__list {
169
180
  display: none;
170
181
  }
182
+
183
+ .canopy-layout__content-nav.is-collapsed
184
+ .canopy-content-navigation__toggle-label {
185
+ writing-mode: vertical-rl;
186
+ text-orientation: mixed;
187
+ letter-spacing: 0.12em;
188
+ }
189
+ .canopy-content-navigation--collapsed .canopy-nav-tree {
190
+ display: none;
191
+ }
192
+
193
+ [data-canopy-content-nav-placeholder] {
194
+ height: 0;
195
+ transition: height 150ms ease;
196
+ }
197
+
198
+ [data-canopy-content-nav-sentinel] {
199
+ width: 100%;
200
+ height: 1px;
201
+ }
package/ui/styles/index.css CHANGED
@@ -333,9 +333,9 @@ section[data-footnotes] ul li,
333
333
  }
334
334
  .canopy-layout {
335
335
  --canopy-layout-sidebar-width: 13rem;
336
- --canopy-layout-content-nav-width: 14rem;
337
- --canopy-layout-row-gap: clamp(1.25rem, 3vw, 3rem);
338
- --canopy-layout-column-gap: clamp(1.25rem, 3vw, 3rem);
336
+ --canopy-layout-content-nav-width: 13rem;
337
+ --canopy-layout-row-gap: 2.618rem;
338
+ --canopy-layout-column-gap: 2.618rem;
339
339
  display: grid;
340
340
  width: 100%;
341
341
  padding: clamp(1rem, 2vw, 2.5rem);
@@ -425,8 +425,6 @@ section[data-footnotes] ul li,
425
425
  }
426
426
  .canopy-nav-tree__row {
427
427
  display: flex;
428
- align-items: center;
429
- gap: 0.25rem;
430
428
  }
431
429
  .canopy-nav-tree__row .canopy-nav-tree__link {
432
430
  flex: 1;
@@ -435,17 +433,24 @@ section[data-footnotes] ul li,
435
433
  .canopy-nav-tree__link {
436
434
  text-decoration: none;
437
435
  }
436
+ .canopy-nav-tree__link-wrapper {
437
+ padding: 0.382rem 0;
438
+ flex-grow: 1;
439
+ }
438
440
  .canopy-nav-tree__toggle {
439
441
  appearance: none;
440
442
  border: none;
441
443
  background: transparent;
442
- padding: 0.25rem;
443
- margin: -0.25rem;
444
+ padding: 0.5rem;
444
445
  display: inline-flex;
445
446
  align-items: center;
446
447
  justify-content: flex-end;
447
448
  cursor: pointer;
448
- flex-grow: 1;
449
+ width: 40px;
450
+ height: 40px;
451
+ }
452
+ .canopy-nav-tree__toggle svg {
453
+ stroke-width: 2.618px;
449
454
  }
450
455
  .canopy-nav-tree__toggle:hover, .canopy-nav-tree__toggle:focus {
451
456
  color: var(--color-accent-default);
@@ -2155,14 +2160,13 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2155
2160
  .canopy-sub-navigation__link,
2156
2161
  .canopy-sub-navigation__tree .canopy-nav-tree__link,
2157
2162
  .canopy-modal__section-nav .canopy-nav-tree__link {
2158
- display: inline;
2159
- padding: 0.382rem 0.618;
2160
- border-radius: 0.382rem;
2161
2163
  color: inherit;
2162
2164
  text-decoration: none;
2163
2165
  cursor: pointer;
2164
2166
  transition: background-color 120ms ease, color 120ms ease;
2165
- flex-shrink: 1;
2167
+ display: inline;
2168
+ white-space: normal;
2169
+ overflow-wrap: anywhere;
2166
2170
  }
2167
2171
 
2168
2172
  .canopy-sub-navigation__link:hover,
@@ -2191,14 +2195,12 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2191
2195
  display: inline-flex;
2192
2196
  align-items: center;
2193
2197
  justify-content: center;
2194
- border-radius: 3px;
2195
2198
  font-size: 0.6111rem;
2196
2199
  font-weight: 600;
2197
2200
  line-height: 1;
2198
2201
  white-space: nowrap;
2199
2202
  z-index: 0;
2200
2203
  position: relative;
2201
- background: var(--color-accent-200);
2202
2204
  color: var(--color-accent-default);
2203
2205
  font-family: var(--font-sans);
2204
2206
  padding: 0.175rem 0.175rem;
@@ -2217,30 +2219,45 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2217
2219
  .canopy-sub-navigation__list--nested,
2218
2220
  .canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
2219
2221
  .canopy-modal__section-nav .canopy-nav-tree__list--nested {
2220
- margin: 0.382rem 0 0.382rem 0.618rem;
2221
- padding-left: 0.618rem;
2222
+ padding-left: 1rem;
2222
2223
  border-left: 1px solid var(--color-gray-200);
2223
2224
  }
2224
2225
 
2225
- .canopy-sub-navigation__link.depth-0,
2226
- .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
2227
- .canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
2228
- padding-left: 0.382rem;
2229
- }
2230
-
2231
2226
  .canopy-sub-navigation__link.depth-1,
2232
2227
  .canopy-sub-navigation__link.depth-2,
2233
2228
  .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
2234
2229
  .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
2235
2230
  .canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
2236
2231
  .canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
2237
- padding-left: 0.382rem;
2238
2232
  font-size: 0.9222rem;
2239
2233
  }
2240
2234
 
2241
2235
  .canopy-content-navigation {
2242
2236
  position: sticky;
2243
2237
  top: 1.5rem;
2238
+ display: flex;
2239
+ flex-direction: column;
2240
+ gap: 0.618rem;
2241
+ transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, padding 150ms ease;
2242
+ color: var(--color-gray-muted);
2243
+ }
2244
+
2245
+ .canopy-content-navigation--collapsed {
2246
+ padding: 0.25rem;
2247
+ border-color: transparent;
2248
+ background: none;
2249
+ box-shadow: none;
2250
+ }
2251
+
2252
+ .canopy-content-navigation--floating {
2253
+ position: fixed;
2254
+ top: 1.618rem;
2255
+ right: var(--canopy-content-nav-fixed-right, 1.618rem);
2256
+ width: var(--canopy-content-nav-fixed-width, auto);
2257
+ z-index: 10;
2258
+ max-height: calc(100vh - 1.5rem);
2259
+ overflow-x: hidden;
2260
+ overflow-y: auto;
2244
2261
  }
2245
2262
 
2246
2263
  .canopy-content-navigation__toggle {
@@ -2248,25 +2265,32 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2248
2265
  display: inline-flex;
2249
2266
  align-items: center;
2250
2267
  justify-content: center;
2251
- gap: 0.25rem;
2252
- padding: 0.25rem 0.75rem;
2253
- border-radius: 9999px;
2254
- border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
2255
2268
  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
2256
- background-color: var(--color-gray-50);
2257
- font-size: 0.7222rem;
2269
+ font-size: 1rem;
2258
2270
  font-weight: 600;
2259
2271
  cursor: pointer;
2260
- transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
2272
+ line-height: 1.2;
2273
+ transition: color 150ms ease;
2261
2274
  }
2262
2275
 
2263
2276
  .canopy-content-navigation__toggle:hover,
2264
2277
  .canopy-content-navigation__toggle:focus-visible {
2265
- border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
2266
- background-color: color-mix(in srgb, var(--color-accent-200) 25%, transparent);
2267
2278
  color: var(--color-accent-default);
2268
2279
  }
2269
2280
 
2281
+ .canopy-content-navigation__toggle-icon {
2282
+ display: inline-flex;
2283
+ width: 1.5rem;
2284
+ height: 1.5rem;
2285
+ align-items: center;
2286
+ justify-content: center;
2287
+ }
2288
+
2289
+ .canopy-content-navigation__toggle-icon svg {
2290
+ width: 100%;
2291
+ height: 100%;
2292
+ }
2293
+
2270
2294
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
2271
2295
  padding: 0;
2272
2296
  margin: 0;
@@ -2275,15 +2299,11 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2275
2299
 
2276
2300
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation__toggle {
2277
2301
  position: sticky;
2278
- top: 1.5rem;
2279
- transform: translateX(40%);
2302
+ top: 1.618rem;
2280
2303
  }
2281
2304
 
2282
2305
  .canopy-content-navigation--collapsed .canopy-content-navigation__toggle {
2283
- padding: 0.5rem 0.5rem;
2284
- writing-mode: vertical-rl;
2285
- text-orientation: mixed;
2286
- letter-spacing: 0.05em;
2306
+ /* button only */
2287
2307
  }
2288
2308
 
2289
2309
  .canopy-content-navigation--collapsed .canopy-sub-navigation__list,
@@ -2291,6 +2311,26 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2291
2311
  display: none;
2292
2312
  }
2293
2313
 
2314
+ .canopy-layout__content-nav.is-collapsed .canopy-content-navigation__toggle-label {
2315
+ writing-mode: vertical-rl;
2316
+ text-orientation: mixed;
2317
+ letter-spacing: 0.12em;
2318
+ }
2319
+
2320
+ .canopy-content-navigation--collapsed .canopy-nav-tree {
2321
+ display: none;
2322
+ }
2323
+
2324
+ [data-canopy-content-nav-placeholder] {
2325
+ height: 0;
2326
+ transition: height 150ms ease;
2327
+ }
2328
+
2329
+ [data-canopy-content-nav-sentinel] {
2330
+ width: 100%;
2331
+ height: 1px;
2332
+ }
2333
+
2294
2334
  .canopy-diagram {
2295
2335
  display: flex;
2296
2336
  flex-direction: column;