Small fixes and code cleanup (#65)

- fixed navigation links - updated WWD icons to use v-icon and built in mdi svgs - removed unused svgs - defaulted the app the use the compact view for hardening / validation Signed-off-by: Aaron Lippold <[email protected]>
mitre · Mar 8, 2020 · 1b9e166 · 1b9e166
1 parent ef50cc3
commit 1b9e166
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 80 deletions.
diff --git a/src/assets/data/whatWeDo.json b/src/assets/data/whatWeDo.json
@@ -17,7 +17,7 @@
           "desc": "Align with security baselines using our Ansible, Chef, and Terraform content",
           "icon": "mdi-security",
           "svg": "",
-          "link": "#/hardening",
+          "link": "hardening",
           "tools": ""
         },
         {
@@ -33,7 +33,7 @@
           "desc": "Learn how to write effective tests and apply them to the team's pipeline",
           "icon": "mdi-chair-school",
           "svg": "",
-          "link": "#/training",
+          "link": "training",
           "tools": ""
         }
       ]
@@ -52,7 +52,7 @@
             {
               "name": "InSpec Profiles",
               "svg": "inspec-blue-back-border",
-              "link": "/validation"
+              "link": "validation"
             },
             {
               "name": "InSpec Tools",
@@ -130,16 +130,16 @@
           "desc": "Use the SAF hardening baseline library to configure systems for security",
           "svg": "",
           "icon": "",
-          "tools": [ 
+          "tools": [
             {
               "name": "Ansible Profiles",
               "svg": "ansible",
-              "link": "/hardening"
+              "link": "hardening"
             },
             {
               "name": "Chef Profiles",
               "svg": "chef-2",
-              "link": "/hardening"
+              "link": "hardening"
             }
           ]
         }
@@ -159,7 +159,7 @@
           "doc_link": "https://heimdall.mitre.org",
           "github_link": "https://github.com/mitre/heimdall-lite",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "Heimdall Server",
@@ -171,7 +171,19 @@
           "doc_link": "https://heimdall.mitre.org",
           "github_link": "https://github.com/mitre/heimdall",
           "svg": "",
-          "tools" : ""
+          "tools": ""
+        },
+        {
+          "name": "Vulcan (alpha)",
+          "link": "",
+          "desc": "Application for streamlining InSpec profile and overlay development using the Security Requirments Guide (SRG)",
+          "icon": "",
+          "app_link": "https://vulcan-demo.mitre.org",
+          "app_svg": "app",
+          "doc_link": "https://vulcan.mitre.org",
+          "github_link": "https://github.com/mitre/vulcan",
+          "svg": "",
+          "tools": ""
         },
         {
           "name": "InSpec_Tools",
@@ -183,7 +195,7 @@
           "doc_link": "https://inspec-tools.mitre.org",
           "github_link": "https://github.com/mitre/inspec_tools/",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "Heimdall_Tools",
@@ -195,7 +207,7 @@
           "doc_link": "https://heimdall-tools.mitre.org",
           "github_link": "https://github.com/mitre/heimdall_tools",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "InSpecJS",
@@ -207,7 +219,7 @@
           "doc_link": "https://inspecjs.mitre.org",
           "github_link": "https://github.com/mitre/inspecjs",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "HeimdallJS_Tools (Coming Soon!)",
@@ -219,7 +231,7 @@
           "doc_link": "",
           "github_link": "",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "InSpecJS_Tools",
@@ -231,19 +243,7 @@
           "doc_link": "https://inspec-tools-js.mitre.org",
           "github_link": "https://github.com/mitre/inspec_tools_js",
           "svg": "",
-          "tools" : ""
-        },
-        {
-          "name": "Vulcan",
-          "link": "",
-          "desc": "Application for streamlining InSpec profile and overlay development using the Security Requirments Guide (SRG)",
-          "icon": "",
-          "app_link": "https://vulcan-demo.mitre.org",
-          "app_svg": "app",
-          "doc_link": "https://vulcan.mitre.org",
-          "github_link": "https://github.com/mitre/vulcan",
-          "svg": "",
-          "tools" : ""
+          "tools": ""
         },
         {
           "name": "HDF Splunk Plugin",
@@ -255,7 +255,7 @@
           "doc_link": "https://hdf-json-to-splunk.mitre.org",
           "github_link": "https://github.com/mitre/hdf-json-to-splunk/",
           "svg": "",
-          "tools" : ""
+          "tools": ""
         }
       ]
     }

diff --git a/src/assets/img/svg/app.svg b/src/assets/img/svg/app.svg
diff --git a/src/assets/img/svg/desc.svg b/src/assets/img/svg/desc.svg
diff --git a/src/assets/img/svg/github.svg b/src/assets/img/svg/github.svg
diff --git a/src/components/home/wwdComponents/wwdBasicCard.vue b/src/components/home/wwdComponents/wwdBasicCard.vue
@@ -1,6 +1,5 @@
 <template>
   <v-card outlined class="pa-2 ma-2 d-flex flex-column" :to="item.link" flat>
-
     <!--<toolBlock v-if="item.tools" :tools="item.tools" />-->
     <v-icon v-if="item.icon" large style="font-size:300%">{{ item.icon }}</v-icon>
     <img
@@ -10,41 +9,51 @@
       dark
       style="max-width: 32px; max-height: 32px;"
     />
-    <v-card-title class="google-font mt-2 title align-bottom justify-center break-word">{{ make_readable(item.name) }}</v-card-title>
+    <v-card-title
+      class="google-font mt-2 title align-bottom justify-center break-word"
+    >{{ make_readable(item.name) }}</v-card-title>
     <v-card-text class="google-font">{{ item.desc }}</v-card-text>
-    <v-spacer> </v-spacer>
+    <v-spacer></v-spacer>
     <v-card-actions>
-      <v-container fluid>
-      <v-row justify="center">
-          <v-btn color="primary" v-if="item.app_link" class="d-none d-sm-inline" :href="item.app_link" :target='item.app_link[0] == "/" ? "" : "_blank"' text>Demo</v-btn>
-          <v-btn color="primary" v-if="item.doc_link" class="d-none d-sm-inline " :href="item.doc_link" :target='item.doc_link[0] == "/" ? "" : "_blank"' text>Docs</v-btn>
-          <v-btn color="primary" v-if="item.github_link" class="d-none d-sm-inline " :href="item.github_link" :target='item.github_link[0] == "/" ? "" : "_blank"' text>GitHub</v-btn>
-          <a v-if="item.app_link" :href="item.app_link" target="_blank">
-            <img
-              :src="require('@/assets/img/svg/' + item.app_svg + '.svg')"
-              class="svg-style d-flex d-sm-none ma-2"
-            />
-          </a>
-          <a v-if="item.doc_link" :href="item.doc_link" target="_blank">
-            <img
-              :src="require('@/assets/img/svg/desc.svg')"
-              class="svg-style d-flex d-sm-none ma-2"
-            />
-          </a>
-          <a v-if="item.github_link" :href="item.github_link" target="_blank">
-            <img
-              :src="require('@/assets/img/svg/github.svg')"
-              class="svg-style d-flex d-sm-none ma-2"
-            />
-          </a>
-      </v-row>
+      <v-container row dense>
+        <v-row justify="center">
+          <v-btn
+            color="primary"
+            v-if="item.app_link"
+            :href="item.app_link"
+            :target="item.app_link[0] == '/' ? '' : '_blank'"
+            text
+          >
+            <v-icon>mdi-desktop-classic</v-icon>
+            <span class="d-none d-sm-inline pl-3">Demo</span>
+          </v-btn>
+          <v-btn
+            color="primary"
+            v-if="item.doc_link"
+            :href="item.doc_link"
+            :target="item.doc_link[0] == '/' ? '' : '_blank'"
+            text
+          >
+            <v-icon>mdi-file-document</v-icon>
+            <span class="d-none d-sm-inline pl-3">Docs</span>
+          </v-btn>
+          <v-btn
+            color="primary"
+            v-if="item.github_link"
+            :href="item.github_link"
+            :target="item.github_link[0] == '/' ? '' : '_blank'"
+            text
+          >
+            <v-icon>mdi-github-circle</v-icon>
+            <span class="d-none d-sm-inline pl-3">GitHub</span>
+          </v-btn>
+        </v-row>
       </v-container>
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
-
 // see https://stackoverflow.com/questions/58556447/is-there-a-card-footer-card-deck-feature-on-vuetify
 // for details on arranging card components
 

diff --git a/src/store.js b/src/store.js
@@ -7,7 +7,7 @@ export default new Vuex.Store({
   state: {
     drawer: false,
     showFutureTraining: false,
-    isCompact: false,
+    isCompact: true,
     items: [
       {
         text: "Home",
@@ -73,49 +73,49 @@ export default new Vuex.Store({
     adminDrawer: true,
     adminLinks: [
       {
-        text: 'Home',
-        to: '/admin/dashboard/home',
-        icon: 'mdi-home',
+        text: "Home",
+        to: "/admin/dashboard/home",
+        icon: "mdi-home",
         meta: {
           showToolbar: false,
           showBottomNav: true
-        },
+        }
       },
       {
-        text: 'Events',
-        to: '/admin/dashboard/events',
-        icon: 'mdi-assistant',
+        text: "Events",
+        to: "/admin/dashboard/events",
+        icon: "mdi-assistant",
         meta: {
           showToolbar: false,
           showBottomNav: true
-        },
+        }
       },
       {
-        text: 'Team',
-        to: '/admin/dashboard/team',
-        icon: 'mdi-account-group',
+        text: "Team",
+        to: "/admin/dashboard/team",
+        icon: "mdi-account-group",
         meta: {
           showToolbar: false,
           showBottomNav: true
-        },
+        }
       },
       {
-        text: 'Speaker',
-        to: '/admin/dashboard/speaker',
-        icon: 'mdi-account-switch',
+        text: "Speaker",
+        to: "/admin/dashboard/speaker",
+        icon: "mdi-account-switch",
         meta: {
           showToolbar: false,
           showBottomNav: true
-        },
+        }
       }
     ]
   },
   getters: {
-    links: (state) => {
-      return state.items
+    links: state => {
+      return state.items;
     },
-    AdminLinks: (state) => {
-      return state.adminLinks
+    AdminLinks: state => {
+      return state.adminLinks;
     },
     isCompactGetter: state => {
       return state.isCompact;