mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-25 01:42:00 +03:00
✨ Adds a news headlines widget
This commit is contained in:
Alicia Sykes
parent
0b868af5bb
commit
8686a99be7
@ -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.
|
||||
|
||||
113
src/components/Widgets/NewsHeadlines.vue
Normal file
113
src/components/Widgets/NewsHeadlines.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user