✨ Adds XKCD comic widget

docs/widgets.md

@@ -140,6 +140,26 @@ Shows recent price history for a given crypto asset, using price data fetched fr
     numDays: 7
 ```
 
+### XKCD Comics
+
+Have a laugh with the daily comic from [XKCD](https://xkcd.com/). A classic webcomic website covering everything from Linux, math, romance, science and language.
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`comic`** | `string | number` |  _Optional_ | Choose which comic to display. Set to either `random`, `latest` or the series number of a specific comic, like `627`. Defaults to `latest`
+
+##### Example
+
+```yaml
+- name: XKCD of the Day
+  icon: fas fa-laugh
+  type: xkcd-comic
+  options:
+    comic: latest
+```
+
 ### TFL Status
 
 Shows real-time tube status of the London Underground. All options are optional.

src/components/Widgets/WidgetBase.vue

@@ -16,6 +16,7 @@
       <TflStatus v-else-if="widgetType === 'tfl-status'" :options="widgetOptions" />
       <CryptoPriceChart v-else-if="widgetType === 'crypto-price-chart'" :options="widgetOptions" />
       <CryptoWatchList v-else-if="widgetType === 'crypto-watch-list'" :options="widgetOptions" />
+      <XkcdComic v-else-if="widgetType === 'xkcd-comic'" :options="widgetOptions" />
     </Collapsable>
   </div>
 </template>
@@ -27,6 +28,7 @@ import WeatherForecast from '@/components/Widgets/WeatherForecast.vue';
 import TflStatus from '@/components/Widgets/TflStatus.vue';
 import CryptoPriceChart from '@/components/Widgets/CryptoPriceChart.vue';
 import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
+import XkcdComic from '@/components/Widgets/XkcdComic.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 
 export default {
@@ -39,6 +41,7 @@ export default {
     TflStatus,
     CryptoPriceChart,
     CryptoWatchList,
+    XkcdComic,
   },
   props: {
     widget: Object,

src/components/Widgets/XkcdComic.vue

@@ -0,0 +1,82 @@
+<template>
+<div class="xkcd-wrapper">
+  <h3 class="xkcd-title">{{ title }}</h3>
+  <a :href="`https://xkcd.com/${comicNum}/`">
+    <img :src="image" :alt="alt" class="xkcd-comic" />
+  </a>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ErrorHandler from '@/utils/ErrorHandler';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      image: null,
+      title: '',
+      alt: '',
+      comicNum: '',
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* Let user select which comic to display: random, latest or a specific number */
+    comicNumber() {
+      const usersChoice = this.options.comic;
+      if (!usersChoice) {
+        return 'latest';
+      } else if (usersChoice === 'random') {
+        return Math.abs(Math.floor(Math.random() * (1 - 2553)));
+      } else if (!Number.isNaN(usersChoice)) {
+        return usersChoice;
+      }
+      return 'latest';
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(`${widgetApiEndpoints.xkcdComic}?comic=${this.comicNumber}`)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          ErrorHandler('Unable to fetch data', dataFetchError);
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      this.image = data.img;
+      this.title = data.safe_title;
+      this.alt = data.alt;
+      this.comicNum = data.num;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.xkcd-wrapper {
+ .xkcd-title {
+    font-size: 1.2rem;
+    margin: 0.25rem auto;
+    color: var(--widget-text-color);
+  }
+  .xkcd-comic {
+    display: flex;
+    width: 100%;
+    max-width: 380px;
+    margin: 0.25rem auto;
+    border-radius: var(--curve-factor);
+  }
+}
+
+</style>

src/utils/defaults.js

@@ -210,6 +210,7 @@ module.exports = {
     tflStatus: 'https://api.tfl.gov.uk/line/mode/tube/status',
     cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
     cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
+    xkcdComic: 'https://xkcd.vercel.app/',
   },
   /* URLs for web search engines */
   searchEngineUrls: {