Refactoring news-routes to be simpler and not using setInterval

express.js

@@ -11,6 +11,7 @@ let OidcStrategy = require('passport-openidconnect');
 const middleware = require('./routes/middleware');
 const cors = require('cors');
 const app = express();
+const newsRouter = require('./routes/views/news');
 
 app.locals.clanInvitations = {};
 
@@ -56,7 +57,6 @@ app.use(session({
 
 app.use(passport.initialize());
 app.use(passport.session());
-app.use(require('./scripts/getNews'));
 app.use(flash());
 app.use(middleware.username);
 app.use(middleware.flashMessage);
@@ -98,10 +98,12 @@ app.listen(process.env.PORT, () => {
 // --- R O U T E S ---
 // when the website is asked to render "/pageName" it will come here and see what are the "instructions" to render said page. If the page isn't here, then the website won't render it properly.
 
+app.use("/news", newsRouter)
+
 // --- UNPROTECTED ROUTES ---
 const appGetRouteArray = [
   // This first '' is the home/index page
-  '', 'newshub', 'news', 'campaign-missions', 'scfa-vs-faf', 'donation', 'tutorials-guides', 'ai', 'patchnotes', 'faf-teams', 'contribution', 'content-creators', 'tournaments', 'training', 'leaderboards', 'play', 'newsArticle', 'clans',];
+  '', 'newshub', 'campaign-missions', 'scfa-vs-faf', 'donation', 'tutorials-guides', 'ai', 'patchnotes', 'faf-teams', 'contribution', 'content-creators', 'tournaments', 'training', 'leaderboards', 'play', 'clans',];
 
 //Renders every page written above
 appGetRouteArray.forEach(page => app.get(`/${page}`, (req, res) => {

package.json

@@ -21,7 +21,8 @@
     "passport-openidconnect": "^0.1.1",
     "pug": "3.0.2",
     "request": "2.88.2",
-    "showdown": "^2.1.0"
+    "showdown": "^2.1.0",
+    "url-slug": "^4.0.1"
   },
   "devDependencies": {
     "awesomplete": "^1.1.5",

routes/views/news.js

@@ -0,0 +1,60 @@
+const express = require('express');
+const router = express.Router();
+const fs = require('fs')
+
+function getNewsArticles() {
+    const readFile = fs.readFileSync('./public/js/app/members/news.json',
+        {encoding:'utf8', flag:'r'});
+    return JSON.parse(readFile);
+}
+
+function getNewsArticleBySlug(articles, slug) {
+    let [newsArticle] = articles.filter((entry) => {
+        if (entry.slug === slug) {
+            return entry
+        }
+    }) ?? []
+
+    return newsArticle ?? null
+}
+
+function getNewsArticleByDeprecatedSlug(articles, slug) {
+    let [newsArticle] = articles.filter((entry) => {
+        if (entry.bcSlug === slug) {
+            return entry
+        }
+    }) ?? []
+
+    return newsArticle ?? null
+}
+
+router.get(`/`, (req, res) => {
+    res.render('news', {news: getNewsArticles()});
+})
+
+router.get(`/:slug`, (req, res) => {
+    const newsArticles = getNewsArticles();
+    const newsArticle = getNewsArticleBySlug(newsArticles, req.params.slug)
+
+    if (newsArticle === null) {
+        const newsArticleByOldSlug = getNewsArticleByDeprecatedSlug(newsArticles, req.params.slug)
+
+        if (newsArticleByOldSlug) {
+            // old slug style, here for backward compatibility 
+            res.redirect(301, newsArticleByOldSlug.slug)
+
+            return
+        }
+
+        res.redirect(req.baseUrl)
+
+        return
+    }
+
+    res.render('newsArticle', {
+        newsArticle: newsArticle
+    });
+
+})
+
+module.exports = router

scripts/extractor.js

@@ -6,6 +6,7 @@ process.env.WP_URL = process.env.WP_URL || 'https:direct.faforever.com';
 
 const fs = require('fs');
 const axios = require('axios');
+const {convert} = require('url-slug')
 
 let d = new Date();
 let timeFilter = 12;
@@ -64,11 +65,13 @@ async function news() {
     //Now we get a js array rather than a js object. Otherwise we can't sort it out.
     let dataObjectToArray = Object.values(response.data);
     let data = dataObjectToArray.map(item => ({
-      date: item.date,
-      title: item.title.rendered,
-      content: item.content.rendered,
-      author: item._embedded.author[0].name,
-      media: item._embedded['wp:featuredmedia'][0].source_url,
+        slug: convert(item.title.rendered),
+        bcSlug: item.title.rendered.replace(/ /g, '-'),
+        date: item.date,
+        title: item.title.rendered,
+        content: item.content.rendered,
+        author: item._embedded.author[0].name,
+        media: item._embedded['wp:featuredmedia'][0].source_url,
     }));
     return await data;
   } catch (e) {

templates/views/news.pug

@@ -7,7 +7,11 @@ block content
       h2 Recent
       h1.highlightText News
     #articleMain.column12
-
-
-block js
-  script( src="../../js/app/news.js")
+        each newsArticle in news
+            div(class=['articleContainer', 'column4'])
+                div.articleImage(style='background-image:url(' + newsArticle.media + ')' )
+                div.articleText
+                    h2.articleAuthorDate=`By ${newsArticle.author} on ${newsArticle.date.substring(0, 10)}`
+                    h1.articleTitle=newsArticle.title
+                    div.articleContent !{newsArticle.content.substring(0, 150)} ...
+                    button(onClick="window.location.href = '/news/" + newsArticle.slug + "'") Learn More

templates/views/newsArticle.pug

@@ -6,16 +6,14 @@ block content
     .newsAbsolute
       a(href='/news')
         button Back to News page
-    #newsBackground
-
+    #newsBackground(style='background-image:url(\'/images/black' + Math.floor(Math.random() * 4) + '.jpg\')' )
       #newsMain
         .newsContainer.column12
-          h1#title
+          h1#title=newsArticle.title
         .newsContainer.column12
           #featuredImage
+              img(src=newsArticle.media alt=newsArticle.title)
         .newsContainer.column12
-          h1#authorDate
+          h1#authorDate=`By ${newsArticle.author} on ${newsArticle.date.substring(0, 10)}`
         .newsContainer.column12
-          #content
-block js
-  script( src="../../js/app/newsArticle.js")
+          #content !{newsArticle.content}

yarn.lock

@@ -5749,6 +5749,11 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+url-slug@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/url-slug/-/url-slug-4.0.1.tgz#e6c52589d671598339fe97a32edc415687a3489a"
+  integrity sha512-OkHgffjR6bce7jNTp5BUDBhg2IcnqSAi9DEhLH8Rhxrq84uPBMbHFzvOxniEIRpSSGBcG13LhrtNR5XzUdztfQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"