Fix: more seo updates (#521)

* fix: add trailing slash to sitemap

optimize build chunks for each route

* feat: allow to override page title in the title template

* feat: add more properties to the sitemap

* fix: remove duplicate h1 and remove wrong h2 and h3

* fix: add missing alt attributes to images

* fix: tests need an update because of the headdings changes

* fix: remove errors on 404 pages

* fix: suggestions from code review

Co-authored-by: Oli Evans <[email protected]>

* fix: remove sitemap from version control

* fix: wrong condition

* fix: test lesson content is correct

* fix incorrect merge

Co-authored-by: Oli Evans <[email protected]>
Co-authored-by: terichadbourne <[email protected]>

Author: 3 people

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/public/sitemap.xml
 
 # local env files
 .env*

cypress/integration/tutorials.spec.js

@@ -253,7 +253,7 @@ function advanceThroughLessons (tutorialId) {
 
   it(`finds ${tutorialTitle} landing page with links to correct ${lessonCount} lessons plus resources`, function () {
     cy.visit(`/${tutorialName}/`)
-    cy.contains('h2', tutorialTitle)
+    cy.contains('h1', tutorialTitle)
     cy.get(`[data-cy=lesson-link-standard]`).should('have.length', lessonCount)
     cy.get(`[data-cy=lesson-link-resources]`).should('have.length', 1)
     // show that correct links are in correct order, but don't click through to test them
@@ -269,13 +269,11 @@ function advanceThroughLessons (tutorialId) {
       .and('have.attr', 'href', `/${tutorialName}/resources`)
   })
 
-  // const hasResources = tutorials[tutorialId].hasOwnProperty('resources')
   it(`uses lesson links and nav links btw landing page and 1st lesson`, function () {
     cy.visit(`/${tutorialName}/`)
     cy.get(`[href="/${tutorialName}/01"]`).click()
     cy.url().should('include', `/${tutorialName}/01`)
     cy.get(`[data-cy=tutorial-landing-link]`).click() // test nav link back to tutorial landing page
-    cy.contains('h2', tutorialTitle)
     cy.get(`[href="/${tutorialName}/01"]`).click()
     cy.contains('h1', lessons[0].title)
   })
@@ -300,6 +298,10 @@ function advanceThroughLessons (tutorialId) {
 
       let nextLessonNr = lessons[index + 1].formattedId
 
+      it('should show the lesson text', () => {
+        cy.get('[data-cy-text]').should('have.attr', 'data-cy-text', lesson.html)
+      })
+
       // TEXT LESSONS ONLY
       if (lessonType === 'text') {
         it(`shows enabled next button`, function () {

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-command = "npm run scripts:build:data -- --dry-run=false && npm run test:jest && npm run build"
+command = "npm run sitemap && npm run scripts:build:data -- --dry-run=false && npm run test:jest && npm run build"
 publish = "dist"
 
 [build.environment]

package.json

@@ -17,7 +17,7 @@
     "scripts:build:data": "node scripts/commands/build-data",
     "scripts:googleapis-generate-token": "node scripts/commands/googleapis-generate-token",
     "scripts:wizard": "node scripts/commands/wizard/index.js",
-    "sitemap": "rm public/sitemap.xml && vue-cli-service sitemap",
+    "sitemap": "rm -f public/sitemap.xml && vue-cli-service sitemap",
     "start": "npm run serve",
     "test": "start-server-and-test serve http://localhost:3000 cy:run",
     "test:jest": "jest --maxWorkers=1 --verbose"

public/sitemap.xml

@@ -7,13 +7,13 @@
             <img src="../static/images/ps_symbol_color.svg" alt="ProtoSchool" class="w3" />
           </a>
           <div class="header-text ml3">
-            <h1 class="ma0 fw4">
+            <div class=" header-title ma0 fw4">
               <span class="montserrat fw4">Proto</span>
               <span class="montserrat fw2">School</span>
-            </h1>
-            <h2 class="ma0 montserrat fw3">
+            </div>
+            <div class="header-slogan ma0 montserrat fw3">
               Interactive tutorials on decentralized web protocols
-            </h2>
+            </div>
           </div>
         </div>
       </section>
@@ -37,27 +37,27 @@ export default {
 </script>
 
 <style scoped>
-.header-text h1 {
+.header-title {
   font-size: 32px;
 }
-.header-text h2 {
+.header-slogan {
   font-size: 16px;
 }
 
 @media screen and (min-width: 620px) {
-  .header-text h1 {
+  .header-title {
     font-size: 40px;
   }
-  .header-text h2 {
+  .header-slogan {
     font-size: 20px;
   }
 }
 
 @media screen and (max-width: 498px) {
-  .header-text h1 {
+  .header-title {
     font-size: 24px;
   }
-  .header-text h2 {
+  .header-slogan {
     font-size: 12px;
   }
 }

src/components/Header.vue

@@ -23,7 +23,16 @@
         <h1>{{isResources ? 'Resources' : lesson.title}}</h1>
         <Concepts v-if="concepts" :concepts="concepts" />
         <Resources v-if="isResources" :data="resources" />
-        <div v-else class="lesson-text lh-copy" v-html="text"></div>
+        <!--
+          only add the text on data-cy-text when not in production
+          otherwise the html document will be bigger than it needs to in production
+         -->
+        <div
+          v-else class="lesson-text lh-copy"
+          v-html="text"
+          :data-cy-text="!isProduction && text"
+        >
+        </div>
       </section>
       <section v-if="challenge || isMultipleChoiceLesson" :class="{expand: expandChallenge}" class="challenge center pa3 ph4-l flex flex-column">
         <div class="flex-none">
@@ -247,7 +256,8 @@ export default {
       uploadedFiles: window.uploadedFiles || false,
       choice: localStorage[self.cacheKey] || '',
       cachedChoice: !!localStorage['cached' + routePath],
-      output: self.output
+      output: self.output,
+      isProduction
     }
   },
   computed: {

src/components/Lesson.vue

@@ -31,8 +31,8 @@
         <!-- standard nav  -->
         <div v-else class="flex-auto link fw6 f5 db bb border-aqua">{{currentPage}}</div>
         <button @click="toggleHamburger" class="menu-toggle button-reset bg-transparent b--transparent">
-          <img v-if="isHamburgerClosed" src="../static/images/burger.svg"/>
-          <img v-else src="../static/images/close.svg"/>
+          <img v-if="isHamburgerClosed" src="../static/images/burger.svg" alt="open navigation menu" />
+          <img v-else src="../static/images/close.svg" alt="close navigation menu" />
         </button>
       </div>
       <!-- hamburger displayed when requested -->

src/components/Navigation.vue

@@ -14,18 +14,18 @@
           :alt="tutorial.project.name"
           style="height: 23px"
         />
-        <h1 class="f6 mv0 fw2">{{tutorial.project.name}}</h1>
+        <h2 class="f6 mv0 fw2">{{tutorial.project.name}}</h2>
       </div>
       <div class="flex justify-between flex-row items-start mb1">
         <div class="flex flex-row items-center mt1">
-          <h2 class="ma0 f3 fw5">
+          <h1 class="ma0 f3 fw5">
             <template v-if="isLanding !== true">
               <router-link :to="landingLink" data-cy="tutorial-title">{{tutorial.title}}</router-link>
             </template>
             <template v-else>
               {{tutorial.title}}
             </template>
-          </h2>
+          </h1>
           <span v-if="isTutorialPassed(tutorial)" class="ml2 f3">🏆</span>
         </div>
         <TypeIcon

src/components/Tutorial.vue

@@ -4,7 +4,7 @@
     <p class="f7 fw5 ma0 pt0 lh-copy ttu teal mb3">
       {{displayTimeZone}}
     </p>
-    <h3 class="ma0 mb1 f3 fw9 ttu">{{ isVirtual ? "Virtual" : city }}</h3>
+    <div class="ma0 mb1 f3 fw9 ttu">{{ isVirtual ? "Virtual" : city }}</div>
     <p v-if="!isVirtual" class="f5 fw5 ma0 pt0">
       <span v-if="country" class="fw7">{{country}}</span>
       <span v-if="region"> - {{region}}</span>

src/components/cards/EventCard.vue

@@ -10,15 +10,15 @@
           <img
             class="mr2"
             :src="tutorial.project.logo"
-            :alt="tutorial.project.name"
+            :alt="`${tutorial.project.name} project logo`"
             style="height: 23px"
           />
-          <h4 class="f6 mv0 fw5 charcoal-muted">{{tutorial.project.name}}</h4>
+          <div class="f6 mv0 fw5 charcoal-muted">{{tutorial.project.name}}</div>
         </div>
         <span v-if="state" class="tutorial-state f7 mv0 fw7 white br3">{{state.title}}</span>
       </div>
       <div class="flex flex-row justify-between items-start navy">
-        <h3 class="ma0 f3 fw7" data-cy="tutorial-card-title">{{tutorial.title}}</h3>
+        <div class="ma0 f3 fw7" data-cy="tutorial-card-title">{{tutorial.title}}</div>
         <TypeIcon
           :tutorialId="tutorial.tutorialId"
           class="h2 ml3 type-icon"

src/components/cards/TutorialCard.vue

@@ -65,7 +65,7 @@
         v-on:click="onDismiss"
         aria-label="Dismiss survey"
       >
-        <img src="../../../static/images/close.svg" />
+        <img src="../../../static/images/close.svg" alt="dismiss or hide the tutorial feedback survey" />
       </button>
     </div>
   </transition>

src/components/forms/feedback-survey/Form.vue

@@ -24,7 +24,7 @@
             v-on:change="onSelect(index + 1)"
             v-model="selected"
           />
-          <img :src="icon" />
+          <img :src="icon" :alt="`answer ${index + 1} out of 5 to the question`" />
         </label>
       </div>
       <br />

src/components/forms/feedback-survey/Question.vue

@@ -66,7 +66,7 @@
         v-on:click="onDismiss"
         aria-label="Dismiss survey"
       >
-        <img src="../../../../static/images/close.svg" />
+        <img src="../../../../static/images/close.svg" alt="dismiss or hide the tutorial feedback survey" />
       </button>
     </div>
   </transition>

src/components/forms/feedback-survey/option-b/Form.vue

@@ -8,6 +8,7 @@ import VueTooltip from 'v-tooltip'
 import VueHighlightJS from 'vue-highlight.js'
 import VueSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
+import 'highlight.js/styles/github.css'
 
 import App from './App.vue'
 import router from './router'

src/main.js

@@ -17,7 +17,7 @@
       <TutorialsGrid
         :tutorials="featuredTutorials"
       />
-      <h1>Local Events</h1>
+      <h2>Local Events</h2>
       <p class="f4 fw5 lh-copy ma0 pv3  ">
       Groups and individuals around the world host in-person events using our tutorials
       as curriculum, with mentors available to help you work through the challenges.

src/pages/Home.vue

@@ -10,7 +10,6 @@ import head from '../utils/head'
 import Header from '../components/Header.vue'
 import Tutorial from '../components/Tutorial.vue'
 import { getTutorialByUrl } from '../utils/tutorials'
-import router from '../router'
 
 export default {
   components: {
@@ -26,15 +25,16 @@ export default {
 
       // If no tutorial was found, redirect to 404 page
       if (!tutorial) {
-        router.replace({ name: '404' })
-        return
+        this.$router.replace({ name: '404' })
+
+        return null
       }
 
       return tutorial
     }
   },
   head () {
-    return head.dynamic.tutorials({ context: this })
+    return this.tutorial && head.dynamic.tutorials({ context: this })
   }
 }
 </script>