Updates to credit logos component

src/components/CreditLogos.vue

@@ -1,29 +1,59 @@
 <template>
   <div id="logo-credits" :style="cssVars">
     <div id="icons-container">
-      <a href="https://www.cosmicds.cfa.harvard.edu/" target="_blank" rel="noopener noreferrer"
-        ><img alt="CosmicDS Logo" src="https://raw.githubusercontent.com/cosmicds/minids/main/assets/cosmicds_logo_for_dark_backgrounds.png"
-      /></a>
-      <a href="https://worldwidetelescope.org/home/" target="_blank" rel="noopener noreferrer"
-        ><img alt="WWT Logo" src="https://raw.githubusercontent.com/cosmicds/minids/main/assets/logo_wwt.png"
-      /></a>
-      <a href="https://science.nasa.gov/learners" target="_blank" rel="noopener noreferrer" class="pl-1"
-        ><img alt="SciAct Logo" src="https://raw.githubusercontent.com/cosmicds/minids/main/assets/logo_sciact.png"
-      /></a>
-      <a href="https://nasa.gov/" target="_blank" rel="noopener noreferrer" class="pl-1"
-        ><img alt="SciAct Logo" src="https://raw.githubusercontent.com/cosmicds/minids/main/assets/NASA_Partner_color_300_no_outline.png"
-      /></a>
+      <a
+        v-for="logo in logos"
+        v-bind:key="logo.href"
+        :href="logo.href"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          :alt="logo.alt"
+          :src="logo.src"
+        />
+      </a>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { CreditLogosProps } from "../types";
+import { CreditLogo, CreditLogosProps, DefaultCreditLogo } from "../types";
+
+const DEFAULT_LOGOS: Map<DefaultCreditLogo, CreditLogo> = new Map([
+  ["cosmicds", {
+    src: "https://raw.githubusercontent.com/cosmicds/minids/main/assets/cosmicds_logo_for_dark_backgrounds.png",
+    href: "https://www.cosmicds.cfa.harvard.edu/",
+    alt: "CosmicDS Logo",
+  }],
+  ["wwt", {
+    src: "https://raw.githubusercontent.com/cosmicds/minids/main/assets/logo_wwt.png",
+    href: "https://worldwidetelescope.org/home/",
+    alt: "WWT Logo",
+  }],
+  ["sciact", {
+    src: "https://raw.githubusercontent.com/cosmicds/minids/main/assets/logo_sciact.png",
+    href: "https://science.nasa.gov/learners",
+    alt: "SciAct Logo",
+  }],
+  ["nasa", {
+    src: "https://raw.githubusercontent.com/cosmicds/minids/main/assets/NASA_Partner_color_300_no_outline.png",
+    href: "https://nasa.gov/",
+    alt: "NASA Partner Logo"
+  }]
+]);
 
 const props = withDefaults(defineProps<CreditLogosProps>(), {
-  logoSize: "5vmin"
+  logoSize: "5vmin",
+  extraLogos: () => [],
+  defaultLogos: () => ["cosmicds", "wwt", "sciact", "nasa"],
+});
+
+const logos = computed<CreditLogo[]>(() => {
+  const defaultLogos = props.defaultLogos.map((logo: DefaultCreditLogo) => DEFAULT_LOGOS.get(logo)).filter((logo: CreditLogo | undefined) => logo != undefined) as CreditLogo[];
+  return defaultLogos.concat(props.extraLogos);
 });
 
 const cssVars = computed(() => {

src/types.ts

@@ -18,10 +18,27 @@ export interface FundingAcknowledgementProps {
 
 /* Credit logos */
 
+/** Interface describing a logo */
+export interface CreditLogo {
+  /** The URL for the logo image */
+  src: string;
+  /** The URL to open when the logo is clicked */
+  href: string;
+  /** Alt text to use for the logo. If none is given, the logo will have no alt text */
+  alt?: string;
+}
+
+/** A union type enumerating the default credit logos */
+export type DefaultCreditLogo = "cosmicds" | "wwt" | "sciact" | "nasa";
+
 /** Interface describing props for the credit logos component */
 export interface CreditLogosProps {
   /** What size to use for the logos. Should be a valid CSS size. */
   logoSize?: string;
+  /** Any extra logos that we want to use */
+  extraLogos?: CreditLogo[];
+  /** Which default logos to use. If not specified, use them all */
+  defaultLogos: DefaultCreditLogo[];
 }
 
 /* Gallery */