initial skeleton

.gitignore

+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+/coverage
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+

.gitlab-ci.yml

+image: alpine:latest
+
+stages:
+  - build
+  - test
+  - staging
+  - deploy
+
+include:
+  - project: "platform-one/private/big-bang/pipeline-templates"
+    ref: promote-static-sites
+    file: "/jobs/promote/copy-static-site.yml"
+
+variables:
+  SITE_NAME: platform1-site
+  DEPLOY_REPO: https://jdceanfa:${CI_STATIC_SITES_TOKEN}@repo1.dsop.io/platform-one/apps/static-sites.git #<---- hate this (need to fix) - don't want to use tokens
+
+.npm_template:
+  image: registry.dsop.io/platform-one/private/big-bang/pipeline-templates/ext-cypress:v0.2.0
+
+lint code:
+  extends: .npm_template
+  stage: build
+  script:
+    - npm i
+    - npm run lint
+  tags:
+    - p1
+
+unit tests:
+  extends: .npm_template
+  stage: test
+  script:
+    - npm i
+    - npm run test:unit
+  rules:
+    - if: '$CI_COMMIT_TAG == ""'
+      when: always
+  tags:
+    - p1
+
+e2e tests:
+  extends: .npm_template
+  stage: test
+  script:
+    - npm i
+    - npm run test:e2e-ci
+  except:
+    - tags
+  tags:
+    - p1
+
+#staging:
+#  image: registry.dsop.io/platform-one/private/big-bang/pipeline-templates/ext-cypress:v0.2.0
+#  extends: .staging-site
+#  script:
+#    - echo 'Publishing build outputs to staging'
+#    - npm install -D
+#    - npm run build
+
+publish:
+  image: registry.dsop.io/platform-one/private/big-bang/pipeline-templates/ext-cypress:v0.2.0
+  extends: .copy-site
+  script:
+    - echo 'Publishing build outputs to MR for deployment'
+    - npm install -D
+    - npm run build
+  tags:
+    - p1
+
+publish-staging:
+  image: registry.dsop.io/platform-one/private/big-bang/pipeline-templates/ext-cypress:v0.2.0
+  extends: .copy-staging-site
+  script:
+    - echo 'Publishing build outputs to MR for deployment'
+    - npm install -D
+    - npm run build-staging
+  tags:
+    - p1
\ No newline at end of file

README.md

-# Surfboard
+# surfboard
 
+Static site for https://surfboard.p1.dsop.io
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Run your unit tests
+
+```
+npm run test:unit
+```
+
+### Run your end-to-end tests
+
+```
+npm run test:e2e
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```

babel.config.js

+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

cypress.json

+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

package.json

+{
+  "name": "platform1-surfboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e --mode=test",
+    "lint": "vue-cli-service lint",
+    "build-staging": "NODE_ENV=production vue-cli-service build --mode=test",
+    "preinstall": "npx npm-force-resolutions",
+    "test": "npm run test:unit && npx vue-cli-service test:e2e --headless",
+    "test:e2e-ci": "npx vue-cli-service test:e2e --headless"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11",
+    "vue-analytics": "^5.22.1",
+    "vue-body-class": "^3.0.2",
+    "vue-router": "^3.1.6",
+    "vuetify": "^2.2.11"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-strict-mode": "^7.8.3",
+    "@beyonk/google-fonts-webpack-plugin": "^1.2.3",
+    "@mdi/font": "^5.3.45",
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-e2e-cypress": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-plugin-unit-jest": "^4.4.1",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.12.0",
+    "prettier": "^1.19.1",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.2",
+    "style-resources-loader": "^1.3.2",
+    "vue-cli-plugin-style-resources-loader": "~0.1.4",
+    "vue-cli-plugin-vuetify": "~2.0.6",
+    "vue-svg-loader": "^0.16.0",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/prettier"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {},
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      },
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "jest": {
+    "preset": "@vue/cli-plugin-unit-jest",
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.{js,vue}",
+      "!**/node_modules/**",
+      "!coverage/**",
+      "!dist/**",
+      "!tests/**",
+      "!babel.config.js",
+      "!vue.config.js",
+      "!public/static/js/**"
+    ],
+    "coverageReporters": [
+      "html",
+      "text-summary",
+      "lcov"
+    ],
+    "coverageDirectory": "coverage",
+    "coverageThreshold": {
+      "global": {
+        "branches": 50,
+        "functions": 50,
+        "lines": 50,
+        "statements": -10
+      }
+    },
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.svg$": "<rootDir>/tests/unit/__mocks__/svgTransform.js"
+    },
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1",
+      "^vuetify/lib$": "vuetify",
+      "\\.(css|less)$": "<rootDir>/tests/unit/__mocks__/styleMock.js"
+    }
+  },
+  "resolutions": {
+    "http-proxy": "^1.18.1",
+    "minimist": "^1.2.5",
+    "yargs-parser": "^18.1.3"
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,shrink-to-fit=no"
+    />
+    <!-- Primary Meta Tags -->
+    <title>Platform One: Surfboard</title>
+    <meta name="title" content="Platform One: Surfboard" />
+    <meta
+      name="description"
+      content="An internal dashboard for Platform One personnel"
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://surfboard.p1.dsop.io/" />
+    <meta property="og:title" content="Platform One: Surfboard" />
+    <meta
+      property="og:description"
+      content="An internal dashboard for Platform One personnel"
+    />
+    <meta property="og:image" content="https://surfboard.p1.dsop.io/static/meta-logo.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://surfboard.p1.dsop.io/" />
+    <meta property="twitter:title" content="Platform One: Surfboard" />
+    <meta
+      property="twitter:description"
+      content="An internal dashboard for Platform One personnel"
+    />
+    <meta property="twitter:image" content="https://surfboard.p1.dsop.io/static/meta-logo.png" />
+
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="502x498"
+      href="./static/surfboard-logo.png"
+    />
+  </head>
+  <body>
+    <noscript>
+      <strong>
+        We're sorry but Platform 1's Surfboard site doesn't work properly without
+        JavaScript enabled. Please enable it to continue.
+      </strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template>
+  <v-app>
+    <NavBar />
+    <v-main fluid>
+      <router-view id="main-content" />
+    </v-main>
+    <Footer />
+  </v-app>
+</template>
+
+<script>
+import NavBar from "@/components/NavBar.vue";
+import Footer from "@/components/Footer.vue";
+
+export default {
+  name: "App",
+  components: { NavBar, Footer }
+};
+</script>
+<style lang="scss">
+#app {
+  min-width: 320px;
+
+  #main-content {
+    z-index: 2;
+  }
+
+  a {
+    color: $link-color;
+    &:hover,
+    &:active {
+      color: $link-hover-color;
+      i:not(.no-link) {
+        color: $link-hover-color !important;
+      }
+    }
+
+    i:not(.no-link) {
+      color: $link-color !important;
+    }
+
+    &.inline {
+      margin-top: -3px;
+    }
+
+    &.v-btn:not(.v-btn--round) {
+      min-width: 160px;
+    }
+    &.link.v-btn--text {
+      text-transform: none !important;
+      color: $link-color;
+    }
+    &.link.v-btn--text {
+      text-transform: none !important;
+      color: $link-color;
+      &:hover,
+      &:active {
+        color: $link-hover-color;
+      }
+    }
+  }
+
+  .theme--dark {
+    h1,
+    h2,
+    h3,
+    h4,
+    p {
+      color: $light-text-color;
+    }
+  }
+
+  .v-btn:not(.v-btn--outlined).primary,
+  .v-btn:not(.v-btn--outlined).secondary,
+  .v-btn:not(.v-btn--outlined).accent {
+    color: $button-text-color;
+    border: $button-border;
+  }
+
+  .v-list-item {
+    &.v-list-item--active {
+      color: $dark-bg-color !important;
+    }
+    .v-list-item__content {
+      text-align: left;
+    }
+  }
+  .v-select__selections {
+    line-height: 1.25rem;
+  }
+
+  .v-image {
+    &.h-flip {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

src/components/Footer.vue

+<template>
+  <footer class="footer">
+    Footer here
+  </footer>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped></style>

src/components/NavBar.vue

+<template>
+  <div>
+    <v-app-bar id="app-bar" app dark height="102">
+      <v-toolbar-title>
+        <router-link to="/" class="d-flex">
+          Nav here
+        </router-link>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-app-bar>
+  </div>
+</template>
+<script>
+export default {
+  name: "NavBar",
+  components: {}
+};
+</script>
+<style lang="scss"></style>

src/main.js

+import Vue from "vue";
+import App from "@/App.vue";
+import router from "@/router";
+import VueAnalytics from "vue-analytics";
+import vuetify from "@/plugins/vuetify";
+
+// Configuration VueAnalytics
+Vue.use(VueAnalytics, {
+  id: process.env.VUE_APP_GA_ID,
+  router
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  vuetify,
+  render: h => h(App)
+}).$mount("#app");

src/plugins/vuetify.js

+import "@mdi/font/css/materialdesignicons.css";
+import Vue from "vue";
+import Vuetify from "vuetify/lib";
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+  // theme: { disable: true },
+  icons: {
+    iconfont: "mdi"
+  },
+  theme: {
+    themes: {
+      light: {
+        primary: "#BDC931",
+        secondary: "#ffffff",
+        accent: "#002743",
+        success: "#4CAF50",
+        info: "#2196F3",
+        warning: "#FB8C00",
+        error: "#FF5252"
+      }
+    }
+  }
+});

src/router/index.js

+import Vue from "vue";
+import VueRouter from "vue-router";
+import VueBodyClass from "vue-body-class";
+import Launchboard from "../views/Launchboard.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "Launchboard",
+    component: Launchboard,
+    meta: {
+      title: "Platform One: Surfboard",
+      bodyClass: "launchboard-page"
+    }
+  },
+  {
+    path: "/products",
+    name: "Products",
+    // route level code-splitting
+    component: () =>
+      import(/* webpackChunkName: "products" */ "@/views/Products.vue"),
+    meta: {
+      title: "Platform One | Surfboard Products",
+      bodyClass: "products-page"
+    }
+  },
+  {
+    path: "/community",
+    name: "Community",
+    // route level code-splitting
+    component: () =>
+      import(/* webpackChunkName: "community" */ "@/views/Community.vue"),
+    meta: {
+      title: "Platform One: Surfboard Community",
+      bodyClass: "community-page"
+    }
+  },
+  {
+    path: "/resources",
+    name: "Resources",
+    // route level code-splitting
+    component: () =>
+      import(/* webpackChunkName: "resources" */ "@/views/Resources.vue"),
+    meta: {
+      title: "Platform One: Surfboard Resources",
+      bodyClass: "resources-page"
+    }
+  },
+  {
+    path: "/help",
+    name: "Help Center",
+    // route level code-splitting
+    component: () =>
+      import(/* webpackChunkName: "resources" */ "@/views/HelpCenter.vue"),
+    meta: {
+      title: "Platform One: Surfboard Help Center",
+      bodyClass: "help-page"
+    }
+  }
+];
+
+const router = new VueRouter({
+  base: process.env.BASE_URL,
+  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);
+  // This goes through the matched routes from last to first, finding the closest route with a title.
+  // eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
+  const nearestWithTitle = to.matched
+    .slice()
+    .reverse()
+    .find(r => r.meta && r.meta.title);
+
+  // If a route with a title was found, set the document (page) title to that value.
+  if (nearestWithTitle) {
+    document.title = nearestWithTitle.meta.title;
+  }
+
+  next();
+});
+
+export default router;

src/scss/custom.scss

+@import "./mixins/breakpoints.scss";
+@import "./utilities.scss";
+
+html {
+  // rubber-band overscroll color and determines the scrollbar color on chrome for mac
+  background-color: $light-bg-color;
+  font-size: 16px;
+}
+
+// General style overrides and custom classes
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  letter-spacing: normal;
+  line-height: 1.5;
+  font-size: 1rem;
+  text-align: center;
+  color: $text-color;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+    color: $link-color;
+
+    &:hover,
+    &:active {
+      color: $link-hover-color;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .v-btn {
+    font-size: 1rem;
+    font-weight: 500;
+    height: 40px;
+    text-transform: uppercase;
+
+    &:not(.v-btn--round) {
+      min-width: 160px;
+    }
+
+    &:not(.link) {
+      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
+      border: $button-border;
+    }
+  }
+
+  // to dissuade use
+  h5,
+  h6 {
+    background-color: magenta;
+  }
+
+  h1 {
+    font-size: 5rem;
+    line-height: 6rem;
+    letter-spacing: 3.2px;
+  
+  }
+  h2 {
+    font-size: 2rem;
+    line-height: 2.375rem;
+    letter-spacing: 1.1px;
+  }
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1.8125rem;
+    letter-spacing: 1.1px;
+  }
+  h4 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 1.1px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    text-transform: uppercase;
+    color: $header-text-color;
+    font-weight: 800;
+    word-break: break-word;
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    i {
+      color: $header-text-color !important;
+      margin-top: -2px;
+    }
+  }
+
+  .dark {
+    color: $light-text-color;
+    background-color: $dark-bg-color;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    p {
+      color: $light-text-color;
+    }
+  }
+
+  @include xs {
+    h1 {
+      font-size: 3rem;
+      line-height: 3.375rem;
+      letter-spacing: 1.1px;
+    }
+    h2 {
+      font-size: 1.375rem;
+      line-height: 2rem;
+      letter-spacing: 1.1px;
+    }
+    h3 {
+      font-size: 1.125rem;
+      line-height: 1.625rem;
+      letter-spacing: 1.1px;
+    }
+    h4 {
+      font-size: 1rem;
+      line-height: 1.625rem;
+      letter-spacing: 1.1px;
+    }
+    font-size: 1rem;
+  }
+
+  @include sm-up {
+    h1 {
+      margin-top:1rem;
+      margin-bottom:1rem;
+    }
+    h2 {
+      margin-top:2rem;
+      margin-bottom:1rem;
+    }
+    h4 {
+      margin-top:1rem;
+      margin-bottom:.5rem;
+    }
+  }
+
+  .flex-card {
+    display: flex;
+    flex-direction: column;
+    & > .v-card__text {
+      flex-grow: 1;
+    }
+  }
+}

src/scss/mixins/breakpoints.scss

+// material design breakpoints
+$sm-breakpoint: 600px;
+$md-breakpoint: 960px;
+$lg-breakpoint: 1264px;
+$xl-breakpoint: 1904px;
+
+// Extra small devices: on screens that are 599px wide or less
+@mixin xs {
+  @media only screen and (max-width: $sm-breakpoint - 1)
+  {@content;} 
+} 
+
+// Small devices: when the width is between 600px and 959px
+@mixin sm {
+  @media screen and (min-width: $sm-breakpoint) and (max-width: $md-breakpoint - 1) 
+  {@content;} 
+}
+
+// Medium devices: when the width is between 960px and 1263px
+@mixin md {
+  @media screen and (min-width: $md-breakpoint) and (max-width: $lg-breakpoint - 1)
+  {@content;} 
+}
+
+// Large devices: when the width is between 1264px and 1903px
+@mixin lg {
+  @media only screen and (min-width: $lg-breakpoint) and (max-width: $xl-breakpoint - 1)
+  {@content;} 
+}
+
+// Extra large devices: on screens that are 1904px wide or above
+@mixin xl {
+   @media only screen and (min-width: $xl-breakpoint) 
+   {@content;} 
+} 
+
+// On screens that are 600px wide or above
+ @mixin sm-up {
+   @media only screen and (min-width: $sm-breakpoint)
+   {@content;} 
+} 
+
+// On screens that are 960px wide or above
+@mixin md-up {
+  @media only screen and (min-width: $md-breakpoint)
+  {@content;} 
+} 
+
+// On screens that are 1264px wide or above
+@mixin lg-up {
+  @media only screen and (min-width: $lg-breakpoint)
+  {@content;} 
+} 
+
+// On screens that are 959px wide or below
+@mixin sm-down {
+  @media only screen and (max-width: $md-breakpoint - 1)
+  {@content;} 
+} 
+
+// On screens that are 1363px wide or above
+@mixin md-down {
+  @media only screen and (max-width: $lg-breakpoint - 1)
+  {@content;} 
+} 
+
+// On screens that are 1903px wide or above
+@mixin lg-down {
+  @media only screen and (max-width: $xl-breakpoint - 1)
+  {@content;} 
+}
\ No newline at end of file

src/scss/utilities.scss

+.background-transparent {
+  background-color: transparent !important;
+}
+.h-100 {
+  height: 100%;
+}
+.w-100 {
+  width: 100%;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-space-around {
+  justify-content: space-around;
+}
+.align-items-center {
+  align-items: center;
+}
+
+.white-space-normal {
+  white-space: normal;
+}
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.position-relative {
+  position: relative;
+}
+.position-absolute {
+  position: absolute;
+}

src/scss/variables.scss

+$text-color: #4a4a4a;
+$header-text-color: #000000;
+$button-text-color: #000000;
+$light-text-color: #ffffff;
+$light-bg-color: #ffffff;
+$dark-bg-color: #002743;
+
+$gradient-alpha: #00000000;
+
+$p1-light-green: #bdc931;
+$p1-dark-green: #8b9638;
+$p1-orange: #f36421;
+$p1-yellow: #f7be16;
+
+$bottom-bg: #031727;
+
+$link-color: #53b9f9;
+$link-hover-color: #0056b3;
+
+$button-border-color: #002743;
+$button-border: 0.5px solid $button-border-color !important;
+$footer-border-color: #747474;
+$footer-bg-color: #021928;
+
+// Globals
+$body-font-family: "Open Sans", serif;
+$border-radius-root: 4px;
+$font-size-root: 16px;
+
+// Variables must come before the import
+$btn-font-size: 1rem;
+$btn-letter-spacing: normal;
+$btn-sizes: (
+  "default": 40,
+  "large": 70,
+);
+
+$btn-font-sizes: (
+  "x-small": 0.625rem,
+  "small": 0.75rem,
+  "default": 1rem,
+  "large": 1rem,
+  "x-large": 1.125rem,
+);
+
+// $headings: (
+//   "h1": (
+//     "size": 5rem,
+//     "line-height": 6rem,
+//     "letter-spacing": 3.2px,
+//   ),
+//   "h2": (
+//     "size": 2rem,
+//     "line-height": 2.375rem,
+//     "letter-spacing": 1.1px,
+//   ),
+//   "h3": (
+//     "size": 1.5rem,
+//     "line-height": 1.8125rem,
+//     "letter-spacing": 1.1px,
+//   ),
+//   "h4": (
+//     "size": 1rem,
+//     "line-height": 1.5rem,
+//     "letter-spacing": 1.1px,
+//   ),
+// );