Merge pull request #68 from mitre/wd-faq

FAQ tab

src/assets/data/faqs.json

@@ -0,0 +1,25 @@
+{
+  "faqs": [
+    {
+      "question": "How do I know which NIST SP 800-53 Security Controls are addressed using this framework?",
+      "answer": "NIST SP 800-53 associations are included in all InSpec profiles and output from other security tools processed through Heimdall_tools. See our presentation to learn more!",
+      "links": [
+        {
+          "name": "InSpec, HDF, and NIST SP 800-53 Security Controls",
+          "download_link": "MITRE_InSpec_Profiles_and_HDF_include_NIST_SP-800-53_Associations.pdf"
+        }
+      ]
+    },
+    {
+      "question": "How can I use InSpec tests in my CI/CD pipeline?",
+      "answer": "InSpec tests can be integrated as part of a test battery in your favorite CI platform. For example, you can add InSpec testing to your Travis CI file to run InSpec automatically. For further details, please see our Advanced InSpec Developer's Course.",
+      "code": "// travis.yml\n\nsudo: required\n\n# blocklist\n#branches:\n#  except:\n#  - development\n\n# safelist\n#branches:\n#  only:\n#  - master\n#  - stable\n\nlanguage: ruby\nrvm:\n  - 2.6.1\n\ncache: bundler\n\naddons:\n  apt:\n    sources:\n      - chef-current-xenial\n    # packages:\n    #   - chef-workstation\n  #artifacts: true\n\n# Don't `bundle install` which takes about 1.5 mins\ninstall:\n\nservices: docker\n\nenv:\n  matrix:\n  - INSTANCE=default-ubuntu-1604\n\nbefore_script:\n  - wget https://packages.chef.io/files/stable/chef-workstation/0.5.1/ubuntu/16.04/chef-workstation_0.5.1-1_amd64.deb\n  - sudo dpkg -i chef-workstation_*.deb\n  - rm chef-workstation_*.deb\n  - sudo iptables -L DOCKER || ( echo \"DOCKER iptables chain missing\" ; sudo iptables -N DOCKER )\n  - eval\\$(chef shell-init bash)\"\n  - gem install bundler:2.0.1\n  - gem install inspec_tools\n  - inspec --version\n  - CHEF_LICENSE=accept chef gem update inspec\n  - CHEF_LICENSE=accept chef gem update inspec-bin\n  - /opt/chef-workstation/embedded/bin/gem update inspec\n  - /opt/chef-workstation/embedded/bin/gem update inspec-bin\n  - inspec --version\n  - bundle update --bundler\n  - bundle install\n  - chef --version\n  - cookstyle --version\n  - foodcritic --version\n\nscript: \n  - CHEF_LICENSE=accept-no-persist KITCHEN_LOCAL_YAML=kitchen.dokken.yml CHEF_VERSION=\\${CHEF_VERSION} kitchen verify \\${INSTANCE} || true\n  - export RESULTS=\\$(ls results/*.json)\n  - inspec_tools compliance -j $RESULTS -f threshold.yml",
+      "links": [
+        {
+          "name": "InSpec Pipeline Integration Example",
+          "link": "https://mitre-inspec-advanced-developer.netlify.com/course/4.html"
+        }
+      ]
+    }
+  ]
+}

src/components/core/Header.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-container fluid>
+    <v-row align="center">
+      <v-col md="12" sm="12" cols="12">
+        <p class="google-font" style="color: #1a73e8; font-weight: 350; font-size:200% ">
+          <slot name="title"></slot>
+        </p>
+        <slot name="subtitle" class="google-font mt-0" style="font-size:120%"></slot>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

src/components/faqInfo.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-container fluid>
+    <v-expansion-panels accordion tile v-model="panel" multiple flat>
+      <v-expansion-panel v-for="faq in faqs" :key="faq">
+        <v-expansion-panel-header
+          class="google-font"
+          style="color: #1a73e8; font-weight: 200; font-size:120% "
+        >{{faq.question}}</v-expansion-panel-header>
+        <v-expansion-panel-content>{{faq.answer}}</v-expansion-panel-content>
+        <v-expansion-panel-content v-if="faq.links">
+          <div v-for="link in faq.links" :key="link">
+            <a
+              :href="link.download_link ? link.download_link : link.link"
+              target="_blank"
+              :download="link.download_link"
+            >{{link.name}}</a>
+          </div>
+        </v-expansion-panel-content>
+        <v-expansion-panel-content v-if="faq.code" class="hidden-sm-and-down">
+          <v-row>
+            <v-col xs="3">
+              <code class="pa-2" v-if="faq.code">{{faq.code}}</code>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <!-- <v-list-item :key="faq.question">
+          <v-list-item-content>
+            <v-list-item>
+              <p
+                class="google-font"
+                style="color: #1a73e8; font-weight: 200; font-size:120% "
+              >{{faq.question}}</p>
+            </v-list-item>
+            <v-list-item class="google-font">
+              <p>{{faq.answer}}</p>
+            </v-list-item>
+            <v-list-item class="google-font" v-show="faq.link">
+              <a :href="faq.link" download>{{faq.link_text}}</a>
+            </v-list-item>
+            <v-list-item class="google-font" v-show="faq.img">
+              <p>{{faq.img}}</p>
+            </v-list-item>
+            <v-list-item v-show="faq.code">
+              <pre><code class="pa-2">{{faq.code}}</code></pre>
+            </v-list-item>
+          </v-list-item-content>
+    </v-list-item>-->
+  </v-container>
+</template>
+
+<script>
+import faqs from "@/assets/data/faqs.json";
+export default {
+  data: () => ({
+    faqs: faqs.faqs,
+    panel: [0, 1],
+  })
+};
+</script>

src/components/training/traininginfo.vue

@@ -21,7 +21,7 @@
           target="_blank"
         >InSpec Advanced Developer Course</a>
       </span>
-      - In depth explaination of some of the higher functionalities provided by InSpec
+      - In depth explanation of some of the higher functionalities provided by InSpec
     </p>
 
     <br />

src/router.js

@@ -159,6 +159,16 @@ const router = new Router({
         requiresAuth: false
       }
     },    
+    {
+      path: "/faq",
+      name: "faq",
+      component: () => import("@/views/Faq.vue"),
+      meta: {
+        title: `FAQs | ${communityData.communityName}`,
+        color: "#0277bd",
+        requiresAuth: false
+      }
+    },  
     {
       path:'/admin/dashboard/events',
       name:"admin-events",

src/store.js

@@ -68,6 +68,16 @@ export default new Vuex.Store({
           enabled: true,
           showBottomNav: true
         }
+      },
+      {
+        text: "FAQ",
+        to: "/faq",
+        icon: "mdi-frequently-asked-questions",
+        meta: {
+          showToolbar: true,
+          enabled: true,
+          showBottomNav: true
+        }
       }
     ],
     adminDrawer: true,

src/views/Faq.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-content class="pa-0">
+    <v-container fluid class="pa-0 mt-2">
+      <v-row
+        justify="center"
+        align="center"
+        :class="this.$vuetify.theme.dark == true?'grey darken-4':'grey lighten-4'"
+        class="py-0 my-0"
+      >
+        <v-col md="12" lg="10" xs="12" class="py-3 my-0">
+          <Header>
+            <h3 slot="title">Frequently Asked Questions</h3>
+            <p slot="subtitle">
+              Have a question you don't see covered here? Please contact
+              <a
+                style="color:#1565C0;text-decoration: none;"
+                :href="`mailto:${communityData.communityEmail}`"
+              >{{communityData.communityEmail}}</a>
+            </p>
+          </Header>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-container fluid class="pa-0 py-2">
+      <v-row justify="center" align="center">
+        <v-col md="12" lg="10" xs="12" class="py-0">
+          <faqInfo />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
+</template>
+
+<script>
+import Header from "@/components/core/Header.vue";
+import faqInfo from "@/components/faqInfo.vue";
+import communityData from "@/assets/data/communityData.json";
+
+export default {
+  data() {
+    return {
+      communityData: communityData
+    };
+  },
+  components: {
+    Header,
+    faqInfo
+  }
+};
+</script>
+
+

src/views/GettingStarted.vue

@@ -8,7 +8,7 @@
         class="py-0 my-0"
       >
         <v-col md="12" lg="10" xs="12" class="py-3 my-0">
-          <gsHeader />
+          <Header><h3 slot="title">Getting Started</h3></Header>
         </v-col>
       </v-row>
     </v-container>
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import gsHeader from "../components/gettingstarted/gsHeader";
+import Header from "@/components/core/Header.vue";
 import gsInfo from "../components/gettingstarted/gsInfo";
 
 export default {
   components: {
-    gsHeader,
+    Header,
     gsInfo
   },
   created() {

src/views/Hardening.vue

@@ -8,7 +8,7 @@
         :class="this.$vuetify.theme.dark == true?'grey darken-4':'grey lighten-4'"
       >
         <v-col md="12" lg="10" xs="12" class="py-3 my-0">
-          <profileHeader>Hardening</profileHeader>
+          <Header><h3 slot="title">Hardening</h3></Header>
         </v-col>
       </v-row>
     </v-container>
@@ -32,15 +32,15 @@
 
 <script>
 import profileTemplateCompact from "@/components/profiles/profileTemplateCompact.vue";
-import profileHeader from "@/components/profiles/profileHeader.vue";
+import Header from "@/components/core/Header.vue";
 import hardening from "@/assets/data/hardening.json";
 import db from "@/assets/data/communityData.json";
 import { mapMutations, mapGetters } from "vuex";
 
 export default {
   components: {
     profileTemplateCompact,
-    profileHeader
+    Header
   },
   data() {
     return {

src/views/Training.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-content class="pa-0 ">
+  <v-content class="pa-0">
     <v-container fluid class="pa-0 mt-2">
       <v-row
         justify="center"
@@ -8,7 +8,16 @@
         class="py-0 my-0"
       >
         <v-col md="12" lg="10" xs="12" class="py-3 my-0">
-          <trainingHeader />
+          <Header>
+            <h3 slot="title">Our Training</h3>
+            <p slot="subtitle">
+              Contact us at
+              <a
+                style="color:#1565C0;text-decoration: none;"
+                :href="`mailto:${communityData.communityEmail}`"
+              >{{communityData.communityEmail}}</a> to sign up for instructor-led training. See below for dates and times!
+            </p>
+          </Header>
         </v-col>
       </v-row>
     </v-container>
@@ -20,17 +29,22 @@
         </v-col>
       </v-row>
     </v-container>
-
   </v-content>
 </template>
 
 <script>
-import trainingHeader from "../components/training/trainingHeader";
 import pastTraining from "../components/training/traininginfo";
+import communityData from "@/assets/data/communityData.json";
+import Header from "@/components/core/Header.vue";
 
 export default {
+  data() {
+    return {
+      communityData: communityData
+    };
+  },
   components: {
-    trainingHeader,
+    Header,
     pastTraining
   },
   created() {