Homepage improvements

docs/.vuepress/enhanceApp.js

@@ -10,6 +10,7 @@ import '@kongponents/styles'
 
 export default ({
   Vue,
+  isServer,
   router,
   siteData
 }) => {

docs/.vuepress/theme/components/custom/Home.vue

@@ -6,32 +6,53 @@
     <div class="page-masthead-wrap">
       <div class="inner flex flex-wrap -mx-4">
         <div class="page-masthead w-full lg:w-1/2 px-4">
-          <header class="page-masthead__header">
-            <Content slot-key="masthead-main-title" />
-            <Content slot-key="masthead-sub-title" />
-          </header>
-          <div class="page-masthead__actions">
-            <router-link
-              v-if="$page.frontmatter.startText"
-              :to="$page.frontmatter.startUrl"
-              class="btn btn--bright btn--large"
-            >
-              {{ $page.frontmatter.startText }}
-            </router-link>
-            <a
-              v-if="$page.frontmatter.whyUrl"
-              :href="$page.frontmatter.whyUrl"
-              class="btn btn--hollow btn--large"
-            >
-              {{ $page.frontmatter.whyText }}
-            </a>
+
+          <div class="page-masthead__upper">
+            <header class="page-masthead__header">
+              <Content slot-key="masthead-main-title" />
+              <Content slot-key="masthead-sub-title" />
+            </header>
+            <!-- .page-masthead__header -->
+            <div class="page-masthead__actions">
+              <router-link
+                v-if="$page.frontmatter.startText"
+                :to="$page.frontmatter.startUrl"
+                class="btn btn--bright btn--large"
+              >
+                {{ $page.frontmatter.startText }}
+              </router-link>
+              <a
+                v-if="$page.frontmatter.whyUrl"
+                :href="$page.frontmatter.whyUrl"
+                class="btn btn--hollow btn--large"
+              >
+                {{ $page.frontmatter.whyText }}
+              </a>
+            </div>
+          </div>
+          <!-- /.page-masthead__upper -->
+
+          <div class="page-masthead__diagram max-w-2xl mx-auto mt-4 w-full lg:w-1/2 block lg:hidden px-4">
+            <Content slot-key="masthead-diagram" />
+          </div>
+          <!-- masthead diagram: mobile -->
+
+          <!-- .page-masthead__actions -->
+          <div v-if="$page.frontmatter.showNews" class="newsbar-wrap newsbar-wrap--left-text flex">
+            <div class="newsbar-wrap__title mr-4">
+              <h3>News</h3>
+            </div>
+            <div class="flex-1">
+              <Content slot-key="news" class="newsbar" />
+            </div>
           </div>
+          <!-- masthead diagram: desktop -->
         </div>
         <!-- .page-masthead -->
 
-        <!-- <div class="page-masthead__diagram w-full lg:w-1/2 px-4">
+        <div class="page-masthead__diagram w-full lg:w-1/2 hidden lg:block px-4">
           <Content slot-key="masthead-diagram" />
-        </div> -->
+        </div>
       </div>
       <!-- .inner -->
 
@@ -40,11 +61,41 @@
       </div>
     </div>
     <!-- .page-masthead-wrap -->
+
+    <div v-if="$page.frontmatter.showTestimonial && testimonials.length" class="testimonials-carousel-wrap">
+      <div class="inner">
+        <VueSlickCarousel
+          :arrow="true"
+          :dots="true"
+        >
+          <div v-for="item in testimonials" class="testimonial">
+            <blockquote class="lg:grid lg:grid-flow-col lg:gap-4 lg:col-gap-4 lg:row-gap-2 px-8 lg:px-0">
+              <div class="testimonial__image lg:row-span-1 lg:row-start-1 lg:mb-0 mb-4 mx-auto text-center">
+                <img
+                  :src="item.image"
+                  :alt="item.alt"
+                />
+              </div>
+              <div class="testimonial__content lg:col-span-2 text-center lg:text-left">
+                <div>
+                  <p>{{ item.content }}</p>
+                </div>
+                <cite class="testimonial__author lg:row-span-1 lg:col-span-2 mt-4 lg:mt-0 text-center lg:text-left">
+                  {{ item.author }}, {{ item.title }}
+                </cite>
+              </div>
+            </blockquote>
+          </div>
+        </VueSlickCarousel>
+      </div>
+      <!-- /.inner -->
+    </div>
+    <!-- /.testimonials-carousel-wrap -->
 
     <div class="product-features-wrap">
-      <div v-if="$page.frontmatter.showNews" class="newsbar-wrap">
+      <!-- <div v-if="$page.frontmatter.showNews" class="newsbar-wrap">
         <Content slot-key="news" class="newsbar" />
-      </div>
+      </div> -->
 
       <div class="inner product-features flex flex-wrap -mx-4">
         <Content
@@ -58,31 +109,6 @@
     </div>
     <!-- .features-wrap -->
 
-    <div v-if="$page.frontmatter.showTestimonial" class="testimonial-wrap">
-      <div class="inner testimonial">
-        <blockquote class="testimonial__content-wrap">
-          <Content slot-key="testimonial-content" />
-          <div class="testimonial__cite">
-            <div
-              v-if="$page.frontmatter.testimonialPortraitSrc"
-              class="testimonial__portrait"
-            >
-              <img
-                :src="$page.frontmatter.testimonialPortraitSrc"
-                :alt="$page.frontmatter.testimonialPortraitAlt"
-              />
-            </div>
-            <cite>
-              <Content slot-key="testimonial-author" />
-              <Content slot-key="testimonial-author-info" />
-            </cite>
-          </div>
-        </blockquote>
-      </div>
-      <!-- .inner -->
-    </div>
-    <!-- .testimonial-wrap -->
-
     <div class="feature-focus-wrap">
       <div class="feature-focus feature-focus__tabs" v-if="tabs">
         <div class="inner inner--bordered flex flex-wrap -mx-12">
@@ -142,17 +168,25 @@ import MastheadWaves from '@theme/components/custom/PageMastheadWaves'
 import NewsletterWaves from '@theme/components/custom/NewsletterWaves'
 import KTabs from '../../../../../node_modules/@kongponents/ktabs/KTabs'
 
+import VueSlickCarousel from 'vue-slick-carousel'
+import 'vue-slick-carousel/dist/vue-slick-carousel.css'
+import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
+
 export default {
   components: {
     Navbar,
     MastheadWaves,
     NewsletterWaves,
-    KTabs
+    KTabs,
+    VueSlickCarousel
   },
   computed: {
     tabs () {
       return this.$page.frontmatter.tabs || null
     },
+    testimonials () {
+      return this.$page.frontmatter.testimonials || null
+    },
   },
 }
-</script>
+</script>

docs/.vuepress/theme/styles/custom/components/_navbar.scss

@@ -1,6 +1,6 @@
-// 
+//
 // NavBar.vue
-// 
+//
 
 $navbar-width: $container-width;
 $navbar-logo-height: 2.563rem;
@@ -20,37 +20,37 @@ $navbar-link-margin: 3rem; // the spacing between navbar links
   display: flex;
   align-items: center;
 
-  // these styles override ones found 
+  // these styles override ones found
   // in `vuepress-core/index.scss`
   height: $navbar-height-large;
   border-bottom: 0;
-  background: transparent linear-gradient(
-    to bottom, #f5f8fc 80%, rgba(#f5f8fc, 0)
-  );
+  background: transparent linear-gradient(to bottom, #f5f8fc 80%, rgba(#f5f8fc, 0));
 
-  a, span, img {
+  a,
+  span,
+  img {
     display: inline-block;
   }
 
   .logo {
-    height: $navbar-logo-height;
+    max-height: $navbar-logo-height;
     margin-right: 0.8rem;
-    
+
     // IE doesn't respect SVG images unless they have explicit dimensions
     @include target-ie {
       width: 136px;
       height: 41px;
     }
   }
-    
+
   .site-name {
     // font-size: 1.3rem;
     // font-weight: 600;
     // color: $textColor;
     // position: relative;
     display: none;
   }
-  
+
   // container for links in the navbar
   .links {
     padding-left: 1.5rem;
@@ -81,6 +81,11 @@ $navbar-link-margin: 3rem; // the spacing between navbar links
   .logo-wrap {
     display: flex;
     align-items: center;
+
+    @media (max-width: 1072px) and (min-width: 841px) {
+      flex-direction: column;
+      flex-wrap: wrap;
+    }
   }
 
   .repo-button {
@@ -95,12 +100,13 @@ $navbar-link-margin: 3rem; // the spacing between navbar links
   }
 
   // install button
-  
+
   .nav-item--install > a:not(.external),
   .nav-item--install > a.router-link-active {
     @include button-base;
-
-    &, &:hover {
+
+    &,
+    &:hover {
       border: 0 !important;
     }
   }
@@ -138,4 +144,16 @@ $navbar-link-margin: 3rem; // the spacing between navbar links
   .links {
     padding-left: 1.5rem;
   }
-}
+}
+
+@media (max-width: 1072px) and (min-width: 841px) {
+  .navbar {
+    .links {
+      padding-left: 0;
+    }
+
+    .nav-item {
+      margin-left: 1.5rem;
+    }
+  }
+}