Resources.vue

<template>
  <div class="resources">
    <PageHeader />
    <div class="container">
      <!-- First row of Resources Navigation Items -->
      <div class="row">
        <div
          v-for="mainLink in mainLinks"
          :key="mainLink.name"
          :data-cy="mainLink.selector"
          class="col-6 col-sm-6 col-md-4 col-lg-4"
        >
          <div
            class="py-4 resources-item"
            :class="{ 'resources-active': getClassState(mainLink.prop) }"
            @click="changeState(mainLink.prop)"
          >
            {{ mainLink.name }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="resources">
      <ResourcesLinks :links="this.resourcesLinks" />
    </div>
    <div v-if="bigBang">
      <ResourcesLinks :links="this.bigBangLinks" />
    </div>
    <div v-if="cnap">
      <ResourcesLinks :links="this.cnapLinks" />
    </div>
    <div v-if="cyber">
      <ResourcesLinks :links="this.cyberLinks" />
    </div>
    <div v-if="ironBank">
      <ResourcesLinks :links="this.ironBankLinks" />
    </div>
    <div v-if="partyBus">
      <ResourcesLinks :links="this.partyBusLinks" />
    </div>

    <div class="container">
      <div class="row mb-10">
        <div :class="$vuetify.breakpoint.xs ? 'col-12' : 'col-6'">
          <ResourcesCard
            :logo="ValkyrieLogo"
            header="ASK ME ANYTHING RECORDINGS AND PRESENTATIONS"
            button="Explore More"
            link="https://software.af.mil/dsop/documents/#ama"
            class="pt-2 pb-8"
          >
            <template v-slot:content>
              Check out hot topics and presentation slides from previous AMA's
              currently available on software.af.mil
            </template>
          </ResourcesCard>
        </div>
        <div :class="$vuetify.breakpoint.xs ? 'col-12' : 'col-6'">
          <ResourcesCard
            :logo="CSOLogo"
            header="SOFTWARE.AF.MIL devsecops training resources"
            button="Learn More"
            link="https://software.af.mil/training/"
            class="pt-2 pb-8"
          >
            <template v-slot:content>
              Self-learning videos for all levels covering Kubernetes to Service
              Mesh, literature recommendations, and more.
            </template>
          </ResourcesCard>
        </div>
      </div>
    </div>

    <Wave :bottom="false" class="mt-10">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
            <h2 class="mx-auto">HAVE MORE QUESTIONS ABOUT PLATFORM ONE?</h2>
            <p class="mx-auto">
              If you have P1 SSO access, click Get Answers to find most of your
              questions answered on the FAQ page. Click Contact Us for more
              specific inquiries.
            </p>
          </div>
        </div>
        <div class="row justify-content-center">
          <div :class="$vuetify.breakpoint.smAndDown ? 'text-center' : ''">
            <v-btn
              color="secondary"
              :class="
                $vuetify.breakpoint.smAndDown
                  ? 'my-3 my-md-6 mx-3'
                  : 'my-6 mr-6'
              "
              href="https://confluence.il2.dso.mil/cq/questions.action?spaceKey=P1"
              target="_blank"
              rel="noopener noreferrer"
              ><v-icon color="#202020" left>mdi-lock</v-icon>Get Answers
            </v-btn>
            <v-btn
              color="white"
              outlined
              :class="
                $vuetify.breakpoint.smAndDown
                  ? 'my-3 my-md-6 mx-3'
                  : 'my-6 mr-6'
              "
              href="https://login.dso.mil/register"
              target="_blank"
              rel="noopener noreferrer"
              >Request P1 SSO Access
            </v-btn>
            <v-btn
              color="primary"
              :class="
                $vuetify.breakpoint.smAndDown
                  ? 'my-3 my-md-6 mx-3'
                  : 'my-6 mr-6'
              "
              to="/contact-us"
              >Contact Us
            </v-btn>
          </div>
        </div>
      </div>
    </Wave>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader.vue";
import ResourcesLinks from "@/components/ResourcesLinks.vue";
import ResourcesCard from "@/components/Base/ResourcesCard.vue";
import ValkyrieLogo from "@/assets/images/resources-page/P1_Valkyrie_2.webp";
import CSOLogo from "@/assets/images/resources-page/cso-logo.webp";
import Wave from "@/components/Wave.vue";
import IBVSPipeline from "@/assets/images/iron-bank/IBVS_pipeline.webp";
import IBVSRegistry1Process from "@/assets/images/iron-bank/IBVS_registry1_process.webp";
import PBGraphicsProcess from "@/assets/images/party-bus/Party_Bus_Graphics_Process.webp";
import P1ToolChain from "@/assets/images/P1 - Tool Chain-2.webp";

export default {
  name: "ResourcesComponent",
  components: {
    PageHeader,
    ResourcesCard,
    ResourcesLinks,
    Wave,
  },
  methods: {
    changeState(state) {
      this.resources = false;
      this.bigBang = false;
      this.partyBus = false;
      this.ironBank = false;
      this.cnap = false;
      this.cyber = false;
      this[state] = true;
    },
    getClassState(prop) {
      return this[prop];
    },
  },

  data: () => {
    return {
      ValkyrieLogo,
      CSOLogo,
      bigBang: false,
      partyBus: false,
      cyber: false,
      ironBank: false,
      cnap: false,
      resources: true,
      mainLinks: [
        {
          name: "Platform One",
          prop: "resources",
          selector: "rsrc",
        },
        {
          name: "Iron Bank",
          prop: "ironBank",
          selector: "ib",
        },
        {
          name: "Big Bang",
          prop: "bigBang",
          selector: "bb",
        },
        {
          name: "Party Bus",
          prop: "partyBus",
          selector: "pb",
        },
        {
          name: "CNAP",
          prop: "cnap",
          selector: "cnap",
        },
        {
          name: "CYBER",
          prop: "cyber",
          selector: "cyber",
        },
      ],
      resourcesLinks: [
        {
          name: "DISA Container Guide",
          icon: "pdf",
          download: true,
          selector: "download",
          path: "https://dl.dod.cyber.mil/wp-content/uploads/devsecops/pdf/Final_DevSecOps_Enterprise_Container_Hardening_Guide_1.1.pdf",
        },
        {
          name: "DCCSR Repository",
          icon: "link",
          download: false,
          path: "https://repo1.dso.mil/",
        },
        {
          name: "DevSecOps/DAU Training",
          icon: "link",
          download: false,
          path: "https://software.af.mil/training/",
        },
        {
          name: "DevSecOps Reference Design",
          icon: "pdf",
          download: true,
          selector: "download",
          path: "https://software.af.mil/wp-content/uploads/2021/05/DoD-Enterprise-DevSecOps-Reference-Design-v2.0-CNCF-Kubernetes.pdf",
        },
        {
          name: "Memorandum Distribution",
          icon: "link",
          download: false,
          path: "https://software.af.mil/dsop/documents/",
        },
        {
          name: "P1 Tool Chain",
          icon: "link",
          download: false,
          path: P1ToolChain,
          // path: new URL(
          //   "../assets/images/P1 - Tool Chain-2.webp",
          //   import.meta.url
          // ).href,
        },
      ],
      bigBangLinks: [
        {
          name: "Licensing Expectations",
          icon: "link",
          download: false,
          path: "https://repo1.dso.mil/platform-one/big-bang/bigbang/-/blob/master/docs/understanding_bigbang/licensing_expectations.md",
        },
        {
          name: "Big Bang Quick Start Quide",
          path: "https://repo1.dso.mil/platform-one/big-bang/bigbang#getting-started",
          icon: "link",
          download: false,
        },
        {
          name: "Big Bang Release Notes",
          path: "https://repo1.dso.mil/platform-one/big-bang/bigbang/-/releases",
          icon: "link",
          download: false,
        },
        {
          name: "Deployment Scenarios",
          path: "https://repo1.dso.mil/platform-one/big-bang/bigbang/-/tree/master/docs/guides/deployment_scenarios",
          icon: "link",
          download: false,
        },
      ],
      cnapLinks: [
        {
          name: "CNAP Reference Design",
          path: "https://software.af.mil/wp-content/uploads/2021/08/CNAP-RefDesign_ver-1.0-Approved-for-Public-Release.pdf",
          icon: "pdf",
          download: true,
          selector: "download",
        },
      ],
      cyberLinks: [
        {
          name: "DevSecOps & Agile Savings",
          path: "/products/cybersecurity/DSOPTimeline",
          icon: "link",
          download: false,
        },
        {
          name: "DORA DevOps Report",
          path: "https://services.google.com/fh/files/misc/state-of-devops-2019.pdf",
          icon: "pdf",
          download: true,
          selector: "download",
        },
        {
          name: "CtF Requirements",
          path: "/products/cybersecurity/ctf",
          icon: "link",
          download: false,
        },
        {
          name: "cATO Process",
          path: "/products/cybersecurity/cato",
          icon: "link",
          download: false,
        },
      ],
      ironBankLinks: [
        {
          name: "Iron Bank Pipeline",
          icon: "link",
          download: false,
          path: IBVSPipeline,
        },
        {
          name: "Onboarding Guide",
          icon: "link",
          download: false,
          path: "https://repo1.dso.mil/dsop/dccscr",
        },
        {
          name: "Onboarding Checklist",
          icon: "pdf",
          download: true,
          selector: "download",
          path: "https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/docs/Iron%20Bank%20Container%20Hardening%20Checklist.pdf?inline=false",
        },
        {
          name: "Onboarding Presentation",
          icon: "pdf",
          download: true,
          selector: "download",
          path: "https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/docs/Iron%20Bank%20Onboarding%20Presentation.pdf?inline=false",
        },
        {
          name: "Pulling Containers",
          icon: "link",
          download: false,
          path: IBVSRegistry1Process,
        },
      ],
      partyBusLinks: [
        {
          name: "CI/CD cATO Services",
          icon: "link",
          download: false,
          path: "/products/party-bus/service-catalog",
        },
        {
          name: "PB Process",
          icon: "link",
          download: false,
          path: PBGraphicsProcess,
        },
        {
          name: "PB 3-Day Workshop",
          icon: "link",
          download: false,
          path: "/products/party-bus/onboarding",
        },
        {
          name: "Self-Directed Onboarding",
          icon: "link",
          download: false,
          path: "https://learn-2.galvanize.com/cohorts/fbc9761c8f97c752ea",
        },
        {
          name: "Project Manager Workshop",
          icon: "link",
          download: false,
          path: "/products/party-bus/onboarding",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.resources-page .card-padding {
  margin-top: 8rem;
}

.resources-page .doc-item {
  border-radius: 5px 5px 5px 5px;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  font-size: 0.9rem;
  color: white;
  font-weight: 600;
  background-color: #002743;
}

.resources-page .resources-top-row-padding {
  padding-top: 5rem;
}

.resources-page .resources-padding {
  padding-top: 0.44rem;
}

.resources-page .resources-item {
  border-radius: 4px 4px 0px 0px;
  font-size: 0.9rem;
  background-color: #e9e9e9;
  cursor: pointer;
}

.resources-page .resources-active {
  font-weight: 600;
  background-color: #bfca00;
  border-bottom: 0.15rem solid black;
}

.resources-page .v-btn {
  text-transform: none;
}

@media only screen and (max-width: 794px) {
  .v-card .text-left {
    font-size: 0.95rem;
  }
}

@media only screen and (max-width: 600px) {
  .resources-page .wisp-bg {
    background-image: none !important;
  }
}
</style>