Skip to content

Commit a5c07fc

Browse files
7i7o7i7o
authored
Merge branch 'Developer-DAO:main' into lesson-erc20
2 parents 5f11915 + 7bd1c80 commit a5c07fc

21 files changed

+307
-19
lines changed

‎README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,3 +178,42 @@ from the creators of Next.js.
178178
Check out our
179179
[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
180180
details.
181+
182+
## How do I add/edit contributors for a lesson?
183+
184+
First make sure you add your information to `./data/contributors.ts`. Minimally
185+
you need a unique handle (a single lowercase name such as `brianfive`) which
186+
will be used to look up your information.
187+
188+
Then add a component in your `.mdx` file at the bottom like this, using various
189+
handles defined above.
190+
191+
You can add a contributor as an author, reviewer of contributor. Author(s) wrote
192+
the content, Reviewer(s) edited the content, and Contributor(s) later made
193+
updates or fixed issues.
194+
195+
```jsx
196+
import { ContributorFooter } from '../../../components/mdx/ContributorFooter'
197+
```
198+
199+
```jsx
200+
<ContributorFooter
201+
authors={['brianfive']}
202+
reviewers={['piablo', 'georgemac510']}
203+
contributors={[]}
204+
/>
205+
```
206+
207+
## How do I add a specific forum link in a lesson's header?
208+
209+
Make sure the `<LessonHeader />` component has the `discussionUrl` attribute
210+
like this:
211+
212+
```jsx
213+
<LessonHeader
214+
title="Lesson 4: Testing your TierNFT"
215+
discussionUrl="https://developerdao.peeranha.io/discussions/1372/testing-solidity-contracts"
216+
/>
217+
```
218+
219+
Without `discussionUrl` the link will default to the home page of Peeranha.

‎components/mdx/Contributor.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Box, Text, Link, HStack, Avatar, Center } from '@chakra-ui/react'
2+
import NextLink from 'next/link'
3+
import { contributors } from '@data/contributors'
4+
5+
interface ContributorProps {
6+
handle: string
7+
avatarSize?: string
8+
}
9+
10+
export function Contributor({ handle, avatarSize }: ContributorProps) {
11+
const contrib = contributors[handle]
12+
if (!contrib) {
13+
return null
14+
}
15+
16+
return (
17+
<HStack paddingX={2} columnGap={4}>
18+
<Center width={40}>
19+
{contrib.moreInfoUrl ? (
20+
<Link
21+
as={NextLink}
22+
href={contrib.moreInfoUrl}
23+
passHref
24+
isExternal
25+
textDecoration="underline"
26+
>
27+
<Avatar
28+
size={avatarSize}
29+
name={contrib.displayName}
30+
src={contrib.avatarUrl}
31+
/>
32+
</Link>
33+
) : (
34+
<Avatar
35+
size={avatarSize}
36+
name={contrib.displayName}
37+
src={contrib.avatarUrl}
38+
/>
39+
)}
40+
</Center>
41+
<Box>
42+
{contrib.moreInfoUrl ? (
43+
<Link
44+
as={NextLink}
45+
href={contrib.moreInfoUrl}
46+
passHref
47+
isExternal
48+
textDecoration="underline"
49+
>
50+
<Text fontSize={18}>{contrib.displayName}</Text>
51+
</Link>
52+
) : (
53+
<Text>{contrib.displayName}</Text>
54+
)}
55+
56+
{contrib.about && (
57+
<Box mt={2} maxWidth="xl">
58+
<Text fontSize={14}>{contrib.about}</Text>
59+
</Box>
60+
)}
61+
</Box>
62+
</HStack>
63+
)
64+
}

‎components/mdx/ContributorFooter.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Box, Text, VStack } from '@chakra-ui/react'
2+
import { Contributor } from '@components/mdx/Contributor'
3+
4+
interface ContributorFooterProps {
5+
authors?: string[]
6+
reviewers?: string[]
7+
contributors?: string[]
8+
}
9+
10+
export function ContributorFooter({
11+
authors,
12+
reviewers,
13+
contributors,
14+
}: ContributorFooterProps) {
15+
return (
16+
<Box
17+
marginY={12}
18+
paddingY={4}
19+
paddingBottom={8}
20+
borderTopWidth="thin"
21+
borderColor="gray"
22+
>
23+
{authors && Array.isArray(authors) && authors.length > 0 && (
24+
<Box>
25+
<Text fontSize={26} marginTop={8} marginBottom={4}>
26+
{authors.length > 1 ? 'Authors' : 'Author'}
27+
</Text>
28+
<VStack spacing={4} alignItems="left">
29+
{authors.map((contrib) => {
30+
return <Contributor handle={contrib} avatarSize="2xl" />
31+
})}
32+
</VStack>
33+
</Box>
34+
)}
35+
36+
{reviewers && Array.isArray(reviewers) && reviewers.length > 0 && (
37+
<Box>
38+
<Text fontSize={20} marginTop={8} marginBottom={4}>
39+
{reviewers.length > 1 ? 'Reviewers' : 'Reviewer'}
40+
</Text>
41+
<VStack spacing={4} alignItems="left">
42+
{reviewers.map((contrib) => {
43+
return <Contributor handle={contrib} avatarSize="lg" />
44+
})}
45+
</VStack>
46+
</Box>
47+
)}
48+
49+
{contributors &&
50+
Array.isArray(contributors) &&
51+
contributors.length > 0 && (
52+
<Box>
53+
<Text fontSize={20} marginTop={8} marginBottom={4}>
54+
{contributors.length > 1
55+
? 'Additional Contributors'
56+
: 'Additional Contributor'}
57+
</Text>
58+
<VStack spacing={4} alignItems="left">
59+
{contributors.map((contrib) => {
60+
return <Contributor handle={contrib} avatarSize="lg" />
61+
})}
62+
</VStack>
63+
</Box>
64+
)}
65+
</Box>
66+
)
67+
}

‎components/mdx/LessonHeader.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Box, Text, Link, HStack } from '@chakra-ui/react'
2+
import NextLink from 'next/link'
3+
import { QuestionIcon } from '@chakra-ui/icons'
4+
5+
interface LessonHeaderProps {
6+
title: string
7+
discussionUrl?: string
8+
}
9+
10+
const DEFAULT_DISCUSSION_URL = 'https://developerdao.peeranha.io/'
11+
12+
export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
13+
let forumLink = discussionUrl || DEFAULT_DISCUSSION_URL
14+
15+
return (
16+
<Box>
17+
<Box>
18+
<Text
19+
mt="1.5em"
20+
fontWeight="bold"
21+
fontSize="1.875rem"
22+
letterSpacing={-0.025}
23+
color="yellow.300"
24+
>
25+
{title}
26+
</Text>
27+
</Box>
28+
{forumLink && (
29+
<HStack marginY={6} columnGap={2} maxWidth="xl">
30+
<Box>
31+
<QuestionIcon w={8} h={8} />
32+
</Box>
33+
<Box>
34+
If you get stuck or have questions please visit our{' '}
35+
<Link
36+
as={NextLink}
37+
href={forumLink}
38+
passHref
39+
isExternal
40+
textDecoration="underline"
41+
>
42+
forum
43+
</Link>
44+
.
45+
</Box>
46+
</HStack>
47+
)}
48+
</Box>
49+
)
50+
}

‎data/contributors.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export interface ContributorDetails {
2+
displayName: string
3+
moreInfoUrl?: string
4+
avatarUrl?: string
5+
about?: string
6+
}
7+
8+
export interface ContributorLookup {
9+
[key: string]: ContributorDetails
10+
}
11+
12+
/**
13+
* This is a mapping of handles to contributor details. The handle key will be used
14+
* in the <ContributorFooter /> component to look up the details.
15+
*/
16+
export const contributors: ContributorLookup = {
17+
brianfive: {
18+
displayName: 'Brian Gershon',
19+
moreInfoUrl: 'https://brianfive.xyz',
20+
avatarUrl: 'https://brianfive.xyz/profile.png',
21+
about:
22+
'Brian has been a member of the DeveloperDAO since November 2021, and enjoys building Web3 user experiences and smart contracts. Also active with Next.js, React and Serverless.',
23+
},
24+
piablo: {
25+
displayName: 'piablo',
26+
},
27+
georgemac510: {
28+
displayName: 'georgemac510',
29+
},
30+
}

‎pages/lessons/fundamentals/cli_lesson.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ icons: []
55
authors: ['piablo', 'georgemac510']
66
---
77

8-
## Navigating in a CLI for beginners
8+
import { LessonHeader } from '../../../components/mdx/LessonHeader'
9+
10+
<LessonHeader title="Navigating in a CLI for beginners" />
911

1012
A CLI is an invaluable tool for development. It's actually quite straightforward to use, but just a bit tricky to get used to initially. You can't see everything readily, like you would in your computer's graphical user interface, but we'll teach you how to **navigate** the pathways, so you can get around easily. CLI stands for **C**ommand **L**ine **I**nterface. Generally speaking, Linux users call a CLI a terminal, Mac users call it a console, Windows users a shell. All these names have some technical differences, and we are going to stick with CLI for now. Happy travels!
1113

‎pages/lessons/fundamentals/code-editors.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ icons: []
66
author: 'georgemac510'
77
---
88

9-
# Code Editors (IDEs)
9+
import { LessonHeader } from '../../../components/mdx/LessonHeader'
10+
11+
<LessonHeader title="Code Editors (IDEs)" />
1012

1113
## What is an IDE?
1214

‎pages/lessons/fundamentals/connect-with-rpc.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ icons: []
55
author: 'georgemac510'
66
---
77

8-
# Connecting to a Network via RPC
8+
import { LessonHeader } from '../../../components/mdx/LessonHeader'
9+
10+
<LessonHeader title="Connecting to a Network via RPC" />
911

1012
**Remote Procedure Call (RPC)** could be classified as a type of API
1113
(application programming interface) that allows for developers to run code that

‎pages/lessons/fundamentals/decentralized-storage.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ icons: []
55
author: ['georgemac510', 'pbillingsby']
66
---
77

8-
# Decentralized Storage with Arweave and IPFS/Filecoin
8+
import { LessonHeader } from '../../../components/mdx/LessonHeader'
9+
10+
<LessonHeader title="Decentralized Storage with Arweave and IPFS/Filecoin" />
911

1012
Among the many use cases for these great technologies, the most common are for
1113
storage of image, audio and video NFTs as well as deploying web dApps. Here are two protocols that specialize in decentralized data storage.

‎pages/lessons/fundamentals/install-npm.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ icons: []
55
author: 'georgemac510'
66
---
77

8-
# How to install node.js and npm
8+
import { LessonHeader } from '../../../components/mdx/LessonHeader'
9+
10+
<LessonHeader title="How to install node.js and npm" />
911

1012
![NPM Overload Joke](/assets/lessons/install_npm/npm-jokes-1.png)
1113

0 commit comments

Comments
 (0)