feat: add MFS tutorial

README.md

@@ -94,7 +94,7 @@ Select the appropriate boilerplate Vue file for your lesson from the `tutorials/
 - `boilerplate-file-upload.vue` for a lesson with a coding exercise that requires a file upload
 - `boilerplate-no-exercise.vue` for a text-only lesson
 
-Copy that boilerplate into your tutorial folder and rename it to the 2-digit number of the lesson.
+Copy that boilerplate into your tutorial directory and rename it to the 2-digit number of the lesson.
 
 Example (while in `src/tutorials`):
 
@@ -254,7 +254,7 @@ you need to override, as in this example:
 ```js
 } else if (result.error && result.error.message === 'No child name passed to addLink') {
   // Forgot the file name and just used a directory as the path
-  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?' }
+  return { fail: 'Uh oh. It looks like you created a directory instead of a file. Did you forget to include a filename in your path?' }
 }
 ```
 Be sure to adapt your test case so that it works within the context of your other conditionals to meet your validation needs. What is required is that you return an object with the `fail` key and a string as its value; that string is what will be shown to the user.

src/components/File-Lesson.vue

@@ -25,7 +25,7 @@ export default {
       for (let f of Array.from(event.dataTransfer.items)) {
         let isFile = f.getAsEntry ? f.getAsEntry().isFile : (f.webkitGetAsEntry ? f.webkitGetAsEntry().isFile : true)
         if (!isFile) {
-          return alert("Folder upload is not supported. Please select a file or multiple files.")
+          return alert('Directory upload is not supported. Please select one or more files.')
         }
       }
       this.onFiles(files)
@@ -35,7 +35,7 @@ export default {
       event.preventDefault()
       event.stopPropagation()
       let elem = document.createElement('input')
-      elem.setAttribute("type", "file")
+      elem.setAttribute('type', 'file')
       elem.setAttribute('multiple', true)
       elem.onchange = () => {
         this.onFiles(Array.from(elem.files))

src/components/Lesson.vue

@@ -62,14 +62,14 @@
                   <label for="add-files" class="flex items-center h4 pointer">
                     <svg viewBox="0 0 100 100" class="fill-aqua" height="60px" alt="Add"><path d="M71.13 28.87a29.88 29.88 0 1 0 0 42.26 29.86 29.86 0 0 0 0-42.26zm-18.39 37.6h-5.48V52.74H33.53v-5.48h13.73V33.53h5.48v13.73h13.73v5.48H52.74z"></path></svg>
                     <div class="f5 charcoal">
-                      <p><strong>Drop one or more files here or click to select.</strong> Folder upload is not supported, but you may select multiple files using Ctrl+Click or Command+Click.</p>
+                      <p><strong>Drop one or more files here or click to select.</strong> Directory upload is not supported, but you may select multiple files using Ctrl+Click or Command+Click.</p>
                     </div>
                   </label>
                 </div>
               </div>
               <div v-else class="mt2">
                 <span v-on:click="resetFileUpload" class="textLink fr pb1">Start Over</span>
-                <div class="mb2 pl3 pa2 w-100 br3 h4 shadow-4 bg-white color-navy flex items-center">
+                <div class="mb2 pl3 pa2 w-100 br3 shadow-4 bg-white color-navy flex items-center">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="fill-aqua" height="60px"><path d="M55.94 19.17H30a4 4 0 0 0-4 4v53.65a4 4 0 0 0 4 4h40.1a4 4 0 0 0 4-4V38.06zm5.28 21.08c-4.33 0-7.47-2.85-7.47-6.77V21l18.13 19.25z"/></svg>
                   <ul class="list pl0">
                     <li v-for="(file, idx) in uploadedFiles" :key="`file-${idx}`">{{file.name}}</li>
@@ -151,8 +151,11 @@
               <Button v-bind:click="next" class="bg-aqua white" data-cy="next-lesson">Next</Button>
             </div>
             <div v-else>
-              <span v-if="isFileLesson && !uploadedFiles" class="disabledButtonWrapper">
-                <Button v-bind:click="next" class="bg-aqua white" disabled>Submit</Button>
+              <span v-if="(isFileLesson && !uploadedFiles) || isSubmitting" class="disabledButtonWrapper">
+                <Button v-bind:click="next" class="bg-aqua white" disabled>
+                  <span v-if="isSubmitting" class="loader"></span>
+                  <span v-else>Submit</span>
+                </Button>
               </span>
               <Button v-else v-bind:click="run" class="bg-aqua white" data-cy="submit-answer">Submit</Button>
               <div v-if="isFileLesson && !uploadedFiles" class="red lh-copy pt2 o-0">
@@ -254,6 +257,7 @@ export default {
       cachedCode: !!localStorage['cached' + self.$route.path],
       code: localStorage[self.cacheKey] || self.$attrs.code || self.defaultCode,
       solution: self.$attrs.solution,
+      isSubmitting: false,
       viewSolution: false,
       overrideErrors: self.$attrs.overrideErrors,
       isFileLesson: self.isFileLesson,
@@ -265,6 +269,7 @@ export default {
       lessonKey: 'passed' + self.$route.path,
       lessonPassed: !!localStorage['passed' + self.$route.path],
       lessonTitle: self.$attrs.lessonTitle,
+      createTestFile: self.$attrs.createTestFile,
       output: self.output,
       expandExercise: false,
       dragging: false,
@@ -337,14 +342,17 @@ export default {
   },
   methods: {
     run: async function (...args) {
+      this.isSubmitting = true
       if (oldIPFS) {
         oldIPFS.stop()
         oldIPFS = null
       }
       let output = this.output
       let ipfs = await this.createIPFS()
+      if (this.createTestFile) {
+        await this.createFile(ipfs)
+      }
       let code = this.editor.getValue()
-
       let modules = {}
       if (this.$attrs.modules) modules = this.$attrs.modules
       if (this.isFileLesson) args.unshift(this.uploadedFiles)
@@ -353,6 +361,7 @@ export default {
       if (!this.$attrs.overrideErrors && result && result.error) {
         Vue.set(output, 'test', result)
         this.lessonPassed = !!localStorage[this.lessonKey]
+        this.isSubmitting = false
         return
       }
       // Run the `validate` function in the lesson
@@ -368,17 +377,27 @@ export default {
         localStorage[this.lessonKey] = 'passed'
       }
       this.lessonPassed = !!localStorage[this.lessonKey]
+      this.isSubmitting = false
     },
     createIPFS: function () {
       if (this.$attrs.createIPFS) {
         return this.$attrs.createIPFS()
       } else {
         let ipfs = this.IPFSPromise.then(IPFS => {
-          return new IPFS({repo: Math.random().toString()})
+          this.ipfsConstructor = IPFS
+          return new IPFS({ repo: Math.random().toString() })
         })
         return ipfs
       }
     },
+    createFile: function (ipfs) {
+      new Promise((resolve, reject) => {
+        ipfs.on('ready', async () => {
+          await ipfs.add(this.ipfsConstructor.Buffer.from('You did it!'))
+          resolve()
+        })
+      })
+    },
     resetCode: function () {
       // TRACK? User chose to reset code
       this.code = this.$attrs.code || defaultCode
@@ -398,7 +417,6 @@ export default {
     resetFileUpload: function () {
       this.uploadedFiles = false
       this.dragging = false
-      console.log({uploadedFiles: this.uploadedFiles})
     },
     clearPassed: function () {
       delete localStorage[this.lessonKey]
@@ -566,6 +584,49 @@ div#drop-area * {
   border-width:  5px 5px 5px;
   margin-top: 5px;
 }
+
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+  animation-fill-mode: both;
+  animation: loadAnim 1.5s infinite ease-in-out;
+}
+
+.loader {
+  display: block;
+  margin: 7px auto;
+  color: #ffffff;
+  font-size: 5px;
+  top: -10px;
+  position: relative;
+  animation-delay: -0.15s;
+  pointer-events: none;
+}
+
+.loader:before {
+  content: '';
+  position: absolute;
+  left: -3.5em;
+  animation-delay: -0.30s;
+}
+
+.loader:after {
+  content: '';
+  position: absolute;
+  left: 3.5em;
+}
+
+@keyframes loadAnim {
+  0%, 80%, 100% {
+    box-shadow: 0 2em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2em 0 0;
+  }
+}
 </style>
 
 <style> /* We need this unscoped to override the hljs styles. */

src/components/LessonLink.vue

@@ -1,8 +1,8 @@
 <template>
   <router-link :to="to" class="link db pa3 bb b--white green hover-bg-washed-yellow">
     <div class="flex">
-      <div class="green ttu f6" style="min-width: 72px">Lesson {{index}}</div>
-      <div class="pr2">
+      <div class="tc green ttu f6" style="min-width: 92px">Lesson {{index}}</div>
+      <div class="pr3">
         <img v-if="lessonPassed('passed' + to)" src="../static/images/complete.svg" alt="complete" style="height: 1rem;"/>
         <img v-else-if="lessonCached('cached' + to)" src="../static/images/in-progress.svg" alt="in progress" style="height: 1rem;"/>
         <img v-else src="../static/images/not-started.svg" alt="not yet started" style="height: 0.9rem;"/>

src/main.js

@@ -30,11 +30,17 @@ 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'
+import MutableFileSystem06 from './tutorials/Mutable-File-System/06.vue'
+import MutableFileSystem07 from './tutorials/Mutable-File-System/07.vue'
+import MutableFileSystem08 from './tutorials/Mutable-File-System/08.vue'
+import MutableFileSystem09 from './tutorials/Mutable-File-System/09.vue'
+import MutableFileSystem10 from './tutorials/Mutable-File-System/10.vue'
+import MutableFileSystem11 from './tutorials/Mutable-File-System/11.vue'
 
 Vue
   .use(VueRouter)
@@ -70,12 +76,18 @@ 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 },
+  { path: '/mutable-file-system/06', component: MutableFileSystem06 },
+  { path: '/mutable-file-system/07', component: MutableFileSystem07 },
+  { path: '/mutable-file-system/08', component: MutableFileSystem08 },
+  { path: '/mutable-file-system/09', component: MutableFileSystem09 },
+  { path: '/mutable-file-system/10', component: MutableFileSystem10 },
+  { path: '/mutable-file-system/11', component: MutableFileSystem11 },
   // 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/static/tutorials.json

@@ -37,14 +37,20 @@
 	},
 	"mutableFileSystem": {
 		"project": "IPFS",
-		"title": "IPFS as a Mutable File System",
-		"description": "Store, edit, and share files with with the Mutable File System (MFS).",
+		"title": "IPFS: Mutable File System",
+		"description": "The Mutable File System (MFS) lets you work with files and directories as if you were using a traditional name-based file system.",
 		"lessons": [
-			{ "to": "/mutable-file-system/01", "name": "Working with your IPFS node" },
-			{ "to": "/mutable-file-system/02", "name": "Working with files in ProtoSchool" },
-			{ "to": "/mutable-file-system/03", "name": "Add a new file to MFS" },
-			{ "to": "/mutable-file-system/04", "name": "View files in your directory" },
-			{ "to": "/mutable-file-system/05", "name": "Create a directory" }
+			{ "to": "/mutable-file-system/01", "name": "Introducing IPFS" },
+			{ "to": "/mutable-file-system/02", "name": "Check the status of a directory" },
+			{ "to": "/mutable-file-system/03", "name": "Working with files in ProtoSchool" },
+			{ "to": "/mutable-file-system/04", "name": "Add a file to MFS" },
+			{ "to": "/mutable-file-system/05", "name": "View the contents of a directory" },
+			{ "to": "/mutable-file-system/06", "name": "See how CIDs change as data changes" },
+			{ "to": "/mutable-file-system/07", "name": "Create a directory" },
+			{ "to": "/mutable-file-system/08", "name": "Move a file or directory" },
+			{ "to": "/mutable-file-system/09", "name": "Copy a file or directory" },
+			{ "to": "/mutable-file-system/10", "name": "Read the contents of a file" },
+			{ "to": "/mutable-file-system/11", "name": "Remove a file or directory" }
 		]
 	}
 }

src/tutorials/Data-Structures/04.md

@@ -40,8 +40,8 @@ Every `CID` is an identifier that contains the `codec` to interpret the data and
 
 `CID`s allow us to build data structures that link to other data structures
 in completely different formats. Imagine a tree of JSON objects that link
-to BSON objects that also link to git commits. (Or imagine a file folder containing
-puppy images <em>and</em> kitty videos, with a subfolder containing articles on
+to BSON objects that also link to git commits. (Or imagine a directory containing
+puppy images <em>and</em> kitty videos, with a subdirectory containing articles on
 giraffes. The possiblities are endless!) All the way down this tree we
 have cryptographic hashes that allow us to distribute and link the data.
 

src/tutorials/Data-Structures/05.md

@@ -37,8 +37,8 @@ that we can think of as a link, so a Merkle tree is a collection of linked nodes
 
 As previously discussed, all content addresses are unique to the data they represent. In the graph above, `node E` contains a reference to the hash for `node F` and `node G`. This means that the content address (hash) of `node E` is unique to a node containing those addresses.
 
-Getting lost? Let's imagine this as a set of file folders. If we run folder E through our hashing algorithm
-while it contains subfolders F and G, the content-derived hash we get back will include references to those two folders. If we remove folder G, it's like Grace removing that whisker from her kitten photo. Folder E doesn't have the same contents anymore, so it gets a new hash.
+Getting lost? Let's imagine this as a set of directories, or file folders. If we run directory E through our hashing algorithm
+while it contains subdirectories F and G, the content-derived hash we get back will include references to those two directories. If we remove directory G, it's like Grace removing that whisker from her kitten photo. Directory E doesn't have the same contents anymore, so it gets a new hash.
 
 As the tree above is built, the final content address (hash) of the root node is unique to a
 tree that contains every node all the way down this tree. If the data in any node were