diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue index 59833ae1b..18749ffd7 100644 --- a/src/components/Lesson.vue +++ b/src/components/Lesson.vue @@ -120,7 +120,7 @@
-diff --git a/src/main.js b/src/main.js index d3743acd3..3b7468996 100644 --- a/src/main.js +++ b/src/main.js @@ -30,11 +30,11 @@ import LessonDataStructures02 from './tutorials/Data-Structures/02.vue' import LessonDataStructures03 from './tutorials/Data-Structures/03.vue' import LessonDataStructures04 from './tutorials/Data-Structures/04.vue' import LessonDataStructures05 from './tutorials/Data-Structures/05.vue' -// import MutableFileSystem01 from './tutorials/Mutable-File-System/01.vue' -// import MutableFileSystem02 from './tutorials/Mutable-File-System/02.vue' -// import MutableFileSystem03 from './tutorials/Mutable-File-System/03.vue' -// import MutableFileSystem04 from './tutorials/Mutable-File-System/04.vue' -// import MutableFileSystem05 from './tutorials/Mutable-File-System/05.vue' +import MutableFileSystem01 from './tutorials/Mutable-File-System/01.vue' +import MutableFileSystem02 from './tutorials/Mutable-File-System/02.vue' +import MutableFileSystem03 from './tutorials/Mutable-File-System/03.vue' +import MutableFileSystem04 from './tutorials/Mutable-File-System/04.vue' +import MutableFileSystem05 from './tutorials/Mutable-File-System/05.vue' Vue .use(VueRouter) @@ -70,12 +70,12 @@ const routes = [ { path: '/blog/06', component: LessonBlog06 }, { path: '/blog/07', component: LessonBlog07 }, // Lessons - MFS - // { path: '/mutable-file-system', component: Landing, props: { tutorialId: 'mutableFileSystem' } }, - // { path: '/mutable-file-system/01', component: MutableFileSystem01 }, - // { path: '/mutable-file-system/02', component: MutableFileSystem02 }, - // { path: '/mutable-file-system/03', component: MutableFileSystem03 }, - // { path: '/mutable-file-system/04', component: MutableFileSystem04 }, - // { path: '/mutable-file-system/05', component: MutableFileSystem05 }, + { path: '/mutable-file-system', component: Landing, props: { tutorialId: 'mutableFileSystem' } }, + { path: '/mutable-file-system/01', component: MutableFileSystem01 }, + { path: '/mutable-file-system/02', component: MutableFileSystem02 }, + { path: '/mutable-file-system/03', component: MutableFileSystem03 }, + { path: '/mutable-file-system/04', component: MutableFileSystem04 }, + { path: '/mutable-file-system/05', component: MutableFileSystem05 }, // 404 { path: '*', name: '404' } ] diff --git a/src/static/courses.json b/src/static/courses.json index 9ec762ba8..7cc3e74d1 100644 --- a/src/static/courses.json +++ b/src/static/courses.json @@ -1,4 +1,4 @@ { - "all": ["dataStructures", "basics", "blog"], - "featured": ["dataStructures", "basics", "blog"] + "all": ["mutableFileSystem", "dataStructures", "basics", "blog"], + "featured": ["mutableFileSystem", "dataStructures", "basics", "blog"] } diff --git a/src/tutorials/Mutable-File-System/02-exercise.md b/src/tutorials/Mutable-File-System/02-exercise.md index 52643185d..3367c1b01 100644 --- a/src/tutorials/Mutable-File-System/02-exercise.md +++ b/src/tutorials/Mutable-File-System/02-exercise.md @@ -1 +1 @@ -First, upload one or more files by dropping it below or clicking to make a selection from your file explorer. Next, in the code editor, remove the comment markers that precede `return files.length` within the `run` function, which will make the function calculate how many files have been uploaded (the "length" of an array is the number of items it contains). Open your inspector and select `Console` before you hit the "Submit" button. What do you see? +First, upload one or more files by dropping it below or clicking to make a selection from your file explorer. Next, in the code editor, remove the comment markers that precede `return files.length` within the `run` function, which will make the function calculate how many files have been uploaded. (The "length" of an array in JavaScript is the number of items it contains.) Open your inspector and select `Console` before you hit the "Submit" button. What do you see? diff --git a/src/tutorials/Mutable-File-System/02.vue b/src/tutorials/Mutable-File-System/02.vue index 8b823d446..9d2503434 100644 --- a/src/tutorials/Mutable-File-System/02.vue +++ b/src/tutorials/Mutable-File-System/02.vue @@ -5,6 +5,7 @@ :validate="validate" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="Working with files in ProtoSchool"> @@ -33,6 +34,13 @@ const code = `const run = async (files) => { return run ` +const solution = `const run = async (files) => { + console.log(files) + return files.length +} +return run +` + const modules = { cids: require('cids') } export default { @@ -40,7 +48,7 @@ export default { FileLesson }, data: () => { - return { text, validate, code, modules, exercise } + return { text, validate, code, modules, exercise, solution } } } diff --git a/src/tutorials/Mutable-File-System/03-exercise.md b/src/tutorials/Mutable-File-System/03-exercise.md index 4a04690d6..f519f1037 100644 --- a/src/tutorials/Mutable-File-System/03-exercise.md +++ b/src/tutorials/Mutable-File-System/03-exercise.md @@ -1,3 +1,3 @@ Let's add some files to IPFS using MFS. Since `files` is an array representing the files currently available to us in the browser, we'll need to loop through the array and use `files.write()` to add each file we find there to IPFS, one at a time. (Only have a single file uploaded? No problem!) -Put your files in the root directory (`/`) and be sure to add the name of each file to the path when you add it (**hint:** the file object in the browser stores the filename as `file.name`). Be sure to set up your options so that a new file is created when one isn't found at the given path. +Put your files in the root directory (`/`) and be sure to add the name of each file to the path when you add it. (**Hint:** The file object in the browser stores the filename as `file.name`). Be sure to set up your options so that a new file is created when one isn't found at the given path. diff --git a/src/tutorials/Mutable-File-System/03.vue b/src/tutorials/Mutable-File-System/03.vue index de6e09850..6518dbc6b 100644 --- a/src/tutorials/Mutable-File-System/03.vue +++ b/src/tutorials/Mutable-File-System/03.vue @@ -6,6 +6,7 @@ :overrideErrors="true" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="Add a new file to MFS" /> @@ -33,8 +34,8 @@ const validate = async (result, ipfs) => { if (itemsMatch && itemsAreFiles) { return { - success: 'Success, you made it!', - logDesc: "This is the data that is now in your root directory in IPFS.", + success: 'Success! You did it!', + logDesc: "This is the data that is now in your root directory in IPFS:", log: log } } else if (uploadedFiles = false) { @@ -45,10 +46,10 @@ const validate = async (result, ipfs) => { return { fail: 'Uh oh. It looks like you created a folder instead of a file. Did you forget to include a filename in your path?' } } else if (result && result.error.message === 'file does not exist') { // Forgot the `{ create: true }` option - return { fail: 'The file doesn\'t exist, so you need to create it. Maybe you forgot and option...' } + return { fail: 'The file doesn\'t exist yet, so you need to create it. Did you forget an option?' } } - // Output the default error if we haven't catched any + // Output the default error if we haven't caught any return { error: result.error } } @@ -60,7 +61,7 @@ const code = `const run = async (files) => { return run ` -const _solution = `const run = async (files) => { +const solution = `const run = async (files) => { for (let file of files) { await ipfs.files.write('/' + file.name, file, { create: true }) } @@ -75,7 +76,7 @@ export default { FileLesson }, data: () => { - return { text, validate, code, modules, exercise } + return { text, validate, code, modules, exercise, solution } } } diff --git a/src/tutorials/Mutable-File-System/04.vue b/src/tutorials/Mutable-File-System/04.vue index 993e78854..e017ffdd3 100644 --- a/src/tutorials/Mutable-File-System/04.vue +++ b/src/tutorials/Mutable-File-System/04.vue @@ -5,6 +5,7 @@ :validate="validate" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="View the contents of a directory"> @@ -46,13 +47,13 @@ const validate = async (result, ipfs) => { } else if (result[0].hash.length === 0) { return { fail: 'Oops! Looks like you forgot to use the { long: true } option!', - logDesc: 'This is the data returned by the `ls` method.', + logDesc: 'When you forget to use the `{ long: true }` option, the `ls` method only returns filenames, not file types, sizes, or hashes (CIDs). Take a look at what happens without that option below, then try again.', log: result } } else if (directoryContentsMatch) { return { - success: 'Success, you made it!', - logDesc: 'This is the data returned by the `ls` method.', + success: 'Success! You did it!', + logDesc: 'Take a look at the complete data returned by the `ls` method:', log: result } } else { @@ -70,7 +71,7 @@ return run ` // '/' in the solution code below is optional -const _solution = `const run = async (files) => { +const solution = `const run = async (files) => { // this code adds your uploaded files to IPFS await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true }))) let directoryContents = await ipfs.files.ls('/', { long: true }) @@ -86,7 +87,7 @@ export default { FileLesson }, data: () => { - return { text, validate, code, modules, exercise } + return { text, validate, code, modules, exercise, solution } } } diff --git a/src/tutorials/Mutable-File-System/05.vue b/src/tutorials/Mutable-File-System/05.vue index e715f6ff4..23fc4cea7 100644 --- a/src/tutorials/Mutable-File-System/05.vue +++ b/src/tutorials/Mutable-File-System/05.vue @@ -4,6 +4,7 @@ :validate="validate" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="Create a directory"> @@ -64,7 +65,7 @@ return run ` // '/' in the solution code below is optional -const _solution = `const run = async (files) => { +const solution = `const run = async (files) => { // this code adds your uploaded files to your root directory in IPFS await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, {create: true}))) await ipfs.files.mkdir('/some/stuff', { parents: true }) @@ -81,9 +82,7 @@ export default { FileLesson }, data: () => { - return { - text, validate, code, modules, exercise - } + return { text, validate, code, modules, exercise, solution } } } diff --git a/src/tutorials/boilerplates/boilerplate-file-upload.vue b/src/tutorials/boilerplates/boilerplate-file-upload.vue index 8b1cef8cb..0b7871186 100644 --- a/src/tutorials/boilerplates/boilerplate-file-upload.vue +++ b/src/tutorials/boilerplates/boilerplate-file-upload.vue @@ -5,6 +5,7 @@ :validate="validate" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="REPLACEME" /> @@ -44,7 +45,7 @@ export default { FileLesson }, data: () => { - return { text, validate, code, modules, exercise } + return { text, validate, code, modules, exercise, solution } } } diff --git a/src/tutorials/boilerplates/boilerplate-standard.vue b/src/tutorials/boilerplates/boilerplate-standard.vue index 0d07f785b..f8e744bdf 100644 --- a/src/tutorials/boilerplates/boilerplate-standard.vue +++ b/src/tutorials/boilerplates/boilerplate-standard.vue @@ -5,6 +5,7 @@ :validate="validate" :modules="modules" :exercise="exercise" + :solution="solution" lessonTitle="REPLACEME" /> @@ -44,7 +45,7 @@ export default { Lesson }, data: () => { - return { text, validate, code, modules, exercise } + return { text, validate, code, modules, exercise, solution } } }{{output.test.log}}
+