botdocs 0.1.1 → 0.2.0

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.
@@ -0,0 +1,714 @@
1
+ /* Slate Theme - Dark sidebar, code-focused, API documentation style */
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ :root {
10
+ /* API docs color scheme */
11
+ --bg-primary: #ffffff;
12
+ --bg-secondary: #f5f5f5;
13
+ --bg-tertiary: #ebebeb;
14
+ --sidebar-bg: #2e3336;
15
+ --sidebar-text: #e8e8e8;
16
+ --sidebar-text-dim: #9fa9b0;
17
+ --text-primary: #1f2937;
18
+ --text-secondary: #6b7280;
19
+ --border-color: #e5e7eb;
20
+ --link-color: #10b981;
21
+ --link-hover: #059669;
22
+ --code-bg: #1e1e1e;
23
+ --code-text: #d4d4d4;
24
+ --sidebar-width: 360px;
25
+ --content-max-width: 650px;
26
+ --accent-green: #10b981;
27
+ --accent-blue: #3b82f6;
28
+ }
29
+
30
+ body {
31
+ font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
32
+ line-height: 1.7;
33
+ color: var(--text-primary);
34
+ background: var(--bg-primary);
35
+ font-size: 15px;
36
+ }
37
+
38
+ .layout {
39
+ display: flex;
40
+ min-height: 100vh;
41
+ }
42
+
43
+ /* Dark, wide sidebar like Slate API docs */
44
+ .sidebar {
45
+ width: var(--sidebar-width);
46
+ background: linear-gradient(180deg, #2e3336 0%, #1f2427 100%);
47
+ padding: 2.5rem 2rem;
48
+ overflow-y: auto;
49
+ position: fixed;
50
+ height: 100vh;
51
+ left: 0;
52
+ top: 0;
53
+ color: var(--sidebar-text);
54
+ box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
55
+ }
56
+
57
+ .sidebar-header {
58
+ margin-bottom: 2.5rem;
59
+ padding-bottom: 1.5rem;
60
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
61
+ }
62
+
63
+ .site-title {
64
+ font-size: 1.5rem;
65
+ font-weight: 700;
66
+ color: var(--sidebar-text);
67
+ margin-bottom: 0.5rem;
68
+ font-family: monospace;
69
+ letter-spacing: -0.5px;
70
+ }
71
+
72
+ .site-description {
73
+ font-size: 0.875rem;
74
+ color: var(--sidebar-text-dim);
75
+ line-height: 1.5;
76
+ }
77
+
78
+ .sidebar-nav {
79
+ margin-top: 1rem;
80
+ }
81
+
82
+ .nav-list {
83
+ list-style: none;
84
+ }
85
+
86
+ .nav-list li {
87
+ margin-bottom: 0.125rem;
88
+ }
89
+
90
+ .nav-list a {
91
+ color: var(--sidebar-text-dim);
92
+ text-decoration: none;
93
+ display: block;
94
+ padding: 0.625rem 1rem;
95
+ transition: all 0.2s;
96
+ font-size: 0.9rem;
97
+ border-left: 3px solid transparent;
98
+ margin-left: -1.5rem;
99
+ padding-left: calc(1.5rem - 3px);
100
+ }
101
+
102
+ .nav-list a:hover {
103
+ color: var(--sidebar-text);
104
+ background: rgba(255, 255, 255, 0.05);
105
+ border-left-color: var(--accent-green);
106
+ }
107
+
108
+ .nav-list a.active {
109
+ color: var(--sidebar-text);
110
+ background: rgba(16, 185, 129, 0.15);
111
+ border-left-color: var(--accent-green);
112
+ font-weight: 600;
113
+ }
114
+
115
+ /* Main Content - Split screen with code examples */
116
+ .main-content {
117
+ margin-left: var(--sidebar-width);
118
+ flex: 1;
119
+ padding: 0;
120
+ background: var(--bg-primary);
121
+ display: flex;
122
+ gap: 0;
123
+ }
124
+
125
+ .content-wrapper {
126
+ flex: 1;
127
+ max-width: none;
128
+ padding: 3rem 2.5rem;
129
+ background: var(--bg-primary);
130
+ min-width: 0;
131
+ }
132
+
133
+ /* Code blocks stick to right side for split-screen effect */
134
+ .content-wrapper pre {
135
+ position: relative;
136
+ margin-left: calc(-50vw + 50%);
137
+ margin-right: -2.5rem;
138
+ margin-top: -3rem;
139
+ margin-bottom: 2rem;
140
+ width: calc(100% + 50vw - 50% + 2.5rem);
141
+ max-width: 800px;
142
+ float: right;
143
+ clear: right;
144
+ }
145
+
146
+ /* Adjust paragraph spacing when followed by code */
147
+ .content-wrapper p + pre {
148
+ margin-top: -2rem;
149
+ }
150
+
151
+ .content-wrapper h3 + pre,
152
+ .content-wrapper h4 + pre {
153
+ margin-top: 1rem;
154
+ }
155
+
156
+ /* Typography - clean and technical */
157
+ h1, h2, h3, h4, h5, h6 {
158
+ margin-top: 2.5rem;
159
+ margin-bottom: 1rem;
160
+ font-weight: 700;
161
+ line-height: 1.3;
162
+ color: var(--text-primary);
163
+ }
164
+
165
+ h1 {
166
+ font-size: 2.5rem;
167
+ margin-top: 0;
168
+ margin-bottom: 1.5rem;
169
+ color: #111827 !important;
170
+ }
171
+
172
+ [data-theme='dark'] h1 {
173
+ color: #f9fafb !important;
174
+ }
175
+
176
+ [data-theme='dark'] h2,
177
+ [data-theme='dark'] h3,
178
+ [data-theme='dark'] h4,
179
+ [data-theme='dark'] h5,
180
+ [data-theme='dark'] h6 {
181
+ color: #e5e7eb !important;
182
+ }
183
+
184
+ [data-theme='dark'] h3 {
185
+ color: var(--accent-green) !important;
186
+ }
187
+
188
+ h2 {
189
+ font-size: 2rem;
190
+ padding-bottom: 0.75rem;
191
+ border-bottom: 2px solid var(--border-color);
192
+ margin-top: 3rem;
193
+ }
194
+
195
+ h3 {
196
+ font-size: 1.5rem;
197
+ color: var(--accent-green);
198
+ }
199
+
200
+ h4 {
201
+ font-size: 1.25rem;
202
+ font-family: monospace;
203
+ }
204
+
205
+ p {
206
+ margin-bottom: 1.25rem;
207
+ }
208
+
209
+ a {
210
+ color: var(--link-color);
211
+ text-decoration: none;
212
+ font-weight: 500;
213
+ }
214
+
215
+ a:hover {
216
+ text-decoration: underline;
217
+ }
218
+
219
+ /* Code - dark theme, prominent */
220
+ code {
221
+ font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
222
+ font-size: 0.875rem;
223
+ background: var(--code-bg);
224
+ color: var(--accent-green);
225
+ padding: 0.25rem 0.5rem;
226
+ border-radius: 4px;
227
+ font-weight: 500;
228
+ }
229
+
230
+ pre {
231
+ background: var(--code-bg);
232
+ color: var(--code-text);
233
+ padding: 1.5rem;
234
+ border-radius: 6px;
235
+ overflow-x: auto;
236
+ margin: 2rem 0;
237
+ border-left: 4px solid var(--accent-green);
238
+ position: relative;
239
+ }
240
+
241
+ pre code {
242
+ background: none;
243
+ padding: 0;
244
+ color: inherit;
245
+ }
246
+
247
+ /* Blockquotes */
248
+ blockquote {
249
+ border-left: 4px solid var(--accent-blue);
250
+ background: var(--bg-secondary);
251
+ padding: 1rem 1.5rem;
252
+ margin: 2rem 0;
253
+ color: var(--text-secondary);
254
+ border-radius: 4px;
255
+ }
256
+
257
+ /* Technical callouts */
258
+ .markdown-alert {
259
+ padding: 1.25rem 1.5rem;
260
+ margin: 2rem 0;
261
+ border-left: 4px solid;
262
+ border-radius: 4px;
263
+ font-size: 0.95rem;
264
+ }
265
+
266
+ .markdown-alert-title {
267
+ font-weight: 700;
268
+ margin-bottom: 0.75rem;
269
+ display: flex;
270
+ align-items: center;
271
+ gap: 0.75rem;
272
+ font-family: monospace;
273
+ text-transform: uppercase;
274
+ font-size: 0.85rem;
275
+ letter-spacing: 0.5px;
276
+ }
277
+
278
+ .markdown-alert-title svg {
279
+ display: none;
280
+ }
281
+
282
+ .markdown-alert-title::before {
283
+ font-size: 1.2rem;
284
+ }
285
+
286
+ .markdown-alert > *:last-child {
287
+ margin-bottom: 0;
288
+ }
289
+
290
+ .markdown-alert-note {
291
+ border-left-color: #3b82f6;
292
+ background: rgba(59, 130, 246, 0.05);
293
+ }
294
+
295
+ .markdown-alert-note .markdown-alert-title {
296
+ color: #3b82f6;
297
+ }
298
+
299
+ .markdown-alert-note .markdown-alert-title::before {
300
+ content: '📌';
301
+ }
302
+
303
+ .markdown-alert-tip {
304
+ border-left-color: #10b981;
305
+ background: rgba(16, 185, 129, 0.05);
306
+ }
307
+
308
+ .markdown-alert-tip .markdown-alert-title {
309
+ color: #10b981;
310
+ }
311
+
312
+ .markdown-alert-tip .markdown-alert-title::before {
313
+ content: '✓';
314
+ font-style: normal;
315
+ font-family: sans-serif;
316
+ font-weight: 900;
317
+ }
318
+
319
+ .markdown-alert-important {
320
+ border-left-color: #8b5cf6;
321
+ background: rgba(139, 92, 246, 0.05);
322
+ }
323
+
324
+ .markdown-alert-important .markdown-alert-title {
325
+ color: #8b5cf6;
326
+ }
327
+
328
+ .markdown-alert-important .markdown-alert-title::before {
329
+ content: '!';
330
+ font-style: normal;
331
+ font-family: monospace;
332
+ font-weight: 900;
333
+ }
334
+
335
+ .markdown-alert-warning {
336
+ border-left-color: #f59e0b;
337
+ background: rgba(245, 158, 11, 0.05);
338
+ }
339
+
340
+ .markdown-alert-warning .markdown-alert-title {
341
+ color: #f59e0b;
342
+ }
343
+
344
+ .markdown-alert-warning .markdown-alert-title::before {
345
+ content: '⚠';
346
+ }
347
+
348
+ .markdown-alert-caution {
349
+ border-left-color: #ef4444;
350
+ background: rgba(239, 68, 68, 0.05);
351
+ }
352
+
353
+ .markdown-alert-caution .markdown-alert-title {
354
+ color: #ef4444;
355
+ }
356
+
357
+ .markdown-alert-caution .markdown-alert-title::before {
358
+ content: '✕';
359
+ font-style: normal;
360
+ font-family: sans-serif;
361
+ font-weight: 900;
362
+ }
363
+
364
+ /* Lists */
365
+ ul, ol {
366
+ margin-left: 1.75rem;
367
+ margin-bottom: 1.25rem;
368
+ }
369
+
370
+ li {
371
+ margin-bottom: 0.75rem;
372
+ }
373
+
374
+ li::marker {
375
+ color: var(--accent-green);
376
+ }
377
+
378
+ /* Task Lists */
379
+ .task-list-item {
380
+ list-style: none;
381
+ margin-left: -1.75rem;
382
+ }
383
+
384
+ .task-list-item-checkbox {
385
+ margin-right: 0.75rem;
386
+ margin-left: 0.25rem;
387
+ cursor: pointer;
388
+ }
389
+
390
+ .task-list-item-checkbox[checked] {
391
+ accent-color: var(--accent-green);
392
+ }
393
+
394
+ /* Technical tables */
395
+ table {
396
+ width: 100%;
397
+ border-collapse: collapse;
398
+ margin: 2rem 0;
399
+ font-size: 0.9rem;
400
+ border: 1px solid var(--border-color);
401
+ }
402
+
403
+ th, td {
404
+ padding: 0.875rem;
405
+ text-align: left;
406
+ border: 1px solid var(--border-color);
407
+ }
408
+
409
+ th {
410
+ background: var(--code-bg);
411
+ color: var(--sidebar-text);
412
+ font-weight: 700;
413
+ font-family: monospace;
414
+ font-size: 0.85rem;
415
+ text-transform: uppercase;
416
+ letter-spacing: 0.5px;
417
+ }
418
+
419
+ tr:nth-child(even) {
420
+ background: var(--bg-secondary);
421
+ }
422
+
423
+ td code {
424
+ background: rgba(30, 30, 30, 0.1);
425
+ color: var(--accent-green);
426
+ }
427
+
428
+ /* Images */
429
+ img {
430
+ max-width: 100%;
431
+ height: auto;
432
+ border-radius: 6px;
433
+ margin: 1.5rem 0;
434
+ border: 1px solid var(--border-color);
435
+ }
436
+
437
+ /* Theme Toggle */
438
+ .theme-toggle {
439
+ position: fixed;
440
+ top: 1.5rem;
441
+ right: 1.5rem;
442
+ width: 3rem;
443
+ height: 3rem;
444
+ border-radius: 6px;
445
+ background: var(--sidebar-bg);
446
+ border: none;
447
+ cursor: pointer;
448
+ display: flex;
449
+ align-items: center;
450
+ justify-content: center;
451
+ transition: all 0.2s;
452
+ z-index: 100;
453
+ }
454
+
455
+ .theme-toggle:hover {
456
+ background: #3a4045;
457
+ transform: translateY(-2px);
458
+ }
459
+
460
+ .theme-icon::before {
461
+ content: '☀️';
462
+ font-size: 1.5rem;
463
+ }
464
+
465
+ [data-theme='dark'] .theme-icon::before {
466
+ content: '🌙';
467
+ }
468
+
469
+ /* Home page */
470
+ .home-header {
471
+ margin-bottom: 3rem;
472
+ }
473
+
474
+ .lead {
475
+ font-size: 1.25rem;
476
+ color: var(--text-secondary);
477
+ margin-top: 1.25rem;
478
+ line-height: 1.6;
479
+ }
480
+
481
+ .link-grid {
482
+ display: grid;
483
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
484
+ gap: 1.5rem;
485
+ margin-top: 2.5rem;
486
+ }
487
+
488
+ .link-card {
489
+ padding: 1.75rem;
490
+ background: var(--bg-secondary);
491
+ border-radius: 6px;
492
+ border: 2px solid var(--border-color);
493
+ text-decoration: none;
494
+ transition: all 0.2s;
495
+ }
496
+
497
+ .link-card:hover {
498
+ border-color: var(--accent-green);
499
+ transform: translateY(-2px);
500
+ background: var(--bg-primary);
501
+ }
502
+
503
+ .link-card h3 {
504
+ margin: 0 0 0.75rem 0;
505
+ color: var(--text-primary);
506
+ font-size: 1.25rem;
507
+ font-family: monospace;
508
+ }
509
+
510
+ .link-card p {
511
+ margin: 0;
512
+ color: var(--text-secondary);
513
+ font-size: 0.9rem;
514
+ line-height: 1.6;
515
+ }
516
+
517
+ /* Doc navigation */
518
+ .doc-navigation {
519
+ display: flex;
520
+ justify-content: space-between;
521
+ margin-top: 3rem;
522
+ padding-top: 2rem;
523
+ border-top: 2px solid var(--border-color);
524
+ gap: 1rem;
525
+ }
526
+
527
+ .nav-prev,
528
+ .nav-next {
529
+ padding: 1rem 1.25rem;
530
+ background: var(--sidebar-bg);
531
+ color: var(--sidebar-text);
532
+ border-radius: 6px;
533
+ text-decoration: none;
534
+ transition: all 0.2s;
535
+ font-weight: 600;
536
+ font-size: 0.9rem;
537
+ }
538
+
539
+ .nav-prev:hover,
540
+ .nav-next:hover {
541
+ background: #3a4045;
542
+ transform: translateY(-2px);
543
+ }
544
+
545
+ .nav-next {
546
+ margin-left: auto;
547
+ }
548
+
549
+ /* Chat Widget - Slate Dark API Style */
550
+ .chat-toggle {
551
+ background: var(--accent-green);
552
+ border: none;
553
+ border-radius: 8px;
554
+ box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
555
+ font-family: monospace;
556
+ }
557
+
558
+ .chat-toggle:hover {
559
+ background: var(--link-hover);
560
+ box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
561
+ transform: scale(1.1) translateY(-2px);
562
+ }
563
+
564
+ .chat-container {
565
+ background: var(--sidebar-bg);
566
+ border: 1px solid rgba(16, 185, 129, 0.3);
567
+ border-radius: 8px;
568
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
569
+ color: var(--sidebar-text);
570
+ }
571
+
572
+ .chat-header {
573
+ background: linear-gradient(135deg, #2e3336, #1f2427);
574
+ border-bottom: 2px solid var(--accent-green);
575
+ border-radius: 8px 8px 0 0;
576
+ }
577
+
578
+ .chat-header h3 {
579
+ font-family: monospace;
580
+ text-transform: uppercase;
581
+ letter-spacing: 1px;
582
+ font-size: 0.95rem;
583
+ }
584
+
585
+ .chat-messages {
586
+ background: var(--sidebar-bg);
587
+ }
588
+
589
+ .chat-message.user .message-content {
590
+ background: var(--accent-green);
591
+ color: white;
592
+ font-weight: 500;
593
+ border-radius: 8px;
594
+ border-bottom-right-radius: 2px;
595
+ }
596
+
597
+ .chat-message.assistant .message-content {
598
+ background: rgba(255, 255, 255, 0.05);
599
+ color: var(--sidebar-text);
600
+ border: 1px solid rgba(16, 185, 129, 0.2);
601
+ border-radius: 8px;
602
+ border-bottom-left-radius: 2px;
603
+ }
604
+
605
+ .chat-input-container {
606
+ background: linear-gradient(135deg, #2e3336, #1f2427);
607
+ border-top: 1px solid rgba(16, 185, 129, 0.3);
608
+ }
609
+
610
+ .chat-input {
611
+ background: rgba(0, 0, 0, 0.3);
612
+ border: 1px solid rgba(16, 185, 129, 0.3);
613
+ color: var(--sidebar-text);
614
+ font-family: monospace;
615
+ }
616
+
617
+ .chat-input:focus {
618
+ border-color: var(--accent-green);
619
+ box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
620
+ }
621
+
622
+ .chat-send {
623
+ background: var(--accent-green);
624
+ font-family: monospace;
625
+ text-transform: uppercase;
626
+ letter-spacing: 0.5px;
627
+ font-size: 0.8rem;
628
+ }
629
+
630
+ .chat-send:hover:not(:disabled) {
631
+ background: var(--link-hover);
632
+ }
633
+
634
+ .citation-link {
635
+ background: rgba(16, 185, 129, 0.1);
636
+ border: 1px solid rgba(16, 185, 129, 0.3);
637
+ color: var(--accent-green);
638
+ }
639
+
640
+ .citation-link:hover {
641
+ background: rgba(16, 185, 129, 0.2);
642
+ border-color: var(--accent-green);
643
+ }
644
+
645
+ /* Dark mode chat styling - enhance the already-dark Slate chat */
646
+ [data-theme='dark'] .chat-container {
647
+ background: #16181c;
648
+ border-color: rgba(16, 185, 129, 0.4);
649
+ }
650
+
651
+ [data-theme='dark'] .chat-messages {
652
+ background: #16181c;
653
+ }
654
+
655
+ [data-theme='dark'] .chat-header {
656
+ background: linear-gradient(135deg, #1a1d21, #0f1113);
657
+ border-bottom-color: rgba(16, 185, 129, 0.4);
658
+ }
659
+
660
+ [data-theme='dark'] .chat-message.assistant .message-content {
661
+ background: rgba(16, 185, 129, 0.08);
662
+ border-color: rgba(16, 185, 129, 0.25);
663
+ color: #e8e8e8;
664
+ }
665
+
666
+ [data-theme='dark'] .chat-input-container {
667
+ background: linear-gradient(135deg, #1a1d21, #0f1113);
668
+ border-top-color: rgba(16, 185, 129, 0.4);
669
+ }
670
+
671
+ [data-theme='dark'] .chat-input {
672
+ background: rgba(0, 0, 0, 0.4);
673
+ border-color: rgba(16, 185, 129, 0.4);
674
+ color: #e8e8e8;
675
+ }
676
+
677
+ /* Responsive */
678
+ @media (max-width: 768px) {
679
+ .sidebar {
680
+ position: static;
681
+ width: 100%;
682
+ height: auto;
683
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
684
+ }
685
+
686
+ .main-content {
687
+ margin-left: 0;
688
+ display: block;
689
+ }
690
+
691
+ .content-wrapper {
692
+ padding: 2rem 1.5rem;
693
+ }
694
+
695
+ .content-wrapper pre {
696
+ margin-left: 0;
697
+ margin-right: 0;
698
+ width: 100%;
699
+ float: none;
700
+ clear: both;
701
+ }
702
+
703
+ .layout {
704
+ flex-direction: column;
705
+ }
706
+
707
+ h1 {
708
+ font-size: 2rem;
709
+ }
710
+
711
+ h2 {
712
+ font-size: 1.5rem;
713
+ }
714
+ }
@@ -34,6 +34,13 @@
34
34
  <div class="content-wrapper">
35
35
  {{content}}
36
36
  </div>
37
+
38
+ {{#if attribution}}
39
+ <!-- Footer Attribution -->
40
+ <footer class="botdocs-attribution">
41
+ Built with <a href="https://github.com/usr-wwelsh/botdocs" target="_blank" rel="noopener">Botdocs</a>
42
+ </footer>
43
+ {{/if}}
37
44
  </main>
38
45
 
39
46
  <!-- Theme Toggle -->