@nx/nuxt 19.6.0-beta.0 → 19.6.0-beta.2

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,791 @@
1
+ <script setup lang="ts">
2
+ defineProps<{
3
+ title: string
4
+ }>()
5
+ </script>
6
+
7
+ <template>
8
+ <div class="wrapper">
9
+ <div class="container">
10
+ <div id="welcome">
11
+ <h1>
12
+ <span> Hello there, </span>
13
+ Welcome {{ title }} 👋
14
+ </h1>
15
+ </div>
16
+
17
+ <div id="hero" class="rounded">
18
+ <div class="text-container">
19
+ <h2>
20
+ <svg
21
+ fill="none"
22
+ stroke="currentColor"
23
+ viewBox="0 0 24 24"
24
+ xmlns="http://www.w3.org/2000/svg"
25
+ >
26
+ <path
27
+ strokeLinecap="round"
28
+ strokeLinejoin="round"
29
+ strokeWidth="2"
30
+ 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"
31
+ />
32
+ </svg>
33
+ <span>You&apos;re up and running</span>
34
+ </h2>
35
+ <a href="#commands"> What&apos;s next? </a>
36
+ </div>
37
+ <div class="logo-container">
38
+ <svg
39
+ fill="currentColor"
40
+ role="img"
41
+ viewBox="0 0 24 24"
42
+ xmlns="http://www.w3.org/2000/svg"
43
+ >
44
+ <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" />
45
+ </svg>
46
+ </div>
47
+ </div>
48
+
49
+ <div id="middle-content">
50
+ <div id="middle-left-content">
51
+ <div id="learning-materials" class="rounded shadow">
52
+ <h2>Learning materials</h2>
53
+ <a
54
+ href="https://nx.dev/getting-started/intro?utm_source=nx-project"
55
+ target="_blank"
56
+ rel="noreferrer"
57
+ class="list-item-link"
58
+ >
59
+ <svg
60
+ fill="none"
61
+ stroke="currentColor"
62
+ viewBox="0 0 24 24"
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ >
65
+ <path
66
+ strokeLinecap="round"
67
+ strokeLinejoin="round"
68
+ strokeWidth="2"
69
+ 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"
70
+ />
71
+ </svg>
72
+ <span>
73
+ Documentation
74
+ <span> Everything is in there </span>
75
+ </span>
76
+ <svg
77
+ fill="none"
78
+ stroke="currentColor"
79
+ viewBox="0 0 24 24"
80
+ xmlns="http://www.w3.org/2000/svg"
81
+ >
82
+ <path
83
+ strokeLinecap="round"
84
+ strokeLinejoin="round"
85
+ strokeWidth="2"
86
+ d="M9 5l7 7-7 7"
87
+ />
88
+ </svg>
89
+ </a>
90
+ <a
91
+ href="https://nx.dev/blog/?utm_source=nx-project"
92
+ target="_blank"
93
+ rel="noreferrer"
94
+ class="list-item-link"
95
+ >
96
+ <svg
97
+ fill="none"
98
+ stroke="currentColor"
99
+ viewBox="0 0 24 24"
100
+ xmlns="http://www.w3.org/2000/svg"
101
+ >
102
+ <path
103
+ strokeLinecap="round"
104
+ strokeLinejoin="round"
105
+ strokeWidth="2"
106
+ 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"
107
+ />
108
+ </svg>
109
+ <span>
110
+ Blog
111
+ <span> Changelog, features & events </span>
112
+ </span>
113
+ <svg
114
+ fill="none"
115
+ stroke="currentColor"
116
+ viewBox="0 0 24 24"
117
+ xmlns="http://www.w3.org/2000/svg"
118
+ >
119
+ <path
120
+ strokeLinecap="round"
121
+ strokeLinejoin="round"
122
+ strokeWidth="2"
123
+ d="M9 5l7 7-7 7"
124
+ />
125
+ </svg>
126
+ </a>
127
+ <a
128
+ href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
129
+ target="_blank"
130
+ rel="noreferrer"
131
+ class="list-item-link"
132
+ >
133
+ <svg
134
+ role="img"
135
+ viewBox="0 0 24 24"
136
+ fill="currentColor"
137
+ xmlns="http://www.w3.org/2000/svg"
138
+ >
139
+ <title>YouTube</title>
140
+ <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" />
141
+ </svg>
142
+ <span>
143
+ YouTube channel
144
+ <span> Nx Show, talks & tutorials </span>
145
+ </span>
146
+ <svg
147
+ fill="none"
148
+ stroke="currentColor"
149
+ viewBox="0 0 24 24"
150
+ xmlns="http://www.w3.org/2000/svg"
151
+ >
152
+ <path
153
+ strokeLinecap="round"
154
+ strokeLinejoin="round"
155
+ strokeWidth="2"
156
+ d="M9 5l7 7-7 7"
157
+ />
158
+ </svg>
159
+ </a>
160
+ <a
161
+ href="https://nx.dev/getting-started/tutorials/vue-standalone-tutorial?utm_source=nx-project"
162
+ target="_blank"
163
+ rel="noreferrer"
164
+ class="list-item-link"
165
+ >
166
+ <svg
167
+ fill="none"
168
+ stroke="currentColor"
169
+ viewBox="0 0 24 24"
170
+ xmlns="http://www.w3.org/2000/svg"
171
+ >
172
+ <path
173
+ strokeLinecap="round"
174
+ strokeLinejoin="round"
175
+ strokeWidth="2"
176
+ 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"
177
+ />
178
+ </svg>
179
+ <span>
180
+ Interactive tutorials
181
+ <span> Create an app, step-by-step </span>
182
+ </span>
183
+ <svg
184
+ fill="none"
185
+ stroke="currentColor"
186
+ viewBox="0 0 24 24"
187
+ xmlns="http://www.w3.org/2000/svg"
188
+ >
189
+ <path
190
+ strokeLinecap="round"
191
+ strokeLinejoin="round"
192
+ strokeWidth="2"
193
+ d="M9 5l7 7-7 7"
194
+ />
195
+ </svg>
196
+ </a>
197
+ </div>
198
+ <a
199
+ id="nx-repo"
200
+ class="button-pill rounded shadow"
201
+ href="https://github.com/nrwl/nx?utm_source=nx-project"
202
+ target="_blank"
203
+ rel="noreferrer"
204
+ >
205
+ <svg
206
+ fill="currentColor"
207
+ role="img"
208
+ viewBox="0 0 24 24"
209
+ xmlns="http://www.w3.org/2000/svg"
210
+ >
211
+ <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" />
212
+ </svg>
213
+ <span>
214
+ Nx is open source
215
+ <span> Love Nx? Give us a star! </span>
216
+ </span>
217
+ </a>
218
+ </div>
219
+ <div id="other-links">
220
+ <a
221
+ id="nx-console"
222
+ class="button-pill rounded shadow"
223
+ href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
224
+ target="_blank"
225
+ rel="noreferrer"
226
+ >
227
+ <svg
228
+ fill="currentColor"
229
+ role="img"
230
+ viewBox="0 0 24 24"
231
+ xmlns="http://www.w3.org/2000/svg"
232
+ >
233
+ <title>Visual Studio Code</title>
234
+ <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" />
235
+ </svg>
236
+ <span>
237
+ Install Nx Console for VSCode
238
+ <span>The official VSCode extension for Nx.</span>
239
+ </span>
240
+ </a>
241
+ <a
242
+ id="nx-console-jetbrains"
243
+ class="button-pill rounded shadow"
244
+ href="https://plugins.jetbrains.com/plugin/21060-nx-console"
245
+ target="_blank"
246
+ rel="noreferrer"
247
+ >
248
+ <svg
249
+ height="48"
250
+ width="48"
251
+ viewBox="20 20 60 60"
252
+ xmlns="http://www.w3.org/2000/svg"
253
+ >
254
+ <path d="m22.5 22.5h60v60h-60z" />
255
+ <g fill="#fff">
256
+ <path d="m29.03 71.25h22.5v3.75h-22.5z" />
257
+ <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" />
258
+ <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
259
+ <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
260
+ <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" />
261
+ <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" />
262
+ <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" />
263
+ <path d="m56.46 43.05h2.6v9.37h-2.6z" />
264
+ <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
265
+ <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" />
266
+ </g>
267
+ </svg>
268
+ <span>
269
+ Install Nx Console for JetBrains
270
+ <span>
271
+ Available for WebStorm, Intellij IDEA Ultimate and more!
272
+ </span>
273
+ </span>
274
+ </a>
275
+ <div id="nx-cloud" class="rounded shadow">
276
+ <div>
277
+ <svg
278
+ id="nx-cloud-logo"
279
+ role="img"
280
+ xmlns="http://www.w3.org/2000/svg"
281
+ stroke="currentColor"
282
+ fill="transparent"
283
+ viewBox="0 0 24 24"
284
+ >
285
+ <path
286
+ strokeWidth="2"
287
+ 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"
288
+ />
289
+ <path
290
+ strokeWidth="2"
291
+ 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"
292
+ />
293
+ </svg>
294
+ <h2>
295
+ Nx Cloud
296
+ <span>Enable faster CI & better DX</span>
297
+ </h2>
298
+ </div>
299
+ <p>
300
+ Your workspace is connected to Nx Cloud.
301
+ </p>
302
+ <a
303
+ href="https://nx.dev/ci/intro/ci-with-nx#learn-about-nx-on-ci"
304
+ target="_blank"
305
+ rel="noreferrer"
306
+ > Learn about Nx on CI
307
+ </a>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div id="commands" class="rounded shadow">
313
+ <h2>Next steps</h2>
314
+ <p>Here are some things you can do with Nx:</p>
315
+ <details>
316
+ <summary>
317
+ <svg
318
+ fill="none"
319
+ stroke="currentColor"
320
+ viewBox="0 0 24 24"
321
+ xmlns="http://www.w3.org/2000/svg"
322
+ >
323
+ <path
324
+ strokeLinecap="round"
325
+ strokeLinejoin="round"
326
+ strokeWidth="2"
327
+ 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"
328
+ />
329
+ </svg>
330
+ Build, test and lint your app
331
+ </summary>
332
+ <pre><% if(rootProject) {%><span># Build</span>nx build<span># Test</span>nx test
333
+ <span># Lint</span>nx lint
334
+ <span># Run them together!</span>nx run-many -t build test lint <%} else {%> <span># Build</span>nx build {{ title }}<span># Test</span>nx test {{ title }}
335
+ <span># Lint</span>nx lint {{ title }}
336
+ <span># Run them together!</span>nx run-many -p {{ title }} -t build test lint <% } %></pre>
337
+ </details>
338
+ <details>
339
+ <summary>
340
+ <svg
341
+ fill="none"
342
+ stroke="currentColor"
343
+ viewBox="0 0 24 24"
344
+ xmlns="http://www.w3.org/2000/svg"
345
+ >
346
+ <path
347
+ strokeLinecap="round"
348
+ strokeLinejoin="round"
349
+ strokeWidth="2"
350
+ 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"
351
+ />
352
+ </svg>
353
+ View project details
354
+ </summary>
355
+ <pre>nx show project {{ title }}</pre>
356
+ </details>
357
+ <details>
358
+ <summary>
359
+ <svg
360
+ fill="none"
361
+ stroke="currentColor"
362
+ viewBox="0 0 24 24"
363
+ xmlns="http://www.w3.org/2000/svg"
364
+ >
365
+ <path
366
+ strokeLinecap="round"
367
+ strokeLinejoin="round"
368
+ strokeWidth="2"
369
+ 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"
370
+ />
371
+ </svg>
372
+ View interactive project graph
373
+ </summary>
374
+ <pre>nx graph</pre>
375
+ </details>
376
+ <details>
377
+ <summary>
378
+ <svg
379
+ fill="none"
380
+ stroke="currentColor"
381
+ viewBox="0 0 24 24"
382
+ xmlns="http://www.w3.org/2000/svg"
383
+ >
384
+ <path
385
+ strokeLinecap="round"
386
+ strokeLinejoin="round"
387
+ strokeWidth="2"
388
+ 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"
389
+ />
390
+ </svg>
391
+ Add UI library
392
+ </summary>
393
+ <pre><span># Generate UI lib</span>nx g @nx/vue:lib ui
394
+ <span># Add a component</span>nx g @nx/vue:component ui/src/lib/button
395
+ </pre>
396
+ </details>
397
+ </div>
398
+
399
+ <p id="love">
400
+ Carefully crafted with
401
+ <svg
402
+ fill="currentColor"
403
+ stroke="none"
404
+ viewBox="0 0 24 24"
405
+ xmlns="http://www.w3.org/2000/svg"
406
+ >
407
+ <path
408
+ strokeLinecap="round"
409
+ strokeLinejoin="round"
410
+ strokeWidth="2"
411
+ 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"
412
+ />
413
+ </svg>
414
+ </p>
415
+ </div>
416
+ </div>
417
+ </template>
418
+
419
+ <style scoped>
420
+ svg {
421
+ display: block;
422
+ vertical-align: middle;
423
+ shape-rendering: auto;
424
+ text-rendering: optimizeLegibility;
425
+ }
426
+ pre {
427
+ background-color: rgba(55, 65, 81, 1);
428
+ border-radius: 0.25rem;
429
+ color: rgba(229, 231, 235, 1);
430
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
431
+ 'Liberation Mono', 'Courier New', monospace;
432
+ overflow: auto;
433
+ padding: 0.5rem 0.75rem;
434
+ }
435
+
436
+ .shadow {
437
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
438
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
439
+ }
440
+ .rounded {
441
+ border-radius: 1.5rem;
442
+ }
443
+ .wrapper {
444
+ width: 100%;
445
+ }
446
+ .container {
447
+ margin-left: auto;
448
+ margin-right: auto;
449
+ max-width: 768px;
450
+ padding-bottom: 3rem;
451
+ padding-left: 1rem;
452
+ padding-right: 1rem;
453
+ color: rgba(55, 65, 81, 1);
454
+ width: 100%;
455
+ }
456
+ #welcome {
457
+ margin-top: 2.5rem;
458
+ }
459
+ #welcome h1 {
460
+ font-size: 3rem;
461
+ font-weight: 500;
462
+ letter-spacing: -0.025em;
463
+ line-height: 1;
464
+ }
465
+ #welcome span {
466
+ display: block;
467
+ font-size: 1.875rem;
468
+ font-weight: 300;
469
+ line-height: 2.25rem;
470
+ margin-bottom: 0.5rem;
471
+ }
472
+ #hero {
473
+ align-items: center;
474
+ background-color: hsla(214, 62%, 21%, 1);
475
+ border: none;
476
+ box-sizing: border-box;
477
+ color: rgba(55, 65, 81, 1);
478
+ display: grid;
479
+ grid-template-columns: 1fr;
480
+ margin-top: 3.5rem;
481
+ }
482
+ #hero .text-container {
483
+ color: rgba(255, 255, 255, 1);
484
+ padding: 3rem 2rem;
485
+ }
486
+ #hero .text-container h2 {
487
+ font-size: 1.5rem;
488
+ line-height: 2rem;
489
+ position: relative;
490
+ }
491
+ #hero .text-container h2 svg {
492
+ color: hsla(162, 47%, 50%, 1);
493
+ height: 2rem;
494
+ left: -0.25rem;
495
+ position: absolute;
496
+ top: 0;
497
+ width: 2rem;
498
+ }
499
+ #hero .text-container h2 span {
500
+ margin-left: 2.5rem;
501
+ }
502
+ #hero .text-container a {
503
+ background-color: rgba(255, 255, 255, 1);
504
+ border-radius: 0.75rem;
505
+ color: rgba(55, 65, 81, 1);
506
+ display: inline-block;
507
+ margin-top: 1.5rem;
508
+ padding: 1rem 2rem;
509
+ text-decoration: inherit;
510
+ }
511
+ #hero .logo-container {
512
+ display: none;
513
+ justify-content: center;
514
+ padding-left: 2rem;
515
+ padding-right: 2rem;
516
+ }
517
+ #hero .logo-container svg {
518
+ color: rgba(255, 255, 255, 1);
519
+ width: 66.666667%;
520
+ }
521
+ #middle-content {
522
+ align-items: flex-start;
523
+ display: grid;
524
+ grid-template-columns: 1fr;
525
+ margin-top: 3.5rem;
526
+ }
527
+
528
+ #middle-content #middle-left-content {
529
+ display: flex;
530
+ flex-direction: column;
531
+ gap: 2rem;
532
+ }
533
+ #learning-materials {
534
+ padding: 2.5rem 2rem;
535
+ }
536
+ #learning-materials h2 {
537
+ font-weight: 500;
538
+ font-size: 1.25rem;
539
+ letter-spacing: -0.025em;
540
+ line-height: 1.75rem;
541
+ padding-left: 1rem;
542
+ padding-right: 1rem;
543
+ }
544
+ .list-item-link {
545
+ align-items: center;
546
+ border-radius: 0.75rem;
547
+ display: flex;
548
+ margin-top: 1rem;
549
+ padding: 1rem;
550
+ transition-property: background-color, border-color, color, fill, stroke,
551
+ opacity, box-shadow, transform, filter, backdrop-filter,
552
+ -webkit-backdrop-filter;
553
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
554
+ transition-duration: 150ms;
555
+ width: 100%;
556
+ }
557
+ .list-item-link svg:first-child {
558
+ margin-right: 1rem;
559
+ height: 1.5rem;
560
+ transition-property: background-color, border-color, color, fill, stroke,
561
+ opacity, box-shadow, transform, filter, backdrop-filter,
562
+ -webkit-backdrop-filter;
563
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
564
+ transition-duration: 150ms;
565
+ width: 1.5rem;
566
+ }
567
+ .list-item-link > span {
568
+ flex-grow: 1;
569
+ font-weight: 400;
570
+ transition-property: background-color, border-color, color, fill, stroke,
571
+ opacity, box-shadow, transform, filter, backdrop-filter,
572
+ -webkit-backdrop-filter;
573
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
574
+ }
575
+ .list-item-link > span > span {
576
+ color: rgba(107, 114, 128, 1);
577
+ display: block;
578
+ flex-grow: 1;
579
+ font-size: 0.75rem;
580
+ font-weight: 300;
581
+ line-height: 1rem;
582
+ transition-property: background-color, border-color, color, fill, stroke,
583
+ opacity, box-shadow, transform, filter, backdrop-filter,
584
+ -webkit-backdrop-filter;
585
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
586
+ }
587
+ .list-item-link svg:last-child {
588
+ height: 1rem;
589
+ transition-property: all;
590
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
591
+ transition-duration: 150ms;
592
+ width: 1rem;
593
+ }
594
+ .list-item-link:hover {
595
+ color: rgba(255, 255, 255, 1);
596
+ background-color: hsla(162, 55%, 33%, 1);
597
+ }
598
+
599
+ .list-item-link:hover > span > span {
600
+ color: rgba(243, 244, 246, 1);
601
+ }
602
+ .list-item-link:hover svg:last-child {
603
+ transform: translateX(0.25rem);
604
+ }
605
+
606
+ .button-pill {
607
+ padding: 1.5rem 2rem;
608
+ margin-bottom: 2rem;
609
+ transition-duration: 300ms;
610
+ transition-property: background-color, border-color, color, fill, stroke,
611
+ opacity, box-shadow, transform, filter, backdrop-filter,
612
+ -webkit-backdrop-filter;
613
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
614
+ align-items: center;
615
+ display: flex;
616
+ }
617
+ .button-pill svg {
618
+ transition-property: background-color, border-color, color, fill, stroke,
619
+ opacity, box-shadow, transform, filter, backdrop-filter,
620
+ -webkit-backdrop-filter;
621
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
622
+ transition-duration: 150ms;
623
+ flex-shrink: 0;
624
+ width: 3rem;
625
+ }
626
+ .button-pill > span {
627
+ letter-spacing: -0.025em;
628
+ font-weight: 400;
629
+ font-size: 1.125rem;
630
+ line-height: 1.75rem;
631
+ padding-left: 1rem;
632
+ padding-right: 1rem;
633
+ }
634
+ .button-pill span span {
635
+ display: block;
636
+ font-size: 0.875rem;
637
+ font-weight: 300;
638
+ line-height: 1.25rem;
639
+ }
640
+ .button-pill:hover svg,
641
+ .button-pill:hover {
642
+ color: rgba(255, 255, 255, 1) !important;
643
+ }
644
+ #nx-console:hover {
645
+ background-color: rgba(0, 122, 204, 1);
646
+ }
647
+ #nx-console svg {
648
+ color: rgba(0, 122, 204, 1);
649
+ }
650
+ #nx-console-jetbrains {
651
+ margin-top: 2rem;
652
+ }
653
+ #nx-console-jetbrains:hover {
654
+ background-color: rgba(255, 49, 140, 1);
655
+ }
656
+ #nx-console-jetbrains svg {
657
+ color: rgba(255, 49, 140, 1);
658
+ }
659
+ #nx-repo:hover {
660
+ background-color: rgba(24, 23, 23, 1);
661
+ }
662
+ #nx-repo svg {
663
+ color: rgba(24, 23, 23, 1);
664
+ }
665
+ #nx-cloud {
666
+ margin-bottom: 2rem;
667
+ margin-top: 2rem;
668
+ padding: 2.5rem 2rem;
669
+ }
670
+ #nx-cloud > div {
671
+ align-items: center;
672
+ display: flex;
673
+ }
674
+ #nx-cloud > div svg {
675
+ border-radius: 0.375rem;
676
+ flex-shrink: 0;
677
+ width: 3rem;
678
+ }
679
+ #nx-cloud > div h2 {
680
+ font-size: 1.125rem;
681
+ font-weight: 400;
682
+ letter-spacing: -0.025em;
683
+ line-height: 1.75rem;
684
+ padding-left: 1rem;
685
+ padding-right: 1rem;
686
+ }
687
+ #nx-cloud > div h2 span {
688
+ display: block;
689
+ font-size: 0.875rem;
690
+ font-weight: 300;
691
+ line-height: 1.25rem;
692
+ }
693
+ #nx-cloud p {
694
+ font-size: 1rem;
695
+ line-height: 1.5rem;
696
+ margin-top: 1rem;
697
+ }
698
+ #nx-cloud pre {
699
+ margin-top: 1rem;
700
+ }
701
+ #nx-cloud a {
702
+ border-radius: 0.75rem;
703
+ color: white;
704
+ background-color: hsla(214, 62%, 21%, 1);
705
+ display: inline-block;
706
+ margin-top: 1.5rem;
707
+ padding: 0.5rem 1rem;
708
+ text-align:left;
709
+ text-decoration: inherit;
710
+ }
711
+
712
+ #commands {
713
+ padding: 2.5rem 2rem;
714
+ margin-top: 3.5rem;
715
+ }
716
+ #commands h2 {
717
+ font-size: 1.25rem;
718
+ font-weight: 400;
719
+ letter-spacing: -0.025em;
720
+ line-height: 1.75rem;
721
+ padding-left: 1rem;
722
+ padding-right: 1rem;
723
+ }
724
+ #commands p {
725
+ font-size: 1rem;
726
+ font-weight: 300;
727
+ line-height: 1.5rem;
728
+ margin-top: 1rem;
729
+ padding-left: 1rem;
730
+ padding-right: 1rem;
731
+ }
732
+ details {
733
+ align-items: center;
734
+ display: flex;
735
+ margin-top: 1rem;
736
+ padding-left: 1rem;
737
+ padding-right: 1rem;
738
+ width: 100%;
739
+ }
740
+ details pre > span {
741
+ color: rgba(181, 181, 181, 1);
742
+ display: block;
743
+ }
744
+ summary {
745
+ border-radius: 0.5rem;
746
+ display: flex;
747
+ font-weight: 400;
748
+ padding: 0.5rem;
749
+ cursor: pointer;
750
+ transition-property: background-color, border-color, color, fill, stroke,
751
+ opacity, box-shadow, transform, filter, backdrop-filter,
752
+ -webkit-backdrop-filter;
753
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
754
+ transition-duration: 150ms;
755
+ }
756
+ summary:hover {
757
+ background-color: rgba(243, 244, 246, 1);
758
+ }
759
+ summary svg {
760
+ height: 1.5rem;
761
+ margin-right: 1rem;
762
+ width: 1.5rem;
763
+ }
764
+ #love {
765
+ color: rgba(107, 114, 128, 1);
766
+ font-size: 0.875rem;
767
+ line-height: 1.25rem;
768
+ margin-top: 3.5rem;
769
+ opacity: 0.6;
770
+ text-align: center;
771
+ }
772
+ #love svg {
773
+ color: rgba(252, 165, 165, 1);
774
+ width: 1.25rem;
775
+ height: 1.25rem;
776
+ display: inline;
777
+ margin-top: -0.25rem;
778
+ }
779
+ @media screen and (min-width: 768px) {
780
+ #hero {
781
+ grid-template-columns: repeat(2, minmax(0, 1fr));
782
+ }
783
+ #hero .logo-container {
784
+ display: flex;
785
+ }
786
+ #middle-content {
787
+ grid-template-columns: repeat(2, minmax(0, 1fr));
788
+ gap: 4rem;
789
+ }
790
+ }
791
+ </style>