@farming-labs/nuxt-theme 0.0.2-beta.24 → 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 +2 -2
  2. package/src/components/DocsLayout.vue +119 -109
  3. package/styles/docs.css +18 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/nuxt-theme",
3
- "version": "0.0.2-beta.24",
3
+ "version": "0.0.2-beta.27",
4
4
  "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
5
5
  "keywords": [
6
6
  "docs",
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "sugar-high": "^0.9.5",
56
- "@farming-labs/docs": "0.0.2-beta.24"
56
+ "@farming-labs/docs": "0.0.2-beta.27"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "nuxt": ">=3.0.0",
package/src/components/DocsLayout.vue CHANGED
@@ -303,125 +303,135 @@ const showFloatingAI = computed(
303
303
  </button>
304
304
  </div>
305
305
 
306
+ <div v-if="$slots['sidebar-header']" class="fd-sidebar-banner">
307
+ <slot name="sidebar-header" />
308
+ </div>
309
+
306
310
  <nav class="fd-sidebar-nav">
307
- <template v-if="tree?.children">
308
- <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
309
- <NuxtLink
310
- v-if="node.type === 'page'"
311
- :to="node.url!"
312
- class="fd-sidebar-link fd-sidebar-top-link"
313
- :class="{
314
- 'fd-sidebar-link-active': isActive(node.url ?? ''),
315
- 'fd-sidebar-first-item': i === 0,
316
- }"
317
- @click="closeSidebar"
318
- >
319
- <span
320
- v-if="getIcon(node.icon)"
321
- class="fd-sidebar-icon"
322
- v-html="getIcon(node.icon)"
323
- />
324
- {{ node.name }}
325
- </NuxtLink>
326
- <details
327
- v-else-if="node.type === 'folder'"
328
- class="fd-sidebar-folder"
329
- :class="{ 'fd-sidebar-first-item': i === 0 }"
330
- open
331
- >
332
- <summary class="fd-sidebar-folder-trigger">
333
- <span class="fd-sidebar-folder-label">
334
- <span
335
- v-if="getIcon(node.icon)"
336
- class="fd-sidebar-icon"
337
- v-html="getIcon(node.icon)"
338
- />
339
- {{ node.name }}
340
- </span>
341
- <svg
342
- class="fd-sidebar-chevron"
343
- width="14"
344
- height="14"
345
- viewBox="0 0 24 24"
346
- fill="none"
347
- stroke="currentColor"
348
- stroke-width="2"
349
- >
350
- <polyline points="6 9 12 15 18 9" />
351
- </svg>
352
- </summary>
353
- <div class="fd-sidebar-folder-content">
354
- <NuxtLink
355
- v-if="node.index"
356
- :to="node.index.url"
357
- class="fd-sidebar-link fd-sidebar-child-link"
358
- :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
359
- @click="closeSidebar"
360
- >
361
- {{ node.index.name }}
362
- </NuxtLink>
363
- <template
364
- v-for="child in node.children"
365
- :key="child.name + ((child as any).url ?? '')"
366
- >
311
+ <slot name="sidebar" :tree="tree" :is-active="isActive">
312
+ <template v-if="tree?.children">
313
+ <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
314
+ <NuxtLink
315
+ v-if="node.type === 'page'"
316
+ :to="node.url!"
317
+ class="fd-sidebar-link fd-sidebar-top-link"
318
+ :class="{
319
+ 'fd-sidebar-link-active': isActive(node.url ?? ''),
320
+ 'fd-sidebar-first-item': i === 0,
321
+ }"
322
+ @click="closeSidebar"
323
+ >
324
+ <span
325
+ v-if="getIcon(node.icon)"
326
+ class="fd-sidebar-icon"
327
+ v-html="getIcon(node.icon)"
328
+ />
329
+ {{ node.name }}
330
+ </NuxtLink>
331
+ <details
332
+ v-else-if="node.type === 'folder'"
333
+ class="fd-sidebar-folder"
334
+ :class="{ 'fd-sidebar-first-item': i === 0 }"
335
+ open
336
+ >
337
+ <summary class="fd-sidebar-folder-trigger">
338
+ <span class="fd-sidebar-folder-label">
339
+ <span
340
+ v-if="getIcon(node.icon)"
341
+ class="fd-sidebar-icon"
342
+ v-html="getIcon(node.icon)"
343
+ />
344
+ {{ node.name }}
345
+ </span>
346
+ <svg
347
+ class="fd-sidebar-chevron"
348
+ width="14"
349
+ height="14"
350
+ viewBox="0 0 24 24"
351
+ fill="none"
352
+ stroke="currentColor"
353
+ stroke-width="2"
354
+ >
355
+ <polyline points="6 9 12 15 18 9" />
356
+ </svg>
357
+ </summary>
358
+ <div class="fd-sidebar-folder-content">
367
359
  <NuxtLink
368
- v-if="child.type === 'page'"
369
- :to="(child as any).url"
360
+ v-if="node.index"
361
+ :to="node.index.url"
370
362
  class="fd-sidebar-link fd-sidebar-child-link"
371
- :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
363
+ :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
372
364
  @click="closeSidebar"
373
365
  >
374
- {{ child.name }}
366
+ {{ node.index.name }}
375
367
  </NuxtLink>
376
- <details
377
- v-else-if="child.type === 'folder'"
378
- class="fd-sidebar-folder fd-sidebar-nested-folder"
379
- open
368
+ <template
369
+ v-for="child in node.children"
370
+ :key="child.name + ((child as any).url ?? '')"
380
371
  >
381
- <summary class="fd-sidebar-folder-trigger">
382
- <span class="fd-sidebar-folder-label">{{ child.name }}</span>
383
- <svg
384
- class="fd-sidebar-chevron"
385
- width="14"
386
- height="14"
387
- viewBox="0 0 24 24"
388
- fill="none"
389
- stroke="currentColor"
390
- stroke-width="2"
391
- >
392
- <polyline points="6 9 12 15 18 9" />
393
- </svg>
394
- </summary>
395
- <div class="fd-sidebar-folder-content">
396
- <NuxtLink
397
- v-if="(child as any).index"
398
- :to="(child as any).index.url"
399
- class="fd-sidebar-link fd-sidebar-child-link"
400
- :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
401
- @click="closeSidebar"
402
- >
403
- {{ (child as any).index.name }}
404
- </NuxtLink>
405
- <NuxtLink
406
- v-for="grandchild in (child as any).children"
407
- v-if="grandchild.type === 'page'"
408
- :key="grandchild.url"
409
- :to="grandchild.url"
410
- class="fd-sidebar-link fd-sidebar-child-link"
411
- :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
412
- @click="closeSidebar"
413
- >
414
- {{ grandchild.name }}
415
- </NuxtLink>
416
- </div>
417
- </details>
418
- </template>
419
- </div>
420
- </details>
372
+ <NuxtLink
373
+ v-if="child.type === 'page'"
374
+ :to="(child as any).url"
375
+ class="fd-sidebar-link fd-sidebar-child-link"
376
+ :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
377
+ @click="closeSidebar"
378
+ >
379
+ {{ child.name }}
380
+ </NuxtLink>
381
+ <details
382
+ v-else-if="child.type === 'folder'"
383
+ class="fd-sidebar-folder fd-sidebar-nested-folder"
384
+ open
385
+ >
386
+ <summary class="fd-sidebar-folder-trigger">
387
+ <span class="fd-sidebar-folder-label">{{ child.name }}</span>
388
+ <svg
389
+ class="fd-sidebar-chevron"
390
+ width="14"
391
+ height="14"
392
+ viewBox="0 0 24 24"
393
+ fill="none"
394
+ stroke="currentColor"
395
+ stroke-width="2"
396
+ >
397
+ <polyline points="6 9 12 15 18 9" />
398
+ </svg>
399
+ </summary>
400
+ <div class="fd-sidebar-folder-content">
401
+ <NuxtLink
402
+ v-if="(child as any).index"
403
+ :to="(child as any).index.url"
404
+ class="fd-sidebar-link fd-sidebar-child-link"
405
+ :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
406
+ @click="closeSidebar"
407
+ >
408
+ {{ (child as any).index.name }}
409
+ </NuxtLink>
410
+ <NuxtLink
411
+ v-for="grandchild in (child as any).children"
412
+ v-if="grandchild.type === 'page'"
413
+ :key="grandchild.url"
414
+ :to="grandchild.url"
415
+ class="fd-sidebar-link fd-sidebar-child-link"
416
+ :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
417
+ @click="closeSidebar"
418
+ >
419
+ {{ grandchild.name }}
420
+ </NuxtLink>
421
+ </div>
422
+ </details>
423
+ </template>
424
+ </div>
425
+ </details>
426
+ </template>
421
427
  </template>
422
- </template>
428
+ </slot>
423
429
  </nav>
424
430
 
431
+ <div v-if="$slots['sidebar-footer']" class="fd-sidebar-footer-custom">
432
+ <slot name="sidebar-footer" />
433
+ </div>
434
+
425
435
  <div v-if="showThemeToggle" class="fd-sidebar-footer">
426
436
  <ThemeToggle />
427
437
  </div>
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);
@@ -1211,8 +1221,9 @@ html.dark pre.shiki {
1211
1221
 
1212
1222
  .fd-edit-on-github {
1213
1223
  display: flex;
1224
+ flex-wrap: wrap;
1214
1225
  align-items: center;
1215
- gap: 16px;
1226
+ gap: 10px 16px;
1216
1227
  margin-top: 32px;
1217
1228
  padding-top: 16px;
1218
1229
  border-top: 1px solid var(--color-fd-border);
@@ -1237,6 +1248,12 @@ html.dark pre.shiki {
1237
1248
  font-size: 12px;
1238
1249
  }
1239
1250
 
1251
+ @media (max-width: 640px) {
1252
+ .fd-last-modified {
1253
+ width: 100%;
1254
+ }
1255
+ }
1256
+
1240
1257
  .fd-llms-txt-links {
1241
1258
  display: inline-flex;
1242
1259
  align-items: center;