Merge pull request #331 from mitre/improvements

Some Improvements
mitre · Nov 20, 2023 · 6a0192f · 6a0192f
2 parents 7a18374 + fca7f22
commit 6a0192f
Show file tree

Hide file tree

Showing 16 changed files with 1,393 additions and 1,265 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ This repository contains the frontend source code for the upcoming new https://s
 - [Nuxt 3](https://v3.nuxtjs.org)
 - [Vue 3](https://vuejs.org/guide/introduction.html)
 - [Tailwind CSS v3](https://tailwindcss.com/docs/configuration)
-- [Heroicons](https://github.com/tailwindlabs/heroicons#vue) - beautiful hand-crafted SVG icons, by the makers of Tailwind CSS
+- [Lucide](https://lucide.dev/)
 - [Vite](https://vitejs.dev/guide/)
 - [Headless UI](https://headlessui.dev/vue/menu) - unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS
 - [prettier-plugin-tailwindcss](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) - Automatic Class Sorting with Prettier

diff --git a/components/ConsentBanner.vue b/components/ConsentBanner.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-if="open"
+    class="fixed bottom-0 left-0 w-full h-[8%] z-50 bg-neutral-3 border-accent border-t-4"
+  >
+    <div class="flex flex-row items-center justify-evenly m-5">
+      <span class="font-bold text-xl"
+        >This website uses cookies to ensure you get the best experience on our
+        website.
+        <a href="#" class="underline text-nav-active"> Learn More</a></span
+      >
+      <div class="space-x-4">
+        <button
+          class="rounded-lg bg-button-accent p-2 text-button-text font-bold text-xl"
+          @click="
+            () => {
+              grantConsent();
+              open = false;
+            }
+          "
+        >
+          Accept Tracking
+        </button>
+        <button
+          class="rounded-lg bg-red-500 p-2 text-button-text font-bold text-xl"
+          @click="
+            () => {
+              revokeConsent();
+              open = false;
+            }
+          "
+        >
+          Decline Tracking
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const open = ref(true);
+const {gtag, grantConsent, revokeConsent} = useGtag();
+</script>
diff --git a/components/Header.vue b/components/Header.vue
@@ -31,7 +31,7 @@
               class="inline-flex items-center justify-center rounded-md p-2 text-nav-base hover:bg-nav-active focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent"
             >
               <span class="sr-only">Open menu</span>
-              <DotsVerticalIcon class="h-6 w-6" aria-hidden="true" />
+              <MoreVertical class="h-6 w-6" aria-hidden="true" />
             </PopoverButton>
           </div>
 
@@ -81,9 +81,9 @@
             </div>
             <div class="rounded-lg p-2.5 hover:bg-neutral-2">
               <div class="relative flex items-center text-foreground">
-                <SunIcon :class="selected === 'Light' ? 'h-6 w-6' : 'hidden'" />
-                <MoonIcon :class="selected === 'Dark' ? 'h-6 w-6' : 'hidden'" />
-                <DesktopComputerIcon
+                <Sun :class="selected === 'Light' ? 'h-6 w-6' : 'hidden'" />
+                <Moon :class="selected === 'Dark' ? 'h-6 w-6' : 'hidden'" />
+                <Monitor
                   :class="selected === 'System' ? 'h-6 w-6' : 'hidden'"
                 />
                 <label for="theme-selector" class="sr-only">
@@ -130,7 +130,7 @@
                       class="my-2 inline-flex items-center justify-center rounded-md text-nav-base focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent"
                     >
                       <span class="sr-only">Close menu</span>
-                      <XIcon class="h-6 w-6" aria-hidden="true" />
+                      <X class="h-6 w-6" aria-hidden="true" />
                     </PopoverButton>
                   </div>
                 </div>
@@ -159,7 +159,7 @@
                             name: 'Getting Started',
                             description: 'Getting started with MITRE SAF©.',
                             href: '/getting-started',
-                            icon: PresentationChartBarIcon
+                            icon: FileBarChart2
                           }
                         ]"
                       />
@@ -175,17 +175,13 @@
                 <div
                   class="relative flex items-center rounded-lg bg-button-accent p-2 font-semibold text-button-text shadow-sm"
                 >
-                  <SunIcon
-                    :class="selected === 'Light' ? 'h-6 w-6' : 'hidden'"
-                  />
-                  <MoonIcon
-                    :class="selected === 'Dark' ? 'h-6 w-6' : 'hidden'"
-                  />
-                  <DesktopComputerIcon
+                  <Sun :class="selected === 'Light' ? 'h-6 w-6' : 'hidden'" />
+                  <Moon :class="selected === 'Dark' ? 'h-6 w-6' : 'hidden'" />
+                  <Monitor
                     :class="selected === 'System' ? 'h-6 w-6' : 'hidden'"
                   />
                   <div class="ml-2">{{ selected }}</div>
-                  <ChevronDownIcon class="h-6 w-5" />
+                  <ChevronDown class="h-6 w-5" />
                   <label for="mobile-theme-selector" class="sr-only">
                     <span>MITRE SAF <sup>©</sup> Theme Selector</span>
                   </label>
@@ -221,18 +217,22 @@ import {
   PopoverOverlay
 } from '@headlessui/vue';
 import {ref} from 'vue';
+
 import {
-  QuestionMarkCircleIcon,
-  XIcon,
-  DotsVerticalIcon,
-  UserGroupIcon,
-  DesktopComputerIcon,
-  MoonIcon,
-  SunIcon,
-  ChevronDownIcon,
-  PresentationChartBarIcon
-} from '@heroicons/vue/outline';
-import {AcademicCapIcon, BookOpenIcon, RssIcon} from '@heroicons/vue/solid';
+  Sun,
+  Moon,
+  Monitor,
+  ChevronDown,
+  X,
+  GraduationCap,
+  BookOpen,
+  Rss,
+  HelpCircle,
+  Bug,
+  MoreVertical,
+  FileBarChart2,
+  Users
+} from 'lucide-vue-next';
 
 import PlanIcon from '@/assets/icons/PlanIcon.vue';
 import HardenIcon from '@/assets/icons/HardenIcon.vue';
@@ -243,7 +243,6 @@ import NormalizeIcon from '@/assets/icons/NormalizeIcon.vue';
 import VisualizeIcon from '@/assets/icons/VisualizeIcon.vue';
 import HeimdallLogo from '@/assets/icons/HeimdallLogo.vue';
 import SafShieldLogo from '@/assets/icons/SafShieldLogo.vue';
-import {VueElement} from 'vue';
 
 /*   Data   */
 const selected = ref('System');
@@ -254,34 +253,39 @@ const framework = [
     description:
       'Choose, tailor, and create security configuration guidance appropriate for your mission.',
     href: '/framework/plan',
-    icon: PlanIcon
+    icon: PlanIcon,
+    external: false
   },
   {
     name: 'Harden',
     description: 'Take action to configure software for security.',
     href: '/framework/harden',
-    icon: HardenIcon
+    icon: HardenIcon,
+    external: false
   },
   {
     name: 'Validate',
     description:
       'Generate detailed security testing results through automated tests and manual attestation.',
     href: '/framework/validate',
-    icon: ValidateIcon
+    icon: ValidateIcon,
+    external: false
   },
   {
     name: 'Normalize',
     description:
       'Convert security results from all your security tools into a common data format.',
     href: '/framework/normalize',
-    icon: NormalizeIcon
+    icon: NormalizeIcon,
+    external: false
   },
   {
     name: 'Visualize',
     description:
       'View comprehensive security status, identify security defects, and manage remediation.',
     href: '/framework/visualize',
-    icon: VisualizeIcon
+    icon: VisualizeIcon,
+    external: false
   }
 ];
 
@@ -291,45 +295,52 @@ const libraries = [
     description:
       'Implement security baselines using our Ansible, Chef, and Terraform content.',
     href: '/libs/harden',
-    icon: HardenLibIcon
+    icon: HardenLibIcon,
+    external: false
   },
   {
     name: 'Validate',
     description:
       'Generate detailed security testing results through automated tests and manual attestation.',
     href: '/libs/validate',
-    icon: ValidationLibIcon
+    icon: ValidationLibIcon,
+    external: false
   },
   {
     name: 'OHDF Converters',
     description: 'Convert your security data to, or from, normalized OHDF.',
     href: '/libs/ohdf-converters',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'TS InSpec Objects',
     description:
       'Manipulate InSpec profiles programmatically using Typescript.',
     href: '/libs/ts-inspec-objects',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'eMASS Client',
     description: 'Interact with eMASS via API.',
     href: '/libs/emass-client',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'InSpecJS',
     description: 'Deep dive into OHDF files.',
     href: '/libs/inspecjs',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'STIG XCCDF XML Library',
     description: 'Get benchmark files.',
     href: '/libs/stig-xccdf-xml-library',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   }
 ];
 
@@ -338,25 +349,29 @@ const applications = [
     name: 'Heimdall©',
     description: 'Security Data Visualization App',
     href: '/apps/heimdall',
-    icon: HeimdallLogo
+    icon: HeimdallLogo,
+    external: false
   },
   {
     name: 'Vulcan©',
     description: 'Security Guidance Authorship App',
     href: '/apps/vulcan',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'SAF CLI',
     description: 'Support utility for security automation',
     href: '/apps/saf-cli',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   },
   {
     name: 'eMASSer',
     description: 'Automate interactions with eMASS',
     href: '/apps/emasser',
-    icon: SafShieldLogo
+    icon: SafShieldLogo,
+    external: false
   }
 ];
 
@@ -365,13 +380,15 @@ const navigation = [
     name: 'Docs',
     description: 'Documentation of MITRE SAF© tools.',
     href: '/docs',
-    icon: BookOpenIcon
+    icon: BookOpen,
+    external: false
   },
   {
     name: 'Blog',
     description: 'Learn more.',
     href: '/blog',
-    icon: RssIcon
+    icon: Rss,
+    external: false
   }
 ];
 const resources = ref([
@@ -380,20 +397,31 @@ const resources = ref([
     description:
       'Get answers to commonly asked questions and view our contact information.',
     href: '/faq',
-    icon: QuestionMarkCircleIcon
+    icon: HelpCircle,
+    external: false
   },
   {
     name: 'Training',
     description:
       'Learn how to maximize our platform to get the most out of it.',
     href: '/training',
-    icon: AcademicCapIcon
+    icon: GraduationCap,
+    external: false
   },
   {
     name: 'Admin Login',
     description: 'Update and mantain content as an admin.',
     href: 'https://saf-site-backend.herokuapp.com/admin/',
-    icon: UserGroupIcon
+    icon: Users,
+    external: true
+  },
+  {
+    name: 'Report Issues & Bugs',
+    description:
+      "Encounter a problem on our website? Help us improve by reporting any issues or bugs you've found using GitHub Issues.",
+    href: 'https://github.com/mitre/saf-site-frontend/issues/new?assignees=&labels=&projects=&template=bug-report.md&title=',
+    icon: Bug,
+    external: true
   }
 ]);
 

diff --git a/components/ReadingPage.vue b/components/ReadingPage.vue
@@ -8,7 +8,7 @@
         :to="goBackLink"
         class="inline-flex items-center gap-x-2 rounded-md bg-button-accent px-3.5 py-2.5 font-bold text-button-text shadow-sm hover:opacity-80 focus-visible:outline focus-visible:outline-2"
       >
-        <ChevronLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
+        <ChevronLeft class="-ml-0.5 h-5 w-5" aria-hidden="true" />
         Back
       </NuxtLink>
       <div class="relative px-4">
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import {ChevronLeftIcon} from '@heroicons/vue/solid';
+import {ChevronLeft} from 'lucide-vue-next';
 
 /*   Data   */
 const props = defineProps({

diff --git a/components/documentation/CommandPalette.vue b/components/documentation/CommandPalette.vue
@@ -39,7 +39,7 @@
           >
             <Combobox>
               <div class="relative">
-                <SearchIcon
+                <Search
                   class="pointer-events-none absolute left-4 top-3.5 h-5 w-5"
                   aria-hidden="true"
                 />
@@ -100,7 +100,7 @@
                 v-if="query !== '' && Object.keys(filteredItems).length === 0"
                 class="px-6 py-14 text-center sm:px-14"
               >
-                <ExclamationIcon class="mx-auto h-6 w-6" />
+                <AlertTriangle class="mx-auto h-6 w-6" />
                 <p class="mt-4 font-semibold">No results found</p>
                 <p class="mt-2 text-muted">
                   No results found for this search term. Please try again.
@@ -116,7 +116,7 @@
 
 <script setup lang="ts">
 import {computed, ref, onMounted, nextTick} from 'vue';
-import {SearchIcon, ExclamationIcon} from '@heroicons/vue/solid';
+import {Search, AlertTriangle} from 'lucide-vue-next';
 import {
   Combobox,
   ComboboxInput,