Skip to content

Commit 059ed00

Browse files
mikealmikeal
committed
Initial commit.
1 parent 04d3303 commit 059ed00

File tree

17 files changed

+8263
-1317
lines changed

17 files changed

+8263
-1317
lines changed

‎package-lock.json‎

Lines changed: 7934 additions & 1248 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,29 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"vue": "^2.5.16"
11+
"async": "^2.6.1",
12+
"cids": "^0.5.3",
13+
"ipfs": "^0.30.1",
14+
"marked": "^0.4.0",
15+
"raw-loader": "^0.5.1",
16+
"vue": "^2.5.16",
17+
"vue-monaco-editor": "0.0.19",
18+
"vue-router": "^3.0.1"
1219
},
1320
"devDependencies": {
1421
"@vue/cli-plugin-babel": "^3.0.0-rc.5",
1522
"@vue/cli-plugin-eslint": "^3.0.0-rc.5",
1623
"@vue/cli-service": "^3.0.0-rc.5",
24+
"babel-eslint": "^8.2.6",
25+
"eslint": "^5.1.0",
26+
"eslint-config-standard": "^11.0.0",
27+
"eslint-config-standard-babel": "0.0.2",
28+
"eslint-plugin-babel": "^5.1.0",
29+
"eslint-plugin-import": "^2.13.0",
30+
"eslint-plugin-node": "^7.0.1",
31+
"eslint-plugin-promise": "^3.8.0",
32+
"eslint-plugin-standard": "^3.1.0",
33+
"regenerator-runtime": "^0.12.0",
1734
"vue-template-compiler": "^2.5.16"
1835
},
1936
"babel": {
@@ -28,7 +45,7 @@
2845
},
2946
"extends": [
3047
"plugin:vue/essential",
31-
"eslint:recommended"
48+
"standard"
3249
],
3350
"rules": {},
3451
"parserOptions": {

‎public/favicon.ico‎

-1.12 KB
Binary file not shown.

‎public/favicon.png‎

1.3 KB
Loading

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.png">
88
<title>learn-ipfs</title>
99
</head>
1010
<body>

‎src/App.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<router-view></router-view>
54
</div>
65
</template>
76

87
<script>
9-
import HelloWorld from './components/HelloWorld.vue'
10-
118
export default {
12-
name: 'app',
13-
components: {
14-
HelloWorld
15-
}
9+
name: 'app'
1610
}
1711
</script>
1812

@@ -21,7 +15,6 @@ export default {
2115
font-family: 'Avenir', Helvetica, Arial, sans-serif;
2216
-webkit-font-smoothing: antialiased;
2317
-moz-osx-font-smoothing: grayscale;
24-
text-align: center;
2518
color: #2c3e50;
2619
margin-top: 60px;
2720
}

‎src/assets/logo.png‎

-6.69 KB
Binary file not shown.

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎src/components/Home.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="home">
3+
<router-link to="/01">Lesson 1: Basics</router-link>
4+
<br>
5+
<router-link to="/02">Lesson 2: Next</router-link>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'home'
12+
}
13+
</script>
14+
15+
<style scopted>
16+
</style>

‎src/components/Lesson.vue‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<template>
2+
<div class="lesson">
3+
<div class="run">
4+
<div v-if="output.test" class="output" v-bind="output.test">
5+
<div class="output-error" v-if="output.test.error">
6+
{{output.test.error.message}}
7+
<br>
8+
{{output.test.error.stack}}
9+
</div>
10+
<div class="output-fail" v-if="output.test.fail">
11+
{{output.test.fail}}
12+
</div>
13+
<div class="output-success" v-if="output.test.success">
14+
{{output.test.success}}
15+
<button v-on:click="next">Next Lesson</button>
16+
</div>
17+
</div>
18+
<button v-on:click="run">run</button>
19+
</div>
20+
<div class="lesson-text" v-html="parsedText">
21+
</div>
22+
<div class="editor">
23+
<MonacoEditor
24+
height="600"
25+
width="100%"
26+
:editorOptions="options"
27+
class="editor"
28+
:code="code"
29+
theme="vs"
30+
language="javascript"
31+
@mounted="onMounted"
32+
@codeChange="onCodeChange"
33+
>
34+
</MonacoEditor>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<script>
40+
import Vue from 'vue'
41+
import MonacoEditor from 'vue-monaco-editor'
42+
const IPFS = require('ipfs')
43+
const marked = require('marked')
44+
45+
const _eval = async (text, ipfs) => {
46+
await new Promise(resolve => ipfs.on('ready', resolve))
47+
48+
// eslint-disable-next-line
49+
let fn = new Function('ipfs', text)
50+
let result
51+
try {
52+
result = await fn(ipfs)()
53+
} catch (e) {
54+
result = {error: e}
55+
}
56+
return result
57+
}
58+
59+
const defaultCode = `/* globals ipfs */
60+
61+
const run = async () => {
62+
// your code goes here!
63+
// example: ipfs.dag.put({hello: 'world'})
64+
}
65+
66+
return run
67+
68+
`
69+
70+
const output = {}
71+
72+
export default {
73+
components: {
74+
MonacoEditor
75+
},
76+
data: self => {
77+
return {
78+
text: self.$attrs.text,
79+
code: self.$attrs.code || defaultCode,
80+
parsedText: marked(self.$attrs.text),
81+
output,
82+
IPFS,
83+
options: {
84+
selectOnLineNumbers: false,
85+
lineDecorationsWidth: '2px'
86+
}
87+
}
88+
},
89+
methods: {
90+
run: async function () {
91+
let ipfs = this.createIPFS()
92+
let code = this.editor.getValue()
93+
let result = await _eval(code, ipfs)
94+
if (result && result.error) {
95+
Vue.set(output, 'test', result)
96+
return
97+
}
98+
let test = await this.$attrs.validate(result, ipfs)
99+
Vue.set(output, 'test', test)
100+
ipfs.stop()
101+
},
102+
createIPFS: function () {
103+
if (this.$attrs.createIPFS) {
104+
return this.$attrs.createIPFS()
105+
} else {
106+
return new IPFS({repo: Math.random().toString()})
107+
}
108+
},
109+
onMounted: function (editor) {
110+
this.editor = editor
111+
},
112+
onCodeChange: function (editor) {
113+
// console.log(editor.getValue())
114+
},
115+
next: function () {
116+
Vue.set(output, 'test', null)
117+
let current = this.$route.path.slice(1)
118+
let next = (parseInt(current) + 1).toString().padStart(2, '0')
119+
this.$router.push({path: next})
120+
}
121+
}
122+
}
123+
</script>
124+
125+
<style scoped>
126+
.lesson {
127+
display: grid;
128+
grid-gap: 2%;
129+
grid-template-columns: 39% 59%;
130+
grid-template-areas:
131+
"....... run"
132+
"lesson-text editor";
133+
background-color: #fff;
134+
color: #444;
135+
}
136+
.editor {
137+
grid-area: editor;
138+
}
139+
.lesson-text {
140+
grid-area: lesson-text;
141+
}
142+
.run {
143+
grid-area: run;
144+
}
145+
.output-error {
146+
background-color: red;
147+
}
148+
.output-fail {
149+
background-color: pink;
150+
}
151+
.output-success {
152+
background-color: greenyellow;
153+
}
154+
</style>

0 commit comments

Comments
 (0)