✨ Adds a news headlines widget

docs/widgets.md

@@ -17,6 +17,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Exchange Rates](#exchange-rates)
   - [Stock Price History](#stock-price-history)
   - [Joke of the Day](#joke)
+  - [News Headlines](#news-headlines)
   - [Flight Data](#flight-data)
   - [NASA APOD](#astronomy-picture-of-the-day)
   - [GitHub Trending](#github-trending)
@@ -413,6 +414,34 @@ Renders a programming or generic joke. Data is fetched from the [JokesAPI](https
 
 ---
 
+### News Headlines
+
+Displays the latest news, click to read full article. Date is fetched from various news sources using [Currents API](https://currentsapi.services/en)
+
+<p align="center"><img width="380" src="https://i.ibb.co/6NDWW0z/news-headlines.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`apiKey`** | `string` |  Required | Your API key for CurrentsAPI. This is free, and you can [get one here](https://currentsapi.services/en/register)
+**`country`** | `string` | _Optional_ | Fetch news only from a certain country or region. Specified as a country code, e.g. `GB` or `US`. See [here](https://api.currentsapi.services/v1/available/regions) for a list of supported regions
+**`category`** | `string` | _Optional_ | Only return news from within a given category, e.g. `sports`, `programming`, `world`, `science`. The [following categories](https://api.currentsapi.services/v1/available/categories) are supported
+**`lang`** | `string` |  _Optional_ | Specify the language for returned articles as a 2-digit ISO code (limited article support). The [following languages](https://api.currentsapi.services/v1/available/languages) are supported, defaults to `en`
+**`count`** | `number` |  _Optional_ | Limit the number of results. Can be between `1` and `200`, defaults to `10`
+**`keywords`** | `string` |  _Optional_ | Only return articles that contain an exact match within their title or description
+
+##### Example 
+
+```yaml
+- type: news-headlines
+    options:
+      apiKey: xxxxxxx
+      category: world
+```
+
+---
+
 ### Flight Data
 
 Displays airport departure and arrival flights, using data from [AeroDataBox](https://www.aerodatabox.com/). Useful if you live near an airport and often wonder where the flight overhead is going to. Hover over a row for more flight data.

src/components/Widgets/NewsHeadlines.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="news-wrapper" v-if="news">
+  <div class="article" v-for="article in news" :key="article.id">
+    <a class="headline" :href="article.url">{{ article.title }}</a>
+    <div class="article-meta">
+      <span class="publisher">{{ article.author }}</span>
+      <span class="date">{{ article.published | date }}</span>
+    </div>
+    <p class="description">{{ article.description }}</p>
+    <img class="thumbnail" v-if="article.image" :src="article.image" />
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { convertTimestampToDate } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      news: null,
+    };
+  },
+  computed: {
+    apiKey() {
+      if (!this.options.apiKey) this.error('An API key is required, see docs for more info');
+      return this.options.apiKey;
+    },
+    country() {
+      return this.options.country ? `&country=${this.options.country}` : '';
+    },
+    category() {
+      return this.options.category ? `&category=${this.options.category}` : '';
+    },
+    lang() {
+      return this.options.lang ? `&language=${this.options.lang}` : '';
+    },
+    count() {
+      return this.options.count ? `&page_size=${this.options.count}` : '';
+    },
+    keywords() {
+      return this.options.keywords ? `&keywords=${this.options.keywords}` : '';
+    },
+    endpoint() {
+      return `${widgetApiEndpoints.news}?apiKey=${this.apiKey}`
+      + `${this.country}${this.category}${this.lang}${this.count}`;
+    },
+  },
+  filters: {
+    date(date) {
+      return convertTimestampToDate(date);
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          if (!response.data.news || response.data.news.length === 0) {
+            this.error('API didn\'t return any results for your query');
+          }
+          this.news = response.data.news;
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.news-wrapper {
+  .article {
+    padding-bottom: 1rem;
+    a.headline {
+      color: var(--widget-text-color);
+      display: inline-block;
+      font-weight: bold;
+      font-size: 1.2rem;
+      padding: 0.5rem 0;
+      text-decoration: none;
+      &:hover { text-decoration: underline; }
+    }
+    p.description {
+      color: var(--widget-text-color);
+    }
+    img.thumbnail {
+      width: 100%;
+      max-width: 24rem;
+      display: flex;
+      margin: 0 auto;
+      border-radius: var(--curve-factor);
+    }
+    .article-meta {
+      display: flex;
+      justify-content: space-between;
+      color: var(--widget-text-color);
+      opacity: var(--dimming-factor);
+      font-size: 0.8rem;
+    }
+    &:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -123,6 +123,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <NewsHeadlines
+        v-else-if="widgetType === 'news-headlines'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <PiHoleStats
         v-else-if="widgetType === 'pi-hole-stats'"
         :options="widgetOptions"
@@ -237,6 +244,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
 import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
+import NewsHeadlines from '@/components/Widgets/NewsHeadlines.vue';
 import PiHoleStats from '@/components/Widgets/PiHoleStats.vue';
 import PiHoleTopQueries from '@/components/Widgets/PiHoleTopQueries.vue';
 import PiHoleTraffic from '@/components/Widgets/PiHoleTraffic.vue';
@@ -274,6 +282,7 @@ export default {
     NdCpuHistory,
     NdLoadHistory,
     NdRamHistory,
+    NewsHeadlines,
     PiHoleStats,
     PiHoleTopQueries,
     PiHoleTraffic,

src/utils/defaults.js

@@ -223,6 +223,7 @@ module.exports = {
     readMeStats: 'https://github-readme-stats.vercel.app/api',
     githubTrending: 'https://gh-trending-repos.herokuapp.com/',
     astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
+    news: 'https://api.currentsapi.services/v1/latest-news',
   },
   /* URLs for web search engines */
   searchEngineUrls: {