@farming-labs/svelte-theme 0.0.2-beta.26 → 0.0.2-beta.27

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.svelte +105 -85
  3. package/styles/docs.css +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/svelte-theme",
3
- "version": "0.0.2-beta.26",
3
+ "version": "0.0.2-beta.27",
4
4
  "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
5
5
  "keywords": [
6
6
  "docs",
@@ -72,8 +72,8 @@
72
72
  "dependencies": {
73
73
  "gray-matter": "^4.0.3",
74
74
  "sugar-high": "^0.9.5",
75
- "@farming-labs/docs": "0.0.2-beta.26",
76
- "@farming-labs/svelte": "0.0.2-beta.26"
75
+ "@farming-labs/docs": "0.0.2-beta.27",
76
+ "@farming-labs/svelte": "0.0.2-beta.27"
77
77
  },
78
78
  "peerDependencies": {
79
79
  "svelte": ">=5.0.0"
package/src/components/DocsLayout.svelte CHANGED
@@ -13,6 +13,8 @@
13
13
  children,
14
14
  triggerComponent = null,
15
15
  sidebar = undefined,
16
+ sidebarHeader = undefined,
17
+ sidebarFooter = undefined,
16
18
  } = $props();
17
19
 
18
20
  let resolvedTitle = $derived(title ?? config?.nav?.title ?? "Docs");
@@ -252,107 +254,125 @@
252
254
  </button>
253
255
  </div>
254
256
 
257
+ {#if sidebarHeader}
258
+ <div class="fd-sidebar-banner">
259
+ {@render sidebarHeader()}
260
+ </div>
261
+ {/if}
262
+
255
263
  <nav class="fd-sidebar-nav">
256
- {#if sidebar}
257
- {@render sidebar({ tree, isActive })}
258
- {:else if tree?.children}
259
- {#each tree.children as node, i}
260
- {#if node.type === "page"}
261
- <a
262
- href={node.url}
263
- class="fd-sidebar-link fd-sidebar-top-link"
264
- class:fd-sidebar-link-active={isActive(node.url)}
265
- class:fd-sidebar-first-item={i === 0}
266
- data-active={isActive(node.url)}
267
- onclick={closeSidebar}
268
- >
269
- {#if getIcon(node.icon)}
270
- <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
271
- {/if}
272
- {node.name}
273
- </a>
274
- {:else if node.type === "folder"}
275
- <details class="fd-sidebar-folder" class:fd-sidebar-first-item={i === 0} open>
276
- <summary class="fd-sidebar-folder-trigger">
277
- <span class="fd-sidebar-folder-label">
278
- {#if getIcon(node.icon)}
279
- <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
280
- {/if}
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
- <div class="fd-sidebar-folder-content">
288
- {#if node.index}
289
- <a
290
- href={node.index.url}
291
- class="fd-sidebar-link fd-sidebar-child-link"
292
- class:fd-sidebar-link-active={isActive(node.index.url)}
293
- data-active={isActive(node.index.url)}
294
- onclick={closeSidebar}
295
- >
296
- {node.index.name}
297
- </a>
264
+ {#snippet defaultSidebar()}
265
+ {#if tree?.children}
266
+ {#each tree.children as node, i}
267
+ {#if node.type === "page"}
268
+ <a
269
+ href={node.url}
270
+ class="fd-sidebar-link fd-sidebar-top-link"
271
+ class:fd-sidebar-link-active={isActive(node.url)}
272
+ class:fd-sidebar-first-item={i === 0}
273
+ data-active={isActive(node.url)}
274
+ onclick={closeSidebar}
275
+ >
276
+ {#if getIcon(node.icon)}
277
+ <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
298
278
  {/if}
299
- {#each node.children as child}
300
- {#if child.type === "page"}
279
+ {node.name}
280
+ </a>
281
+ {:else if node.type === "folder"}
282
+ <details class="fd-sidebar-folder" class:fd-sidebar-first-item={i === 0} open>
283
+ <summary class="fd-sidebar-folder-trigger">
284
+ <span class="fd-sidebar-folder-label">
285
+ {#if getIcon(node.icon)}
286
+ <span class="fd-sidebar-icon">{@html getIcon(node.icon)}</span>
287
+ {/if}
288
+ {node.name}
289
+ </span>
290
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
291
+ <polyline points="6 9 12 15 18 9" />
292
+ </svg>
293
+ </summary>
294
+ <div class="fd-sidebar-folder-content">
295
+ {#if node.index}
301
296
  <a
302
- href={child.url}
297
+ href={node.index.url}
303
298
  class="fd-sidebar-link fd-sidebar-child-link"
304
- class:fd-sidebar-link-active={isActive(child.url)}
305
- data-active={isActive(child.url)}
299
+ class:fd-sidebar-link-active={isActive(node.index.url)}
300
+ data-active={isActive(node.index.url)}
306
301
  onclick={closeSidebar}
307
302
  >
308
- {child.name}
303
+ {node.index.name}
309
304
  </a>
310
- {:else if child.type === "folder"}
311
- <details class="fd-sidebar-folder fd-sidebar-nested-folder" open>
312
- <summary class="fd-sidebar-folder-trigger">
313
- <span class="fd-sidebar-folder-label">
314
- {child.name}
315
- </span>
316
- <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
317
- <polyline points="6 9 12 15 18 9" />
318
- </svg>
319
- </summary>
320
- <div class="fd-sidebar-folder-content">
321
- {#if child.index}
322
- <a
323
- href={child.index.url}
324
- class="fd-sidebar-link fd-sidebar-child-link"
325
- class:fd-sidebar-link-active={isActive(child.index.url)}
326
- data-active={isActive(child.index.url)}
327
- onclick={closeSidebar}
328
- >
329
- {child.index.name}
330
- </a>
331
- {/if}
332
- {#each child.children as grandchild}
333
- {#if grandchild.type === "page"}
305
+ {/if}
306
+ {#each node.children as child}
307
+ {#if child.type === "page"}
308
+ <a
309
+ href={child.url}
310
+ class="fd-sidebar-link fd-sidebar-child-link"
311
+ class:fd-sidebar-link-active={isActive(child.url)}
312
+ data-active={isActive(child.url)}
313
+ onclick={closeSidebar}
314
+ >
315
+ {child.name}
316
+ </a>
317
+ {:else if child.type === "folder"}
318
+ <details class="fd-sidebar-folder fd-sidebar-nested-folder" open>
319
+ <summary class="fd-sidebar-folder-trigger">
320
+ <span class="fd-sidebar-folder-label">
321
+ {child.name}
322
+ </span>
323
+ <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
324
+ <polyline points="6 9 12 15 18 9" />
325
+ </svg>
326
+ </summary>
327
+ <div class="fd-sidebar-folder-content">
328
+ {#if child.index}
334
329
  <a
335
- href={grandchild.url}
330
+ href={child.index.url}
336
331
  class="fd-sidebar-link fd-sidebar-child-link"
337
- class:fd-sidebar-link-active={isActive(grandchild.url)}
338
- data-active={isActive(grandchild.url)}
332
+ class:fd-sidebar-link-active={isActive(child.index.url)}
333
+ data-active={isActive(child.index.url)}
339
334
  onclick={closeSidebar}
340
335
  >
341
- {grandchild.name}
336
+ {child.index.name}
342
337
  </a>
343
338
  {/if}
344
- {/each}
345
- </div>
346
- </details>
347
- {/if}
348
- {/each}
349
- </div>
350
- </details>
351
- {/if}
352
- {/each}
339
+ {#each child.children as grandchild}
340
+ {#if grandchild.type === "page"}
341
+ <a
342
+ href={grandchild.url}
343
+ class="fd-sidebar-link fd-sidebar-child-link"
344
+ class:fd-sidebar-link-active={isActive(grandchild.url)}
345
+ data-active={isActive(grandchild.url)}
346
+ onclick={closeSidebar}
347
+ >
348
+ {grandchild.name}
349
+ </a>
350
+ {/if}
351
+ {/each}
352
+ </div>
353
+ </details>
354
+ {/if}
355
+ {/each}
356
+ </div>
357
+ </details>
358
+ {/if}
359
+ {/each}
360
+ {/if}
361
+ {/snippet}
362
+
363
+ {#if sidebar}
364
+ {@render sidebar({ tree, isActive })}
365
+ {:else}
366
+ {@render defaultSidebar()}
353
367
  {/if}
354
368
  </nav>
355
369
 
370
+ {#if sidebarFooter}
371
+ <div class="fd-sidebar-footer-custom">
372
+ {@render sidebarFooter()}
373
+ </div>
374
+ {/if}
375
+
356
376
  {#if showThemeToggle}
357
377
  <div class="fd-sidebar-footer">
358
378
  <ThemeToggle />
package/styles/docs.css CHANGED
@@ -375,6 +375,16 @@ samp {
375
375
  background: var(--color-fd-border);
376
376
  }
377
377
 
378
+ .fd-sidebar-banner {
379
+ padding: 12px 16px;
380
+ border-bottom: 1px solid var(--color-fd-border);
381
+ }
382
+
383
+ .fd-sidebar-footer-custom {
384
+ padding: 12px 16px;
385
+ border-top: 1px solid var(--color-fd-border);
386
+ }
387
+
378
388
  .fd-sidebar-footer {
379
389
  padding: 12px 16px;
380
390
  border-top: 1px solid var(--color-fd-border);