@farming-labs/astro-theme 0.1.53 → 0.1.56

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 (3) hide show
  1. package/package.json +3 -3
  2. package/src/components/DocsLayout.astro +79 -26
  3. package/styles/docs.css +32 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/astro-theme",
3
- "version": "0.1.53",
3
+ "version": "0.1.56",
4
4
  "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
5
5
  "keywords": [
6
6
  "astro",
@@ -109,8 +109,8 @@
109
109
  },
110
110
  "dependencies": {
111
111
  "sugar-high": "^0.9.5",
112
- "@farming-labs/astro": "0.1.53",
113
- "@farming-labs/docs": "0.1.53"
112
+ "@farming-labs/docs": "0.1.56",
113
+ "@farming-labs/astro": "0.1.56"
114
114
  },
115
115
  "peerDependencies": {
116
116
  "astro": ">=4.0.0"
package/src/components/DocsLayout.astro CHANGED
@@ -6,7 +6,6 @@ const { tree, config = null, title, titleUrl, flatPages = null } = Astro.props;
6
6
 
7
7
  const sidebarFlat = !!(config?.sidebar && typeof config.sidebar === "object" && (config.sidebar as { flat?: boolean }).flat);
8
8
  const useFlatSidebar = sidebarFlat && Array.isArray(flatPages) && flatPages.length > 0;
9
-
10
9
  const i18n = config?.i18n as { locales?: string[]; defaultLocale?: string } | undefined;
11
10
  const locales = Array.isArray(i18n?.locales) ? i18n.locales.filter(Boolean) : [];
12
11
  const defaultLocale = (i18n?.defaultLocale && locales.includes(i18n.defaultLocale))
@@ -253,25 +252,40 @@ const showSearch = !staticExport;
253
252
  const folderIcon = getIcon(node.icon);
254
253
  return (
255
254
  <details class={`fd-sidebar-folder ${i === 0 ? 'fd-sidebar-first-item' : ''}`} open>
256
- <summary class="fd-sidebar-folder-trigger">
257
- <span class="fd-sidebar-folder-label">
258
- {folderIcon && <span class="fd-sidebar-icon" set:html={folderIcon} />}
259
- {node.name}
260
- </span>
261
- <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
262
- <polyline points="6 9 12 15 18 9" />
263
- </svg>
264
- </summary>
265
- <div class="fd-sidebar-folder-content">
266
- {node.index && (
255
+ {node.index ? (
256
+ <summary class="fd-sidebar-folder-trigger fd-sidebar-folder-trigger-link" data-folder-link-summary>
267
257
  <a
268
258
  href={withLang(node.index.url)}
269
- class={`fd-sidebar-link fd-sidebar-child-link ${isActive(node.index.url) ? 'fd-sidebar-link-active' : ''}`}
259
+ class={`fd-sidebar-link fd-sidebar-folder-parent-link ${isActive(node.index.url) ? 'fd-sidebar-link-active' : ''}`}
270
260
  data-active={isActive(node.index.url) || undefined}
261
+ data-folder-link-anchor
271
262
  >
272
- {node.index.name}
263
+ {folderIcon && <span class="fd-sidebar-icon" set:html={folderIcon} />}
264
+ {node.name}
273
265
  </a>
274
- )}
266
+ <button
267
+ type="button"
268
+ class="fd-sidebar-folder-toggle"
269
+ aria-label={`Toggle ${node.name}`}
270
+ data-folder-toggle
271
+ >
272
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
273
+ <polyline points="6 9 12 15 18 9" />
274
+ </svg>
275
+ </button>
276
+ </summary>
277
+ ) : (
278
+ <summary class="fd-sidebar-folder-trigger">
279
+ <span class="fd-sidebar-folder-label">
280
+ {folderIcon && <span class="fd-sidebar-icon" set:html={folderIcon} />}
281
+ {node.name}
282
+ </span>
283
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
284
+ <polyline points="6 9 12 15 18 9" />
285
+ </svg>
286
+ </summary>
287
+ )}
288
+ <div class="fd-sidebar-folder-content">
275
289
  {node.children?.map(child => {
276
290
  if (child.type === "page") {
277
291
  return (
@@ -286,22 +300,36 @@ const showSearch = !staticExport;
286
300
  } else if (child.type === "folder") {
287
301
  return (
288
302
  <details class="fd-sidebar-folder fd-sidebar-nested-folder" open>
289
- <summary class="fd-sidebar-folder-trigger">
290
- <span class="fd-sidebar-folder-label">{child.name}</span>
291
- <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
292
- <polyline points="6 9 12 15 18 9" />
293
- </svg>
294
- </summary>
295
- <div class="fd-sidebar-folder-content">
296
- {child.index && (
303
+ {child.index ? (
304
+ <summary class="fd-sidebar-folder-trigger fd-sidebar-folder-trigger-link" data-folder-link-summary>
297
305
  <a
298
306
  href={withLang(child.index.url)}
299
- class={`fd-sidebar-link fd-sidebar-child-link ${isActive(child.index.url) ? 'fd-sidebar-link-active' : ''}`}
307
+ class={`fd-sidebar-link fd-sidebar-folder-parent-link ${isActive(child.index.url) ? 'fd-sidebar-link-active' : ''}`}
300
308
  data-active={isActive(child.index.url) || undefined}
309
+ data-folder-link-anchor
301
310
  >
302
- {child.index.name}
311
+ {child.name}
303
312
  </a>
304
- )}
313
+ <button
314
+ type="button"
315
+ class="fd-sidebar-folder-toggle"
316
+ aria-label={`Toggle ${child.name}`}
317
+ data-folder-toggle
318
+ >
319
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
320
+ <polyline points="6 9 12 15 18 9" />
321
+ </svg>
322
+ </button>
323
+ </summary>
324
+ ) : (
325
+ <summary class="fd-sidebar-folder-trigger">
326
+ <span class="fd-sidebar-folder-label">{child.name}</span>
327
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
328
+ <polyline points="6 9 12 15 18 9" />
329
+ </svg>
330
+ </summary>
331
+ )}
332
+ <div class="fd-sidebar-folder-content">
305
333
  {child.children?.map(grandchild => {
306
334
  if (grandchild.type === "page") {
307
335
  return (
@@ -442,4 +470,29 @@ const showSearch = !staticExport;
442
470
  else url.searchParams.delete('lang');
443
471
  window.location.assign(`${url.pathname}${url.search}${url.hash}`);
444
472
  });
473
+
474
+ sidebar?.querySelectorAll('[data-folder-link-anchor]').forEach((link) => {
475
+ link.addEventListener('click', (event) => {
476
+ event.stopPropagation();
477
+ });
478
+ });
479
+
480
+ sidebar?.querySelectorAll('[data-folder-link-summary]').forEach((summary) => {
481
+ summary.addEventListener('click', (event) => {
482
+ const target = event.target as HTMLElement | null;
483
+ if (target?.closest('[data-folder-link-anchor]') || target?.closest('[data-folder-toggle]')) {
484
+ return;
485
+ }
486
+ event.preventDefault();
487
+ });
488
+ });
489
+
490
+ sidebar?.querySelectorAll('[data-folder-toggle]').forEach((button) => {
491
+ button.addEventListener('click', (event) => {
492
+ event.preventDefault();
493
+ event.stopPropagation();
494
+ const details = (event.currentTarget as HTMLElement | null)?.closest('details');
495
+ if (details) details.open = !details.open;
496
+ });
497
+ });
445
498
  </script>
package/styles/docs.css CHANGED
@@ -372,13 +372,44 @@ samp {
372
372
  background: var(--color-fd-accent);
373
373
  }
374
374
 
375
+ .fd-sidebar-folder-trigger-link {
376
+ gap: 8px;
377
+ }
378
+
379
+ .fd-sidebar-folder-parent-link {
380
+ min-width: 0;
381
+ flex: 1;
382
+ padding: 0;
383
+ color: inherit;
384
+ background: transparent !important;
385
+ }
386
+
387
+ .fd-sidebar-folder-parent-link:hover {
388
+ color: inherit;
389
+ background: transparent !important;
390
+ }
391
+
392
+ .fd-sidebar-folder-toggle {
393
+ display: inline-flex;
394
+ align-items: center;
395
+ justify-content: center;
396
+ margin: 0;
397
+ padding: 0;
398
+ border: 0;
399
+ background: transparent;
400
+ color: inherit;
401
+ cursor: pointer;
402
+ flex-shrink: 0;
403
+ }
404
+
375
405
  .fd-sidebar-chevron {
376
406
  transition: transform 0.2s;
377
407
  flex-shrink: 0;
378
408
  opacity: 0.5;
379
409
  }
380
410
 
381
- .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron {
411
+ .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron,
412
+ .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger-link .fd-sidebar-chevron {
382
413
  transform: rotate(180deg);
383
414
  }
384
415