Skip to content
This repository was archived by the owner on Aug 27, 2024. It is now read-only.

Commit 74afc91

Browse files
JoshOrndorffJoshOrndorff
authored
Tutorials Page: no new tabs (#625)
* prune target _blank * prune unused component * Clean unnecessary component nesting * Start to remove unused recipes component, but then decide to keep it in case we should return to revisit idea.
1 parent 262a8ba commit 74afc91

File tree

1 file changed

+132
-215
lines changed

1 file changed

+132
-215
lines changed

‎website/pages/en/tutorials.js

Lines changed: 132 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ class Tutorials extends React.Component {
3535
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
3636
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
3737

38-
const FeaturedTutorialCards = props =>
38+
const TutorialCards = props =>
3939
props.data.map(tutorial => (
40-
<a href={tutorial.href} target="_blank" className="a_wrapper">
40+
<a href={tutorial.href} className="a_wrapper">
4141
<Col xl={3} lg={4} md={6} sm={12} className="mb-5 d-flex align-items-stretch">
4242
<Card>
4343
<Card.Img
@@ -104,7 +104,6 @@ class Tutorials extends React.Component {
104104
variant="secondary"
105105
className="primary-color"
106106
href={tutorial.href}
107-
target="_blank"
108107
>
109108
Try it now!
110109
</Button>
@@ -114,237 +113,30 @@ class Tutorials extends React.Component {
114113
</a>
115114
));
116115

117-
const OtherTutorialCards = props =>
118-
props.data.map(tutorial => (
119-
<a href={tutorial.href} target="_blank" className="a_wrapper">
120-
<Col xl={3} lg={4} md={6} sm={12} className="mb-5 d-flex align-items-stretch">
121-
<Card>
122-
<Card.Body className="d-flex flex-column">
123-
<Card.Title>{tutorial.title}</Card.Title>
124-
<Card.Text>{tutorial.text}</Card.Text>
125-
<div className="mt-auto">
126-
<Badge
127-
variant={
128-
tutorial.difficulty == `hard`
129-
? `danger`
130-
: tutorial.difficulty == `medium`
131-
? `warning`
132-
: `success`
133-
}
134-
className="m-1"
135-
>
136-
{tutorial.difficulty.charAt(0).toUpperCase() +
137-
tutorial.difficulty.slice(1)}
138-
</Badge>
139-
<Badge
140-
variant={
141-
tutorial.length > 4
142-
? `danger`
143-
: tutorial.length > 2
144-
? `warning`
145-
: `success`
146-
}
147-
className="m-1"
148-
>
149-
{tutorial.length} Hour{tutorial.length > 1 ? `s` : ``}
150-
</Badge>
151-
<Badge
152-
variant={
153-
tutorial.prerequisite == true ? `warning` : `success`
154-
}
155-
className="m-1"
156-
>
157-
{tutorial.prerequisite == true
158-
? `Prerequisites`
159-
: `No Prerequisites`}
160-
</Badge>
161-
<Badge
162-
variant={
163-
tutorial.version <= 1
164-
? `danger`
165-
: `warning`
166-
}
167-
className="m-1"
168-
>
169-
{`v`}{tutorial.version}
170-
</Badge>
171-
</div>
172-
</Card.Body>
173-
<Card.Footer className="text-center">
174-
<Button
175-
variant="secondary"
176-
className="primary-color"
177-
href={tutorial.href}
178-
target="_blank"
179-
>
180-
Try it now!
181-
</Button>
182-
</Card.Footer>
183-
</Card>
184-
</Col>
185-
</a>
186-
));
187-
188-
const RuntimeRecipes = () => (
116+
const Recipes = () => (
189117
<div>
190118
<h2>
191119
<translate>Runtime Recipes</translate>
192120
</h2>
193121
<hr />
194122
<p>
195123
<translate>
196-
Find code samples for common patterns and best practices when
197-
developing runtime modules on Substrate:
124+
Code examples, common patterns, and best practices when
125+
developing with Substrate:
198126
</translate>
199127
</p>
200128
<p>
201129
<Button
202-
target="_blank"
203130
variant="secondary"
204131
className="primary-color"
205132
href="https://substrate.dev/recipes"
206133
>
207-
<translate>Substrate Runtime Recipes ></translate>
134+
<translate>Substrate Recipes ></translate>
208135
</Button>
209136
</p>
210137
</div>
211138
);
212139

213-
const RecommendedTutorials = () => (
214-
<div>
215-
<h2>
216-
<translate>Try these first!</translate>
217-
</h2>
218-
<hr />
219-
<Row>
220-
<FeaturedTutorialCards
221-
data={[
222-
{
223-
img: `${baseUrl}img/crates.png`,
224-
title: (
225-
<translate>Create Your First Substrate Chain</translate>
226-
),
227-
text: (
228-
<translate>
229-
Launch and interact with your first Substrate chain in this minimal end-to-end guide.
230-
</translate>
231-
),
232-
difficulty: "easy",
233-
length: "< 1",
234-
prerequisite: false,
235-
version: "2.0.0-rc5",
236-
href: `${docUrl(
237-
"tutorials/create-your-first-substrate-chain/"
238-
)}`
239-
},
240-
{
241-
img: `${baseUrl}img/first-substrate-chain.png`,
242-
title: (
243-
<translate>Build a PoE Decentralized Application</translate>
244-
),
245-
text: (
246-
<translate>
247-
Build a customized Substrate chain with its own user interface.
248-
</translate>
249-
),
250-
difficulty: "easy",
251-
length: "1",
252-
prerequisite: true,
253-
version: "2.0.0-rc5",
254-
href: `${docUrl(
255-
"tutorials/build-a-dapp/"
256-
)}`
257-
},
258-
{
259-
title: (
260-
<translate>Adding a Pallet to Your Runtime</translate>
261-
),
262-
text: (
263-
<translate>
264-
Add the Contracts pallet or other FRAME pallets to your Substrate node template.
265-
</translate>
266-
),
267-
difficulty: "medium",
268-
length: "2",
269-
prerequisite: false,
270-
version: "2.0.0-rc4",
271-
href: `${docUrl(
272-
"tutorials/add-a-pallet-to-your-runtime/")}`
273-
},
274-
{
275-
img: `${baseUrl}img/substrate-network.png`,
276-
title: (
277-
<translate>Start a Private Network with Substrate</translate>
278-
),
279-
text: (
280-
<translate>
281-
Learn to start a blockchain network using an
282-
out-of-the-box Substrate node.
283-
</translate>
284-
),
285-
difficulty: "easy",
286-
length: "2",
287-
prerequisite: false,
288-
version: "2.0.0-rc5",
289-
href: `${docUrl(
290-
"tutorials/start-a-private-network/"
291-
)}`
292-
},
293-
{
294-
img: `${baseUrl}img/crates.png`,
295-
title: (
296-
<translate>Write a Pallet in its Own Crate</translate>
297-
),
298-
text: (
299-
<translate>
300-
Make your pallets re-usable by packaging them in
301-
their own rust crate.
302-
</translate>
303-
),
304-
difficulty: "medium",
305-
length: "2",
306-
prerequisite: false,
307-
version: "2.0.0-rc5",
308-
href: `${docUrl("tutorials/create-a-pallet/")}`
309-
},
310-
{
311-
img: `${baseUrl}img/grafana.png`,
312-
title: (
313-
<translate>Visualizing Node Metrics</translate>
314-
),
315-
text: (
316-
<translate>
317-
Learn how to visualize the metrics that Substrate records using Prometheus.
318-
</translate>
319-
),
320-
difficulty: "easy",
321-
length: "< 1",
322-
prerequisite: false,
323-
version: "2.0.0-rc5",
324-
href: `${docUrl("tutorials/visualize-node-metrics/")}`
325-
},
326-
{
327-
img: `${baseUrl}img/ink-smart-contracts-tutorial.png`,
328-
title: <translate>ink! Smart Contracts Tutorial</translate>,
329-
text: (
330-
<translate>
331-
A comprehensive, end-to-end tutorial for building an ERC20
332-
token contract using ink!.
333-
</translate>
334-
),
335-
difficulty: "easy",
336-
length: "4",
337-
prerequisite: false,
338-
version: "2.0.0-rc4",
339-
href:
340-
"https://substrate-developer-hub.github.io/substrate-contracts-workshop/"
341-
},
342-
]}
343-
/>
344-
</Row>
345-
</div>
346-
);
347-
348140
return (
349141
<div>
350142
<HomeSplash
@@ -356,7 +148,132 @@ class Tutorials extends React.Component {
356148
/>
357149
<div className="mainContainer">
358150
<Container>
359-
<RecommendedTutorials />
151+
<Row>
152+
<TutorialCards
153+
data={[
154+
{
155+
img: `${baseUrl}img/crates.png`,
156+
title: (
157+
<translate>Create Your First Substrate Chain</translate>
158+
),
159+
text: (
160+
<translate>
161+
Launch and interact with your first Substrate chain in this minimal end-to-end guide.
162+
</translate>
163+
),
164+
difficulty: "easy",
165+
length: "< 1",
166+
prerequisite: false,
167+
version: "2.0.0-rc5",
168+
href: `${docUrl(
169+
"tutorials/create-your-first-substrate-chain/"
170+
)}`
171+
},
172+
{
173+
img: `${baseUrl}img/first-substrate-chain.png`,
174+
title: (
175+
<translate>Build a PoE Decentralized Application</translate>
176+
),
177+
text: (
178+
<translate>
179+
Build a customized Substrate chain with its own user interface.
180+
</translate>
181+
),
182+
difficulty: "easy",
183+
length: "1",
184+
prerequisite: true,
185+
version: "2.0.0-rc5",
186+
href: `${docUrl(
187+
"tutorials/build-a-dapp/"
188+
)}`
189+
},
190+
{
191+
title: (
192+
<translate>Adding a Pallet to Your Runtime</translate>
193+
),
194+
text: (
195+
<translate>
196+
Add the Contracts pallet or other FRAME pallets to your Substrate node template.
197+
</translate>
198+
),
199+
difficulty: "medium",
200+
length: "2",
201+
prerequisite: false,
202+
version: "2.0.0-rc4",
203+
href: `${docUrl(
204+
"tutorials/add-a-pallet-to-your-runtime/")}`
205+
},
206+
{
207+
img: `${baseUrl}img/substrate-network.png`,
208+
title: (
209+
<translate>Start a Private Network with Substrate</translate>
210+
),
211+
text: (
212+
<translate>
213+
Learn to start a blockchain network using an
214+
out-of-the-box Substrate node.
215+
</translate>
216+
),
217+
difficulty: "easy",
218+
length: "2",
219+
prerequisite: false,
220+
version: "2.0.0-rc5",
221+
href: `${docUrl(
222+
"tutorials/start-a-private-network/"
223+
)}`
224+
},
225+
{
226+
img: `${baseUrl}img/crates.png`,
227+
title: (
228+
<translate>Write a Pallet in its Own Crate</translate>
229+
),
230+
text: (
231+
<translate>
232+
Make your pallets re-usable by packaging them in
233+
their own rust crate.
234+
</translate>
235+
),
236+
difficulty: "medium",
237+
length: "2",
238+
prerequisite: false,
239+
version: "2.0.0-rc5",
240+
href: `${docUrl("tutorials/create-a-pallet/")}`
241+
},
242+
{
243+
img: `${baseUrl}img/grafana.png`,
244+
title: (
245+
<translate>Visualizing Node Metrics</translate>
246+
),
247+
text: (
248+
<translate>
249+
Learn how to visualize the metrics that Substrate records using Prometheus.
250+
</translate>
251+
),
252+
difficulty: "easy",
253+
length: "< 1",
254+
prerequisite: false,
255+
version: "2.0.0-rc5",
256+
href: `${docUrl("tutorials/visualize-node-metrics/")}`
257+
},
258+
{
259+
img: `${baseUrl}img/ink-smart-contracts-tutorial.png`,
260+
title: <translate>ink! Smart Contracts Tutorial</translate>,
261+
text: (
262+
<translate>
263+
A comprehensive, end-to-end tutorial for building an ERC20
264+
token contract using ink!.
265+
</translate>
266+
),
267+
difficulty: "easy",
268+
length: "4",
269+
prerequisite: false,
270+
version: "2.0.0-rc4",
271+
href:
272+
"https://substrate-developer-hub.github.io/substrate-contracts-workshop/"
273+
},
274+
]}
275+
/>
276+
</Row>
360277
</Container>
361278
</div>
362279
</div>

0 commit comments

Comments
 (0)