Skip to content

Commit

Permalink
Homepage improvements (#362)
Browse files Browse the repository at this point in the history 
* added MS3 case study to the homepage. addressed some Tailwind future configuration settings.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* reduced the homepage masthead height to bring more things above the fold.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* homepage spacing reductions. all testimonials grouped into carousel further up on the page. improved the development command to allocate more memory and avoid random crashes - this is a VuePress build process shortcoming.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* GA event functions added to forms. fyi, these only work in production.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* homepage revisions.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* telus quote added. fix attempt for build error. style revisions for news section.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* clientonly wrapper for the carousel to try and eliminate a VuePress error.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* component loading fix for node.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* switched to another carousel because the initial one was breaking the entire build process. the carousel plugin settled on was the only one out of 4 that did not break the VuePress build process.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>

* responsive tweaks for homepage carousel.

Signed-off-by: Daryn St. Pierre <daryn.st.pierre@konghq.com>
  • Loading branch information
Daryn St. Pierre committed Feb 4, 2021
1 parent 1366b9e commit 48d66d9
Show file tree
Hide file tree
Showing 14 changed files with 518 additions and 632 deletions.
390 changes: 1 addition & 389 deletions bin/kumacut/package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/.vuepress/enhanceApp.js
View file
Expand Up @@ -10,6 +10,7 @@ import '@kongponents/styles'

export default ({
Vue,
isServer,
router,
siteData
}) => {
Expand Down
Binary file added docs/.vuepress/public/images/gui-screenshot-with-charts.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/.vuepress/public/images/ms3-logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 102 additions & 0 deletions docs/.vuepress/public/images/telus-logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 84 additions & 50 deletions docs/.vuepress/theme/components/custom/Home.vue
View file
Expand Up @@ -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 -->

Expand All @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -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>
48 changes: 33 additions & 15 deletions docs/.vuepress/theme/styles/custom/components/_navbar.scss
View file
@@ -1,6 +1,6 @@
//
//
// NavBar.vue
//
//

$navbar-width: $container-width;
$navbar-logo-height: 2.563rem;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
}

0 comments on commit 48d66d9

Please sign in to comment.