initial attempt at nested accordion FAQ

Signed-off-by: Will Dower <[email protected]>

src/assets/data/faqs.json

@@ -1,15 +1,35 @@
 {
-    "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 this presentation to learn more!",
-            "link":           "MITRE_InSpec_Profiles_and_HDF_include_NIST_SP-800-53_Associations.pdf",
-            "link_text":      "Inspec, HDF, and NIST SP 800-53 Security Controls"
-      },
-      {
-            "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:",
-            "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"
-      }
-    ]
+  "faqs": [
+    {
+      "category": "InSpec",
+      "desc": "foobar",
+      "questions": [
+        {
+          "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"
+            },
+            {
+              "name": "InSpec Pipeline Integration Example",
+              "link": "https://mitre-inspec-advanced-developer.netlify.com/course/4.html"
+            }
+          ]
+        }
+      ]
+    }
+  ]
 }

src/components/faqInfo.vue

@@ -1,8 +1,42 @@
 <template>
   <v-container fluid>
-    <v-list two-line>
-      <template v-for="faq in faqs.faqs">
-        <v-list-item :key="faq.question">
+    <v-expansion-panels tile>
+      <v-expansion-panel v-for="category in faqs" :key="category">
+        <v-expansion-panel-header
+          class="google-font"
+          style="color: #1a73e8; font-weight: 200; font-size:120% "
+        >{{category.category}}</v-expansion-panel-header>
+        <v-expansion-panel-content class="mb-2">{{category.desc}}
+        <v-expansion-panels accordion tile>
+          <v-expansion-panel v-for="faq in category.questions" :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-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <!-- <v-list-item :key="faq.question">
           <v-list-item-content>
             <v-list-item>
               <p
@@ -23,18 +57,15 @@
               <pre><code class="pa-2">{{faq.code}}</code></pre>
             </v-list-item>
           </v-list-item-content>
-        </v-list-item>
-      </template>
-    </v-list>
+    </v-list-item>-->
   </v-container>
 </template>
 
 <script>
 import faqs from "@/assets/data/faqs.json";
 export default {
   data: () => ({
-    faqs: faqs
-  }),
-
+    faqs: faqs.faqs
+  })
 };
 </script>

src/views/Faq.vue

@@ -8,7 +8,16 @@
         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></Header>
+          <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>
@@ -20,20 +29,24 @@
         </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/Training.vue

@@ -9,13 +9,13 @@
       >
         <v-col md="12" lg="10" xs="12" class="py-3 my-0">
           <Header>
-            <h3 slot="title"> Our Training</h3>
+            <h3 slot="title">Our Training</h3>
             <p slot="subtitle">
-              Questions? Please contact
+              Contact us at
               <a
                 style="color:#1565C0;text-decoration: none;"
                 :href="`mailto:${communityData.communityEmail}`"
-              >{{communityData.communityEmail}}</a>
+              >{{communityData.communityEmail}}</a> to sign up for instructor-led training. See below for dates and times!
             </p>
           </Header>
         </v-col>
@@ -54,9 +54,8 @@ export default {
     } else {
       metaThemeColor.setAttribute("content", "#0277bd");
     }
-  },
-
-}
+  }
+};
 </script>