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

Commit8ad3cef

Browse files
committed
make space at bottom for text
1 parentbf0a98b commit8ad3cef

File tree

2 files changed

+137
-1
lines changed

2 files changed

+137
-1
lines changed

‎web-app/src/containers/Tutorial/LevelPage/Level.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ const styles = {
2929
options:{
3030
padding:'0rem 1rem',
3131
},
32+
tasks:{
33+
paddingBottom:'5rem',
34+
},
3235
steps:{
3336
padding:'1rem 16px',
3437
},
@@ -79,7 +82,7 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
7982
</div>
8083
</div>
8184

82-
<div>
85+
<divstyle={styles.tasks}>
8386
<divstyle={styles.header}>Tasks</div>
8487
<divstyle={styles.steps}>
8588
{level.steps.map((step:(G.Step&{status:T.ProgressStatus})|null,index:number)=>{

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,136 @@ storiesOf('Level', module)
134134
/>
135135
)
136136
})
137+
.add('FakeBook API L1',()=>{
138+
constlevel={
139+
id:'L1',
140+
title:'Server Setup',
141+
description:'Configure a GraphQL server using Apollo Server.',
142+
content:
143+
'Apollo Server is a popular and easy to configure GraphQL server.\n[Apollo Server](https://www.apollographql.com/docs/apollo-server/ee7fbac9c0ca5b1dd6aef886bb695e63/index-diagram.svg)\nBy the end of this lesson you should have your own working server started.',
144+
setup:{
145+
commits:['6adeb95'],
146+
commands:['npm install'],
147+
},
148+
steps:[
149+
{
150+
id:'L1:S1',
151+
content:
152+
'Start by installing the apollo server dependencies. In a terminal, run:\n ```shell\nnpm install --save apollo-server graphql\n```',
153+
setup:{
154+
files:['package.json'],
155+
commits:['b904b87'],
156+
watchers:['./node_modules/{apollo-server,graphql}/package.json'],
157+
},
158+
solution:{
159+
files:['package.json'],
160+
commits:['ad87a86'],
161+
commands:['npm install'],
162+
},
163+
},
164+
{
165+
id:'L1:S2',
166+
content:
167+
'Setup your Apollo Server in `src/main.ts`. Notice that the GraphQL requires two elements: `typeDefs` & `resolvers` - more on these later.\nConfigure the server in the following way:\n```ts\nexport const server = new ApolloServer({\n typeDefs,\n resolvers,\n})\n```',
168+
setup:{
169+
files:['src/main.ts'],
170+
commits:['13d8c60'],
171+
},
172+
solution:{
173+
files:['src/main.ts'],
174+
commits:['3dd3500'],
175+
},
176+
},
177+
{
178+
id:'L1:S3',
179+
content:
180+
'Internally, Apollo is really running an [Express](https://expressjs.com/) server.\nTo start the server call `listen`.\n ```shell\nserver.listen(4000)\n```',
181+
setup:{
182+
files:['src/main.ts'],
183+
commits:['1d55cc5'],
184+
},
185+
solution:{
186+
files:['src/main.ts'],
187+
commits:['c92311f'],
188+
},
189+
},
190+
{
191+
id:'L1:S4',
192+
content:
193+
'GraphQL playground is a UI for viewing your schema & docs and testing queries.\nThe playground can be easily configured, just specify `playground: true` in the config.\n```js\nApolloServer({\n /*...*/\n playground: true,\n})\n```\nVisit http://localhost:4000/graphql to see the playground in action.',
194+
setup:{
195+
files:['src/main.ts'],
196+
commits:['50da94e'],
197+
},
198+
solution:{
199+
files:['src/main.ts'],
200+
commits:['865b805'],
201+
},
202+
},
203+
],
204+
}
205+
return(
206+
<Levellevel={level}onContinue={action('onContinue')}onLoadSolution={action('onLoadSolution')}processes={[]}/>
207+
)
208+
})
209+
.add('FakeBook API L2',()=>{
210+
constlevel={
211+
id:'L2',
212+
title:'TypeDefs & Resolvers',
213+
description:'Build endpoints for a User',
214+
content:'Something about typeDefs & resolvers',
215+
setup:{
216+
commits:['0d7543c'],
217+
commands:['npm install'],
218+
},
219+
steps:[
220+
{
221+
id:'L2:S1',
222+
content:'Setup typeDefs for viewer',
223+
setup:{
224+
files:['src/typeDefs.ts'],
225+
commits:['76890db'],
226+
},
227+
solution:{
228+
commits:['c5ee208'],
229+
},
230+
},
231+
{
232+
id:'L2:S2',
233+
content:'viewer resolvers',
234+
setup:{
235+
files:['src/resolvers.ts'],
236+
commits:['646f930'],
237+
},
238+
solution:{
239+
commits:['f382098'],
240+
},
241+
},
242+
{
243+
id:'L2:S3',
244+
content:'User friends typeDefs',
245+
setup:{
246+
files:['src/typeDefs.ts'],
247+
commits:['f00e6e6'],
248+
},
249+
solution:{
250+
commits:['04fb044'],
251+
},
252+
},
253+
{
254+
id:'L2:S3',
255+
content:'User friends resolver',
256+
setup:{
257+
files:['src/resolvers.ts'],
258+
commits:['932a621'],
259+
},
260+
solution:{
261+
commits:['bd79f75'],
262+
},
263+
},
264+
],
265+
}
266+
return(
267+
<Levellevel={level}onContinue={action('onContinue')}onLoadSolution={action('onLoadSolution')}processes={[]}/>
268+
)
269+
})

0 commit comments

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