feat: add footer (#618)

* add footer draft, reorg components

* first stab at footer layout

* update links, add id to contact section

* fix syntax error

* fix: keep hash when removing trailing slash

* improve layout

* line height and copyright alignment

* more styling

* incorporate design feedback

* enable translations for footer

* font size & automagic columns

* fix computed prop

* fix sticky footer

* fix: lint errors

* fix linting errors

* footer links to 1rem

* update top margin and padding

* Update src/components/layout/Footer.vue

Co-authored-by: Zé Bateira <[email protected]>

* Update src/components/layout/Footer.vue

Co-authored-by: Zé Bateira <[email protected]>

* remove failling test

Co-authored-by: Ze Bateira <[email protected]>

Author: terichadbourne

cypress/integration/footer.spec.js

@@ -0,0 +1,19 @@
+const pages = ['/', '/events', '/content-addressing', 'content-addressing/02']
+
+// renders footer on all sample pages
+describe(`DISPLAYS FOOTER ON EACH PAGE TYPE`, function () {
+  for (const page of pages) {
+    it(`renders footer at ${page}`, function () {
+      cy.visit(`${page}`) // loads specified page
+      cy.get('[data-cy="footer-component"]') // loads footer component
+    })
+  }
+})
+
+describe(`OPENS LINKS IN CORRECT WINDOWS`, function () {
+  it(`opens internal link`, function () {
+    cy.visit('/')
+    cy.get('[data-cy="footer-link-internal"]').contains('News').click() // click internal News link
+    cy.get('h1').contains('Newsletter') // because Cypress can't switch to new window, this proves correct page was opened in current window
+  })
+})

src/App.vue

@@ -55,20 +55,27 @@ body {
 }
 
 #app {
-  display: flex; /* 2 */
-  flex: 1 0 auto; /* 2 */
-  flex-direction: column; /* 2 */
-
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  height: 100%;
 }
 
-#app > div {
+#app > div:not(.vue-portal-target) {
   display: flex; /* 2 */
   flex: 1 0 auto; /* 2 */
   flex-direction: column; /* 2 */
+  height: 100%;
+}
+
+#app > div > div.home,
+#app > div > footer {
+  flex: 0 0 auto; /* 2 */
+}
+
+#app > div > section {
+  flex: 1 0 auto; /* 2 */
 }
 
 pre {

src/components/Lesson.vue

@@ -111,14 +111,17 @@
         :run="run"
         :next="next" />
     </div>
-    <footer class="mt4 ph3-ns bg-navy white">
+    <div class="mt4 ph3-ns bg-aqua navy">
       <div v-if="isResources" class="mw7 center ph3">
         <p>How did you feel about this tutorial? We'd love to hear your thoughts and suggestions for improvement! Please <a :href="tutorialIssueUrl" target="_blank">share your feedback</a>.</p>
       </div>
       <div v-else class="mw7 center ph3">
-        <p>Feeling stuck? We'd love to hear what's confusing so we can improve this lesson. Please <a :href="lessonIssueUrl" target="_blank">share your questions and feedback</a>.</p>
+        <p><strong>Feeling stuck?</strong> We'd love to hear what's confusing so we can improve this lesson. Please <a :href="lessonIssueUrl" target="_blank">share your questions and feedback</a>.</p>
       </div>
-    </footer>
+    </div>
+    <Footer
+      noTopMargin
+    />
   </div>
 </template>
 
@@ -142,7 +145,8 @@ import {
 } from '../utils/tutorials'
 import countly from '../utils/countly'
 import marked from '../utils/marked'
-import Header from './Header.vue'
+import Header from './layout/Header.vue'
+import Footer from './layout/Footer.vue'
 import Quiz from './Quiz.vue'
 import Resources from './Resources.vue'
 import Breadcrumbs from './Breadcrumbs.vue'
@@ -224,7 +228,8 @@ export default {
     Validator,
     TutorialCompletionCallout,
     TutorialRedirectModal,
-    TypeIcon
+    TypeIcon,
+    Footer
   },
   props: {
     lessonId: Number,

src/components/layout/Footer.vue

@@ -0,0 +1,88 @@
+<template>
+  <footer :class="`bg-navy white pt5-m pt5-l pt4 pb2 ${noTopMargin ? '':'footer-margin'}`"
+    data-cy="footer-component"
+  >
+    <div class="flex mw7 ph3 center flex-wrap"> <!-- logo & columns -->
+      <div  class="w-33-l w-100 mb0-l mb3">
+        <router-link to="/" class="flex items-center link">
+          <ProtoSchoolLogo alt="ProtoSchool" class="w2 mr2 "/>
+          <div class="ma0 fw4 white f3">
+            <span class="montserrat fw4">Proto</span>
+            <span class="montserrat fw2">School</span>
+          </div>
+        </router-link>
+      </div>
+      <div v-for="column in processedColumns" :key="column.title" class="w-20-l w-25-m w-33 column ">
+        <span class="fw7">{{column.title}}</span>
+        <ul class="list pl0">
+          <li v-for="(link, index) in column.links" :key="index" class="pv1">
+            <a class="link underline-hover white o-80 glow"
+              :target="link.external ? '_blank' : ''"
+              :data-cy="link.external ? 'footer-link-external' : 'footer-link-internal'"
+              :href="link.url">{{link.text}}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="flex justify-start mt4 mw7 center ph3 f7 o-70"> <!-- fake element plus copyright -->
+      <div class="w-33-l">
+      </div>
+      <p>© <a class="link underline white o-80 glow" target="_blank" href="https://protocol.ai">Protocol Labs</a> | {{translations.copyright._1}} <a class="link underline white o-80 glow" target="_blank" href="https://protocol.ai/legal/">{{translations.copyright._2}}</a>{{translations.copyright._3}} <a class="link underline white o-80 glow" target="_blank" :href="translations.copyright.licenseURL" >CC-BY 3.0</a>{{translations.copyright._4}}</p>
+    </div>
+  </footer>
+</template>
+
+<script>
+import ProtoSchoolLogo from '../../static/images/ps_symbol_color.svg?inline'
+import translations from '../../static/translations'
+import projects from '../../static/projects.json'
+
+export default {
+  name: 'Footer',
+  components: {
+    ProtoSchoolLogo
+  },
+  props: {
+    noTopMargin: Boolean
+  },
+  computed: {
+    translations: function () {
+      return translations.footer
+    },
+    processedColumns: function () {
+      return translations.footer.columns.map(column => ({
+        ...column,
+        links: column.links.map(link => {
+          let text = link.text // text or undefined
+          let url = link.url // url or underfined
+
+          // Fill in course and project link data automatically
+          if (column.type === 'courses' || column.type === 'projects') {
+            let project = projects.find(project => project.id === link)
+
+            text = project.name
+            url = (column.type === 'courses') ? `/course/${link}` : project.url
+          }
+
+          return { text, url, external: !url.startsWith('/') }
+        })
+      }))
+    }
+  }
+}
+</script>
+<style scoped>
+.column {
+  margin-top: 0.7rem;
+}
+.footer-margin {
+  margin-top: 6rem;
+}
+
+@media (max-width: 30rem) {
+  .footer-margin {
+    margin-top: 3rem;
+  }
+}
+</style>

src/components/Header.vue renamed to src/components/layout/Header.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import ProtoSchoolLogo from '../static/images/ps_symbol_color.svg?inline'
+import ProtoSchoolLogo from '../../static/images/ps_symbol_color.svg?inline'
 
 import Navigation from './Navigation.vue'
 export default {

src/components/Navigation.vue renamed to src/components/layout/Navigation.vue

@@ -48,10 +48,10 @@
 </template>
 
 <script>
-import BurgerIcon from '../static/images/burger.svg?inline'
-import CloseIcon from '../static/images/close.svg?inline'
+import BurgerIcon from '../../static/images/burger.svg?inline'
+import CloseIcon from '../../static/images/close.svg?inline'
 
-import { getTutorialByUrl } from '../utils/tutorials'
+import { getTutorialByUrl } from '../../utils/tutorials'
 
 export default {
   name: 'Navigation',

src/pages/Build.vue

@@ -71,17 +71,20 @@
       <router-link to="/contribute">ways to contribute</router-link>.
       </p>
     </section>
+    <Footer/>
   </div>
 </template>
 
 <script>
 import head from '../utils/head'
-import Header from '../components/Header.vue'
+import Header from '../components/layout/Header.vue'
+import Footer from '../components/layout/Footer.vue'
 
 export default {
   name: 'Build',
   components: {
-    Header
+    Header,
+    Footer
   },
   head () {
     return head()

src/pages/Contribute.vue

@@ -49,7 +49,7 @@
 
        <p class="f4 fw5 lh-copy ma0 pv2 ">Feeling overwhelmed by GitHub while contributing to ProtoSchool? Send us a good old-fashioned <a href="mailto:[email protected]">email</a> and we'll do our best to help.</p>
 
-      <h2>Get in Touch</h2>
+      <h2 id="contact">Get in Touch</h2>
       <p class="f4 fw5 lh-copy ma0 pv2 ">
       We use GitHub to organize ProtoSchool. The best place to get in touch
       with questions about event leadership and community engagement is our
@@ -73,19 +73,21 @@
       workshop is also required to maintain its own Code of Conduct, which you'll
       find linked from our <router-link to="/events">events page</router-link>.
       </p>
-
     </section>
+    <Footer/>
   </div>
 </template>
 
 <script>
 import head from '../utils/head'
-import Header from '../components/Header.vue'
+import Header from '../components/layout/Header.vue'
+import Footer from '../components/layout/Footer.vue'
 
 export default {
   name: 'Community',
   components: {
-    Header
+    Header,
+    Footer
   },
   head () {
     return head()

src/pages/Course.vue

@@ -55,6 +55,7 @@
         />
       </div>
     </section>
+    <Footer/>
   </div>
 </template>
 
@@ -70,7 +71,8 @@ import translations from '../static/translations'
 import { getAll } from '../utils/projects'
 import countly from '../utils/countly'
 
-import Header from '../components/Header'
+import Header from '../components/layout/Header.vue'
+import Footer from '../components/layout/Footer.vue'
 import TutorialsGrid from '../components/TutorialsGrid'
 import ToggleButton from '../components/ToggleButton'
 import ButtonLink from '../components/buttons/ButtonLink'
@@ -83,6 +85,7 @@ export default {
   },
   components: {
     Header,
+    Footer,
     TutorialsGrid,
     ToggleButton,
     ButtonLink,

src/pages/Events.vue

@@ -46,20 +46,23 @@
         </div>
       </div>
     </section>
+    <Footer/>
   </div>
 </template>
 
 <script>
 import head from '../utils/head'
 import { pastEvents, futureEvents } from '../utils/events'
-import Header from '../components/Header'
+import Header from '../components/layout/Header.vue'
+import Footer from '../components/layout/Footer.vue'
 import EventCard from '../components/cards/EventCard'
 import ButtonLink from '../components/buttons/ButtonLink'
 
 export default {
   name: 'events',
   components: {
     Header,
+    Footer,
     EventCard,
     ButtonLink
   },