chore(react): update links for generated react apps (#4213)
This commit is contained in:
Jack Hsu
GitHub
parent
35015dd891
commit
0a5ee20e46
@ -16,40 +16,29 @@ export function createAppJsx(name: string) {
|
|||||||
Here are some links to help you get started.
|
Here are some links to help you get started.
|
||||||
</p>
|
</p>
|
||||||
<ul className="resources">
|
<ul className="resources">
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
|
|
||||||
>
|
|
||||||
Nx video course
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/getting-started/what-is-nx"
|
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||||
>
|
>
|
||||||
Nx video tutorial
|
Scale React Development with Nx (Course)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/tutorial/01-create-application"
|
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||||
>
|
>
|
||||||
Interactive tutorial
|
Interactive tutorial
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a className="resource flex" href="https://connect.nrwl.io/">
|
<a className="resource flex" href="https://nx.app/">
|
||||||
<img
|
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
height="36"
|
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
||||||
alt="Nrwl Connect"
|
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
||||||
src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
|
</svg>
|
||||||
/>
|
<span className="gutter-left">Nx Cloud</span>
|
||||||
<span className="gutter-left">
|
|
||||||
Nrwl Connect
|
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.flex){
|
.app :global(.flex) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -65,7 +65,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.resource):hover {
|
.app :global(.resource:hover) {
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
background-color: rgba(68, 138, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -40,23 +40,15 @@ export function App() {
|
|||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
|
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||||
>
|
>
|
||||||
Nx video course
|
Scale React Development with Nx (Course)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/getting-started/what-is-nx"
|
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||||
>
|
|
||||||
Nx video tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/react/tutorial/01-create-application"
|
|
||||||
>
|
>
|
||||||
Interactive tutorial
|
Interactive tutorial
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -5,48 +5,48 @@
|
|||||||
margin: 50px auto;
|
margin: 50px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.gutter-left) {
|
.app .gutter-left {
|
||||||
margin-left: 9px;
|
margin-left: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.col-span-2) {
|
.app .col-span-2 {
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.flex) {
|
.app .flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(header) {
|
.app header {
|
||||||
background-color: #143055;
|
background-color: #143055;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(main) {
|
.app main {
|
||||||
padding: 0 36px;
|
padding: 0 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(p) {
|
.app p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(h1) {
|
.app h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: 18px;
|
margin-left: 18px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(h2) {
|
.app h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin: 40px 0 10px 0;
|
margin: 40px 0 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.resources) {
|
.app .resources {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -55,7 +55,7 @@
|
|||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.resource) {
|
.app .resource {
|
||||||
color: #0094ba;
|
color: #0094ba;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
@ -65,18 +65,18 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.resource:hover) {
|
.app .resource:hover {
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
background-color: rgba(68, 138, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(pre) {
|
.app pre {
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(details) {
|
.app details {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
@ -85,25 +85,25 @@
|
|||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(summary) {
|
.app summary {
|
||||||
outline: none;
|
outline: none;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.github-star-container) {
|
.app .github-star-container {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.github-star-container a) {
|
.app .github-star-container a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.github-star-badge) {
|
.app .github-star-badge {
|
||||||
color: #24292e;
|
color: #24292e;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -116,12 +116,12 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app :global(.github-star-badge:hover) {
|
.app .github-star-badge:hover {
|
||||||
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
|
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
|
||||||
border-color: rgba(27, 31, 35, 0.35);
|
border-color: rgba(27, 31, 35, 0.35);
|
||||||
background-position: -0.5em;
|
background-position: -0.5em;
|
||||||
}
|
}
|
||||||
.app :global(.github-star-badge .material-icons) {
|
.app .github-star-badge .material-icons {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
|||||||
@ -40,23 +40,15 @@ export function App() {
|
|||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
|
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||||
>
|
>
|
||||||
Nx video course
|
Scale React Development with Nx (Course)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/getting-started/what-is-nx"
|
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||||
>
|
|
||||||
Nx video tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/react/tutorial/01-create-application"
|
|
||||||
>
|
>
|
||||||
Interactive tutorial
|
Interactive tutorial
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -170,51 +170,31 @@ export function App() {
|
|||||||
</div>
|
</div>
|
||||||
<p>Here are some links to help you get started.</p>
|
<p>Here are some links to help you get started.</p>
|
||||||
<ul className="resources">
|
<ul className="resources">
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
|
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||||
>
|
>
|
||||||
Nx video course
|
Scale React Development with Nx (Course)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/getting-started/what-is-nx"
|
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||||
>
|
>
|
||||||
Nx video tutorial
|
Interactive tutorial
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a className="resource flex" href="https://nx.app/">
|
||||||
className="resource flex"
|
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
href="https://nx.dev/react/tutorial/01-create-application"
|
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
||||||
>
|
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
||||||
Interactive tutorial
|
</svg>
|
||||||
</a>
|
<span className="gutter-left">Nx Cloud</span>
|
||||||
</li>
|
</a>
|
||||||
<li className="col-span-2">
|
</li>
|
||||||
<a className="resource flex" href="https://nx.app/">
|
|
||||||
<svg
|
|
||||||
width="36"
|
|
||||||
height="36"
|
|
||||||
viewBox="0 0 120 120"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
|
|
||||||
fill="#0E2039"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
|
|
||||||
fill="white"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="gutter-left">Nx Cloud</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Next Steps</h2>
|
<h2>Next Steps</h2>
|
||||||
<p>Here are some things you can do with Nx.</p>
|
<p>Here are some things you can do with Nx.</p>
|
||||||
|
|||||||
@ -170,23 +170,15 @@ export function App() {
|
|||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
|
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||||
>
|
>
|
||||||
Nx video course
|
Scale React Development with Nx (Course)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="col-span-2">
|
<li className="col-span-2">
|
||||||
<a
|
<a
|
||||||
className="resource flex"
|
className="resource flex"
|
||||||
href="https://nx.dev/react/getting-started/what-is-nx"
|
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||||
>
|
|
||||||
Nx video tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/react/tutorial/01-create-application"
|
|
||||||
>
|
>
|
||||||
Interactive tutorial
|
Interactive tutorial
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user