Parse news from YAML, #348

CHANGELOG.md

@@ -47,6 +47,7 @@
   - Deprecated global `locationSearch` in favor of using `$location` directly
   - Removed global `searchHash` in favor of using `$location` directly
   - Added `angularLocationSearch` to expose `$location.search` to code outside Angular
+- Switched to parsing news from YAML file [#348](https://github.com/spraakbanken/korp-frontend/issues/348)
 - Removed map layer "Stamen Watercolor" [#339](https://github.com/spraakbanken/korp-frontend/issues/339)
 
 ### Fixed

app/scripts/newsdesk.js

@@ -2,6 +2,8 @@
 // SB-newsdesk 1.0b
 // Requirements: JQuery, JQuery.ui.position, trust filter, loc filter, Font Awesome
 import _ from "lodash"
+import Yaml from "js-yaml"
+import moment from "moment"
 import settings from "@/settings"
 import { safeApply } from "@/util"
 
@@ -21,13 +23,13 @@ angular.module("newsdesk", []).directive("newsDesk", [
                 </div>
                 <div class="popover newsdesk-popover" ng-click="onPopoverClick($event)" to-body>
                     <div class="arrow"></div>
-                    <h2 class="popover-title">{{header | loc:lang}}<span style="float:right;cursor:pointer" ng-click="popHide()">×</span></h2>
+                    <h2 class="popover-title">{{header | loc:$root.lang}}<span style="float:right;cursor:pointer" ng-click="popHide()">×</span></h2>
                     <div class="newsdesk-around-items">
                         <div class="newsdesk-news-item" ng-repeat="item in newsitems" 
-                             ng-class="{'newsdesk-new-news-item': (item.d > lastChecked)}">
-                            <h4>{{item.t[currentLang]}}</h4>
-                            <span class="newsdesk-item-date">{{item.d}}</span>
-                            <div ng-bind-html="item.h[currentLang] | trust"></div>
+                            ng-class="{'newsdesk-new-news-item': (item.created > lastChecked)}">
+                            <h4>{{item.title | locObj}}</h4>
+                            <span class="newsdesk-item-date">{{item.created}}</span>
+                            <div ng-bind-html="item.body | locObj | trust"></div>
                         </div>
                     </div>
                 </div>
@@ -47,32 +49,28 @@ angular.module("newsdesk", []).directive("newsDesk", [
 
             s.newsitems = []
             function initData() {
-                let d
                 s.lastChecked = localStorage.getItem(s.storage)
+                // If visitor hasn't been here before, fall back to marking items since one year ago as unread.
                 if (!s.lastChecked) {
-                    d = new Date()
+                    const d = new Date()
                     d.setFullYear(d.getFullYear() - 1)
                     s.lastChecked = d.toISOString().slice(0, 10)
                 }
+
                 $.ajax({
                     type: "GET",
                     url: settings["news_desk_url"],
                     async: false,
-                    jsonpCallback: "newsdata",
-                    contentType: "application/json",
-                    dataType: "jsonp",
-                    success(json) {
+                    success(feedYaml) {
+                        const items = Yaml.load(feedYaml)
+                        // Hide expired items.
                         const currentDate = new Date().toISOString().slice(0, 10)
-                        s.newsitems = _.filter(json, (newsitem) => {
-                            return !newsitem.e || newsitem.e >= currentDate
-                        })
-                        let n = 0
-                        for (let nItem of s.newsitems) {
-                            if (nItem.d > s.lastChecked) {
-                                n += 1
-                            }
-                        }
+                        s.newsitems = items.filter((item) => !item.expires || item.expires >= currentDate)
+                        // Stringify dates.
+                        s.newsitems.forEach((item) => (item.created = moment(item.created).format("YYYY-MM-DD")))
 
+                        // Count unread items.
+                        const n = items.filter((item) => item.created > s.lastChecked).length
                         safeApply(s, () => (s.numNewNews = n))
                     },
 
@@ -89,7 +87,6 @@ angular.module("newsdesk", []).directive("newsDesk", [
                 if (s.isPopoverVisible) {
                     s.popHide()
                 } else {
-                    s.currentLang = { eng: "en", swe: "sv" }[$location.search().lang || settings["default_language"]]
                     s.popShow()
                     s.numNewNews = 0
                 }
@@ -118,7 +115,8 @@ angular.module("newsdesk", []).directive("newsDesk", [
                 $rootElement.on("keydown", handleEscape)
                 $rootElement.on("click", s.popHide)
 
-                localStorage.setItem(s.storage, s.newsitems[0].d)
+                // Remember the date of the newest item, so any future items can be marked as unread.
+                localStorage.setItem(s.storage, s.newsitems[0].created)
             }
 
             s.popHide = function () {

package.json

@@ -15,6 +15,7 @@
         "geokorp": "spraakbanken/geokorp#1.5.0",
         "jquery": "3.6.3",
         "jquery-flot": "0.8.3",
+        "js-yaml": "^4.1.0",
         "jstorage": "andris9/jStorage#0.4.12",
         "leaflet": "^1.9.3",
         "leaflet-providers": "^1.13.0",
@@ -30,6 +31,7 @@
     "devDependencies": {
         "@types/jasmine": "^5.1.4",
         "@types/jquery": "^3.5.29",
+        "@types/js-yaml": "^4.0.9",
         "@types/lodash": "^4.14.118",
         "@types/raphael": "^2.3.9",
         "@types/rickshaw": "^0.0.31",

yarn.lock

@@ -255,6 +255,11 @@
   dependencies:
     "@types/sizzle" "*"
 
+"@types/js-yaml@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
+  integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -699,6 +704,11 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -2547,6 +2557,13 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"