fix: use mode: history on the vue-router by using a SPA hack for GH Pages

Author: zebateira

DEVELOPING_TUTORIALS.md

@@ -92,7 +92,7 @@ If proofing a PR for someone else, check out their branch (you'll see its name l
 > npm run serve
 ```
 
-6. Open a web browser to the following address to preview your work: http://localhost:3000/#/
+6. Open a web browser to the following address to preview your work: http://localhost:3000/
 
 Vue will update your localhost preview automatically as you make changes. However, you won't be able to see any newly added lessons until you've updated the appropriate routes and import statements, as described below.
 
@@ -170,13 +170,13 @@ If you want to add images to your Markdown file, place them in the `public/tutor
 Then in your lesson Markdown file, you can either add it with regular Markdown:
 
 ```
-![Description of the image](tutorial-assets/T0001L01-diagram.svg)
+![Description of the image](/tutorial-assets/T0001L01-diagram.svg)
 ```
 
 ...or with regular HTML, if you need to set the image size:
 
 ```html
-<img src="tutorial-assets/T0001L01-diagram.svg" width="300px" height="150px" />
+<img src="/tutorial-assets/T0001L01-diagram.svg" width="300px" height="150px" />
 ```
 
 ##### JavaScript file (skip for text-only lessons)
@@ -503,7 +503,7 @@ The `title` of your tutorial will be seen in course listings on our tutorials pa
 
 ![screenshot](public/title-in-featured-tutorials.png)
 
-The `url` will appear in the URL of your tutorial landing page and lessons. For example,  `http://proto.school/#/short-tutorial-title/01`. In most cases this will match your tutorial title, but you may find that you need to make it shorter. Note that this URL will also be used to create the abbreviated title that is shown in the breadcrumb navigation and the small header at the top of each page of your tutorial.
+The `url` will appear in the URL of your tutorial landing page and lessons. For example,  `http://proto.school/short-tutorial-title/01`. In most cases this will match your tutorial title, but you may find that you need to make it shorter. Note that this URL will also be used to create the abbreviated title that is shown in the breadcrumb navigation and the small header at the top of each page of your tutorial.
 
 ![screenshot](public/url-breadcrumb-header.png)
 

README.md

@@ -38,7 +38,7 @@ Clone the repo, install dependencies, check out the appropriate branch, and run
 > npm run serve
 ```
 
-View the site on localhost at: http://localhost:3000/#/
+View the site on localhost at: http://localhost:3000/
 
 ## License
 

cypress/integration/tutorials.spec.js

@@ -29,14 +29,14 @@ function viewSolutionsAndSubmitAll (tutorialId) {
   const lessonCount = tutorials[tutorialId].lessons.length // count excludes resources page
   // const hasResources = tutorials[tutorialId].hasOwnProperty('resources')
   it(`should find the ${tutorialName} tutorial`, function () {
-    cy.visit(`/#/${tutorialName}/`)
-    cy.get(`[href="#/${tutorialName}/01"]`).click()
+    cy.visit(`/${tutorialName}/`)
+    cy.get(`[href="/${tutorialName}/01"]`).click()
   })
   // loop through standard lessons and attempt to pass challenges
   for (let i = 1; i <= lessonCount; i++) {
     let lessonNr = i.toString().padStart(2, 0)
     it(`should view the solution and pass test ${lessonNr}`, function () {
-      cy.url().should('include', `#/${tutorialName}/${lessonNr}`)
+      cy.url().should('include', `/${tutorialName}/${lessonNr}`)
       cy.get('[data-cy=code-editor-ready]').should('be.visible') // wait for editor to be updated
       cy.get('[data-cy=view-solution]').click()
       cy.get('[data-cy=solution-editor-ready]').should('be.visible') // wait for editor to be updated
@@ -49,7 +49,7 @@ function viewSolutionsAndSubmitAll (tutorialId) {
     cy.contains('h1', 'Resources') // loads resources page
     cy.get('[data-cy=resources-content]') // loads meaningful content
     cy.get('[data-cy=more-tutorials]').click()
-    cy.url().should('include', `#/tutorials/`)
+    cy.url().should('include', `/tutorials/`)
   })
 }
 
@@ -59,7 +59,7 @@ function renderAllLessonsInTutorial (tutorialId) {
   const standardLessonCount = standardLessons.length
 
   it(`should find ${tutorialName} landing page with correct lesson count`, function () {
-    cy.visit(`/#/${tutorialName}/`)
+    cy.visit(`/${tutorialName}/`)
     cy.get(`[data-cy=lesson-link]`).should('have.length', standardLessonCount)
   })
 

cypress/support/commands.js

@@ -22,4 +22,12 @@
 //
 //
 // -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
+  originalFn(url, { ...options, failOnStatusCode: false })
+})
+
+Cypress.on('uncaught:exception', (error, runnable) => {
+  console.error(error)
+
+  return false
+})

cypress/support/index.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

public/404.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+
+  <title>ProtoSchool</title>
+
+  <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // https://github.com/rafrex/spa-github-pages
+      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+      // ----------------------------------------------------------------------
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
+      var segmentCount = 0;
+
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
+        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+
+    </script>
+</head>
+
+<body>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</body>
+
+
+</html>

public/index.html

@@ -22,6 +22,35 @@
         font-family: 'Roboto', sans-serif;
       }
     </style>
+    <script type="text/javascript">
+        // Single Page Apps for GitHub Pages
+        // https://github.com/rafrex/spa-github-pages
+        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+        // ----------------------------------------------------------------------
+        // This script checks to see if a redirect is present in the query string
+        // and converts it back into the correct url and adds it to the
+        // browser's history using window.history.replaceState(...),
+        // which won't cause the browser to attempt to load the new url.
+        // When the single page app is loaded further down in this file,
+        // the correct url will be waiting in the browser's history for
+        // the single page app to route accordingly.
+        (function(l) {
+          if (l.search) {
+            var q = {};
+            l.search.slice(1).split('&').forEach(function(v) {
+              var a = v.split('=');
+              q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
+            });
+            if (q.p !== undefined) {
+              window.history.replaceState(null, null,
+                l.pathname.slice(0, -1) + (q.p || '') +
+                (q.q ? ('?' + q.q) : '') +
+                l.hash
+              );
+            }
+          }
+        }(window.location))
+    </script>
   </head>
   <body>
     <noscript>

src/components/CodeEditor.vue

@@ -10,7 +10,7 @@
       <span v-if="cachedCode" @click="resetCode" class="textLink" data-cy="reset-code">Reset Code</span>
       <MonacoEditor
         class="editor mt2"
-        srcPath="."
+        srcPath=""
         :height="editorHeight"
         :options="options"
         :code="code"
@@ -29,7 +29,7 @@
       <MonacoEditor
         v-show="viewSolution"
         class="editor"
-        srcPath="."
+        srcPath=""
         :height="editorHeight"
         :options="Object.assign({}, { readOnly: true }, options)"
         :code="solution"

src/components/Navigation.vue

@@ -6,7 +6,7 @@
       <div v-if="tutorial" class="link-list flex overflow-auto items-center bg-aqua navy f5 fw6 center tc mw7">
         <router-link class="nav-link navy" to="/tutorials">Tutorials</router-link>
         <span class="fw4">></span>
-        <router-link data-cy="tutorial-landing-link" class="nav-link navy" :to="tutorialLanding">{{tutorial.shortTitle}}</router-link>
+        <router-link data-cy="tutorial-landing-link" class="nav-link navy" :to="tutorialUrl">{{tutorial.shortTitle}}</router-link>
       </div>
       <!-- standard nav  -->
       <div v-else class="link-list dn flex overflow-auto items-center bg-aqua white tc mw7">
@@ -26,7 +26,7 @@
         <div v-if="tutorial" class="flex-auto link fw5 f5 db bb border-aqua navy">
           <router-link class="nav-link navy" to="/tutorials">Tutorials</router-link>
           <span class="fw4"> > </span>
-          <router-link class="nav-link navy" :to="tutorialLanding">{{tutorial.shortTitle}}</router-link>
+          <router-link class="nav-link navy" :to="tutorialUrl">{{tutorial.shortTitle}}</router-link>
         </div>
         <!-- standard nav  -->
         <div v-else class="flex-auto link fw6 f5 db bb border-aqua">{{currentPage}}</div>
@@ -56,7 +56,6 @@ export default {
     return {
       isHamburgerClosed: true,
       currentPath: self.$route.path.toString(),
-      tutorialLanding: '/' + self.$route.path.split('/')[1],
       links: [
         { text: 'Home', path: '/' },
         { text: 'Tutorials', path: '/tutorials' },
@@ -75,6 +74,9 @@ export default {
 
       return getTutorialByUrl(this.$route.params.tutorialUrl)
     },
+    tutorialUrl: function () {
+      return `/${this.tutorial.url}`
+    },
     currentPage: function () {
       let pageName
       this.links.forEach(link => {

src/router.js

@@ -80,6 +80,7 @@ const routes = [
 migrateCache()
 
 const router = new VueRouter({
+  mode: 'history',
   routes,
   scrollBehavior (to, from) {
     return { x: 0, y: 0 }
@@ -89,7 +90,7 @@ const router = new VueRouter({
 // track page view via Countly when route changes
 router.afterEach((to) => {
   if (!window.Countly) return
-  window.Countly.q.push(['track_pageview', '/#' + to.path])
+  window.Countly.q.push(['track_pageview', '/' + to.path])
 })
 
 export default router