✨ Adds NASA APOD widget

src/components/Widgets/Apod.vue

@@ -0,0 +1,112 @@
+<template>
+<div class="apod-wrapper" v-if="image">
+  <a :href="link" class="title" target="__blank" title="View Article">
+    {{ title }}
+  </a>
+  <a :href="hdImage" title="View HD Image" class="picture" target="__blank">
+    <img :src="image" />
+  </a>
+  <p class="copyright">{{ copyright }}</p>
+  <p class="description">{{ truncatedDescription }}</p>
+  <p @click="toggleShowFull" class="expend-details-btn">
+    {{ showFullDesc ? 'Show Less' : ' Expand Details' }}
+  </p>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      title: null,
+      image: null,
+      hdImage: null,
+      link: null,
+      description: null,
+      copyright: null,
+      showFullDesc: false,
+    };
+  },
+  computed: {
+    truncatedDescription() {
+      return this.showFullDesc ? this.description : `${this.description.substring(0, 100)}...`;
+    },
+  },
+  methods: {
+    fetchData() {
+      axios.get(widgetApiEndpoints.astronomyPictureOfTheDay)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    processData(data) {
+      this.title = data.title;
+      this.image = data.url;
+      this.hdImage = data.hdurl;
+      this.link = data.apod_site;
+      this.description = data.description;
+      this.copyright = data.copyright;
+    },
+    toggleShowFull() {
+      this.showFullDesc = !this.showFullDesc;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.apod-wrapper {
+  a.title {
+    font-size: 1.5rem;
+    margin: 0.5rem 0;
+    color: var(--widget-text-color);
+    text-decoration: none;
+    &:hover { text-decoration: underline; }
+  }
+  a.picture img {
+    width: 100%;
+    margin: 0.5rem auto;
+    border-radius: var(--curve-factor);
+  }
+  p.copyright {
+    font-size: 0.8rem;
+    margin: 0.2rem 0;
+    opacity: var(--dimming-factor);
+    color: var(--widget-text-color);
+  }
+  p.description {
+    color: var(--widget-text-color);
+    font-size: 1rem;
+    margin: 0.5rem 0;
+  }
+  p.expend-details-btn {
+    cursor: pointer;
+    float: right;
+    margin: 0;
+    padding: 0.1rem 0.25rem;
+    border: 1px solid transparent;
+    color: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+    border-radius: var(--curve-factor);
+    &:hover {
+      border: 1px solid var(--widget-text-color);
+    }
+    &:focus, &:active {
+      background: var(--widget-text-color);
+      color: var(--widget-background-color);
+    }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -18,8 +18,15 @@
     </div>
     <!-- Widget -->
     <div v-else class="widget-wrap">
+      <Apod
+        v-if="widgetType === 'apod'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <Clock
-        v-if="widgetType === 'clock'"
+        v-else-if="widgetType === 'clock'"
         :options="widgetOptions"
         @loading="setLoaderState"
         @error="handleError"
@@ -194,6 +201,7 @@ import OpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import LoadingAnimation from '@/assets/interface-icons/loader.svg';
 
 // Import available widgets (add new widgets alphabetically)
+import Apod from '@/components/Widgets/Apod.vue';
 import Clock from '@/components/Widgets/Clock.vue';
 import CryptoPriceChart from '@/components/Widgets/CryptoPriceChart.vue';
 import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
@@ -227,6 +235,7 @@ export default {
     OpenIcon,
     LoadingAnimation,
     // Register widget components
+    Apod,
     Clock,
     CodeStats,
     CryptoPriceChart,

src/utils/defaults.js

@@ -222,6 +222,7 @@ module.exports = {
     publicIp: 'http://ip-api.com/json',
     readMeStats: 'https://github-readme-stats.vercel.app/api',
     githubTrending: 'https://gh-trending-repos.herokuapp.com/',
+    astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
   },
   /* URLs for web search engines */
   searchEngineUrls: {