Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb59d9e5

Browse files
committed
about page
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent437eebc commitb59d9e5

File tree

5 files changed

+100
-6
lines changed

5 files changed

+100
-6
lines changed

‎web-app/src/containers/Tutorial/components/SideMenu.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const styles = {
2323
interfaceProps{
2424
visible:boolean
2525
toggleVisible(visible:boolean):void
26-
page:'level'|'settings'|'review'
27-
setPage(page:'level'|'settings'|'review'):void
26+
page:'about'|'level'|'review'|'settings'
27+
setPage(page:'about'|'level'|'review'|'settings'):void
2828
}
2929

3030
constSideMenu=(props:Props)=>{
@@ -65,8 +65,20 @@ const SideMenu = (props: Props) => {
6565
<Icontype="list"size="small"color="#EBEBEB"/>
6666
<spanstyle={styles.itemText}>Review</span>
6767
</Item>
68-
{/*<Divider key="divider" />
68+
<Dividerkey="divider"/>
6969
<Item
70+
key="about"
71+
disabled={props.page==='about'}
72+
style={props.page==='about' ?styles.active :{}}
73+
onClick={()=>{
74+
onMenuClose()
75+
props.setPage('about')
76+
}}
77+
>
78+
<Icontype="prompt"size="xs"color="#EBEBEB"/>
79+
<spanstyle={styles.itemText}>About</span>
80+
</Item>
81+
{/* <Item
7082
key="settings"
7183
disabled={props.page === 'settings'}
7284
style={props.page === 'settings' ? styles.active : {}}
@@ -77,7 +89,8 @@ const SideMenu = (props: Props) => {
7789
>
7890
<Icon type="set" size="small" color="#EBEBEB" />
7991
<span style={styles.itemText}>Settings</span>
80-
</Item> */}
92+
</Item>{' '}
93+
*/}
8194
</Menu>
8295
</Drawer>
8396
)
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import*asReactfrom'react'
2+
importMarkdownfrom'../../../components/Markdown'
3+
4+
conststyles={
5+
container:{
6+
display:'flex'as'flex',
7+
flexDirection:'column'as'column',
8+
},
9+
header:{
10+
display:'flex'as'flex',
11+
alignItems:'center',
12+
justifyContent:'space-between',
13+
height:'2rem',
14+
backgroundColor:'#EBEBEB',
15+
fontSize:'1rem',
16+
lineHeight:'1rem',
17+
padding:'10px 0.4rem',
18+
},
19+
content:{
20+
padding:'0.5rem',
21+
},
22+
}
23+
24+
interfaceProps{}
25+
26+
constAboutPage=(props:Props)=>{
27+
return(
28+
<divcss={styles.container}>
29+
<divcss={styles.header}>
30+
<div>About CodeRoad</div>
31+
</div>
32+
<divcss={styles.content}>
33+
<Markdown>
34+
{`
35+
CodeRoad is an open source VSCode extension that allows you to **create** and **play** interactive coding tutorials inside VSCode.
36+
37+
Learn more or contribute at [https://github.com/coderoad/coderoad-vscode](https://github.com/coderoad/coderoad-vscode).
38+
39+
##### Why CodeRoad?
40+
41+
Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.
42+
43+
For learners, there are a number of advantages to running tutorials inside VSCode:
44+
45+
a. Learn in a real world coding environment
46+
b. Get rapid feedback on save and helpful error messages
47+
c. Users own the code, and can build a Git timeline and deploy a portfolio
48+
49+
##### Subscribe
50+
51+
Join our [mailing list](https://tiny.cc/coderoad) to hear about new tutorials & features.
52+
53+
##### Contact
54+
55+
We'd love to hear your feedback.
56+
57+
For bugs/feature requests, reach out on GitHub.
58+
59+
Otherwise, email us at [coderoadapp@gmail.com](mailto:coderoadapp@gmail.com).
60+
61+
`}
62+
</Markdown>
63+
</div>
64+
</div>
65+
)
66+
}
67+
68+
exportdefaultAboutPage

‎web-app/src/containers/Tutorial/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as selectors from '../../services/selectors'
44
importSideMenufrom'./components/SideMenu'
55
importLevelfrom'./components/Level'
66
importIconfrom'../../components/Icon'
7+
importAboutPagefrom'./containers/About'
78
importReviewPagefrom'./containers/Review'
89
importButtonfrom'../../components/Button'
910
importProcessMessagesfrom'../../components/ProcessMessages'
@@ -103,7 +104,7 @@ const TutorialPage = (props: PageProps) => {
103104

104105
const[menuVisible,setMenuVisible]=React.useState(false)
105106

106-
const[page,setPage]=React.useState<'level'|'settings'|'review'>('level')
107+
const[page,setPage]=React.useState<'about'|'level'|'review'|'settings'>('level')
107108

108109
// format level code with status for easy rendering
109110
const{ level, levels, levelIndex, stepIndex}=formatLevels({
@@ -125,6 +126,8 @@ const TutorialPage = (props: PageProps) => {
125126
<spancss={styles.title}>{tutorial.summary.title}</span>
126127
</div>
127128

129+
{page==='about'&&<AboutPage/>}
130+
128131
{page==='level'&&(
129132
<ScrollContentitem={level.id}>
130133
<Levellevel={level}/>

‎web-app/stories/About.stories.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import*asReactfrom'react'
2+
import{storiesOf}from'@storybook/react'
3+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
4+
importAboutPagefrom'../src/containers/Tutorial/containers/About'
5+
6+
storiesOf('About',module)
7+
.addDecorator(SideBarDecorator)
8+
.add('About Page',()=>{
9+
return<AboutPage/>
10+
})

‎web-app/stories/Overview.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ storiesOf('Overview', module)
1616
appVersions:{
1717
vscode:'0.1.0',
1818
},
19-
testRunner:{command:''},
19+
testRunner:{command:'',args:{tap:''}},
2020
repo:{uri:'',branch:'master'},
2121
},
2222
summary:{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp