✨ Creates a joke-fetching widget

docs/widgets.md

@@ -261,6 +261,32 @@ Shows recent price history for a given publicly-traded stock or share
     apiKey: PGUWSWD6CZTXMT8N
 ```
 
+### Joke
+
+Renders a programming or generic joke. Data is fetched from the [JokesAPI](https://github.com/Sv443/JokeAPI) by @Sv443
+
+<p align="center"><img width="400" src="https://i.ibb.co/sQJGkyR/joke.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`category`** | `string` |  _Optional_ | Set the category of jokes to return. Use a string to specify a single category, or an array to pass in multiple options. Available options are: `all`, `programming`, `pun`, `dark`, `spooky`, `christmas` and `misc`. An up-to-date list of supported categories can be found [here](https://v2.jokeapi.dev/categories). Defaults to `all`
+**`safeMode`** | `boolean` | _Optional_ | Set to `true`, to prevent the fetching of any NSFW jokes. Defaults to `false`
+**`language`** | `string` |  _Optional_ | Specify the language for returned jokes. The following languages are supported: `en`, `cs`, `de`, `es`, `fr` and `pt`, and an up-to-date list of supported languages can be found [here](https://v2.jokeapi.dev/languages). By default, your system language will be used, if it's supported, otherwise English
+
+##### Example 
+
+```yaml
+- name: Joke
+  icon: fas fa-laugh
+  type: joke
+  options:
+    safeMode: true
+    language: en
+    category: Programming
+```
+
 ---
 
 ## Dynamic Widgets

src/components/Widgets/Jokes.vue

@@ -0,0 +1,92 @@
+<template>
+<div v-if="jokeType" class="joke-wrapper">
+  <p class="joke joke-line-1">{{ jokeLine1 }}</p>
+  <p class="joke joke-line-2" v-if="jokeLine2">{{ jokeLine2 }}</p>
+</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 {
+      jokeType: null,
+      jokeLine1: null,
+      jokeLine2: null,
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* Language code to fetch jokes for */
+    language() {
+      const supportedLanguages = ['en', 'cs', 'de', 'es', 'fr', 'pt'];
+      const usersChoice = this.options.language;
+      if (usersChoice && supportedLanguages.includes(usersChoice)) return usersChoice;
+      const localLanguage = this.$store.getters.appConfig.lang;
+      if (localLanguage && supportedLanguages.includes(localLanguage)) return localLanguage;
+      return 'en';
+    },
+    /* Should enable safe mode, to disallow NSFW jokes */
+    safeMode() {
+      return !!this.options.safeMode;
+    },
+    /* Format the users preferred category  */
+    category() {
+      let usersChoice = this.options.category;
+      if (!usersChoice) return 'any';
+      if (Array.isArray(usersChoice)) usersChoice = usersChoice.join();
+      const categories = ['any', 'misc', 'programming', 'dark', 'pun', 'spooky', 'christmas'];
+      if (categories.some((cat) => usersChoice.toLowerCase().includes(cat))) return usersChoice;
+      return 'any';
+    },
+    /* Combine data parameters for the API endpoint */
+    endpoint() {
+      return `${widgetApiEndpoints.jokes}${this.category}`
+      + `?lang=${this.language}${this.safeMode ? '&safe-mode' : ''}`;
+    },
+  },
+  methods: {
+    /* Make GET request to Jokes API endpoint */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          if (response.data.error) {
+            ErrorHandler('No matching jokes returned', response.data.additionalInfo);
+          }
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          ErrorHandler('Unable to fetch any jokes', dataFetchError);
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      this.jokeType = data.type;
+      if (this.jokeType === 'twopart') {
+        this.jokeLine1 = data.setup;
+        this.jokeLine2 = data.delivery;
+      } else if (this.jokeType === 'single') {
+        this.jokeLine1 = data.joke;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.joke-wrapper {
+  p.joke {
+    color: var(--widget-text-color);
+    font-size: 1.2rem;
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -19,6 +19,7 @@
       <XkcdComic v-else-if="widgetType === 'xkcd-comic'" :options="widgetOptions" />
       <ExchangeRates v-else-if="widgetType === 'exchange-rates'" :options="widgetOptions" />
       <StockPriceChart v-else-if="widgetType === 'stock-price-chart'" :options="widgetOptions" />
+      <Jokes v-else-if="widgetType === 'joke'" :options="widgetOptions" />
     </Collapsable>
   </div>
 </template>
@@ -33,6 +34,7 @@ import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
 import XkcdComic from '@/components/Widgets/XkcdComic.vue';
 import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
 import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
+import Jokes from '@/components/Widgets/Jokes.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 
 export default {
@@ -48,6 +50,7 @@ export default {
     XkcdComic,
     ExchangeRates,
     StockPriceChart,
+    Jokes,
   },
   props: {
     widget: Object,

src/utils/defaults.js

@@ -213,6 +213,7 @@ module.exports = {
     xkcdComic: 'https://xkcd.vercel.app/',
     exchangeRates: 'https://v6.exchangerate-api.com/v6/',
     stockPriceChart: 'https://www.alphavantage.co/query',
+    jokes: 'https://v2.jokeapi.dev/joke/',
   },
   /* URLs for web search engines */
   searchEngineUrls: {