🔀 Merge pull request #1194 from josuablejeru/feature/hackernews-widget

hackernews widget

Author: Lissy93

docs/widgets.md

@@ -35,6 +35,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [GitHub Trending](#github-trending)
   - [GitHub Profile Stats](#github-profile-stats)
   - [Healthchecks Status](#healthchecks-status)
+  - [Hackernews Trending](#hackernews-trending)
   - [Mvg Departure](#mvg-departure)
   - [Mvg Connection](#mvg-connection)
   - [Custom search](#custom-search)
@@ -1182,6 +1183,27 @@ Display status of one or more HealthChecks project(s). Works with healthcheck.io
 
 ---
 
+### Hackernews Trending
+
+Display new and trending Posts from Hackernews
+
+#### Options
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`stories`** | `string` |  _Optional_ | HN Stories to display defaults to `topstories`. Options are: `beststories`, `topstories` or `newstories`
+**`limit`** | `int` |  _Optional_ | The size of the list of Posts to show.
+
+##### Example
+
+```yaml
+- type: hackernews-trending
+  options:
+    stories: newstories
+    limit: 10
+```
+
+---
+
 ### MVG Departure
 
 Display departure time of a MVG (Münchner Verkehrs Gesellschaft) station.

src/components/Widgets/HackernewsTrending.vue

@@ -0,0 +1,108 @@
+<template>
+<div class="hackernews-wrapper">
+  <!-- Hackernews Trending Posts-->
+  <div class="posts-wrapper" v-if="trendingPosts">
+    <div class="post-row" v-for="(trendingPosts, index) in trendingPosts" :key="index">
+      <a class="post-top" :href="trendingPosts.originURL">
+        <div class="post-title-wrap">
+          <p class="post-title">{{ trendingPosts.title }}</p>
+            <p class="post-date">
+              {{ formatDate(trendingPosts.time) }}
+            </p>
+            <p class="post-score" v-if="trendingPosts.score">score: {{ trendingPosts.score }}</p>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+// import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      trendingPosts: null,
+    };
+  },
+  computed: {
+    stories() {
+      // This can be `beststories`, `topstories` or newstories
+      // TODO: display error message if another string not matching the keywords was insert
+      return this.options.stories || 'topstories';
+    },
+    limit() {
+      return this.options.limit || 10;
+    },
+    endpoint() {
+      return `${widgetApiEndpoints.hackernewsTrending}/${this.stories}.json`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.fetchPostDetails);
+    },
+    async fetchPostDetails(data) {
+      const topPosts = data.slice(0, this.limit);
+      const allData = topPosts.map((post) => {
+        const url = `${widgetApiEndpoints.hackernewsTrending}/item/${post}.json`;
+        return this.makeRequest(url);
+      });
+      Promise.all(allData).then((resolvedPostValues) => {
+        this.trendingPosts = resolvedPostValues.map((element, index) => {
+          const trendingPost = { ...element, originURL: `https://news.ycombinator.com/item?id=${topPosts.at(index)}` };
+          return trendingPost;
+        });
+      });
+    },
+    formatDate(unixTime) {
+      const date = new Date(unixTime * 1000);
+      // Then specify how you want your dates to be formatted
+      return new Intl.DateTimeFormat('default', { dateStyle: 'long' }).format(date);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.hackernews-wrapper {
+ .meta-container {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    margin: 0.25rem 0 0.5rem 0;
+  }
+
+  .post-row {
+    border-top: 1px dashed var(--widget-text-color);
+    padding: 0.5rem 0 0.25rem 0;
+    .post-top {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      p.post-title {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: bold;
+        color: var(--widget-text-color);
+      }
+      p.post-date {
+        font-size: 0.8rem;
+        margin: 0;
+        opacity: var(--dimming-factor);
+        color: var(--widget-text-color);
+      }
+      p.post-score {
+        font-size: 0.8rem;
+        margin: 0;
+        opacity: var(--dimming-factor);
+        color: var(--widget-text-color);
+      }
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -79,6 +79,7 @@ const COMPAT = {
   'gl-system-load': 'GlSystemLoad',
   'gl-cpu-temp': 'GlCpuTemp',
   'health-checks': 'HealthChecks',
+  'hackernews-trending': 'HackernewsTrending',
   'gluetun-status': 'GluetunStatus',
   iframe: 'IframeWidget',
   image: 'ImageWidget',

src/utils/defaults.js

@@ -107,11 +107,7 @@ module.exports = {
     footer: true,
   },
   /* A list of route names that page furniture (header, footer, etc) should be hidden on */
-  hideFurnitureOn: [
-    'minimal',
-    'login',
-    'download',
-  ],
+  hideFurnitureOn: ['minimal', 'login', 'download'],
   /* Key names for local storage identifiers */
   localStorageKeys: {
     LANGUAGE: 'language',
@@ -166,9 +162,7 @@ module.exports = {
   /* Amount of time to show splash screen, when enabled, in milliseconds */
   splashScreenTime: 1000,
   /* Page meta-data, rendered in the header of each view */
-  metaTagData: [
-    { name: 'description', content: 'A simple static homepage for you\'re server' },
-  ],
+  metaTagData: [{ name: 'description', content: "A simple static homepage for you're server" }],
   /* Default option for Toast messages */
   toastedOptions: {
     position: 'bottom-center',
@@ -212,8 +206,10 @@ module.exports = {
     generativeFallback: 'https://evatar.io/{icon}',
     localPath: './item-icons',
     faviconName: 'favicon.ico',
-    homeLabIcons: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/{icon}.png',
-    homeLabIconsFallback: 'https://raw.githubusercontent.com/NX211/homer-icons/master/png/{icon}.png',
+    homeLabIcons:
+      'https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/{icon}.png',
+    homeLabIconsFallback:
+      'https://raw.githubusercontent.com/NX211/homer-icons/master/png/{icon}.png',
   },
   /* API endpoints for widgets that need to fetch external data */
   widgetApiEndpoints: {
@@ -231,6 +227,7 @@ module.exports = {
     exchangeRates: 'https://v6.exchangerate-api.com/v6/',
     flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
     githubTrending: 'https://gh-trending-repos.herokuapp.com/',
+    hackernewsTrending: 'https://hacker-news.firebaseio.com/v0',
     healthChecks: 'https://healthchecks.io/api/v1/checks',
     holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
     jokes: 'https://v2.jokeapi.dev/joke/',