@farming-labs/nuxt-theme 0.0.2-beta.24 → 0.0.2-beta.26

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 +111 -109
  3. package/styles/docs.css +8 -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.26",
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.26"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "nuxt": ">=3.0.0",
package/src/components/DocsLayout.vue CHANGED
@@ -304,122 +304,124 @@ const showFloatingAI = computed(
304
304
  </div>
305
305
 
306
306
  <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
- >
307
+ <slot name="sidebar" :tree="tree" :is-active="isActive">
308
+ <template v-if="tree?.children">
309
+ <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
310
+ <NuxtLink
311
+ v-if="node.type === 'page'"
312
+ :to="node.url!"
313
+ class="fd-sidebar-link fd-sidebar-top-link"
314
+ :class="{
315
+ 'fd-sidebar-link-active': isActive(node.url ?? ''),
316
+ 'fd-sidebar-first-item': i === 0,
317
+ }"
318
+ @click="closeSidebar"
319
+ >
320
+ <span
321
+ v-if="getIcon(node.icon)"
322
+ class="fd-sidebar-icon"
323
+ v-html="getIcon(node.icon)"
324
+ />
325
+ {{ node.name }}
326
+ </NuxtLink>
327
+ <details
328
+ v-else-if="node.type === 'folder'"
329
+ class="fd-sidebar-folder"
330
+ :class="{ 'fd-sidebar-first-item': i === 0 }"
331
+ open
332
+ >
333
+ <summary class="fd-sidebar-folder-trigger">
334
+ <span class="fd-sidebar-folder-label">
335
+ <span
336
+ v-if="getIcon(node.icon)"
337
+ class="fd-sidebar-icon"
338
+ v-html="getIcon(node.icon)"
339
+ />
340
+ {{ node.name }}
341
+ </span>
342
+ <svg
343
+ class="fd-sidebar-chevron"
344
+ width="14"
345
+ height="14"
346
+ viewBox="0 0 24 24"
347
+ fill="none"
348
+ stroke="currentColor"
349
+ stroke-width="2"
350
+ >
351
+ <polyline points="6 9 12 15 18 9" />
352
+ </svg>
353
+ </summary>
354
+ <div class="fd-sidebar-folder-content">
367
355
  <NuxtLink
368
- v-if="child.type === 'page'"
369
- :to="(child as any).url"
356
+ v-if="node.index"
357
+ :to="node.index.url"
370
358
  class="fd-sidebar-link fd-sidebar-child-link"
371
- :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
359
+ :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
372
360
  @click="closeSidebar"
373
361
  >
374
- {{ child.name }}
362
+ {{ node.index.name }}
375
363
  </NuxtLink>
376
- <details
377
- v-else-if="child.type === 'folder'"
378
- class="fd-sidebar-folder fd-sidebar-nested-folder"
379
- open
364
+ <template
365
+ v-for="child in node.children"
366
+ :key="child.name + ((child as any).url ?? '')"
380
367
  >
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>
368
+ <NuxtLink
369
+ v-if="child.type === 'page'"
370
+ :to="(child as any).url"
371
+ class="fd-sidebar-link fd-sidebar-child-link"
372
+ :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
373
+ @click="closeSidebar"
374
+ >
375
+ {{ child.name }}
376
+ </NuxtLink>
377
+ <details
378
+ v-else-if="child.type === 'folder'"
379
+ class="fd-sidebar-folder fd-sidebar-nested-folder"
380
+ open
381
+ >
382
+ <summary class="fd-sidebar-folder-trigger">
383
+ <span class="fd-sidebar-folder-label">{{ child.name }}</span>
384
+ <svg
385
+ class="fd-sidebar-chevron"
386
+ width="14"
387
+ height="14"
388
+ viewBox="0 0 24 24"
389
+ fill="none"
390
+ stroke="currentColor"
391
+ stroke-width="2"
392
+ >
393
+ <polyline points="6 9 12 15 18 9" />
394
+ </svg>
395
+ </summary>
396
+ <div class="fd-sidebar-folder-content">
397
+ <NuxtLink
398
+ v-if="(child as any).index"
399
+ :to="(child as any).index.url"
400
+ class="fd-sidebar-link fd-sidebar-child-link"
401
+ :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
402
+ @click="closeSidebar"
403
+ >
404
+ {{ (child as any).index.name }}
405
+ </NuxtLink>
406
+ <NuxtLink
407
+ v-for="grandchild in (child as any).children"
408
+ v-if="grandchild.type === 'page'"
409
+ :key="grandchild.url"
410
+ :to="grandchild.url"
411
+ class="fd-sidebar-link fd-sidebar-child-link"
412
+ :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
413
+ @click="closeSidebar"
414
+ >
415
+ {{ grandchild.name }}
416
+ </NuxtLink>
417
+ </div>
418
+ </details>
419
+ </template>
420
+ </div>
421
+ </details>
422
+ </template>
421
423
  </template>
422
- </template>
424
+ </slot>
423
425
  </nav>
424
426
 
425
427
  <div v-if="showThemeToggle" class="fd-sidebar-footer">
package/styles/docs.css CHANGED
@@ -1211,8 +1211,9 @@ html.dark pre.shiki {
1211
1211
 
1212
1212
  .fd-edit-on-github {
1213
1213
  display: flex;
1214
+ flex-wrap: wrap;
1214
1215
  align-items: center;
1215
- gap: 16px;
1216
+ gap: 10px 16px;
1216
1217
  margin-top: 32px;
1217
1218
  padding-top: 16px;
1218
1219
  border-top: 1px solid var(--color-fd-border);
@@ -1237,6 +1238,12 @@ html.dark pre.shiki {
1237
1238
  font-size: 12px;
1238
1239
  }
1239
1240
 
1241
+ @media (max-width: 640px) {
1242
+ .fd-last-modified {
1243
+ width: 100%;
1244
+ }
1245
+ }
1246
+
1240
1247
  .fd-llms-txt-links {
1241
1248
  display: inline-flex;
1242
1249
  align-items: center;