@nx/remix 17.3.0-rc.0 → 17.3.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,867 @@
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: scroll;
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
+ gap: 4rem;
161
+ grid-template-columns: 1fr;
162
+ margin-top: 3.5rem;
163
+ }
164
+ #learning-materials {
165
+ padding: 2.5rem 2rem;
166
+ }
167
+ #learning-materials h2 {
168
+ font-weight: 500;
169
+ font-size: 1.25rem;
170
+ letter-spacing: -0.025em;
171
+ line-height: 1.75rem;
172
+ padding-left: 1rem;
173
+ padding-right: 1rem;
174
+ }
175
+ .list-item-link {
176
+ align-items: center;
177
+ border-radius: 0.75rem;
178
+ display: flex;
179
+ margin-top: 1rem;
180
+ padding: 1rem;
181
+ transition-property: background-color, border-color, color, fill, stroke,
182
+ opacity, box-shadow, transform, filter, backdrop-filter,
183
+ -webkit-backdrop-filter;
184
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
185
+ transition-duration: 150ms;
186
+ width: 100%;
187
+ }
188
+ .list-item-link svg:first-child {
189
+ margin-right: 1rem;
190
+ height: 1.5rem;
191
+ transition-property: background-color, border-color, color, fill, stroke,
192
+ opacity, box-shadow, transform, filter, backdrop-filter,
193
+ -webkit-backdrop-filter;
194
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
195
+ transition-duration: 150ms;
196
+ width: 1.5rem;
197
+ }
198
+ .list-item-link > span {
199
+ flex-grow: 1;
200
+ font-weight: 400;
201
+ transition-property: background-color, border-color, color, fill, stroke,
202
+ opacity, box-shadow, transform, filter, backdrop-filter,
203
+ -webkit-backdrop-filter;
204
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
205
+ transition-duration: 150ms;
206
+ }
207
+ .list-item-link > span > span {
208
+ color: rgba(107, 114, 128, 1);
209
+ display: block;
210
+ flex-grow: 1;
211
+ font-size: 0.75rem;
212
+ font-weight: 300;
213
+ line-height: 1rem;
214
+ transition-property: background-color, border-color, color, fill, stroke,
215
+ opacity, box-shadow, transform, filter, backdrop-filter,
216
+ -webkit-backdrop-filter;
217
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
218
+ transition-duration: 150ms;
219
+ }
220
+ .list-item-link svg:last-child {
221
+ height: 1rem;
222
+ transition-property: all;
223
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
224
+ transition-duration: 150ms;
225
+ width: 1rem;
226
+ }
227
+ .list-item-link:hover {
228
+ color: rgba(255, 255, 255, 1);
229
+ background-color: hsla(162, 47%, 50%, 1);
230
+ }
231
+ .list-item-link:hover > span {}
232
+ .list-item-link:hover > span > span {
233
+ color: rgba(243, 244, 246, 1);
234
+ }
235
+ .list-item-link:hover svg:last-child {
236
+ transform: translateX(0.25rem);
237
+ }
238
+ #other-links {}
239
+ .button-pill {
240
+ padding: 1.5rem 2rem;
241
+ margin-bottom: 2rem;
242
+ transition-duration: 300ms;
243
+ transition-property: background-color, border-color, color, fill, stroke,
244
+ opacity, box-shadow, transform, filter, backdrop-filter,
245
+ -webkit-backdrop-filter;
246
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
247
+ align-items: center;
248
+ display: flex;
249
+ }
250
+ .button-pill svg {
251
+ transition-property: background-color, border-color, color, fill, stroke,
252
+ opacity, box-shadow, transform, filter, backdrop-filter,
253
+ -webkit-backdrop-filter;
254
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
255
+ transition-duration: 150ms;
256
+ flex-shrink: 0;
257
+ width: 3rem;
258
+ }
259
+ .button-pill > span {
260
+ letter-spacing: -0.025em;
261
+ font-weight: 400;
262
+ font-size: 1.125rem;
263
+ line-height: 1.75rem;
264
+ padding-left: 1rem;
265
+ padding-right: 1rem;
266
+ }
267
+ .button-pill span span {
268
+ display: block;
269
+ font-size: 0.875rem;
270
+ font-weight: 300;
271
+ line-height: 1.25rem;
272
+ }
273
+ .button-pill:hover svg,
274
+ .button-pill:hover {
275
+ color: rgba(255, 255, 255, 1) !important;
276
+ }
277
+ #nx-console:hover {
278
+ background-color: rgba(0, 122, 204, 1);
279
+ }
280
+ #nx-console svg {
281
+ color: rgba(0, 122, 204, 1);
282
+ }
283
+ #nx-console-jetbrains {
284
+ margin-top: 2rem;
285
+ }
286
+ #nx-console-jetbrains:hover {
287
+ background-color: rgba(255, 49, 140, 1);
288
+ }
289
+ #nx-console-jetbrains svg {
290
+ color: rgba(255, 49, 140, 1);
291
+ }
292
+ #nx-repo:hover {
293
+ background-color: rgba(24, 23, 23, 1);
294
+ }
295
+ #nx-repo svg {
296
+ color: rgba(24, 23, 23, 1);
297
+ }
298
+ #nx-cloud {
299
+ margin-bottom: 2rem;
300
+ margin-top: 2rem;
301
+ padding: 2.5rem 2rem;
302
+ }
303
+ #nx-cloud > div {
304
+ align-items: center;
305
+ display: flex;
306
+ }
307
+ #nx-cloud > div svg {
308
+ border-radius: 0.375rem;
309
+ flex-shrink: 0;
310
+ width: 3rem;
311
+ }
312
+ #nx-cloud > div h2 {
313
+ font-size: 1.125rem;
314
+ font-weight: 400;
315
+ letter-spacing: -0.025em;
316
+ line-height: 1.75rem;
317
+ padding-left: 1rem;
318
+ padding-right: 1rem;
319
+ }
320
+ #nx-cloud > div h2 span {
321
+ display: block;
322
+ font-size: 0.875rem;
323
+ font-weight: 300;
324
+ line-height: 1.25rem;
325
+ }
326
+ #nx-cloud p {
327
+ font-size: 1rem;
328
+ line-height: 1.5rem;
329
+ margin-top: 1rem;
330
+ }
331
+ #nx-cloud pre {
332
+ margin-top: 1rem;
333
+ }
334
+ #nx-cloud a {
335
+ color: rgba(107, 114, 128, 1);
336
+ display: block;
337
+ font-size: 0.875rem;
338
+ line-height: 1.25rem;
339
+ margin-top: 1.5rem;
340
+ text-align: right;
341
+ }
342
+ #nx-cloud a:hover {
343
+ text-decoration: underline;
344
+ }
345
+ #commands {
346
+ padding: 2.5rem 2rem;
347
+ margin-top: 3.5rem;
348
+ }
349
+ #commands h2 {
350
+ font-size: 1.25rem;
351
+ font-weight: 400;
352
+ letter-spacing: -0.025em;
353
+ line-height: 1.75rem;
354
+ padding-left: 1rem;
355
+ padding-right: 1rem;
356
+ }
357
+ #commands p {
358
+ font-size: 1rem;
359
+ font-weight: 300;
360
+ line-height: 1.5rem;
361
+ margin-top: 1rem;
362
+ padding-left: 1rem;
363
+ padding-right: 1rem;
364
+ }
365
+ details {
366
+ align-items: center;
367
+ display: flex;
368
+ margin-top: 1rem;
369
+ padding-left: 1rem;
370
+ padding-right: 1rem;
371
+ width: 100%;
372
+ }
373
+ details pre > span {
374
+ color: rgba(181, 181, 181, 1);
375
+ display: block;
376
+ }
377
+ summary {
378
+ border-radius: 0.5rem;
379
+ display: flex;
380
+ font-weight: 400;
381
+ padding: 0.5rem;
382
+ cursor: pointer;
383
+ transition-property: background-color, border-color, color, fill, stroke,
384
+ opacity, box-shadow, transform, filter, backdrop-filter,
385
+ -webkit-backdrop-filter;
386
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
387
+ transition-duration: 150ms;
388
+ }
389
+ summary:hover {
390
+ background-color: rgba(243, 244, 246, 1);
391
+ }
392
+ summary svg {
393
+ height: 1.5rem;
394
+ margin-right: 1rem;
395
+ width: 1.5rem;
396
+ }
397
+ #love {
398
+ color: rgba(107, 114, 128, 1);
399
+ font-size: 0.875rem;
400
+ line-height: 1.25rem;
401
+ margin-top: 3.5rem;
402
+ opacity: 0.6;
403
+ text-align: center;
404
+ }
405
+ #love svg {
406
+ color: rgba(252, 165, 165, 1);
407
+ width: 1.25rem;
408
+ height: 1.25rem;
409
+ display: inline;
410
+ margin-top: -0.25rem;
411
+ }
412
+ @media screen and (min-width: 768px) {
413
+ #hero {
414
+ grid-template-columns: repeat(2, minmax(0, 1fr));
415
+ }
416
+ #hero .logo-container {
417
+ display: flex;
418
+ }
419
+ #middle-content {
420
+ grid-template-columns: repeat(2, minmax(0, 1fr));
421
+ }
422
+ }
423
+ `,
424
+ }}
425
+ />
426
+ <div className="wrapper">
427
+ <div className="container">
428
+ <div id="welcome">
429
+ <h1>
430
+ <span> Hello there, </span>
431
+ Welcome {title} 👋
432
+ </h1>
433
+ </div>
434
+
435
+ <div id="hero" className="rounded">
436
+ <div className="text-container">
437
+ <h2>
438
+ <svg
439
+ fill="none"
440
+ stroke="currentColor"
441
+ viewBox="0 0 24 24"
442
+ xmlns="http://www.w3.org/2000/svg"
443
+ >
444
+ <path
445
+ strokeLinecap="round"
446
+ strokeLinejoin="round"
447
+ strokeWidth="2"
448
+ 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"
449
+ />
450
+ </svg>
451
+ <span>You&apos;re up and running</span>
452
+ </h2>
453
+ <a href="#commands"> What&apos;s next? </a>
454
+ </div>
455
+ <div className="logo-container">
456
+ <svg
457
+ fill="currentColor"
458
+ role="img"
459
+ viewBox="0 0 24 24"
460
+ xmlns="http://www.w3.org/2000/svg"
461
+ >
462
+ <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" />
463
+ </svg>
464
+ </div>
465
+ </div>
466
+
467
+ <div id="middle-content">
468
+ <div id="learning-materials" className="rounded shadow">
469
+ <h2>Learning materials</h2>
470
+ <a
471
+ href="https://nx.dev/getting-started/intro?utm_source=nx-project"
472
+ target="_blank"
473
+ rel="noreferrer"
474
+ className="list-item-link"
475
+ >
476
+ <svg
477
+ fill="none"
478
+ stroke="currentColor"
479
+ viewBox="0 0 24 24"
480
+ xmlns="http://www.w3.org/2000/svg"
481
+ >
482
+ <path
483
+ strokeLinecap="round"
484
+ strokeLinejoin="round"
485
+ strokeWidth="2"
486
+ 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"
487
+ />
488
+ </svg>
489
+ <span>
490
+ Documentation
491
+ <span> Everything is in there </span>
492
+ </span>
493
+ <svg
494
+ fill="none"
495
+ stroke="currentColor"
496
+ viewBox="0 0 24 24"
497
+ xmlns="http://www.w3.org/2000/svg"
498
+ >
499
+ <path
500
+ strokeLinecap="round"
501
+ strokeLinejoin="round"
502
+ strokeWidth="2"
503
+ d="M9 5l7 7-7 7"
504
+ />
505
+ </svg>
506
+ </a>
507
+ <a
508
+ href="https://blog.nrwl.io/?utm_source=nx-project"
509
+ target="_blank"
510
+ rel="noreferrer"
511
+ className="list-item-link"
512
+ >
513
+ <svg
514
+ fill="none"
515
+ stroke="currentColor"
516
+ viewBox="0 0 24 24"
517
+ xmlns="http://www.w3.org/2000/svg"
518
+ >
519
+ <path
520
+ strokeLinecap="round"
521
+ strokeLinejoin="round"
522
+ strokeWidth="2"
523
+ 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"
524
+ />
525
+ </svg>
526
+ <span>
527
+ Blog
528
+ <span> Changelog, features & events </span>
529
+ </span>
530
+ <svg
531
+ fill="none"
532
+ stroke="currentColor"
533
+ viewBox="0 0 24 24"
534
+ xmlns="http://www.w3.org/2000/svg"
535
+ >
536
+ <path
537
+ strokeLinecap="round"
538
+ strokeLinejoin="round"
539
+ strokeWidth="2"
540
+ d="M9 5l7 7-7 7"
541
+ />
542
+ </svg>
543
+ </a>
544
+ <a
545
+ href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
546
+ target="_blank"
547
+ rel="noreferrer"
548
+ className="list-item-link"
549
+ >
550
+ <svg
551
+ role="img"
552
+ viewBox="0 0 24 24"
553
+ fill="currentColor"
554
+ xmlns="http://www.w3.org/2000/svg"
555
+ >
556
+ <title>YouTube</title>
557
+ <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" />
558
+ </svg>
559
+ <span>
560
+ YouTube channel
561
+ <span> Nx Show, talks & tutorials </span>
562
+ </span>
563
+ <svg
564
+ fill="none"
565
+ stroke="currentColor"
566
+ viewBox="0 0 24 24"
567
+ xmlns="http://www.w3.org/2000/svg"
568
+ >
569
+ <path
570
+ strokeLinecap="round"
571
+ strokeLinejoin="round"
572
+ strokeWidth="2"
573
+ d="M9 5l7 7-7 7"
574
+ />
575
+ </svg>
576
+ </a>
577
+ <a
578
+ href="https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project"
579
+ target="_blank"
580
+ rel="noreferrer"
581
+ className="list-item-link"
582
+ >
583
+ <svg
584
+ fill="none"
585
+ stroke="currentColor"
586
+ viewBox="0 0 24 24"
587
+ xmlns="http://www.w3.org/2000/svg"
588
+ >
589
+ <path
590
+ strokeLinecap="round"
591
+ strokeLinejoin="round"
592
+ strokeWidth="2"
593
+ 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"
594
+ />
595
+ </svg>
596
+ <span>
597
+ Interactive tutorials
598
+ <span> Create an app, step-by-step </span>
599
+ </span>
600
+ <svg
601
+ fill="none"
602
+ stroke="currentColor"
603
+ viewBox="0 0 24 24"
604
+ xmlns="http://www.w3.org/2000/svg"
605
+ >
606
+ <path
607
+ strokeLinecap="round"
608
+ strokeLinejoin="round"
609
+ strokeWidth="2"
610
+ d="M9 5l7 7-7 7"
611
+ />
612
+ </svg>
613
+ </a>
614
+ <a
615
+ href="https://nxplaybook.com/?utm_source=nx-project"
616
+ target="_blank"
617
+ rel="noreferrer"
618
+ className="list-item-link"
619
+ >
620
+ <svg
621
+ fill="none"
622
+ stroke="currentColor"
623
+ viewBox="0 0 24 24"
624
+ xmlns="http://www.w3.org/2000/svg"
625
+ >
626
+ <path d="M12 14l9-5-9-5-9 5 9 5z" />
627
+ <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
628
+ <path
629
+ strokeLinecap="round"
630
+ strokeLinejoin="round"
631
+ strokeWidth="2"
632
+ d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
633
+ />
634
+ </svg>
635
+ <span>
636
+ Video courses
637
+ <span> Nx custom courses </span>
638
+ </span>
639
+ <svg
640
+ fill="none"
641
+ stroke="currentColor"
642
+ viewBox="0 0 24 24"
643
+ xmlns="http://www.w3.org/2000/svg"
644
+ >
645
+ <path
646
+ strokeLinecap="round"
647
+ strokeLinejoin="round"
648
+ strokeWidth="2"
649
+ d="M9 5l7 7-7 7"
650
+ />
651
+ </svg>
652
+ </a>
653
+ </div>
654
+ <div id="other-links">
655
+ <a
656
+ id="nx-console"
657
+ className="button-pill rounded shadow"
658
+ href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
659
+ target="_blank"
660
+ rel="noreferrer"
661
+ >
662
+ <svg
663
+ fill="currentColor"
664
+ role="img"
665
+ viewBox="0 0 24 24"
666
+ xmlns="http://www.w3.org/2000/svg"
667
+ >
668
+ <title>Visual Studio Code</title>
669
+ <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" />
670
+ </svg>
671
+ <span>
672
+ Install Nx Console for VSCode
673
+ <span>The official VSCode extension for Nx.</span>
674
+ </span>
675
+ </a>
676
+ <a
677
+ id="nx-console-jetbrains"
678
+ className="button-pill rounded shadow"
679
+ href="https://plugins.jetbrains.com/plugin/21060-nx-console"
680
+ target="_blank"
681
+ rel="noreferrer"
682
+ >
683
+ <svg
684
+ height="48"
685
+ width="48"
686
+ viewBox="20 20 60 60"
687
+ xmlns="http://www.w3.org/2000/svg"
688
+ >
689
+ <path d="m22.5 22.5h60v60h-60z" />
690
+ <g fill="#fff">
691
+ <path d="m29.03 71.25h22.5v3.75h-22.5z" />
692
+ <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" />
693
+ <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
694
+ <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
695
+ <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" />
696
+ <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" />
697
+ <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" />
698
+ <path d="m56.46 43.05h2.6v9.37h-2.6z" />
699
+ <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
700
+ <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" />
701
+ </g>
702
+ </svg>
703
+ <span>
704
+ Install Nx Console for JetBrains
705
+ <span>
706
+ Available for WebStorm, Intellij IDEA Ultimate and more!
707
+ </span>
708
+ </span>
709
+ </a>
710
+ <div id="nx-cloud" className="rounded shadow">
711
+ <div>
712
+ <svg
713
+ id="nx-cloud-logo"
714
+ role="img"
715
+ xmlns="http://www.w3.org/2000/svg"
716
+ stroke="currentColor"
717
+ fill="transparent"
718
+ viewBox="0 0 24 24"
719
+ >
720
+ <path
721
+ strokeWidth="2"
722
+ 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"
723
+ />
724
+ <path
725
+ strokeWidth="2"
726
+ 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"
727
+ />
728
+ </svg>
729
+ <h2>
730
+ Nx Cloud
731
+ <span>Enable faster CI & better DX</span>
732
+ </h2>
733
+ </div>
734
+ <p>
735
+ You can activate distributed tasks executions and caching by
736
+ running:
737
+ </p>
738
+ <pre>nx connect-to-nx-cloud</pre>
739
+ <a
740
+ href="https://nx.app/?utm_source=nx-project"
741
+ target="_blank"
742
+ rel="noreferrer"
743
+ >
744
+ {' '}
745
+ What is Nx Cloud?{' '}
746
+ </a>
747
+ </div>
748
+ <a
749
+ id="nx-repo"
750
+ className="button-pill rounded shadow"
751
+ href="https://github.com/nrwl/nx?utm_source=nx-project"
752
+ target="_blank"
753
+ rel="noreferrer"
754
+ >
755
+ <svg
756
+ fill="currentColor"
757
+ role="img"
758
+ viewBox="0 0 24 24"
759
+ xmlns="http://www.w3.org/2000/svg"
760
+ >
761
+ <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" />
762
+ </svg>
763
+ <span>
764
+ Nx is open source
765
+ <span> Love Nx? Give us a star! </span>
766
+ </span>
767
+ </a>
768
+ </div>
769
+ </div>
770
+
771
+ <div id="commands" className="rounded shadow">
772
+ <h2>Next steps</h2>
773
+ <p>Here are some things you can do with Nx:</p>
774
+ <details>
775
+ <summary>
776
+ <svg
777
+ fill="none"
778
+ stroke="currentColor"
779
+ viewBox="0 0 24 24"
780
+ xmlns="http://www.w3.org/2000/svg"
781
+ >
782
+ <path
783
+ strokeLinecap="round"
784
+ strokeLinejoin="round"
785
+ strokeWidth="2"
786
+ 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"
787
+ />
788
+ </svg>
789
+ Add UI library
790
+ </summary>
791
+ <pre>
792
+ <span># Generate UI lib</span>
793
+ nx g @nx/remix:lib ui
794
+ <span># Add a component</span>
795
+ nx g @nx/react:component ui/src/lib/button
796
+ </pre>
797
+ </details>
798
+ <details>
799
+ <summary>
800
+ <svg
801
+ fill="none"
802
+ stroke="currentColor"
803
+ viewBox="0 0 24 24"
804
+ xmlns="http://www.w3.org/2000/svg"
805
+ >
806
+ <path
807
+ strokeLinecap="round"
808
+ strokeLinejoin="round"
809
+ strokeWidth="2"
810
+ 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"
811
+ />
812
+ </svg>
813
+ View interactive project graph
814
+ </summary>
815
+ <pre>nx graph</pre>
816
+ </details>
817
+ <details>
818
+ <summary>
819
+ <svg
820
+ fill="none"
821
+ stroke="currentColor"
822
+ viewBox="0 0 24 24"
823
+ xmlns="http://www.w3.org/2000/svg"
824
+ >
825
+ <path
826
+ strokeLinecap="round"
827
+ strokeLinejoin="round"
828
+ strokeWidth="2"
829
+ 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"
830
+ />
831
+ </svg>
832
+ Run affected commands
833
+ </summary>
834
+ <pre>
835
+ <span># see what&apos;s been affected by changes</span>
836
+ nx affected:graph
837
+ <span># run tests for current changes</span>
838
+ nx affected:test
839
+ <span># run e2e tests for current changes</span>
840
+ nx affected:e2e
841
+ </pre>
842
+ </details>
843
+ </div>
844
+
845
+ <p id="love">
846
+ Carefully crafted with
847
+ <svg
848
+ fill="currentColor"
849
+ stroke="none"
850
+ viewBox="0 0 24 24"
851
+ xmlns="http://www.w3.org/2000/svg"
852
+ >
853
+ <path
854
+ strokeLinecap="round"
855
+ strokeLinejoin="round"
856
+ strokeWidth="2"
857
+ 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"
858
+ />
859
+ </svg>
860
+ </p>
861
+ </div>
862
+ </div>
863
+ </>
864
+ );
865
+ }
866
+
867
+ export default NxWelcome;