feat: Add Vulnerabilies CVE, CWE

src/lib/Collapsible.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   export let header: string;
   export let open: boolean = true;
+  export let index: string = "2";
+  export let class_: string = "";
   let visibility = open ? "block" : "none";
   let icon = "bx-chevron-down";
   const toggle = (e: Event) => {
@@ -17,9 +19,21 @@
 </script>
 
 <div>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div on:click={toggle}><h2><i class="bx {icon}" />{header}</h2></div>
+  {#if index == "2"}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click={toggle} class={class_}><h2><i class="bx {icon}" />{header}</h2></div>
+  {/if}
+  {#if index == "3"}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click={toggle} class={class_}><h3><i class="bx {icon}" />{header}</h3></div>
+  {/if}
+  {#if index == "4"}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click={toggle} class={class_}><h4><i class="bx {icon}" />{header}</h4></div>
+  {/if}
   <div style="display:{visibility}" class="body">
     <slot />
   </div>

src/lib/singleview/vulnerabilities/Vulnerabilities.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
   import { appStore } from "$lib/store";
+  import Vulnerability from "./Vulnerability.svelte";
+  $: vulnerabilities = $appStore.doc?.vulnerabilities;
 </script>
 
-<div />
+<div>
+  {#each vulnerabilities as vulnerability, index}
+    <Vulnerability {vulnerability} index={index + 1} />
+  {/each}
+</div>

src/lib/singleview/vulnerabilities/Vulnerability.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import Collapsible from "$lib/Collapsible.svelte";
+
+  export let vulnerability: any;
+  export let index: number = 1;
+  let header = `Vulnerability ${index}`;
+  $: if (vulnerability.cve) {
+    header = vulnerability.cve;
+  }
+</script>
+
+<div>
+  <Collapsible {header} class_="text-primary" index="3">
+    <div>
+      <dl>
+        {#if vulnerability.title}
+          <dt>Title</dt>
+          <dd>{vulnerability.title}</dd>
+        {/if}
+        {#if vulnerability.cwe}
+          <dt>CWE ID</dt>
+          <dd>{vulnerability.cwe.id}</dd>
+          <dt>CWE Name</dt>
+          <dd>{vulnerability.cwe.name}</dd>
+        {/if}
+        {#if vulnerability.discovery_date}
+          <dt>Discovery date</dt>
+          <dd>{vulnerability.discovery_date}</dd>
+        {/if}
+        {#if vulnerability.release_date}
+          <dt>Release date</dt>
+          <dd>{vulnerability.release_date}</dd>
+        {/if}
+      </dl>
+      {#if vulnerability.ids && Array.isArray(vulnerability.ids)}
+        <Collapsible header="IDs" index="4">
+          {#each vulnerability.ids as vulnerabilityID}
+            <dl>
+              <dt>Systemname</dt>
+              <dd>{vulnerabilityID.system_name}</dd>
+              <dt>Text</dt>
+              <dd>{vulnerabilityID.text}</dd>
+            </dl>
+          {/each}
+        </Collapsible>
+      {/if}
+      {#if vulnerability.notes && Array.isArray(vulnerability.notes)}
+        <Collapsible header="Notes" index="4">
+          {#each vulnerability.notes as note}
+            <dl>
+              <dt>Title</dt>
+              <dd>{note.title}</dd>
+              <dt>Category</dt>
+              <dd>{note.category}</dd>
+              <dt>Text</dt>
+              <dd>{note.text}</dd>
+            </dl>
+          {/each}
+        </Collapsible>
+      {/if}
+    </div>
+  </Collapsible>
+</div>
+
+<style>
+  dt {
+    font-size: large;
+    float: left;
+    clear: left;
+    width: 15%;
+  }
+  dd {
+    margin-bottom: 0.3em;
+  }
+</style>