mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-25 01:42:00 +03:00
✨ Adds NASA APOD widget
This commit is contained in:
Alicia Sykes
parent
7084ca12d0
commit
fad1e5ff50
@ -18,6 +18,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
||||
- [Stock Price History](#stock-price-history)
|
||||
- [Joke of the Day](#joke)
|
||||
- [Flight Data](#flight-data)
|
||||
- [NASA APOD](#astronomy-picture-of-the-day)
|
||||
- [GitHub Trending](#github-trending)
|
||||
- [GitHub Profile Stats](#github-profile-stats)
|
||||
- [Public IP Address](#public-ip)
|
||||
@ -29,7 +30,11 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
||||
- [Dynamic Widgets](#dynamic-widgets)
|
||||
- [Iframe Widget](#iframe-widget)
|
||||
- [HTML Embed Widget](#html-embedded-widget)
|
||||
- [Build your own Widget](#build-your-own-widget)
|
||||
- [API Response](#api-response)
|
||||
- [Data Feed](#data-feed)
|
||||
- [Custom Widgets](#custom-widgets)
|
||||
- [Build your own Widget](#build-your-own-widget)
|
||||
- [Widget Styling](#widget-styling)
|
||||
|
||||
## General Widgets
|
||||
|
||||
@ -433,6 +438,24 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
|
||||
|
||||
---
|
||||
|
||||
### Astronomy Picture of the Day
|
||||
|
||||
Show the NASA Astronomy Pictore of the Day. Data is fetched from [APOD](https://apod.nasa.gov/apod/) using [PawelPleskaczynski/apod_api](https://github.com/PawelPleskaczynski/apod_api).
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/ZMkgLFK/apod.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
_No config options._
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: apod
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### GitHub Trending
|
||||
|
||||
Displays currently trending projects on GitHub. Optionally specify a language and time-frame. Data is fetched from [Lissy93/gh-trending-no-cors](https://github.com/Lissy93/gh-trending-no-cors) using the GitHub API.
|
||||
@ -668,6 +691,21 @@ Or
|
||||
|
||||
---
|
||||
|
||||
## Build your own Widget
|
||||
### API Response
|
||||
|
||||
---
|
||||
|
||||
### Data Feed
|
||||
|
||||
---
|
||||
|
||||
## Custom Widgets
|
||||
|
||||
### Build your own Widget
|
||||
|
||||
For a full tutorial on creating your own widget, you can follow [this guide](https://github.com/Lissy93/dashy/blob/master/docs/development-guides.md#building-a-widget), or take a look at [here](https://github.com/Lissy93/dashy/commit/3da76ce2999f57f76a97454c0276301e39957b8e) for a code example.
|
||||
|
||||
---
|
||||
|
||||
### Widget Styling
|
||||
|
||||
|
||||
112
src/components/Widgets/Apod.vue
Normal file
112
src/components/Widgets/Apod.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user