Redesign: Static Pages Wrapper (#9027)

* refactor(static-pages): wrapper

* refactor(statics): use router-view

website/client/components/chat/copyAsTodoModal.vue

@@ -46,7 +46,7 @@ export default {
     copyingMessage () {
       this.text = this.copyingMessage.text;
       let baseUrl = 'https://habitica.com';
-      this.notes = `[${this.copyingMessage.user}](${baseUrl}/home/#?memberId=${this.copyingMessage.uuid}) wrote in [${this.groupName}](${baseUrl}/#/options/groups/${this.groupId})`;
+      this.notes = `[${this.copyingMessage.user}](${baseUrl}/static/home/#?memberId=${this.copyingMessage.uuid}) wrote in [${this.groupName}](${baseUrl}/#/options/groups/${this.groupId})`;
     },
   },
   methods: {

website/client/components/settings/deleteModal.vue

@@ -59,7 +59,7 @@ export default {
         },
       });
       localStorage.clear();
-      window.location.href = '/home';
+      window.location.href = '/static/home';
       this.$root.$emit('hide::modal', 'reset');
     },
   },

website/client/components/static/app.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid.text-center
     .row
       .col-md-6.offset-3
@@ -10,26 +8,4 @@
         a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1')
           img(alt='Get it on Google Play', src='https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png', style='width:139px;height:45px;image-rendering:auto;vertical-align:top')
         a(href='https://geo.itunes.apple.com/us/app/habitica/id994882113?mt=8', style='display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg#svgView) no-repeat;background-size:100%;width:152px;height:45px;margin-left:20px;image-rendering:auto')
-    app-footer
 </template>
-
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
-  .container-fluid {
-    margin-top: 56px;
-    margin-bottom: 24px;
-  }
-</style>
-
-<script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
-  export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
-  };
-</script>

website/client/components/static/clearBrowserData.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid.text-center
     .row
       .col-md-6.offset-3
@@ -14,30 +12,14 @@
             | {{ $t('localStorageClear') }}
         br
         p(v-html="$t('localStorageTryNext', localStorageTryNext) ")
-    app-footer
 </template>
 
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
-  .container-fluid {
-    margin-top: 56px;
-  }
-</style>
-
 <script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     data () {
       return  {
         localStorageTryFirst: {
-          linkStart: '<a href="/#/options/settings/settings" target="_blank">',
+          linkStart: '<a href="/user/settings/site" target="_blank">',
           linkEnd: '</a>',
         },
         localStorageTryNext: {

website/client/components/static/communityGuidelines.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     h1 {{ $t('communityGuidelines') }}
     hr
@@ -311,12 +309,9 @@
       li Shaner
       li Starsystemic
       li UncommonCriminal
-    app-footer
 </template>
 
 <style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
   .list-2col {
     width: 50%;
     columns: 2;
@@ -326,17 +321,10 @@
 </style>
 
 <script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
   // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
   const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
 
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     data () {
       return {
         hrefCommunityManagerEmail: `<a href='mailto: ${COMMUNITY_MANAGER_EMAIL}'>${COMMUNITY_MANAGER_EMAIL}</a>`,

website/client/components/static/contact.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     .row
       .col-md-6.offset-3
@@ -40,25 +38,4 @@
           | {{ $t('marketingInquiries') }}
           | &colon;&nbsp;
           a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
-    app-footer
 </template>
-
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
-  .container-fluid {
-    margin-top: 56px;
-  }
-</style>
-
-<script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
-  export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
-  };
-</script>

website/client/components/static/faq.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     .row
       .col-md-6.offset-3
@@ -10,16 +8,9 @@
           div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
         hr
         p(v-markdown="$t('webFaqStillNeedHelp')")
-    app-footer
 </template>
 
 <style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
-  .container-fluid {
-    margin-top: 56px;
-  }
-
   .faq-question {
     margin-bottom: 1em;
   }
@@ -28,15 +19,9 @@
 <script>
   // @TODO:  env.EMAILS.TECH_ASSISTANCE_EMAIL
   const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
   import markdownDirective from 'client/directives/markdown';
 
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     directives: {
       markdown: markdownDirective,
     },

website/client/components/static/features.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid.text-center
     .row
       .col-md-12
@@ -76,12 +74,9 @@
         p.span
           span {{ $t('marketing4Lead3-3') }}
           a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
-    app-footer
 </template>
 
 <style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
   .btn {
     margin-left: 1em;
   }
@@ -94,15 +89,9 @@
 </style>
 
 <script>
-  import AppFooter from 'client/components/appFooter';
   import markdownDirective from 'client/directives/markdown';
-  import StaticHeader from './header.vue';
 
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     directives: {
       markdown: markdownDirective,
     },

website/client/components/static/groupPlans.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-div
+  div
-  static-header
+    .container-fluid
-  .container-fluid.main
       .row
         .col-6.offset-3
           button.btn.btn-primary.btn-lg.btn-block(@click="goToNewGroupPage()") {{ $t('getAGroupPlanToday') }}

website/client/components/static/header.vue

@@ -2,7 +2,7 @@
   nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
     .navbar-header
       router-link.nav-item(
-        to='/home',
+        to='/static/home',
       )
         .logo.svg-icon(v-html='icons.logo')
     .collapse.navbar-collapse

website/client/components/static/home.vue

@@ -4,8 +4,6 @@
       br
       a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
 
-    static-header
-
     #intro-signup.purple-1
       .container
         .row
@@ -118,39 +116,12 @@
             img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt="$t(altAttrKickstarter)")
             img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt="$t(altAttrDiscover)")
 
-    #purple-footer
-      app-footer
-
     #bottom-wrap.purple-4
       #bottom-background
         .seamless_mountains_demo_repeat
         .midground_foreground_extended2
 </template>
 
-<style lang="scss">
-  #purple-footer {
-    background-color: #271b3d;
-
-    footer, footer a {
-      background: transparent;
-      color: #d5c8ff;
-    }
-
-    .logo {
-      color: #bda8ff;
-    }
-
-    .social-circle, .btn-donate {
-      background: #36205d;
-      color: #bda8ff;
-
-      .svg-icon {
-        color: #bda8ff;
-      }
-    }
-  }
-</style>
-
 <style lang="scss" scoped>
   @import '~client/assets/scss/static.scss';
 
@@ -460,8 +431,6 @@
 
 <script>
   import hello from 'hellojs';
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
   import googlePlay from 'assets/images/home/google-play-badge.svg';
   import iosAppStore from 'assets/images/home/ios-app-store.svg';
   import iphones from 'assets/images/home/iphones.svg';
@@ -474,10 +443,6 @@
   import * as Analytics from 'client/libs/analytics';
 
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     data () {
       return {
         icons: Object.freeze({
@@ -503,7 +468,7 @@
         hitType: 'pageview',
         eventCategory: 'page',
         eventAction: 'landing page',
-        page: '/home',
+        page: '/static/home',
       });
 
       hello.init({

website/client/components/static/maintenance.vue

@@ -1,25 +0,0 @@
-<template lang="pug">
-  .col-6.offset-3
-    h1 {{ $t('habiticaBackSoon') }}
-    img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_maintenance.png')
-    p {{ $t('importantMaintenance') }}
-    p(v-html="$t('twitterMaintenanceUpdates')")
-    ul.lead(style='list-style-position:inside')
-      li {{ $t('noDamageKeepStreaks') }}
-      li {{ $t('veteranPetAward') }}
-    p(v-html="$t('maintenanceMoreInfo', maintenanceMoreInfo)")
-    p.lead {{ $t('thanksForPatience') }}
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      maintenanceMoreInfo: {
-        linkStart: '<a href="/views/static/maintenance-info">',
-        linkEnd: '</a>',
-      },
-    };
-  },
-};
-</script>

website/client/components/static/maintenanceInfo.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-  .container
-    h1.text-center {{ $t('maintenanceInfoTitle') }}
-    img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_maintenance.png')
-    h2 {{ $t('maintenanceInfoWhat') }}
-    p(v-html="$t('maintenanceInfoWhatText')")
-
-    img.pull-left(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_new.png')
-    h2 {{ $t('maintenanceInfoWhy') }}
-    p {{ $t('maintenanceInfoWhyText') }}
-    p(v-html="$t('maintenanceInfoTechDetails')")
-
-    h2 {{ $t('maintenanceInfoMore') }}
-    h3 {{ $t('maintenanceInfoAccountChanges') }}
-    p(v-html="$t('maintenanceInfoAccountChangesText', { hrefTechAssistanceEmail })")
-    h3 {{ $t('maintenanceInfoAddFeatures') }}
-    p {{ $t('maintenanceInfoAddFeaturesText') }}
-    h3 {{ $t('maintenanceInfoHowLong') }}
-
-    img.pull-right(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_chatter.png')
-    p(v-html="$t('maintenanceInfoHowLongText')")
-    h3 {{ $t('maintenanceInfoStatsAffected') }}
-    p {{$t('maintenanceInfoStatsAffectedText1')}}
-    p {{$t('maintenanceInfoStatsAffectedText2')}}
-    h3 {{ $t('maintenanceInfoSeeTasks') }}
-    p {{ $t('maintenanceInfoSeeTasksText') }}
-    h3 {{ $t('maintenanceInfoRarePet') }}
-    p {{ $t('maintenanceInfoRarePetText') }}
-    img.pull-left(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_coding.png')
-    h3 {{ $t('maintenanceInfoWho') }}
-    p {{ $t('maintenanceInfoWhoText') }}
-    p {{ $t('maintenanceInfoTesting') }}
-</template>
-
-<script>
-// @TODO: EMAILS.TECH_ASSISTANCE_EMAIL
-const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
-
-export default {
-  data () {
-    return {
-      hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
-    };
-  },
-};
-</script>

website/client/components/static/merch.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     .row
       .col-md-6.offset-3
@@ -15,27 +13,10 @@
                 img.img-rendering-auto(:src="`~assets/images/merch/${merchant.key}.png`")
             p {{ $t('merch-' + merchant.key + '-summary') }}
             a.btn.btn-primary(:href="merchant.link" target='_blank') {{$t('merch-' + merchant.key + '-goto')}}
-    app-footer
 </template>
 
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-
-  .container-fluid {
-    margin-top: 56px;
-    margin-bottom: 56px;
-  }
-</style>
-
 <script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     data () {
       return {
         merchants: [

website/client/components/static/pressKit.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     h1 {{ $t('presskit') }}
       p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
@@ -17,26 +15,14 @@
           h3 {{ $t('pk' + category) }}
           div(v-for='img in images')
             img.img-rendering-auto.press-img(:src="`/presskit/#$category}/${cat}/${img}.png`")
-    app-footer
 </template>
 
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-</style>
-
 <script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
   // @TODO: How to use images?
   // @TODO: EMAILS.PRESS_ENQUIRY_EMAIL
   const PRESS_ENQUIRY_EMAIL = 'admin@habitica.com';
 
   export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
     data () {
       return {
         PRESS_ENQUIRY_EMAIL,

website/client/components/static/privacy.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     h1 Privacy Policy
     p.pagemeta
@@ -298,21 +296,4 @@
       br
       | Email&colon;&nbsp;
       a(href='mailto:admin@habitica.com') admin@habitica.com
-    app-footer
 </template>
-
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-</style>
-
-<script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
-  export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
-  };
-</script>

website/client/components/static/staticWrapper.vue

@@ -0,0 +1,75 @@
+<template lang='pug'>
+  div
+    static-header
+
+    .static-wrapper
+      router-view
+
+    #purple-footer
+      app-footer
+</template>
+
+<style lang='scss'>
+  @import '~client/assets/scss/colors.scss';
+
+  #purple-footer {
+    background-color: #271b3d;
+
+    footer, footer a {
+      background: transparent;
+      color: #d5c8ff;
+    }
+
+    .logo {
+      color: #bda8ff;
+    }
+
+    .social-circle, .btn-donate {
+      background: #36205d;
+      color: #bda8ff;
+
+      .svg-icon {
+        color: #bda8ff;
+      }
+    }
+  }
+
+  .static-wrapper {
+    .container-fluid {
+      margin: 5em 2em 2em 2em;
+    }
+
+    h1, h2 {
+      margin-top: 0.5em;
+      color: $purple-200;
+    }
+
+    h3, h4 {
+      color: $purple-200;
+    }
+
+    li, p {
+      font-size: 16px;
+    }
+
+    .media img {
+      margin: 1em;
+    }
+
+    .strong {
+      font-weight: bold;
+    }
+  }
+</style>
+
+<script>
+  import AppFooter from 'client/components/appFooter';
+  import StaticHeader from './header.vue';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
+  };
+</script>

website/client/components/static/terms.vue

@@ -1,6 +1,4 @@
 <template lang="pug">
-  div
-    static-header
   .container-fluid
     h1 Terms of Use
     p.pagemeta
@@ -567,21 +565,4 @@
       br
       | If you have any questions about these Terms of Service&comma; please contact
       | us at <a href='mailto:admin@habitica.com'>admin@habitica.com</a>
-    app-footer
 </template>
-
-<style lang='scss' scoped>
-  @import '~client/assets/scss/static.scss';
-</style>
-
-<script>
-  import AppFooter from 'client/components/appFooter';
-  import StaticHeader from './header.vue';
-
-  export default {
-    components: {
-      AppFooter,
-      StaticHeader,
-    },
-  };
-</script>

website/client/components/static/videos.vue

@@ -1,9 +0,0 @@
-<template lang="pug">
-  .row
-    .col-md-12#aboutPage
-      iframe(src='//player.vimeo.com/video/76557040', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-      iframe(src='//player.vimeo.com/video/57654086', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-      iframe(src='//player.vimeo.com/video/79172253', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-      iframe(src='//player.vimeo.com/video/79172327', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-      iframe(src='//player.vimeo.com/video/79172363', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
-</template>

website/client/router.js

@@ -9,6 +9,7 @@ import * as Analytics from 'client/libs/analytics';
 import ParentPage from './components/parentPage';
 
 // Static Pages
+const StaticWrapper = () => import(/* webpackChunkName: "static" */'./components/static/staticWrapper');
 const AppPage = () => import(/* webpackChunkName: "static" */'./components/static/app');
 const ClearBrowserDataPage = () => import(/* webpackChunkName: "static" */'./components/static/clearBrowserData');
 const CommunityGuidelinesPage = () => import(/* webpackChunkName: "static" */'./components/static/communityGuidelines');
@@ -17,14 +18,11 @@ const FAQPage = () => import(/* webpackChunkName: "static" */'./components/stati
 const FeaturesPage = () => import(/* webpackChunkName: "static" */'./components/static/features');
 const HomePage = () => import(/* webpackChunkName: "static" */'./components/static/home');
 const GroupPlansPage = () => import(/* webpackChunkName: "static" */'./components/static/groupPlans');
-const MaintenancePage = () => import(/* webpackChunkName: "static" */'./components/static/maintenance');
-const MaintenanceInfoPage = () => import(/* webpackChunkName: "static" */'./components/static/maintenanceInfo');
 const MerchPage = () => import(/* webpackChunkName: "static" */'./components/static/merch');
 const OverviewPage = () => import(/* webpackChunkName: "static" */'./components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'./components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'./components/static/privacy');
 const TermsPage = () => import(/* webpackChunkName: "static" */'./components/static/terms');
-const VideosPage = () => import(/* webpackChunkName: "static" */'./components/static/videos');
 
 const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
 
@@ -100,7 +98,6 @@ const router = new VueRouter({
   },
   // requiresLogin is true by default, isStatic false
   routes: [
-    { name: 'home', path: '/home', component: HomePage, meta: {requiresLogin: false} },
     { name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
     { name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },
     { name: 'tasks', path: '/', component: UserTasks },
@@ -239,7 +236,7 @@ const router = new VueRouter({
     },
     {
       path: '/static',
-      component: ParentPage,
+      component: StaticWrapper,
       children: [
         { name: 'app', path: 'app', component: AppPage, meta: {requiresLogin: false}},
         { name: 'clearBrowserData', path: 'clear-browser-data', component: ClearBrowserDataPage, meta: {requiresLogin: false}},
@@ -248,15 +245,13 @@ const router = new VueRouter({
         { name: 'faq', path: 'faq', component: FAQPage, meta: {requiresLogin: false}},
         { name: 'features', path: 'features', component: FeaturesPage, meta: {requiresLogin: false}},
         { name: 'groupPlans', path: 'group-plans', component: GroupPlansPage, meta: {requiresLogin: false}},
-        { name: 'maintenance', path: 'maintenance', component: MaintenancePage, meta: {requiresLogin: false}},
+        { name: 'home', path: 'home', component: HomePage, meta: {requiresLogin: false} },
-        { name: 'maintenance-info', path: 'maintenance-info', component: MaintenanceInfoPage, meta: {requiresLogin: false}},
         { name: 'merch', path: 'merch', component: MerchPage, meta: {requiresLogin: false}},
         { name: 'overview', path: 'overview', component: OverviewPage, meta: {requiresLogin: false}},
         { name: 'plans', path: 'plans', component: GroupPlansPage, meta: {requiresLogin: false}},
         { name: 'pressKit', path: 'press-kit', component: PressKitPage, meta: {requiresLogin: false}},
         { name: 'privacy', path: 'privacy', component: PrivacyPage, meta: {requiresLogin: false}},
         { name: 'terms', path: 'terms', component: TermsPage, meta: {requiresLogin: false}},
-        { name: 'videos', path: 'videos', component: VideosPage, meta: {requiresLogin: false}},
       ],
     },
     {