Add Remote Data Fetching

This commit adds in support for fetching data from an external source,
namely our example application[1], which provides additional data for
artists. The application now renders the data from arches first, then
using an external ID makes a request to the external server and renders
it in the artist resource view.

[1] https://github.com/hminsky2002/archesAppRemoteServer

Issue #247 Demonstrate referring to external service from Arches in WAC
demo app

Author: hminsky2002

front-end/src/components/ArtistNote.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="validateRemoteServerResponseSchema(remoteServerResponse)" class="artist-note">
+    <p>
+      {{ remoteServerResponse.note }}
+      <a :href="remoteServerResponse.url" target="_blank" rel="noopener noreferrer">{{
+        remoteServerResponse.url
+      }}</a>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Artist, RemoteServerResponse } from '@/types';
+import { ref, onMounted } from 'vue';
+import { validateRemoteServerResponseSchema } from '@/types';
+
+const props = defineProps<{
+  artist: Artist;
+}>();
+
+const remoteServerResponse = ref<RemoteServerResponse | undefined>();
+
+async function fetchRemoteServerResponse() {
+  const url = new URL(
+    `${import.meta.env.VITE_REMOTE_SERVER_URL}/artist/${props.artist.remoteServerId}`
+  );
+  const response = await fetch(url.toString()).then((res) => res.json());
+  remoteServerResponse.value = response;
+}
+
+onMounted(async () => {
+  await fetchRemoteServerResponse();
+});
+</script>
+<style scoped>
+.artist-note {
+  color: var(--wac--color--gray);
+  padding-top: var(--wac--accessible-spacing--1x);
+  padding-bottom: var(--wac--accessible-spacing--1x);
+}
+</style>

front-end/src/components/ResourcePanel.vue

@@ -12,15 +12,17 @@
         />
         <h1>{{ props.resource.displayname ?? '' }}</h1>
       </div>
-
       <RouterLink :to="'/'" class="resource-detail-back-button">
         <button type="button" class="back-button">
           <ArrowLeftIcon class="back-button-icon" />
           BACK
         </button>
       </RouterLink>
     </div>
-
+    <ArtistNote
+      v-if="validateArtistSchema(props.resource.resource)"
+      :artist="props.resource.resource"
+    />
     <ResourceDetail>
       <template #items>
         <ArtworkDetailItem
@@ -89,14 +91,15 @@ import type {
   ImageTileData,
   Resource
 } from '@/types';
-import { validateArtworkSchema, PanelResourceEnum } from '@/types';
+import { validateArtworkSchema, PanelResourceEnum, validateArtistSchema } from '@/types';
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
 import ResourceDetail from './ResourceDetail.vue';
 import ArtworkDetailItem from './ArtworkDetailItem.vue';
 import RelatedArtworkDetailItem from './RelatedArtworkDetailItem.vue';
 import MoreArtworksByArtist from './MoreArtworksByArtist.vue';
 import ArtworksIcon from './Icons/ArtworksIcon.vue';
 import ArtistsIcon from './Icons/ArtistsIcon.vue';
+import ArtistNote from './ArtistNote.vue';
 
 const props = defineProps<{
   resource: ApiResource;