Add source for news

frontend/src/api/RESTful.ts

@@ -67,7 +67,13 @@ export class ControllerAPI {
         if (!returnElement)
             return result;
         if (!newsFeed)
-            newsFeed = new NewsFeed(result.map(x => new NewsItem(x.title, new Date(x.publishedAt), x.content)));
+            newsFeed = new NewsFeed(result.map(x => new NewsItem(
+                x.id,
+                x.title, 
+                new Date(x.publishedAt), 
+                x.content, 
+                x.source
+            )));
         return newsFeed;
     }
 }

frontend/src/css/main.css

@@ -55,3 +55,12 @@
 .news-ui-action {
     margin-left: 95%;
 }
+
+.published-text {
+	color: rgba(255,255,255,0.5) !important;
+	padding-bottom: 0.5%;
+}
+
+.nav-item {
+    cursor: pointer; padding: 12px 24px; font-size: 1.5em;
+}

frontend/src/modules/Gefest/primitives/img.ts

@@ -0,0 +1,13 @@
+import { GefestElement } from "../element";
+
+export class GefestImg extends GefestElement {
+    constructor(content : (GefestElement | string)[] | string, src: string) {
+        super(content);
+        this.setAttribute('src', src);
+    }
+
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<img ${attrString}>${content}</img>`;
+    }
+}

frontend/src/pages/feed/news-item.ts

@@ -3,6 +3,10 @@ import { GefestHeader } from "../../modules/Gefest/primitives/header";
 import { GefestSmall } from "../../modules/Gefest/primitives/small";
 import { GefestElement } from "../../modules/Gefest/element";
 import { GefestP } from "../../modules/Gefest/primitives/p";
+import { NewsSource } from "./news";
+import { GefestA } from "../../modules/Gefest/primitives/a";
+import { GefestI } from "../../modules/Gefest/primitives/i";
+import { GefestImg } from "../../modules/Gefest/primitives/img";
 
 function dateItemFormater (value: number | string, isMonth = false) {
     const MONTHS = [
@@ -32,6 +36,24 @@ function formatDate(date: Date) {
     }:${dateItemFormater(date.getMinutes())}`;
 }
 
+function getSourceLnk (source: NewsSource, id: number) : string {
+    const iconOfSource : GefestElement = !source.icon ?
+        new GefestI("") : new GefestImg("", source.icon);
+    if (iconOfSource instanceof GefestI) {
+        iconOfSource.addClass("fa fa-rss");
+    } else {
+        iconOfSource.setPersonalStyle("width: 16px;");
+    }
+
+    const href = source.itemURL ?? ("#" + id);
+
+    const hyperlnk = new GefestA([
+        iconOfSource,
+        " " + source.name
+    ], href);
+    return hyperlnk.build();
+}
+
 class CardBodyBS5 extends DefaultElement {
     constructor (content : GefestElement[]) {
         super(content);
@@ -40,11 +62,11 @@ class CardBodyBS5 extends DefaultElement {
 }
 
 export class NewsItem extends DefaultElement {
-    constructor(title: string, publishDate: Date, content: string) {
+    constructor(id: number, title: string, publishDate: Date, content: string, source: NewsSource) {
         const header = new GefestHeader(title, 2);
         header.addClass("card-title");
-        const published = new GefestSmall(formatDate(publishDate));
+        const published = new GefestSmall(formatDate(publishDate) + " " + getSourceLnk(source, id));
-        published.addClass("published-date");
+        published.addClass("published-text");
         const contentParagraph = new GefestP(content);
         contentParagraph.addClass("card-text");
 

frontend/src/pages/feed/news.ts

@@ -76,7 +76,16 @@ export class NewsFeed extends DefaultElement {
 }
 
 export interface NewsData {
+    id: number;
     title : string;
     content : string;
+    source : NewsSource;
     publishedAt : string;
 }
+
+export interface NewsSource {
+    name: string;
+    icon?: string;
+    sourceURL?: string;
+    itemURL?: string;
+}

frontend/src/pages/navbar.ts

@@ -18,7 +18,6 @@ class NavbarButton extends DefaultElement {
         elementA.setAttribute("aria-current", "page");
         super([ elementA ]);
         this.addClass("nav-item");
-        this.setPersonalStyle("cursor: pointer; padding: 12px 24px; font-size: 1.5em;");
     }
 
     protected wrapHTML(content: string): string {

src/server.ts

@@ -1,4 +1,4 @@
-import express from 'express';
+import express, { Request, Response } from 'express';
 import api from './api';
 import path from 'path';
 
@@ -23,16 +23,16 @@ app.use('/api', api);
 app.get('/', (req, res) => {
     if (!req.isAuthenticated)
         return res.status(301).redirect('/auth');
-    res.status(301).redirect('/home');
+    res.status(301).redirect('/feed');
 });
 
-app.get('/auth', (req, res) => {
+function frontend (req : Request, res : Response) {
     res.sendFile('index.html', { root: path.join(__dirname, 'static') });
-});
+}
 
-app.get('/home', (req, res) => {
+app.get('/auth', frontend);
-    res.sendFile('index.html', { root: path.join(__dirname, 'static') });
+app.get('/feed', frontend);
-});
+app.get('/home', frontend);
 
 app.use(express.static(path.join(__dirname, 'static')));
 

src/utils/news.ts

@@ -1,7 +1,15 @@
+export interface Source {
+    name: string,
+    icon?: string,
+    sourceURL?: string,
+    itemURL?: string,
+}
+
 export interface NewsItem {
+    id : number;
     title : string;
     content : string;
-    //source: string;
+    source: Source;
     publishedAt : Date;
 }
 
@@ -10,69 +18,121 @@ export function getTestNews (): NewsItem[] {
 
     return [
         {
+            id: 0,
             title: "Lorem Ispum",
             content: "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet,",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 1,
             title: "News Item 1",
             content: "This is the content for news item 1. It contains some sample text to demonstrate the news functionality.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 2,
             title: "News Item 2",
             content: "This is the content for news item 2. Another piece of sample news content for testing purposes.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 3,
             title: "News Item 3",
             content: "News item 3 brings you the latest updates. Stay informed with our regular news feed.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 4,
             title: "News Item 4",
             content: "Content for the fourth news item. This is part of the test data for the application.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 5,
             title: "News Item 5",
             content: "Fifth news item in the list. More sample content to populate the news array.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 6,
             title: "News Item 6",
             content: "This is news item number six. Continuing to add test data for the news feature.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 7,
             title: "News Item 7",
             content: "Seventh item in the news feed. Sample text to ensure the array has sufficient data.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 8,
             title: "News Item 8",
             content: "News item eight provides more content. This helps in testing the display of multiple items.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 9,
             title: "News Item 9",
             content: "The ninth news item. Almost reaching the total of 13 items including the original.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 10,
             title: "News Item 10",
             content: "Tenth item in the array. This completes the set of additional news items requested.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 11,
             title: "News Item 11",
             content: "Eleventh news item. Continuing to add variety to the test data.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         },
         {
+            id: 12,
             title: "News Item 12",
             content: "The twelfth and final news item. This brings the total to 13 items in the array.",
-            publishedAt: new Date()
+            publishedAt: new Date(),
+            source: {
+                name: "Test Destination"
+            }
         }
     ];
 }