TAT-125 create methodology page

[allisonrobbins]

• Build methodology page based off legacy website
• Integrate math equations into site using MathJax and Latex (able to be read by screen readers)
• Create graphs using CTID brand colors

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[mikecarenzo]

Just a few small requests, otherwise, it looks great! Thanks for fixing MathJax so the equations render immediately (instead of progressively after the initial page load).

At some point, it might be worth breaking each section of MethodologyDetails into its own component. This would really help make the component just a bit more manageable.

Then, in MethodologyPage, you could import these sections individually (like you ordinarily would). But, instead of referencing the components directly in the <template> you would include the name of each component to use in MethodologyList:

[
  {
    name: "Actionability",
    description: "The opportunity for a defender to detect or mitigate against each ATT&CK technique based on publicly available analytics and security controls",
    section: "ActionabilitySection"
  },
  {
    name: "Choke Point",
    description: "A specific technique where many other techniques converge or diverge, and eliminating that specific technique would cause disruption to an adversary",
    section: "ChokePointSection"
  },
  {
    name: "Prevalence",
    description: "The frequency of which an attacker uses a specific ATT&CK technique over a period of time",
    section: "PrevalenceSection"
  },
]

Then, in your template, you'd simply swap MethodologyDetails with a dynamic <component/>:

<MethodologyDetails :activeItemId="activeItemId" :methodologyList="methodologyList" />

to:

<component :is="methodologyList[activeItemId].section" />

If you want to keep passing the description of each section (from MethodologyList) to the component, you could define a description prop on each Section component and pass in the description like so:

<component :is="methodologyList[activeItemId].section" v-bind="{ description: methodologyList[activeItemId].description }" />

The benefit of this approach is that the current view and the available options are all dictated by MethodologyList. If you want to add, remove, or reorder sections, it's simply a matter of manipulating this one array.

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/

[github-actions]

This PR has been published to https://topattacktechniques.z13.web.core.windows.net/TAT-125-create-methodology-page/