fix: update code highlight

src/components/Lesson.vue

@@ -120,7 +120,7 @@
                 <div v-else class="f5 fw7 mt4 mb2">Inspect results</div>
                 <div v-if="output.test.logDesc" class="lh-copy">{{output.test.logDesc}}</div>
                 <pre v-highlightjs class="output-log">
-                  <code>{{output.test.log}}</code>
+                  <code v-html="output.test.log"></code>
                 </pre>
               </div>
             </div>

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' }
 ]

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"]
 }

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?

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">
   </FileLesson>
 </template>
@@ -33,14 +34,21 @@ 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 {
   components: {
     FileLesson
   },
   data: () => {
-    return { text, validate, code, modules, exercise }
+    return { text, validate, code, modules, exercise, solution  }
   }
 }
 </script>

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.

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" />
 </template>
 
@@ -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  }
   }
 }
 </script>

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">
   </FileLesson>
 </template>
@@ -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  }
   }
 }
 </script>

src/tutorials/Mutable-File-System/05.vue

@@ -4,6 +4,7 @@
             :validate="validate"
             :modules="modules"
             :exercise="exercise"
+            :solution="solution"
             lessonTitle="Create a directory">
     </FileLesson>
   </div>
@@ -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 }
   }
 }
 </script>

src/tutorials/boilerplates/boilerplate-file-upload.vue

@@ -5,6 +5,7 @@
     :validate="validate"
     :modules="modules"
     :exercise="exercise"
+    :solution="solution"
     lessonTitle="REPLACEME" />
 </template>
 
@@ -44,7 +45,7 @@ export default {
     FileLesson
   },
   data: () => {
-    return { text, validate, code, modules, exercise }
+    return { text, validate, code, modules, exercise, solution }
   }
 }
 </script>

src/tutorials/boilerplates/boilerplate-standard.vue

@@ -5,6 +5,7 @@
     :validate="validate"
     :modules="modules"
     :exercise="exercise"
+    :solution="solution"
     lessonTitle="REPLACEME" />
 </template>
 
@@ -44,7 +45,7 @@ export default {
     Lesson
   },
   data: () => {
-    return { text, validate, code, modules, exercise }
+    return { text, validate, code, modules, exercise, solution }
   }
 }
 </script>