feat: display API errors

content/.vuepress/client.ts

@@ -6,6 +6,7 @@ import GithubRepository from './components/GitHub/GithubRepository.vue';
 import ApiLoader from './components/ApiLoader.vue';
 import Loader from './components/Loader.vue';
 import Cache from './components/Cache.vue';
+import Error from './components/Error.vue';
 import Icon from './components/Icon.vue';
 
 export default defineClientConfig({
@@ -17,6 +18,7 @@ export default defineClientConfig({
     app.component('ApiLoader', ApiLoader);
     app.component('Loader', Loader);
     app.component('Cache', Cache);
+    app.component('Error', Error);
     app.component('Icon', Icon);
   },
   setup() {},

content/.vuepress/components/ApiLoader.vue

@@ -8,15 +8,16 @@
   <slot v-if="loading" name="loader">
     <Loader />
   </slot>
-  <slot v-else-if="error" name="error"></slot>
-  <slot v-else>
-    {{ error }}
+  <slot v-else-if="error" name="error">
+    <Error :url="props.url" />
   </slot>
+  <slot v-else> </slot>
 </template>
 
 <script setup lang="ts">
 import Cache from './Cache.vue';
 import Loader from './Loader.vue';
+import Error from './Error.vue';
 
 import { Ref, ref } from 'vue';
 import { Observable, catchError, switchMap, throwError } from 'rxjs';
@@ -42,9 +43,9 @@ const loading: Ref<boolean> = ref(true);
 const fetchData = (): Observable<any> => {
   return fromFetch(props.url).pipe(
     switchMap((response: Response) => response.json()),
-    catchError((error: Error) => {
-      console.error(error);
-      return throwError(() => new Error(error.message));
+    catchError((errorResponse: Error) => {
+      error.value = errorResponse;
+      return Error;
     })
   );
 };
@@ -62,5 +63,3 @@ const processCachedData = (data: Observable<any>) => {
   });
 };
 </script>
-
-<style lang="less"></style>

content/.vuepress/components/Error.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="error rounded-corners card-width">
+    <p>API call to {{ props.url }} failed</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  url: {
+    required: true,
+    type: String,
+  },
+});
+</script>
+
+<style lang="less">
+@import 'node_modules/nord/src/lesscss/nord.less';
+@import '../styles/classes.less';
+
+.error {
+  display: inline-block;
+  padding: 2rem;
+  text-align: center;
+  background: @nord11;
+}
+</style>

content/.vuepress/components/GitHub/GithubRepository.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="githubRepo flex-col flex-space-between gap-1rem rounded-corners">
+  <div
+    class="githubRepo flex-col flex-space-between gap-1rem rounded-corners card-width"
+  >
     <ApiLoader
       :cache-name="repoName()"
       :url="fetchUrl"
@@ -51,7 +53,6 @@ const repository: Ref<GithubRepo> = ref(null);
 @import '../../styles/classes.less';
 
 .githubRepo {
-  max-width: 35rem;
   padding: 2rem;
   background-color: @nord4;
   align-self: auto;

content/.vuepress/styles/classes.less

@@ -50,3 +50,7 @@ each(@flex-justifications, {
 .center {
   margin: 0 auto;
 }
+
+.card-width {
+  max-width: 35rem;
+}