@nx/react 19.6.0-canary.20240808-333ab77 → 19.6.0-canary.20240813-c72ba9b

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,862 @@
1
+ /*
2
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3
+ This is a starter component and can be deleted.
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
5
+ Delete this file and get started with your project!
6
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
7
+ */
8
+ export function NxWelcome({ title }: { title: string }) {
9
+ return (
10
+ <>
11
+ <style
12
+ dangerouslySetInnerHTML={{
13
+ __html: `
14
+ html {
15
+ -webkit-text-size-adjust: 100%;
16
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
17
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
18
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
19
+ 'Noto Color Emoji';
20
+ line-height: 1.5;
21
+ tab-size: 4;
22
+ scroll-behavior: smooth;
23
+ }
24
+ body {
25
+ font-family: inherit;
26
+ line-height: inherit;
27
+ margin: 0;
28
+ }
29
+ h1,
30
+ h2,
31
+ p,
32
+ pre {
33
+ margin: 0;
34
+ }
35
+ *,
36
+ ::before,
37
+ ::after {
38
+ box-sizing: border-box;
39
+ border-width: 0;
40
+ border-style: solid;
41
+ border-color: currentColor;
42
+ }
43
+ h1,
44
+ h2 {
45
+ font-size: inherit;
46
+ font-weight: inherit;
47
+ }
48
+ a {
49
+ color: inherit;
50
+ text-decoration: inherit;
51
+ }
52
+ pre {
53
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
54
+ 'Liberation Mono', 'Courier New', monospace;
55
+ }
56
+ svg {
57
+ display: block;
58
+ vertical-align: middle;
59
+ shape-rendering: auto;
60
+ text-rendering: optimizeLegibility;
61
+ }
62
+ pre {
63
+ background-color: rgba(55, 65, 81, 1);
64
+ border-radius: 0.25rem;
65
+ color: rgba(229, 231, 235, 1);
66
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
67
+ 'Liberation Mono', 'Courier New', monospace;
68
+ overflow: auto;
69
+ padding: 0.5rem 0.75rem;
70
+ }
71
+
72
+ .shadow {
73
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
74
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
75
+ }
76
+ .rounded {
77
+ border-radius: 1.5rem;
78
+ }
79
+ .wrapper {
80
+ width: 100%;
81
+ }
82
+ .container {
83
+ margin-left: auto;
84
+ margin-right: auto;
85
+ max-width: 768px;
86
+ padding-bottom: 3rem;
87
+ padding-left: 1rem;
88
+ padding-right: 1rem;
89
+ color: rgba(55, 65, 81, 1);
90
+ width: 100%;
91
+ }
92
+ #welcome {
93
+ margin-top: 2.5rem;
94
+ }
95
+ #welcome h1 {
96
+ font-size: 3rem;
97
+ font-weight: 500;
98
+ letter-spacing: -0.025em;
99
+ line-height: 1;
100
+ }
101
+ #welcome span {
102
+ display: block;
103
+ font-size: 1.875rem;
104
+ font-weight: 300;
105
+ line-height: 2.25rem;
106
+ margin-bottom: 0.5rem;
107
+ }
108
+ #hero {
109
+ align-items: center;
110
+ background-color: hsla(214, 62%, 21%, 1);
111
+ border: none;
112
+ box-sizing: border-box;
113
+ color: rgba(55, 65, 81, 1);
114
+ display: grid;
115
+ grid-template-columns: 1fr;
116
+ margin-top: 3.5rem;
117
+ }
118
+ #hero .text-container {
119
+ color: rgba(255, 255, 255, 1);
120
+ padding: 3rem 2rem;
121
+ }
122
+ #hero .text-container h2 {
123
+ font-size: 1.5rem;
124
+ line-height: 2rem;
125
+ position: relative;
126
+ }
127
+ #hero .text-container h2 svg {
128
+ color: hsla(162, 47%, 50%, 1);
129
+ height: 2rem;
130
+ left: -0.25rem;
131
+ position: absolute;
132
+ top: 0;
133
+ width: 2rem;
134
+ }
135
+ #hero .text-container h2 span {
136
+ margin-left: 2.5rem;
137
+ }
138
+ #hero .text-container a {
139
+ background-color: rgba(255, 255, 255, 1);
140
+ border-radius: 0.75rem;
141
+ color: rgba(55, 65, 81, 1);
142
+ display: inline-block;
143
+ margin-top: 1.5rem;
144
+ padding: 1rem 2rem;
145
+ text-decoration: inherit;
146
+ }
147
+ #hero .logo-container {
148
+ display: none;
149
+ justify-content: center;
150
+ padding-left: 2rem;
151
+ padding-right: 2rem;
152
+ }
153
+ #hero .logo-container svg {
154
+ color: rgba(255, 255, 255, 1);
155
+ width: 66.666667%;
156
+ }
157
+ #middle-content {
158
+ align-items: flex-start;
159
+ display: grid;
160
+ grid-template-columns: 1fr;
161
+ margin-top: 3.5rem;
162
+ }
163
+
164
+ #middle-content #middle-content-container {
165
+ display: flex;
166
+ flex-direction: column;
167
+ gap: 2rem;
168
+ }
169
+ #learning-materials {
170
+ padding: 2.5rem 2rem;
171
+ }
172
+ #learning-materials h2 {
173
+ font-weight: 500;
174
+ font-size: 1.25rem;
175
+ letter-spacing: -0.025em;
176
+ line-height: 1.75rem;
177
+ padding-left: 1rem;
178
+ padding-right: 1rem;
179
+ }
180
+ .list-item-link {
181
+ align-items: center;
182
+ border-radius: 0.75rem;
183
+ display: flex;
184
+ margin-top: 1rem;
185
+ padding: 1rem;
186
+ transition-property: background-color, border-color, color, fill, stroke,
187
+ opacity, box-shadow, transform, filter, backdrop-filter,
188
+ -webkit-backdrop-filter;
189
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
190
+ transition-duration: 150ms;
191
+ width: 100%;
192
+ }
193
+ .list-item-link svg:first-child {
194
+ margin-right: 1rem;
195
+ height: 1.5rem;
196
+ transition-property: background-color, border-color, color, fill, stroke,
197
+ opacity, box-shadow, transform, filter, backdrop-filter,
198
+ -webkit-backdrop-filter;
199
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
200
+ transition-duration: 150ms;
201
+ width: 1.5rem;
202
+ }
203
+ .list-item-link > span {
204
+ flex-grow: 1;
205
+ font-weight: 400;
206
+ transition-property: background-color, border-color, color, fill, stroke,
207
+ opacity, box-shadow, transform, filter, backdrop-filter,
208
+ -webkit-backdrop-filter;
209
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
210
+ }
211
+ .list-item-link > span > span {
212
+ color: rgba(107, 114, 128, 1);
213
+ display: block;
214
+ flex-grow: 1;
215
+ font-size: 0.75rem;
216
+ font-weight: 300;
217
+ line-height: 1rem;
218
+ transition-property: background-color, border-color, color, fill, stroke,
219
+ opacity, box-shadow, transform, filter, backdrop-filter,
220
+ -webkit-backdrop-filter;
221
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
222
+ }
223
+ .list-item-link svg:last-child {
224
+ height: 1rem;
225
+ transition-property: all;
226
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
227
+ transition-duration: 150ms;
228
+ width: 1rem;
229
+ }
230
+ .list-item-link:hover {
231
+ color: rgba(255, 255, 255, 1);
232
+ background-color: hsla(162, 55%, 33%, 1);
233
+ }
234
+ .list-item-link:hover > span {}
235
+ .list-item-link:hover > span > span {
236
+ color: rgba(243, 244, 246, 1);
237
+ }
238
+ .list-item-link:hover svg:last-child {
239
+ transform: translateX(0.25rem);
240
+ }
241
+ #other-links {}
242
+ .button-pill {
243
+ padding: 1.5rem 2rem;
244
+ margin-bottom: 2rem;
245
+ transition-duration: 300ms;
246
+ transition-property: background-color, border-color, color, fill, stroke,
247
+ opacity, box-shadow, transform, filter, backdrop-filter,
248
+ -webkit-backdrop-filter;
249
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
250
+ align-items: center;
251
+ display: flex;
252
+ }
253
+ .button-pill svg {
254
+ transition-property: background-color, border-color, color, fill, stroke,
255
+ opacity, box-shadow, transform, filter, backdrop-filter,
256
+ -webkit-backdrop-filter;
257
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
258
+ transition-duration: 150ms;
259
+ flex-shrink: 0;
260
+ width: 3rem;
261
+ }
262
+ .button-pill > span {
263
+ letter-spacing: -0.025em;
264
+ font-weight: 400;
265
+ font-size: 1.125rem;
266
+ line-height: 1.75rem;
267
+ padding-left: 1rem;
268
+ padding-right: 1rem;
269
+ }
270
+ .button-pill span span {
271
+ display: block;
272
+ font-size: 0.875rem;
273
+ font-weight: 300;
274
+ line-height: 1.25rem;
275
+ }
276
+ .button-pill:hover svg,
277
+ .button-pill:hover {
278
+ color: rgba(255, 255, 255, 1) !important;
279
+ }
280
+ #nx-console:hover {
281
+ background-color: rgba(0, 122, 204, 1);
282
+ }
283
+ #nx-console svg {
284
+ color: rgba(0, 122, 204, 1);
285
+ }
286
+ #nx-console-jetbrains {
287
+ margin-top: 2rem;
288
+ }
289
+ #nx-console-jetbrains:hover {
290
+ background-color: rgba(255, 49, 140, 1);
291
+ }
292
+ #nx-console-jetbrains svg {
293
+ color: rgba(255, 49, 140, 1);
294
+ }
295
+ #nx-repo:hover {
296
+ background-color: rgba(24, 23, 23, 1);
297
+ }
298
+ #nx-repo svg {
299
+ color: rgba(24, 23, 23, 1);
300
+ }
301
+ #nx-cloud {
302
+ margin-bottom: 2rem;
303
+ margin-top: 2rem;
304
+ padding: 2.5rem 2rem;
305
+ }
306
+ #nx-cloud > div {
307
+ align-items: center;
308
+ display: flex;
309
+ }
310
+ #nx-cloud > div svg {
311
+ border-radius: 0.375rem;
312
+ flex-shrink: 0;
313
+ width: 3rem;
314
+ }
315
+ #nx-cloud > div h2 {
316
+ font-size: 1.125rem;
317
+ font-weight: 400;
318
+ letter-spacing: -0.025em;
319
+ line-height: 1.75rem;
320
+ padding-left: 1rem;
321
+ padding-right: 1rem;
322
+ }
323
+ #nx-cloud > div h2 span {
324
+ display: block;
325
+ font-size: 0.875rem;
326
+ font-weight: 300;
327
+ line-height: 1.25rem;
328
+ }
329
+ #nx-cloud p {
330
+ font-size: 1rem;
331
+ line-height: 1.5rem;
332
+ margin-top: 1rem;
333
+ }
334
+ #nx-cloud pre {
335
+ margin-top: 1rem;
336
+ }
337
+ #nx-cloud a {
338
+ border-radius: 0.75rem;
339
+ color: white;
340
+ background-color: hsla(214, 62%, 21%, 1);
341
+ display: inline-block;
342
+ margin-top: 1.5rem;
343
+ padding: 0.5rem 1rem;
344
+ text-align:left;
345
+ text-decoration: inherit;
346
+ }
347
+
348
+ #commands {
349
+ padding: 2.5rem 2rem;
350
+ margin-top: 3.5rem;
351
+ }
352
+ #commands h2 {
353
+ font-size: 1.25rem;
354
+ font-weight: 400;
355
+ letter-spacing: -0.025em;
356
+ line-height: 1.75rem;
357
+ padding-left: 1rem;
358
+ padding-right: 1rem;
359
+ }
360
+ #commands p {
361
+ font-size: 1rem;
362
+ font-weight: 300;
363
+ line-height: 1.5rem;
364
+ margin-top: 1rem;
365
+ padding-left: 1rem;
366
+ padding-right: 1rem;
367
+ }
368
+ details {
369
+ align-items: center;
370
+ display: flex;
371
+ margin-top: 1rem;
372
+ padding-left: 1rem;
373
+ padding-right: 1rem;
374
+ width: 100%;
375
+ }
376
+ details pre > span {
377
+ color: rgba(181, 181, 181, 1);
378
+ display: block;
379
+ }
380
+ summary {
381
+ border-radius: 0.5rem;
382
+ display: flex;
383
+ font-weight: 400;
384
+ padding: 0.5rem;
385
+ cursor: pointer;
386
+ transition-property: background-color, border-color, color, fill, stroke,
387
+ opacity, box-shadow, transform, filter, backdrop-filter,
388
+ -webkit-backdrop-filter;
389
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
390
+ transition-duration: 150ms;
391
+ }
392
+ summary:hover {
393
+ background-color: rgba(243, 244, 246, 1);
394
+ }
395
+ summary svg {
396
+ height: 1.5rem;
397
+ margin-right: 1rem;
398
+ width: 1.5rem;
399
+ }
400
+ #love {
401
+ color: rgba(107, 114, 128, 1);
402
+ font-size: 0.875rem;
403
+ line-height: 1.25rem;
404
+ margin-top: 3.5rem;
405
+ opacity: 0.6;
406
+ text-align: center;
407
+ }
408
+ #love svg {
409
+ color: rgba(252, 165, 165, 1);
410
+ width: 1.25rem;
411
+ height: 1.25rem;
412
+ display: inline;
413
+ margin-top: -0.25rem;
414
+ }
415
+ @media screen and (min-width: 768px) {
416
+ #hero {
417
+ grid-template-columns: repeat(2, minmax(0, 1fr));
418
+ }
419
+ #hero .logo-container {
420
+ display: flex;
421
+ }
422
+ #middle-content {
423
+ grid-template-columns: repeat(2, minmax(0, 1fr));
424
+ gap: 4rem;
425
+ }
426
+ }
427
+ `,
428
+ }}
429
+ />
430
+ <div className="wrapper">
431
+ <div className="container">
432
+ <div id="welcome">
433
+ <h1>
434
+ <span> Hello there, </span>
435
+ Welcome {title} 👋
436
+ </h1>
437
+ </div>
438
+
439
+ <div id="hero" className="rounded">
440
+ <div className="text-container">
441
+ <h2>
442
+ <svg
443
+ fill="none"
444
+ stroke="currentColor"
445
+ viewBox="0 0 24 24"
446
+ xmlns="http://www.w3.org/2000/svg"
447
+ >
448
+ <path
449
+ strokeLinecap="round"
450
+ strokeLinejoin="round"
451
+ strokeWidth="2"
452
+ d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
453
+ />
454
+ </svg>
455
+ <span>You&apos;re up and running</span>
456
+ </h2>
457
+ <a href="#commands"> What&apos;s next? </a>
458
+ </div>
459
+ <div className="logo-container">
460
+ <svg
461
+ fill="currentColor"
462
+ role="img"
463
+ viewBox="0 0 24 24"
464
+ xmlns="http://www.w3.org/2000/svg"
465
+ >
466
+ <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
467
+ </svg>
468
+ </div>
469
+ </div>
470
+
471
+ <div id="middle-content">
472
+ <div id="middle-content-container">
473
+ <div id="learning-materials" className="rounded shadow">
474
+ <h2>Learning materials</h2>
475
+ <a
476
+ href="https://nx.dev/getting-started/intro?utm_source=nx-project"
477
+ target="_blank"
478
+ rel="noreferrer"
479
+ className="list-item-link"
480
+ >
481
+ <svg
482
+ fill="none"
483
+ stroke="currentColor"
484
+ viewBox="0 0 24 24"
485
+ xmlns="http://www.w3.org/2000/svg"
486
+ >
487
+ <path
488
+ strokeLinecap="round"
489
+ strokeLinejoin="round"
490
+ strokeWidth="2"
491
+ d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
492
+ />
493
+ </svg>
494
+ <span>
495
+ Documentation
496
+ <span> Everything is in there </span>
497
+ </span>
498
+ <svg
499
+ fill="none"
500
+ stroke="currentColor"
501
+ viewBox="0 0 24 24"
502
+ xmlns="http://www.w3.org/2000/svg"
503
+ >
504
+ <path
505
+ strokeLinecap="round"
506
+ strokeLinejoin="round"
507
+ strokeWidth="2"
508
+ d="M9 5l7 7-7 7"
509
+ />
510
+ </svg>
511
+ </a>
512
+ <a
513
+ href="https://nx.dev/blog/?utm_source=nx-project"
514
+ target="_blank"
515
+ rel="noreferrer"
516
+ className="list-item-link"
517
+ >
518
+ <svg
519
+ fill="none"
520
+ stroke="currentColor"
521
+ viewBox="0 0 24 24"
522
+ xmlns="http://www.w3.org/2000/svg"
523
+ >
524
+ <path
525
+ strokeLinecap="round"
526
+ strokeLinejoin="round"
527
+ strokeWidth="2"
528
+ d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
529
+ />
530
+ </svg>
531
+ <span>
532
+ Blog
533
+ <span> Changelog, features & events </span>
534
+ </span>
535
+ <svg
536
+ fill="none"
537
+ stroke="currentColor"
538
+ viewBox="0 0 24 24"
539
+ xmlns="http://www.w3.org/2000/svg"
540
+ >
541
+ <path
542
+ strokeLinecap="round"
543
+ strokeLinejoin="round"
544
+ strokeWidth="2"
545
+ d="M9 5l7 7-7 7"
546
+ />
547
+ </svg>
548
+ </a>
549
+ <a
550
+ href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
551
+ target="_blank"
552
+ rel="noreferrer"
553
+ className="list-item-link"
554
+ >
555
+ <svg
556
+ role="img"
557
+ viewBox="0 0 24 24"
558
+ fill="currentColor"
559
+ xmlns="http://www.w3.org/2000/svg"
560
+ >
561
+ <title>YouTube</title>
562
+ <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
563
+ </svg>
564
+ <span>
565
+ YouTube channel
566
+ <span> Nx Show, talks & tutorials </span>
567
+ </span>
568
+ <svg
569
+ fill="none"
570
+ stroke="currentColor"
571
+ viewBox="0 0 24 24"
572
+ xmlns="http://www.w3.org/2000/svg"
573
+ >
574
+ <path
575
+ strokeLinecap="round"
576
+ strokeLinejoin="round"
577
+ strokeWidth="2"
578
+ d="M9 5l7 7-7 7"
579
+ />
580
+ </svg>
581
+ </a>
582
+ <a
583
+ href="<%= tutorialUrl %>"
584
+ target="_blank"
585
+ rel="noreferrer"
586
+ className="list-item-link"
587
+ >
588
+ <svg
589
+ fill="none"
590
+ stroke="currentColor"
591
+ viewBox="0 0 24 24"
592
+ xmlns="http://www.w3.org/2000/svg"
593
+ >
594
+ <path
595
+ strokeLinecap="round"
596
+ strokeLinejoin="round"
597
+ strokeWidth="2"
598
+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
599
+ />
600
+ </svg>
601
+ <span>
602
+ Interactive tutorials
603
+ <span> Create an app, step-by-step </span>
604
+ </span>
605
+ <svg
606
+ fill="none"
607
+ stroke="currentColor"
608
+ viewBox="0 0 24 24"
609
+ xmlns="http://www.w3.org/2000/svg"
610
+ >
611
+ <path
612
+ strokeLinecap="round"
613
+ strokeLinejoin="round"
614
+ strokeWidth="2"
615
+ d="M9 5l7 7-7 7"
616
+ />
617
+ </svg>
618
+ </a>
619
+ </div>
620
+ <a
621
+ id="nx-repo"
622
+ className="button-pill rounded shadow"
623
+ href="https://github.com/nrwl/nx?utm_source=nx-project"
624
+ target="_blank"
625
+ rel="noreferrer"
626
+ >
627
+ <svg
628
+ fill="currentColor"
629
+ role="img"
630
+ viewBox="0 0 24 24"
631
+ xmlns="http://www.w3.org/2000/svg"
632
+ >
633
+ <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
634
+ </svg>
635
+ <span>
636
+ Nx is open source
637
+ <span> Love Nx? Give us a star! </span>
638
+ </span>
639
+ </a>
640
+ </div>
641
+ <div id="other-links">
642
+ <a
643
+ id="nx-console"
644
+ className="button-pill rounded shadow"
645
+ href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
646
+ target="_blank"
647
+ rel="noreferrer"
648
+ >
649
+ <svg
650
+ fill="currentColor"
651
+ role="img"
652
+ viewBox="0 0 24 24"
653
+ xmlns="http://www.w3.org/2000/svg"
654
+ >
655
+ <title>Visual Studio Code</title>
656
+ <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
657
+ </svg>
658
+ <span>
659
+ Install Nx Console for VSCode
660
+ <span>The official VSCode extension for Nx.</span>
661
+ </span>
662
+ </a>
663
+ <a
664
+ id="nx-console-jetbrains"
665
+ className="button-pill rounded shadow"
666
+ href="https://plugins.jetbrains.com/plugin/21060-nx-console"
667
+ target="_blank"
668
+ rel="noreferrer"
669
+ >
670
+ <svg
671
+ height="48"
672
+ width="48"
673
+ viewBox="20 20 60 60"
674
+ xmlns="http://www.w3.org/2000/svg"
675
+ >
676
+ <path d="m22.5 22.5h60v60h-60z" />
677
+ <g fill="#fff">
678
+ <path d="m29.03 71.25h22.5v3.75h-22.5z" />
679
+ <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
680
+ <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
681
+ <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
682
+ <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
683
+ <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
684
+ <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
685
+ <path d="m56.46 43.05h2.6v9.37h-2.6z" />
686
+ <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
687
+ <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
688
+ </g>
689
+ </svg>
690
+ <span>
691
+ Install Nx Console for JetBrains
692
+ <span>
693
+ Available for WebStorm, Intellij IDEA Ultimate and more!
694
+ </span>
695
+ </span>
696
+ </a>
697
+ <div id="nx-cloud" className="rounded shadow">
698
+ <div>
699
+ <svg
700
+ id="nx-cloud-logo"
701
+ role="img"
702
+ xmlns="http://www.w3.org/2000/svg"
703
+ stroke="currentColor"
704
+ fill="transparent"
705
+ viewBox="0 0 24 24"
706
+ >
707
+ <path
708
+ strokeWidth="2"
709
+ d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z"
710
+ />
711
+ <path
712
+ strokeWidth="2"
713
+ d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z"
714
+ />
715
+ </svg>
716
+ <h2>
717
+ Nx Cloud
718
+ <span>Enable faster CI & better DX</span>
719
+ </h2>
720
+ </div>
721
+ <p>
722
+ Your workspace is connected to Nx Cloud.
723
+ </p>
724
+ <a
725
+ href="https://nx.dev/ci/intro/ci-with-nx#learn-about-nx-on-ci"
726
+ target="_blank"
727
+ rel="noreferrer"
728
+ > Learn about Nx on CI
729
+ </a>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div id="commands" className="rounded shadow">
735
+ <h2>Next steps</h2>
736
+ <p>Here are some things you can do with Nx:</p>
737
+ <details>
738
+ <summary>
739
+ <svg
740
+ fill="none"
741
+ stroke="currentColor"
742
+ viewBox="0 0 24 24"
743
+ xmlns="http://www.w3.org/2000/svg"
744
+ >
745
+ <path
746
+ strokeLinecap="round"
747
+ strokeLinejoin="round"
748
+ strokeWidth="2"
749
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
750
+ />
751
+ </svg>
752
+ Build, test and lint your app
753
+ </summary>
754
+ <pre><% if ( rootProject ) { %>
755
+ <span># Build</span>
756
+ nx build
757
+ <span># Test</span>
758
+ nx test
759
+ <span># Lint</span>
760
+ nx lint
761
+ <span># Run them together!</span>
762
+ nx run-many -t build test lint
763
+ <% } else { %>
764
+ <span># Build</span>
765
+ nx build {title}
766
+ <span># Test</span>
767
+ nx test {title}
768
+ <span># Lint</span>
769
+ nx lint {title}
770
+ <span># Run them together!</span>
771
+ nx run-many -p {title} -t build test lint
772
+ <% } %>
773
+ </pre>
774
+ </details>
775
+
776
+ <details>
777
+ <summary>
778
+ <svg
779
+ fill="none"
780
+ stroke="currentColor"
781
+ viewBox="0 0 24 24"
782
+ xmlns="http://www.w3.org/2000/svg"
783
+ >
784
+ <path
785
+ strokeLinecap="round"
786
+ strokeLinejoin="round"
787
+ strokeWidth="2"
788
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
789
+ />
790
+ </svg>
791
+ View project details
792
+ </summary>
793
+ <pre>nx show project {title}</pre>
794
+ </details>
795
+ <details>
796
+ <summary>
797
+ <svg
798
+ fill="none"
799
+ stroke="currentColor"
800
+ viewBox="0 0 24 24"
801
+ xmlns="http://www.w3.org/2000/svg"
802
+ >
803
+ <path
804
+ strokeLinecap="round"
805
+ strokeLinejoin="round"
806
+ strokeWidth="2"
807
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
808
+ />
809
+ </svg>
810
+ View interactive project graph
811
+ </summary>
812
+ <pre>nx graph</pre>
813
+ </details>
814
+ <details>
815
+ <summary>
816
+ <svg
817
+ fill="none"
818
+ stroke="currentColor"
819
+ viewBox="0 0 24 24"
820
+ xmlns="http://www.w3.org/2000/svg"
821
+ >
822
+ <path
823
+ strokeLinecap="round"
824
+ strokeLinejoin="round"
825
+ strokeWidth="2"
826
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
827
+ />
828
+ </svg>
829
+ Add UI library
830
+ </summary>
831
+ <pre>
832
+ <span># Generate UI lib</span>
833
+ nx g @nx/react:lib ui
834
+ <span># Add a component</span>
835
+ nx g @nx/react:component ui/src/lib/button
836
+ </pre>
837
+ </details>
838
+ </div>
839
+
840
+ <p id="love">
841
+ Carefully crafted with
842
+ <svg
843
+ fill="currentColor"
844
+ stroke="none"
845
+ viewBox="0 0 24 24"
846
+ xmlns="http://www.w3.org/2000/svg"
847
+ >
848
+ <path
849
+ strokeLinecap="round"
850
+ strokeLinejoin="round"
851
+ strokeWidth="2"
852
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
853
+ />
854
+ </svg>
855
+ </p>
856
+ </div>
857
+ </div>
858
+ </>
859
+ );
860
+ }
861
+
862
+ export default NxWelcome;