Merge branch 'nic-updates' into 'master'

Nic updates

See merge request platform-one/private/bullhorn/platform1-site!43

public/index.html

@@ -23,7 +23,7 @@
       property="og:description"
       content="AN OFFICIAL DOD DEVSECOPS ENTERPRISE SERVICES TEAM"
     />
-    <meta property="og:image" content="./static/p1-meta-logo.png" />
+    <meta property="og:image" content="https://p1.dsop.io/static/p1-meta-logo.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -33,7 +33,7 @@
       property="twitter:description"
       content="AN OFFICIAL DOD DEVSECOPS ENTERPRISE SERVICES TEAM"
     />
-    <meta property="twitter:image" content="./static/p1-meta-logo.png" />
+    <meta property="twitter:image" content="https://p1.dsop.io/static/p1-meta-logo.png" />
 
     <link
       rel="icon"

src/components/Breadcrumb.vue

+<template>
+  <div class="breadcrumb-container" v-if="crumbs.length > 0">
+    <b-breadcrumb id="nav-breadcrumb">
+      <b-breadcrumb-item
+        v-for="(crumb, index) in crumbs"
+        :key="index"
+        :active="crumb.active"
+        :to="crumb.to"
+      >
+        <b-icon-chevron-double-right class="mr-2" v-if="index !== 0" />
+        {{ crumb.text }}
+      </b-breadcrumb-item>
+    </b-breadcrumb>
+  </div>
+</template>
+<script>
+const routeMap = {};
+export default {
+  created() {
+    this.$router.options.routes.forEach(route => {
+      routeMap[route.path] =
+        route.meta && route.meta.breadcrumb
+          ? route.meta.breadcrumb
+          : route.name;
+    });
+  },
+  computed: {
+    crumbs() {
+      if (this.$route.path === "/") {
+        return [];
+      }
+
+      const pathArray = this.$route.path.split("/");
+      // remove home route since it's a special case and we'll add it later
+      pathArray.shift();
+
+      let currentPath = "";
+      const breadcrumbs = pathArray.reduce(
+        (breadcrumbArray, path) => {
+          currentPath += "/" + path;
+
+          if (routeMap[currentPath]) {
+            breadcrumbArray.push({
+              path: currentPath,
+              to: currentPath,
+              text: routeMap[currentPath]
+            });
+          }
+          return breadcrumbArray;
+        },
+        // initialize with home route
+        [
+          {
+            path: "",
+            to: "/",
+            text: "Home"
+          }
+        ]
+      );
+
+      breadcrumbs[breadcrumbs.length - 1].active = true;
+
+      return breadcrumbs;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb-container {
+  padding-left: 7rem;
+  text-transform: uppercase;
+
+  #nav-breadcrumb {
+    border-radius: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+
+    .breadcrumb-item {
+      &,
+      & > a {
+        color: $p1-light-green;
+      }
+      &.active span {
+        font-weight: 800;
+      }
+      // hide the default >
+      & + .breadcrumb-item::before {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/components/NavBar.vue

 <template>
   <div>
-    <b-navbar toggleable="md" type="dark" variant="" fixed="top">
+    <b-navbar toggleable="lg" type="dark" variant="" fixed="top">
       <b-navbar-brand to="/" class="home-link">
         <YodaLogo />
       </b-navbar-brand>
@@ -13,6 +13,12 @@
 
       <b-collapse id="navbar-toggle-collapse" is-nav>
         <b-navbar-nav class="ml-auto">
+          <router-link class="nav-item" to="/" exact>
+            HOME
+          </router-link>
+          <router-link class="nav-item" to="/products">
+            PRODUCTS
+          </router-link>
           <router-link class="nav-item" to="/services">
             SERVICES
           </router-link>
@@ -29,6 +35,7 @@
 </template>
 <script>
 import YodaLogo from "@/assets/images/icons/Logo_P1_Yoda_Campfire-WH.svg";
+
 export default {
   name: "NavBar",
   components: {
@@ -39,8 +46,6 @@ export default {
 <style lang="scss" scoped>
 .navbar {
   background-color: $secondary-bg-color;
-  // margin-left: auto;
-  // margin-right: auto;
 
   .navbar-toggler {
     outline: none;
@@ -64,15 +69,15 @@ export default {
 
     .nav-item {
       padding: 0.5rem;
-      margin: 0 1rem;
-      width: 130px;
+      margin: 0 0.5rem;
+      // width: 120px;
       letter-spacing: 0.02rem;
       color: $secondary-text-color;
       border-top: 2px solid transparent;
       border-bottom: 2px solid transparent;
     }
 
-    .router-link-exact-active {
+    .router-link-active {
       border-bottom: 2px solid $p1-light-green;
       color: $p1-light-green;
     }
@@ -81,22 +86,22 @@ export default {
       margin-right: 0;
     }
   }
+}
 
-  @include media-breakpoint-down(sm) {
-    .home-link {
-      margin-left: 1rem;
-    }
-    .navbar-nav {
-      margin-right: 1rem;
-    }
+@include media-breakpoint-down(md) {
+  .navbar .home-link {
+    margin-left: 1rem;
   }
-  @include media-breakpoint-only(md) {
-    .home-link {
-      margin-left: 1.5rem;
-    }
-    .navbar-nav {
-      margin-right: 1.5rem;
-    }
+  .navbar .navbar-nav {
+    margin-right: 1rem;
+  }
+}
+@include media-breakpoint-only(lg) {
+  .navbar .home-link {
+    margin-left: 1.5rem;
+  }
+  .navbar .navbar-nav {
+    margin-right: 1.5rem;
   }
 }
 </style>

src/components/PageHeader.vue

 <template>
   <div class="page-header">
+    <Breadcrumb />
     <div class="content">
-      <h1 class="title mx-2">
+      <h1 class="title mx-5">
         {{ title }}
       </h1>
       <h4 v-if="subtext" class="subtext mx-lg-auto mx-5">
@@ -22,13 +23,14 @@
 </template>
 
 <script>
+import Breadcrumb from "@/components/Breadcrumb.vue";
 export default {
   props: {
     title: String,
     subtext: String,
     description: String
   },
-  components: {}
+  components: { Breadcrumb }
 };
 </script>
 <style lang="scss" scoped>
@@ -40,9 +42,9 @@ export default {
   background-attachment: fixed;
   overflow: auto;
   margin-bottom: 7rem;
-  margin-top: 98px;
   background-size: cover;
   overflow: hidden;
+  margin-top: 102px;
 
   .title,
   .subtext,
@@ -55,6 +57,17 @@ export default {
       max-width: 50%;
     }
   }
+  @include media-breakpoint-only(lg) {
+    .breadcrumb-container {
+      padding-left: 2.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .breadcrumb-container {
+      padding-left: 2rem;
+    }
+  }
 
   .content {
     min-height: 400px;

src/components/ProductsSummary.vue

@@ -13,11 +13,12 @@
               <img
                 class="logo"
                 src="@/assets/images/ADCE.png"
-                alt="ADCE Logo"
+                alt="The Party Bus - ABMS All Domain Common Environment Logo"
               />
             </div>
             <div class="text">
-              All Domain Common Environment (ADCE) teams get instant access to
+              The Party Bus - Advanced Battle Management System (ABMS) All
+              Domain Common Environment (ADCE) teams get instant access to
               developer tools and CI/CD pipelines leveraging Platform One's
               C-ATO
             </div>

src/router/index.js

@@ -16,6 +16,20 @@ const routes = [
       bodyClass: "home-page"
     }
   },
+  {
+    path: "/products",
+    name: "Products",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "services" */ "@/views/Products.vue"),
+    meta: {
+      title: "Platform One | Products",
+      bodyClass: "products-page",
+      breadcrumb: "Products"
+    }
+  },
   {
     path: "/services",
     name: "Services",
@@ -26,7 +40,8 @@ const routes = [
       import(/* webpackChunkName: "services" */ "@/views/Services.vue"),
     meta: {
       title: "Platform One | Services",
-      bodyClass: "services-page"
+      bodyClass: "services-page",
+      breadcrumb: "Services"
     }
   },
   {
@@ -39,20 +54,22 @@ const routes = [
       import(/* webpackChunkName: "who-we-are" */ "@/views/WhoWeAre.vue"),
     meta: {
       title: "Platform One | Who We Are",
-      bodyClass: "who-we-are-page"
+      bodyClass: "who-we-are-page",
+      breadcrumb: "Who We Are"
     }
   },
-  { path: "/partybus", redirect: "/abms-adce" },
+  { path: "/partybus", redirect: "/products/abms-adce" },
   {
-    path: "/abms-adce",
+    path: "/products/abms-adce",
     name: "ADCE",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "adce" */ "@/views/ADCE.vue"),
     meta: {
-      title: "Platform One | ABMS-ADCE",
-      bodyClass: "adce-page"
+      title: "Platform One | Products | The Party Bus",
+      bodyClass: "adce-page",
+      breadcrumb: "The Party Bus"
     }
   },
   {
@@ -65,17 +82,31 @@ const routes = [
       import(/* webpackChunkName: "ContactUs" */ "@/views/ContactUs.vue"),
     meta: {
       title: "Platform One | Contact Us",
-      bodyClass: "contact-us-page"
+      bodyClass: "contact-us-page",
+      breadcrumb: "Contact Us"
     }
   }
 ];
 
 const router = new VueRouter({
   base: process.env.BASE_URL,
-  routes
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    if (to.hash) {
+      return {
+        selector: to.hash
+      };
+    }
+
+    return { x: 0, y: 0 };
+  }
 });
 
 const vueBodyClass = new VueBodyClass(routes);
+
 // This callback runs before every route change, including on page load.
 router.beforeEach((to, from, next) => {
   vueBodyClass.guard(to, next);

src/views/ADCE.vue

 <template>
   <div class="adce">
     <PageHeader
-      title="ABMS-ADCE"
-      subtext="Advanced Battle Management System - All Domain Common Environment"
+      title="The Party Bus"
+      subtext="Advanced Battle Management System All Domain Common Environment"
       description="The environment and services you need to develop and deploy your software applications"
     />
     <div class="container">
       <div class="row text-left">
         <div class="col-lg-5">
-          <h2 class="mx-0">ABMS-ADCE</h2>
+          <h2 class="mx-0">
+            The Party Bus - ABMS All Domain Common Environment
+          </h2>
           <p>
-            ABMS-ADCE will help you build a strong foundation so you can focus
-            on developing and deploying your applications. Our continuous
-            authority to operate (CATO) pipeline will ensure your application is
-            safe, secure, and approved for deployment.
+            The Party Bus - ABMS All Domain Common Environment will help you
+            build a strong foundation so you can focus on developing and
+            deploying your applications. Our continuous authority to operate
+            (CATO) pipeline will ensure your application is safe, secure, and
+            approved for deployment.
           </p>
           <p>
-            We move fast, but we move smart. The ADCE team will be measuring
-            twice and cutting once. We believe the sooner we can get you squared
-            away on our level of standards (which is high, why else would we
-            invite you to join our elite team of products and services), the
-            sooner you can serve the users and warfighters within DoD that need
-            your product or solution yesterday.
+            We move fast, but we move smart. The Party Bus team will be
+            measuring twice and cutting once. We believe the sooner we can get
+            you squared away on our level of standards (which is high, why else
+            would we invite you to join our elite team of products and
+            services), the sooner you can serve the users and warfighters within
+            DoD that need your product or solution yesterday.
           </p>
         </div>
         <div
@@ -31,7 +34,7 @@
           <img
             class="img-fluid shadow"
             src="@/assets/images/pawel-czerwinski-tMbQpdguDVQ-unsplash.jpg"
-            alt="All Domain Common Environment"
+            alt="The Party Bus - ABMS All Domain Common Environment"
           />
           <ADCELogo id="adce-logo" />
         </div>
@@ -75,7 +78,9 @@
         <div
           class="d-flex flex-column col-lg-5 offset-lg-1 my-4 align-items-center align-items-lg-left"
         >
-          <h4 class="mb-4 mx-auto">ABMS-ADCE MILESTONES</h4>
+          <h4 class="mb-4 mx-auto">
+            The Party Bus - ABMS All Domain Common Environment MILESTONES
+          </h4>
           <div class="milestones-wrapper">
             <div
               v-for="milestone in milestones"
@@ -123,13 +128,13 @@
       class="d-flex flex-column architecture-container align-items-center my-5"
     >
       <ProcessLogo class="logo" />
-      <h4 class="my-3">ABMS-ADCE PIPELINE</h4>
+      <h4 class="my-3">ABMS ADCE - PARTY BUS PIPELINE</h4>
       <p>This is how we enable your teams to do DevSecOps.</p>
       <div class="image-wrapper px-4 mb-5" @click="() => showImg(0)">
         <img
           class="img-fluid"
           src="@/assets/images/CI_CD_infographic_final_web_update.png"
-          alt="ABMS-ADCE Pipeline"
+          alt="The Party Bus - ABMS All Domain Common Environment Pipeline"
         />
         <div class="font-italic">
           click to enlarge
@@ -137,13 +142,13 @@
       </div>
 
       <SoftwareLogo class="logo" />
-      <h4 class="my-3">ABMS-ADCE TOOL CHAIN</h4>
+      <h4 class="my-3">ABMS ADCE - PARTY BUS TOOL CHAIN</h4>
       <p>These are the tools we have available to get the job done.</p>
       <div class="image-wrapper px-4" @click="() => showImg(1)">
         <img
           class="img-fluid"
           src="@/assets/images/P1 - Tool Chain.jpg"
-          alt="ABMS-ADCE Tool Chain"
+          alt="The Party Bus - ABMS All Domain Common Environment Tool Chain"
         />
         <div class="font-italic">
           click to enlarge
@@ -249,14 +254,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.adce-page {
-  // hide the default nav
-  #app #navbar-toggle-collapse,
-  #app button.navbar-toggler {
-    display: none !important;
-  }
-}
-
 .adce {
   #adce-logo {
     fill: white;

src/views/Products.vue

+<template>
+  <div class="home">
+    <PageHeader title="Platform One Products" />
+    <ProductsSummary />
+  </div>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import ProductsSummary from "@/components/ProductsSummary";
+
+export default {
+  name: "Products",
+  components: {
+    PageHeader,
+    ProductsSummary
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+  .page-header {
+    margin-bottom: 5rem !important;
+  }
+}
+</style>

tests/unit/router/index.spec.js

@@ -47,10 +47,10 @@ describe("router", () => {
     expect(router.currentRoute.name).toBe("WhoWeAre");
     expect(router.currentRoute.path).toBe("/who-we-are");
   });
-  it("should route to /abms-adce", async () => {
-    router.push("/abms-adce");
+  it("should route to /products", async () => {
+    router.push("/products");
     await wrapper.vm.$nextTick();
-    expect(router.currentRoute.name).toBe("ADCE");
-    expect(router.currentRoute.path).toBe("/abms-adce");
+    expect(router.currentRoute.name).toBe("Products");
+    expect(router.currentRoute.path).toBe("/products");
   });
 });